vc-create-dashboard 2.8.26 → 2.8.28

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 (24) hide show
  1. package/esm2020/lib/create-dashboard-container/categories/categories.component.mjs +3 -3
  2. package/esm2020/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +3 -3
  3. package/esm2020/lib/create-dashboard-container/create-dashboard.component.mjs +246 -125
  4. package/esm2020/lib/create-dashboard-container/form-group/form-group.component.mjs +14 -10
  5. package/esm2020/lib/create-dashboard-container/frequency/frequency.component.mjs +8 -3
  6. package/esm2020/lib/create-dashboard-container/responsibility-center/responsibility-center.component.mjs +3 -3
  7. package/esm2020/lib/create-dashboard-container/risk-categories/risk-categories.component.mjs +3 -3
  8. package/esm2020/lib/create-dashboard-container/user-list/user-list.component.mjs +3 -3
  9. package/esm2020/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.mjs +7 -3
  10. package/esm2020/lib/ui-kit/dashboard-footer/dashboard-footer.module.mjs +8 -4
  11. package/esm2020/lib/ui-kit/floating-bar/floating-bar.component.mjs +4 -3
  12. package/esm2020/lib/ui-kit/floating-bar/floating-bar.module.mjs +7 -3
  13. package/esm2020/lib/ui-kit/pagination/pagination.component.mjs +3 -3
  14. package/fesm2015/create-dashboard.mjs +283 -150
  15. package/fesm2015/create-dashboard.mjs.map +1 -1
  16. package/fesm2020/create-dashboard.mjs +293 -154
  17. package/fesm2020/create-dashboard.mjs.map +1 -1
  18. package/lib/create-dashboard-container/create-dashboard.component.d.ts +25 -25
  19. package/lib/create-dashboard-container/form-group/form-group.component.d.ts +1 -1
  20. package/lib/create-dashboard-container/frequency/frequency.component.d.ts +1 -0
  21. package/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.d.ts +2 -1
  22. package/lib/ui-kit/dashboard-footer/dashboard-footer.module.d.ts +2 -1
  23. package/lib/ui-kit/floating-bar/floating-bar.module.d.ts +2 -1
  24. package/package.json +1 -1
package/fesm2015/create-dashboard.mjs CHANGED
@@ -913,10 +913,10 @@ class FloatingBarComponent {
913
913
  }
914
914
  }
915
915
  FloatingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
916
- FloatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FloatingBarComponent, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been\r\n completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\"><i\r\n class=\"icons vx-mr-2\">&#xe90d;</i> {{singleCategory}}</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"selectedData.length\" (click)=\"deleteSelected(selectedData[0])\"\r\n class=\"icons vx-mr-2\">&#xe90d;</i>{{selectedData[0]?.title}}</span>\r\n <span\r\n *ngIf=\"selectedData?.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{selectedData?.length - 1}}\r\n </span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i>\r\n <span>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.lib-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.lib-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.lib-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.lib-floating-bar .left .value{color:#747576;font-size:13px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.lib-floating-bar-container{padding:5px 24px 10px 12px}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.selectedWidgets{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
916
+ FloatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FloatingBarComponent, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\r\n </div>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\r\n </div>\r\n \r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
917
917
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarComponent, decorators: [{
918
918
  type: Component,
919
- args: [{ selector: 'floating-bar', template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been\r\n completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\"><i\r\n class=\"icons vx-mr-2\">&#xe90d;</i> {{singleCategory}}</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"selectedData.length\" (click)=\"deleteSelected(selectedData[0])\"\r\n class=\"icons vx-mr-2\">&#xe90d;</i>{{selectedData[0]?.title}}</span>\r\n <span\r\n *ngIf=\"selectedData?.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{selectedData?.length - 1}}\r\n </span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i>\r\n <span>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.lib-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.lib-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.lib-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.lib-floating-bar .left .value{color:#747576;font-size:13px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.lib-floating-bar-container{padding:5px 24px 10px 12px}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.selectedWidgets{font-size:12px}\n"] }]
919
+ args: [{ selector: 'floating-bar', template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\r\n </div>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\r\n </div>\r\n \r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
920
920
  }], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { cancelEvent: [{
921
921
  type: Output
922
922
  }], submitEvent: [{
@@ -1531,10 +1531,10 @@ class ConfigureWidgetsComponent {
1531
1531
  }
1532
1532
  }
1533
1533
  ConfigureWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
1534
- ConfigureWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#FFFFFF;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#FFFFFF}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
1534
+ ConfigureWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#FFFFFF;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#FFFFFF}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
1535
1535
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
1536
1536
  type: Component,
1537
- args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#FFFFFF;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#FFFFFF}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
1537
+ args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#FFFFFF;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#FFFFFF}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
1538
1538
  }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
1539
1539
  type: Output
1540
1540
  }], closeConfigureWidgets: [{
@@ -1700,6 +1700,7 @@ class DashboardFooterComponent {
1700
1700
  frequencyText: '',
1701
1701
  isDisabled: false
1702
1702
  };
1703
+ this.userButtonColor = '';
1703
1704
  }
1704
1705
  ngOnInit() {
1705
1706
  }
@@ -1714,10 +1715,10 @@ class DashboardFooterComponent {
1714
1715
  }
1715
1716
  }
1716
1717
  DashboardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1717
- DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.dashboard-floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.dashboard-floating-bar .left .value{color:#747576;font-size:13px}.dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}.dashboard-floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.dashboard-floating-bar-container{padding:5px 24px 10px 12px}.dashboard-floating-bar-action-list{width:220px}.dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.dashboard-floating-bar-action-list ul.action-item{display:block}.dashboard-floating-bar-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}.dashboard-floating-bar-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}.dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.dashboard-floating-bar-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}.dashboard-floating-bar-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}.dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] });
1718
+ DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails", userButtonColor: "userButtonColor" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\r\n </div>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
1718
1719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterComponent, decorators: [{
1719
1720
  type: Component,
1720
- args: [{ selector: 'app-dashboard-footer', template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.dashboard-floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.dashboard-floating-bar .left .value{color:#747576;font-size:13px}.dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}.dashboard-floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.dashboard-floating-bar-container{padding:5px 24px 10px 12px}.dashboard-floating-bar-action-list{width:220px}.dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.dashboard-floating-bar-action-list ul.action-item{display:block}.dashboard-floating-bar-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}.dashboard-floating-bar-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}.dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.dashboard-floating-bar-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}.dashboard-floating-bar-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}.dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"] }]
1721
+ args: [{ selector: 'app-dashboard-footer', template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\r\n </div>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"] }]
1721
1722
  }], ctorParameters: function () { return []; }, propDecorators: { cancelEvent: [{
1722
1723
  type: Output
1723
1724
  }], submitEvent: [{
@@ -1726,6 +1727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
1726
1727
  type: Output
1727
1728
  }], footerDetails: [{
1728
1729
  type: Input
1730
+ }], userButtonColor: [{
1731
+ type: Input
1729
1732
  }] } });
1730
1733
 
1731
1734
  /**
@@ -1837,10 +1840,10 @@ class PaginationComponent {
1837
1840
  }
1838
1841
  }
1839
1842
  PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
1840
- PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PaginationComponent, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><</button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}</button></li>\r\n\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\">></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none}.pagination-box ul li button.disable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1843
+ PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PaginationComponent, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\r\n </button>\r\n </li>\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#F1F1F1;color:#bcbcbc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1841
1844
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
1842
1845
  type: Component,
1843
- args: [{ selector: 'app-pagination', template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><</button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}</button></li>\r\n\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\">></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none}.pagination-box ul li button.disable{pointer-events:none}\n"] }]
1846
+ args: [{ selector: 'app-pagination', template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\r\n </button>\r\n </li>\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#F1F1F1;color:#bcbcbc!important}\n"] }]
1844
1847
  }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { totalPages: [{
1845
1848
  type: Input
1846
1849
  }], limit: [{
@@ -2228,10 +2231,10 @@ class UserListComponent {
2228
2231
  }
2229
2232
  }
2230
2233
  UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
2231
- UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head\">\r\n <h3>Who can view this dashboard?</h3>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\"\r\n > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\" >\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\" >\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span></div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n\r\n </div>\r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container\">\r\n <div class=\"left\">\r\n <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n <div class=\"name\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" >\r\n <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-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}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-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 .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search 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 .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .user-floating-bar{padding:0 16px 20px}::ng-deep .user-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:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-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 .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-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 .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
2234
+ UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh -20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul 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 .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
2232
2235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, decorators: [{
2233
2236
  type: Component,
2234
- args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head\">\r\n <h3>Who can view this dashboard?</h3>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\"\r\n > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\" >\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\" >\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span></div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n\r\n </div>\r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container\">\r\n <div class=\"left\">\r\n <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n <div class=\"name\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" >\r\n <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-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}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-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 .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search 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 .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .user-floating-bar{padding:0 16px 20px}::ng-deep .user-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:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-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 .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-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 .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
2237
+ args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh -20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul 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 .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
2235
2238
  }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
2236
2239
  type: Output
2237
2240
  }], saveSelectedUsers: [{
@@ -2402,10 +2405,10 @@ class ResponsibilityCenterComponent {
2402
2405
  }
2403
2406
  }
2404
2407
  ResponsibilityCenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2405
- ResponsibilityCenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head\">\r\n <h3>Select Responsibility Center(s)</h3>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n\r\n <li\r\n *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\"\r\n delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n \r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:8px;color:#747576;position:relative;top:-1px}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:14px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search 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 .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2408
+ ResponsibilityCenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2406
2409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
2407
2410
  type: Component,
2408
- args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head\">\r\n <h3>Select Responsibility Center(s)</h3>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n\r\n <li\r\n *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\"\r\n delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n \r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:8px;color:#747576;position:relative;top:-1px}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:14px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search 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 .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"] }]
2411
+ args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"] }]
2409
2412
  }], ctorParameters: function () { return []; }, propDecorators: { saveSelectedList: [{
2410
2413
  type: Output
2411
2414
  }], closeRcList: [{
@@ -2601,10 +2604,10 @@ class CategoriesComponent {
2601
2604
  }
2602
2605
  }
2603
2606
  CategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2604
- CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2607
+ CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2605
2608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, decorators: [{
2606
2609
  type: Component,
2607
- args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
2610
+ args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
2608
2611
  }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
2609
2612
  type: Input
2610
2613
  }], allCategories: [{
@@ -2786,10 +2789,10 @@ class RiskCategoriesComponent {
2786
2789
  }
2787
2790
  }
2788
2791
  RiskCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2789
- RiskCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2792
+ RiskCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2790
2793
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
2791
2794
  type: Component,
2792
- args: [{ selector: 'app-risk-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
2795
+ args: [{ selector: 'app-risk-categories', template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"] }]
2793
2796
  }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
2794
2797
  type: Input
2795
2798
  }], allCategories: [{
@@ -2809,6 +2812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
2809
2812
  class FrequencyComponent {
2810
2813
  constructor(snackBar) {
2811
2814
  this.snackBar = snackBar;
2815
+ this.animation = true;
2812
2816
  this.monthlyDate = 1;
2813
2817
  this.quarterlyDate = 1;
2814
2818
  this.frequencyTab = 'weekly';
@@ -2838,6 +2842,10 @@ class FrequencyComponent {
2838
2842
  this.savedFrequencies = [...new Set(this.savedFrequencies)];
2839
2843
  }
2840
2844
  ngOnInit() {
2845
+ this.animation = true;
2846
+ setTimeout(() => {
2847
+ this.animation = false;
2848
+ }, 300);
2841
2849
  if (this.savedFrequencyTab) {
2842
2850
  this.changeTab(this.savedFrequencyTab);
2843
2851
  }
@@ -3082,10 +3090,10 @@ class FrequencyComponent {
3082
3090
  }
3083
3091
  }
3084
3092
  FrequencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
3085
- FrequencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"frequency\">\r\n <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n </div>\r\n <div class=\"frequency-body\">\r\n <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"frequency-tab-body\" >\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .frequency{background:#FFFFFF}::ng-deep .frequency-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0;padding:0 12px}::ng-deep .frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}::ng-deep .frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}::ng-deep .frequency-tab{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px #1e5d15;border-right:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1;border-left:1px solid #F1F1F1;border-radius:2px}::ng-deep .frequency-tab-head{background:#FBFBFB;border-top:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul{padding:0;margin:0}::ng-deep .frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul.navigation li{list-style:none;width:auto;padding:0 28px;display:flex;justify-content:center}::ng-deep .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;padding:0}::ng-deep .frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}::ng-deep .frequency-tab-head ul.navigation li button.active{color:#1e5dd3}::ng-deep .frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}::ng-deep .frequency-tab-body{background:#FFFFFF}::ng-deep .frequency-tab-body .checkbox-list{border-top:1px solid #F1F1F1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top{padding:12px 24px;border-bottom:1px solid #F1F1F1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}::ng-deep .frequency-tab-body .checkbox-list .frequency-top .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}::ng-deep .frequency-tab-body .checkbox-list .frequency-checkbox{padding:24px}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#747576!important;font-weight:400!important}::ng-deep .frequency-tab-body .checkbox-list.month app-cs-checkbox{width:calc(100% / 6);padding:4px 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
3093
+ FrequencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (max-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-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 .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
3086
3094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FrequencyComponent, decorators: [{
3087
3095
  type: Component,
3088
- args: [{ selector: 'app-frequency', template: "<div class=\"frequency\">\r\n <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n </div>\r\n <div class=\"frequency-body\">\r\n <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"frequency-tab-body\" >\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .frequency{background:#FFFFFF}::ng-deep .frequency-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0;padding:0 12px}::ng-deep .frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}::ng-deep .frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}::ng-deep .frequency-tab{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px #1e5d15;border-right:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1;border-left:1px solid #F1F1F1;border-radius:2px}::ng-deep .frequency-tab-head{background:#FBFBFB;border-top:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul{padding:0;margin:0}::ng-deep .frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul.navigation li{list-style:none;width:auto;padding:0 28px;display:flex;justify-content:center}::ng-deep .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;padding:0}::ng-deep .frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}::ng-deep .frequency-tab-head ul.navigation li button.active{color:#1e5dd3}::ng-deep .frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}::ng-deep .frequency-tab-body{background:#FFFFFF}::ng-deep .frequency-tab-body .checkbox-list{border-top:1px solid #F1F1F1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top{padding:12px 24px;border-bottom:1px solid #F1F1F1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}::ng-deep .frequency-tab-body .checkbox-list .frequency-top .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}::ng-deep .frequency-tab-body .checkbox-list .frequency-checkbox{padding:24px}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#747576!important;font-weight:400!important}::ng-deep .frequency-tab-body .checkbox-list.month app-cs-checkbox{width:calc(100% / 6);padding:4px 0}\n"] }]
3096
+ args: [{ selector: 'app-frequency', template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (max-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-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 .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"] }]
3089
3097
  }], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { savedFrequencyTab: [{
3090
3098
  type: Input
3091
3099
  }], savedFrequencies: [{
@@ -3138,25 +3146,25 @@ class CreateDashboardComponent {
3138
3146
  this.dashboardDescription = {
3139
3147
  placeholder: 'Description (Max limit: 250 characters)',
3140
3148
  mode: 'prime',
3141
- id: 'description'
3149
+ id: 'description',
3142
3150
  };
3143
3151
  this.responsibilityCategoriesTree = {
3144
3152
  regulations: {
3145
3153
  list: [],
3146
- selectedList: []
3154
+ selectedList: [],
3147
3155
  },
3148
3156
  standards: {
3149
3157
  list: [],
3150
- selectedList: []
3158
+ selectedList: [],
3151
3159
  },
3152
3160
  internalControls: {
3153
3161
  list: [],
3154
- selectedList: []
3162
+ selectedList: [],
3155
3163
  },
3156
3164
  others: {
3157
3165
  list: [],
3158
- selectedList: []
3159
- }
3166
+ selectedList: [],
3167
+ },
3160
3168
  };
3161
3169
  this.allComplianceCategories = [];
3162
3170
  this.allRiskCategories = [];
@@ -3178,16 +3186,41 @@ class CreateDashboardComponent {
3178
3186
  selectedFrequencyType: '',
3179
3187
  selectedFrequencies: [0],
3180
3188
  frequencyMessage: '',
3181
- frequencyDate: 1
3189
+ frequencyDate: 1,
3182
3190
  };
3183
3191
  this.openConfigureWidgets = false;
3184
3192
  this.selectedWidgets = [];
3185
3193
  this.displayedWidgets = [];
3186
3194
  this.responsibilityCentersList = [];
3187
3195
  this.datePickerOverlay = false;
3188
- this.dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
3189
- this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
3190
- this.quarters = ['January, April, July, October', 'February, May, August, November', 'March, June, September, December'];
3196
+ this.dayNames = [
3197
+ 'Monday',
3198
+ 'Tuesday',
3199
+ 'Wednesday',
3200
+ 'Thursday',
3201
+ 'Friday',
3202
+ 'Saturday',
3203
+ 'Sunday',
3204
+ ];
3205
+ this.monthNames = [
3206
+ 'January',
3207
+ 'February',
3208
+ 'March',
3209
+ 'April',
3210
+ 'May',
3211
+ 'June',
3212
+ 'July',
3213
+ 'August',
3214
+ 'September',
3215
+ 'October',
3216
+ 'November',
3217
+ 'December',
3218
+ ];
3219
+ this.quarters = [
3220
+ 'January, April, July, October',
3221
+ 'February, May, August, November',
3222
+ 'March, June, September, December',
3223
+ ];
3191
3224
  this.categoryListLoaded = false;
3192
3225
  this.showRiskWidgets = false;
3193
3226
  this.showComplianceWidgets = false;
@@ -3195,23 +3228,23 @@ class CreateDashboardComponent {
3195
3228
  this.riskCategoryList = {
3196
3229
  strategic: {
3197
3230
  list: [],
3198
- selectedList: []
3231
+ selectedList: [],
3199
3232
  },
3200
3233
  operational: {
3201
3234
  list: [],
3202
- selectedList: []
3235
+ selectedList: [],
3203
3236
  },
3204
3237
  compliance: {
3205
3238
  list: [],
3206
- selectedList: []
3239
+ selectedList: [],
3207
3240
  },
3208
3241
  others: {
3209
3242
  list: [],
3210
- selectedList: []
3243
+ selectedList: [],
3211
3244
  },
3212
3245
  };
3213
3246
  this.fromDatePickerConfig = {
3214
- min: this.getCurrentDate()
3247
+ min: this.getCurrentDate(),
3215
3248
  };
3216
3249
  this.toDatePickerConfig = {};
3217
3250
  this.smileyMessage = '';
@@ -3229,7 +3262,7 @@ class CreateDashboardComponent {
3229
3262
  }
3230
3263
  ngOnInit() {
3231
3264
  var _a;
3232
- this.groupsEnabled = (_a = this.feature) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled("ff_groups_improvements");
3265
+ this.groupsEnabled = (_a = this.feature) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled('ff_groups_improvements');
3233
3266
  this.animation = true;
3234
3267
  setTimeout(() => {
3235
3268
  this.animation = false;
@@ -3238,7 +3271,7 @@ class CreateDashboardComponent {
3238
3271
  this.getCategoryList();
3239
3272
  this.getRCList();
3240
3273
  this.getComplianceCategoryList();
3241
- this.setFrequency("2~1~0~0", 'import');
3274
+ this.setFrequency('2~1~0~0', 'import');
3242
3275
  this.checkWhetherAllListsLoaded();
3243
3276
  this.getUsersList('');
3244
3277
  this.getGroupList();
@@ -3251,7 +3284,9 @@ class CreateDashboardComponent {
3251
3284
  else {
3252
3285
  this.showRiskCategory = false;
3253
3286
  }
3254
- }, error => { console.log(error); });
3287
+ }, (error) => {
3288
+ console.log(error);
3289
+ });
3255
3290
  }
3256
3291
  /**
3257
3292
  * Displays the listing pages the left side of policy form to set and edit the dropdown fields values
@@ -3293,7 +3328,7 @@ class CreateDashboardComponent {
3293
3328
  this.toDatePickerConfig = { min: minToDate };
3294
3329
  const fromDate = new Date(minToDate.split('-').reverse().join('-'));
3295
3330
  const toDate = new Date(this.dashboardForm.selectedToDate);
3296
- const inValidDate = (fromDate >= toDate) ? true : false;
3331
+ const inValidDate = fromDate >= toDate ? true : false;
3297
3332
  if (inValidDate) {
3298
3333
  this.dashboardForm.selectedToDate = undefined;
3299
3334
  this.hideToDate = true;
@@ -3321,15 +3356,20 @@ class CreateDashboardComponent {
3321
3356
  }
3322
3357
  getCurrentDate() {
3323
3358
  let today = new Date();
3324
- return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
3359
+ return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
3325
3360
  }
3326
3361
  setToDate(data) {
3327
3362
  let today = new Date(data);
3328
- return today.getDate() + 1 + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
3363
+ return (today.getDate() +
3364
+ 1 +
3365
+ '-' +
3366
+ (today.getMonth() + 1) +
3367
+ '-' +
3368
+ today.getFullYear());
3329
3369
  }
3330
3370
  getFromDate(data) {
3331
3371
  let today = new Date(data);
3332
- return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
3372
+ return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
3333
3373
  }
3334
3374
  /**
3335
3375
  * It takes a string, converts it to a date, then returns a string in the format of YYYY-MM-DD.
@@ -3338,7 +3378,11 @@ class CreateDashboardComponent {
3338
3378
  */
3339
3379
  getDateFormate(data) {
3340
3380
  let today = new Date(data);
3341
- return today.getFullYear() + '-' + String((today.getMonth() + 1)).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
3381
+ return (today.getFullYear() +
3382
+ '-' +
3383
+ String(today.getMonth() + 1).padStart(2, '0') +
3384
+ '-' +
3385
+ String(today.getDate()).padStart(2, '0'));
3342
3386
  }
3343
3387
  configureDashboard() {
3344
3388
  let fieldsStatus = this.validateDashboard();
@@ -3347,13 +3391,26 @@ class CreateDashboardComponent {
3347
3391
  this.vLoader = true;
3348
3392
  const payload = {
3349
3393
  dashboard_name: this.dashboardForm.dashboardName,
3350
- dashboard_id: ''
3394
+ dashboard_id: '',
3351
3395
  };
3352
- this.createDashboardService.checkDuplicateDashboardName(payload).subscribe(res => {
3396
+ this.createDashboardService
3397
+ .checkDuplicateDashboardName(payload)
3398
+ .subscribe((res) => {
3353
3399
  if (!res) {
3354
3400
  this.vLoader = false;
3355
- this.showRiskWidgets = (this.isManageRisk && this.showRiskCategory && (this.dashboardForm.selectedRiskCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0)) ? true : false;
3356
- this.showComplianceWidgets = (this.dashboardForm.selectedResponsibilityCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0) ? true : false;
3401
+ this.showRiskWidgets =
3402
+ this.isManageRisk &&
3403
+ this.showRiskCategory &&
3404
+ (this.dashboardForm.selectedRiskCategories.length > 0 ||
3405
+ this.dashboardForm.selectedResponsibilityCenters.length > 0)
3406
+ ? true
3407
+ : false;
3408
+ this.showComplianceWidgets =
3409
+ this.dashboardForm.selectedResponsibilityCategories.length >
3410
+ 0 ||
3411
+ this.dashboardForm.selectedResponsibilityCenters.length > 0
3412
+ ? true
3413
+ : false;
3357
3414
  this.openConfigureWidgets = true;
3358
3415
  }
3359
3416
  else {
@@ -3361,7 +3418,7 @@ class CreateDashboardComponent {
3361
3418
  this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
3362
3419
  return;
3363
3420
  }
3364
- }, error => {
3421
+ }, (error) => {
3365
3422
  console.error(error);
3366
3423
  this.vLoader = false;
3367
3424
  });
@@ -3370,13 +3427,26 @@ class CreateDashboardComponent {
3370
3427
  this.vLoader = true;
3371
3428
  const payload = {
3372
3429
  dashboard_name: this.dashboardForm.dashboardName,
3373
- dashboard_id: this.dashboardId
3430
+ dashboard_id: this.dashboardId,
3374
3431
  };
3375
- this.createDashboardService.checkDuplicateDashboardName(payload).subscribe(res => {
3432
+ this.createDashboardService
3433
+ .checkDuplicateDashboardName(payload)
3434
+ .subscribe((res) => {
3376
3435
  if (!res) {
3377
3436
  this.vLoader = false;
3378
- this.showRiskWidgets = (this.isManageRisk && this.showRiskCategory && (this.dashboardForm.selectedRiskCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0)) ? true : false;
3379
- this.showComplianceWidgets = (this.dashboardForm.selectedResponsibilityCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0) ? true : false;
3437
+ this.showRiskWidgets =
3438
+ this.isManageRisk &&
3439
+ this.showRiskCategory &&
3440
+ (this.dashboardForm.selectedRiskCategories.length > 0 ||
3441
+ this.dashboardForm.selectedResponsibilityCenters.length > 0)
3442
+ ? true
3443
+ : false;
3444
+ this.showComplianceWidgets =
3445
+ this.dashboardForm.selectedResponsibilityCategories.length >
3446
+ 0 ||
3447
+ this.dashboardForm.selectedResponsibilityCenters.length > 0
3448
+ ? true
3449
+ : false;
3380
3450
  this.openConfigureWidgets = true;
3381
3451
  }
3382
3452
  else {
@@ -3384,7 +3454,7 @@ class CreateDashboardComponent {
3384
3454
  this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
3385
3455
  return;
3386
3456
  }
3387
- }, error => {
3457
+ }, (error) => {
3388
3458
  this.vLoader = false;
3389
3459
  console.error(error);
3390
3460
  });
@@ -3392,11 +3462,13 @@ class CreateDashboardComponent {
3392
3462
  }
3393
3463
  }
3394
3464
  /**
3395
- * Fetches organization users count api to get total number of pages
3396
- * @param Url contains prams
3397
- */
3465
+ * Fetches organization users count api to get total number of pages
3466
+ * @param Url contains prams
3467
+ */
3398
3468
  getOrganizationUsersCount(Url) {
3399
- this.createDashboardService.getOrganizationUsersCount(Url).subscribe(res => {
3469
+ this.createDashboardService
3470
+ .getOrganizationUsersCount(Url)
3471
+ .subscribe((res) => {
3400
3472
  this.totalList = res.total_members;
3401
3473
  if (res.total_members && res.limit_per_page > 1) {
3402
3474
  this.totalPages = res.create_page;
@@ -3407,9 +3479,9 @@ class CreateDashboardComponent {
3407
3479
  });
3408
3480
  }
3409
3481
  /**
3410
- * Get users list by making api call and pre selects all admins by adding to viewers
3411
- * @param url contains query params for organization users api
3412
- */
3482
+ * Get users list by making api call and pre selects all admins by adding to viewers
3483
+ * @param url contains query params for organization users api
3484
+ */
3413
3485
  getUsersList(url) {
3414
3486
  this.createDashboardService.getAllUsers().subscribe((res) => {
3415
3487
  this.usersList = res;
@@ -3440,7 +3512,9 @@ class CreateDashboardComponent {
3440
3512
  });
3441
3513
  }
3442
3514
  getComplianceCategoryList() {
3443
- this.createDashboardService.getComplianceCategoriesListFromGlobal().subscribe((res) => {
3515
+ this.createDashboardService
3516
+ .getComplianceCategoriesListFromGlobal()
3517
+ .subscribe((res) => {
3444
3518
  const data = res;
3445
3519
  this.allComplianceCategories = Object.assign(res);
3446
3520
  // cloneDeep(res);
@@ -3465,7 +3539,7 @@ class CreateDashboardComponent {
3465
3539
  });
3466
3540
  }
3467
3541
  saveSelectedCategory(event) {
3468
- console.log("event==>>>", event);
3542
+ console.log('event==>>>', event);
3469
3543
  }
3470
3544
  getCategoryList() {
3471
3545
  this.createDashboardService.getCategoryList().subscribe((res) => {
@@ -3474,17 +3548,22 @@ class CreateDashboardComponent {
3474
3548
  this.riskCategoryList.compliance.list = res.compliance_arr;
3475
3549
  this.riskCategoryList.others.list = res.others_arr;
3476
3550
  this.riskCategoryListLoaded = true;
3477
- this.allRiskCategories = [...new Set(this.allRiskCategories.concat(res.strategic_arr, res.operational_arr, res.compliance_arr, res.others_arr))];
3478
- }, err => {
3551
+ this.allRiskCategories = [
3552
+ ...new Set(this.allRiskCategories.concat(res.strategic_arr, res.operational_arr, res.compliance_arr, res.others_arr)),
3553
+ ];
3554
+ }, (err) => {
3479
3555
  console.error(err);
3480
3556
  this.riskCategoryListLoaded = true;
3481
3557
  });
3482
3558
  }
3483
3559
  /**
3484
- * It is to ensure whether all required lists on Policy from is loaded from the api call or not
3485
- */
3560
+ * It is to ensure whether all required lists on Policy from is loaded from the api call or not
3561
+ */
3486
3562
  checkWhetherAllListsLoaded() {
3487
- if (this.rcListLoaded && this.complianceCategoriesListLoaded && this.riskCategoryListLoaded && this.userListLoaded) {
3563
+ if (this.rcListLoaded &&
3564
+ this.complianceCategoriesListLoaded &&
3565
+ this.riskCategoryListLoaded &&
3566
+ this.userListLoaded) {
3488
3567
  if (this.mode === 'EDIT') {
3489
3568
  this.editDashboard();
3490
3569
  }
@@ -3515,7 +3594,7 @@ class CreateDashboardComponent {
3515
3594
  subWidgetObject._id = '';
3516
3595
  subWidgetObject.widget_name = subWidget.title;
3517
3596
  subWidgetObject.widget_code = subWidget.id;
3518
- subWidgetObject.state = (subWidget.value) ? 'ACTIVE' : 'INACTIVE';
3597
+ subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
3519
3598
  obj.sub_widgets.push(Object.assign(subWidgetObject));
3520
3599
  });
3521
3600
  }
@@ -3540,7 +3619,7 @@ class CreateDashboardComponent {
3540
3619
  subWidgetObject._id = '';
3541
3620
  subWidgetObject.widget_name = subWidget.title;
3542
3621
  subWidgetObject.widget_code = subWidget.id;
3543
- subWidgetObject.state = (subWidget.value) ? 'ACTIVE' : 'INACTIVE';
3622
+ subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
3544
3623
  obj.sub_widgets.push(subWidgetObject);
3545
3624
  });
3546
3625
  }
@@ -3554,7 +3633,9 @@ class CreateDashboardComponent {
3554
3633
  this.selectedWidgets[index].sub_widgets.forEach((subWidgetData) => {
3555
3634
  const elementIndex = element.subWidgets.findIndex((ele) => ele.id == subWidgetData.widget_code);
3556
3635
  if (elementIndex != -1) {
3557
- subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
3636
+ subWidgetData.state = element.subWidgets[elementIndex].value
3637
+ ? 'ACTIVE'
3638
+ : 'INACTIVE';
3558
3639
  }
3559
3640
  });
3560
3641
  }
@@ -3587,9 +3668,13 @@ class CreateDashboardComponent {
3587
3668
  paginationFilter(event) {
3588
3669
  if (event) {
3589
3670
  this.getUsersList({
3590
- p: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
3671
+ p: this.paginationService.currentPage === 1
3672
+ ? ''
3673
+ : this.paginationService.currentPage,
3591
3674
  type: 'all_except_executive',
3592
- q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
3675
+ q: !this.paginationService.searchValue
3676
+ ? ''
3677
+ : this.paginationService.searchValue,
3593
3678
  });
3594
3679
  }
3595
3680
  }
@@ -3603,17 +3688,16 @@ class CreateDashboardComponent {
3603
3688
  });
3604
3689
  }
3605
3690
  /**
3606
- * #### Description
3607
- *
3608
- * Returns the unique array of object based on unique key
3609
- * @param array
3610
- * @param key
3611
- * @returns
3612
- */
3691
+ * #### Description
3692
+ *
3693
+ * Returns the unique array of object based on unique key
3694
+ * @param array
3695
+ * @param key
3696
+ * @returns
3697
+ */
3613
3698
  uniqueByProp(array, key) {
3614
3699
  return Array.from(array
3615
- .reduce((acc, item) => (item && item[key] && acc.set(item[key], item),
3616
- acc), new Map())
3700
+ .reduce((acc, item) => (item && item[key] && acc.set(item[key], item), acc), new Map())
3617
3701
  .values());
3618
3702
  }
3619
3703
  saveSelectedList(type, selectedItems) {
@@ -3739,20 +3823,20 @@ class CreateDashboardComponent {
3739
3823
  return data;
3740
3824
  }
3741
3825
  /**
3742
- * Returns id's from a particular list elements
3743
- * @param list actual selected list
3744
- * @param key contains key to extract id from the list
3745
- */
3826
+ * Returns id's from a particular list elements
3827
+ * @param list actual selected list
3828
+ * @param key contains key to extract id from the list
3829
+ */
3746
3830
  returnIds(list, key) {
3747
- return list === null || list === void 0 ? void 0 : list.map(ele => {
3831
+ return list === null || list === void 0 ? void 0 : list.map((ele) => {
3748
3832
  if (ele[key]) {
3749
3833
  return ele[key];
3750
3834
  }
3751
3835
  });
3752
3836
  }
3753
3837
  /**
3754
- * Validates the data submitted on create dashboard form
3755
- */
3838
+ * Validates the data submitted on create dashboard form
3839
+ */
3756
3840
  validateDashboard() {
3757
3841
  var _a, _b, _c;
3758
3842
  setTimeout(() => {
@@ -3762,12 +3846,17 @@ class CreateDashboardComponent {
3762
3846
  const re = /&nbsp;|<br>/g;
3763
3847
  this.dashboardForm.dashboardName = event.replace(re, '').trim();
3764
3848
  const description = this.dashboardForm.dashboardDescriptionText;
3765
- this.dashboardForm.dashboardDescriptionText = description.replace(re, '').trim();
3766
- if (!this.dashboardForm.dashboardName || this.dashboardForm.dashboardName.trim() == ''
3767
- || (this.dashboardForm.dashboardName.length > 30)
3768
- || (this.textCount.transform((_a = this.dashboardForm) === null || _a === void 0 ? void 0 : _a.dashboardDescriptionText) > 250)
3769
- || (((_b = this.dashboardForm) === null || _b === void 0 ? void 0 : _b.selectedFromDate) && (!((_c = this.dashboardForm) === null || _c === void 0 ? void 0 : _c.selectedToDate)))
3770
- || (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
3849
+ this.dashboardForm.dashboardDescriptionText = description
3850
+ .replace(re, '')
3851
+ .trim();
3852
+ if (!this.dashboardForm.dashboardName ||
3853
+ this.dashboardForm.dashboardName.trim() == '' ||
3854
+ this.dashboardForm.dashboardName.length > 30 ||
3855
+ this.textCount.transform((_a = this.dashboardForm) === null || _a === void 0 ? void 0 : _a.dashboardDescriptionText) >
3856
+ 250 ||
3857
+ (((_b = this.dashboardForm) === null || _b === void 0 ? void 0 : _b.selectedFromDate) &&
3858
+ !((_c = this.dashboardForm) === null || _c === void 0 ? void 0 : _c.selectedToDate)) ||
3859
+ (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
3771
3860
  this.dashboardForm.selectedResponsibilityCategories.length == 0 &&
3772
3861
  this.dashboardForm.selectedRiskCategories.length == 0)) {
3773
3862
  return false;
@@ -3777,9 +3866,9 @@ class CreateDashboardComponent {
3777
3866
  }
3778
3867
  }
3779
3868
  /**
3780
- * Makes an api call to create a policy
3781
- * @param dashboard contains dashboardForm data
3782
- */
3869
+ * Makes an api call to create a policy
3870
+ * @param dashboard contains dashboardForm data
3871
+ */
3783
3872
  submitDashboard() {
3784
3873
  this.submitted = false;
3785
3874
  const valid = this.validateDashboard();
@@ -3793,21 +3882,27 @@ class CreateDashboardComponent {
3793
3882
  description: [
3794
3883
  {
3795
3884
  content: dashboard.dashboardDescriptionText,
3796
- attachments: []
3797
- }
3885
+ attachments: [],
3886
+ },
3798
3887
  ],
3799
3888
  visible_to_users: this.returnIds(dashboard.selectedViewers, 'member_id'),
3800
3889
  visible_to_groups: this.returnIds(dashboard.selectedGroup, 'group_id'),
3801
3890
  responsibility_center: this.returnIds(dashboard.selectedResponsibilityCenters, 'item_id'),
3802
3891
  responsibility_category: this.returnIds(dashboard.selectedResponsibilityCategories, 'category_id'),
3803
3892
  risk_category: this.returnIds(dashboard.selectedRiskCategories, 'category_id'),
3804
- display_criteria: (dashboard.displayCriteria === 'and') ? 'BOTH_RC_AND_CATEGORY' : 'RC_OR_CATEGORY',
3893
+ display_criteria: dashboard.displayCriteria === 'and'
3894
+ ? 'BOTH_RC_AND_CATEGORY'
3895
+ : 'RC_OR_CATEGORY',
3805
3896
  timeframe: {
3806
- start_date: (dashboard.selectedFromDate) ? this.getDateFormate(dashboard === null || dashboard === void 0 ? void 0 : dashboard.selectedFromDate) : '',
3807
- end_date: (dashboard.selectedToDate) ? this.getDateFormate(dashboard === null || dashboard === void 0 ? void 0 : dashboard.selectedToDate) : '',
3897
+ start_date: dashboard.selectedFromDate
3898
+ ? this.getDateFormate(dashboard === null || dashboard === void 0 ? void 0 : dashboard.selectedFromDate)
3899
+ : '',
3900
+ end_date: dashboard.selectedToDate
3901
+ ? this.getDateFormate(dashboard === null || dashboard === void 0 ? void 0 : dashboard.selectedToDate)
3902
+ : '',
3808
3903
  },
3809
3904
  email_summary: this.setFrequency('', 'export'),
3810
- widget_details: dashboard.configureWidget
3905
+ widget_details: dashboard.configureWidget,
3811
3906
  };
3812
3907
  if (this.mode == 'CREATE') {
3813
3908
  this.createDashboardService.submitDashboard(payload).subscribe((res) => {
@@ -3819,7 +3914,7 @@ class CreateDashboardComponent {
3819
3914
  this.isSmiley = false;
3820
3915
  this.close.emit({ mode: 'created', id: res._id });
3821
3916
  }, 3000);
3822
- }, err => {
3917
+ }, (err) => {
3823
3918
  if (err.status === 409) {
3824
3919
  this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
3825
3920
  this.vLoader = false;
@@ -3833,7 +3928,9 @@ class CreateDashboardComponent {
3833
3928
  }
3834
3929
  if (this.mode === 'EDIT') {
3835
3930
  payload.widget_update_flag = true;
3836
- this.createDashboardService.updateDashboard(this.dashboardId, payload).subscribe({
3931
+ this.createDashboardService
3932
+ .updateDashboard(this.dashboardId, payload)
3933
+ .subscribe({
3837
3934
  next: (res) => {
3838
3935
  this.vLoader = false;
3839
3936
  // this.snackBar.show('The dashboard has been updated','info');
@@ -3848,7 +3945,7 @@ class CreateDashboardComponent {
3848
3945
  console.error(error);
3849
3946
  this.vLoader = false;
3850
3947
  this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
3851
- }
3948
+ },
3852
3949
  });
3853
3950
  }
3854
3951
  }
@@ -3857,9 +3954,12 @@ class CreateDashboardComponent {
3857
3954
  this.createDashboardService.fetchDashboard(this.dashboardId).subscribe((res) => {
3858
3955
  const data = res;
3859
3956
  this.listDetails.nonRemovableUsersList = [res.created_by];
3860
- data.visible_to_groups = ((data === null || data === void 0 ? void 0 : data.visible_to_groups) && data.visible_to_groups.length) ? data.visible_to_groups : [];
3957
+ data.visible_to_groups =
3958
+ (data === null || data === void 0 ? void 0 : data.visible_to_groups) && data.visible_to_groups.length
3959
+ ? data.visible_to_groups
3960
+ : [];
3861
3961
  this.populateDashboardForm(data);
3862
- }, error => {
3962
+ }, (error) => {
3863
3963
  console.error(error);
3864
3964
  });
3865
3965
  }
@@ -3867,24 +3967,35 @@ class CreateDashboardComponent {
3867
3967
  populateDashboardForm(data) {
3868
3968
  var _a, _b, _c, _d, _e, _f, _g, _h;
3869
3969
  try {
3870
- console.log(" datattttta ===> ", data, this.groupList);
3871
- this.dashboardForm.dashboardName = data === null || data === void 0 ? void 0 : data.dashboard_name,
3872
- this.dashboardForm.dashboardDescriptionText = (_b = (_a = data === null || data === void 0 ? void 0 : data.description[0]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "",
3873
- this.dashboardForm.selectedViewers = this.setList(this.usersList, data === null || data === void 0 ? void 0 : data.visible_to_users, 'member_id');
3970
+ console.log(' datattttta ===> ', data, this.groupList);
3971
+ (this.dashboardForm.dashboardName = data === null || data === void 0 ? void 0 : data.dashboard_name),
3972
+ (this.dashboardForm.dashboardDescriptionText =
3973
+ (_b = (_a = data === null || data === void 0 ? void 0 : data.description[0]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : ''),
3974
+ (this.dashboardForm.selectedViewers = this.setList(this.usersList, data === null || data === void 0 ? void 0 : data.visible_to_users, 'member_id'));
3874
3975
  this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
3875
- data.visible_to_groups = ((data === null || data === void 0 ? void 0 : data.visible_to_groups) && (data === null || data === void 0 ? void 0 : data.visible_to_groups.length)) ? data === null || data === void 0 ? void 0 : data.visible_to_groups : [];
3976
+ data.visible_to_groups =
3977
+ (data === null || data === void 0 ? void 0 : data.visible_to_groups) && (data === null || data === void 0 ? void 0 : data.visible_to_groups.length)
3978
+ ? data === null || data === void 0 ? void 0 : data.visible_to_groups
3979
+ : [];
3876
3980
  this.dashboardForm.selectedGroup = this.setList(this.groupList, (_c = data === null || data === void 0 ? void 0 : data.visible_to_groups) !== null && _c !== void 0 ? _c : [], 'group_id');
3877
3981
  this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
3878
3982
  this.dashboardForm.selectedResponsibilityCenters = this.setList(this.responsibilityCentersList, data === null || data === void 0 ? void 0 : data.responsibility_center, 'item_id');
3879
3983
  this.dashboardForm.selectedResponsibilityCategories = this.setList(this.allComplianceCategories, data === null || data === void 0 ? void 0 : data.responsibility_category, 'category_id');
3880
3984
  this.dashboardForm.selectedRiskCategories = this.setList(this.allRiskCategories, data === null || data === void 0 ? void 0 : data.risk_category, 'category_id');
3881
- this.dashboardForm.displayCriteria = ((data === null || data === void 0 ? void 0 : data.display_criteria) === "BOTH_RC_AND_CATEGORY") ? 'and' : 'or';
3882
- this.dashboardForm.selectedFromDate = ((_d = data === null || data === void 0 ? void 0 : data.timeframe) === null || _d === void 0 ? void 0 : _d.start_date) ? new Date((_e = data === null || data === void 0 ? void 0 : data.timeframe) === null || _e === void 0 ? void 0 : _e.start_date) : undefined;
3883
- this.dashboardForm.selectedToDate = ((_f = data === null || data === void 0 ? void 0 : data.timeframe) === null || _f === void 0 ? void 0 : _f.end_date) ? new Date((_g = data === null || data === void 0 ? void 0 : data.timeframe) === null || _g === void 0 ? void 0 : _g.end_date) : undefined;
3985
+ this.dashboardForm.displayCriteria =
3986
+ (data === null || data === void 0 ? void 0 : data.display_criteria) === 'BOTH_RC_AND_CATEGORY' ? 'and' : 'or';
3987
+ this.dashboardForm.selectedFromDate = ((_d = data === null || data === void 0 ? void 0 : data.timeframe) === null || _d === void 0 ? void 0 : _d.start_date)
3988
+ ? new Date((_e = data === null || data === void 0 ? void 0 : data.timeframe) === null || _e === void 0 ? void 0 : _e.start_date)
3989
+ : undefined;
3990
+ this.dashboardForm.selectedToDate = ((_f = data === null || data === void 0 ? void 0 : data.timeframe) === null || _f === void 0 ? void 0 : _f.end_date)
3991
+ ? new Date((_g = data === null || data === void 0 ? void 0 : data.timeframe) === null || _g === void 0 ? void 0 : _g.end_date)
3992
+ : undefined;
3884
3993
  this.vLoader = false;
3885
3994
  this.dashboardForm.configureWidget = data.widget_details;
3886
- this.selectedWidgets = data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
3887
- this.displayedWidgets = data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
3995
+ this.selectedWidgets =
3996
+ data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
3997
+ this.displayedWidgets =
3998
+ data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
3888
3999
  this.setFrequency(data === null || data === void 0 ? void 0 : data.email_summary, 'import');
3889
4000
  let minToDate = this.setToDate((_h = data === null || data === void 0 ? void 0 : data.timeframe) === null || _h === void 0 ? void 0 : _h.start_date);
3890
4001
  this.toDatePickerConfig = { min: minToDate };
@@ -3894,7 +4005,7 @@ class CreateDashboardComponent {
3894
4005
  }, 20);
3895
4006
  }
3896
4007
  catch (error) {
3897
- console.log("populate dashboard error =>", error);
4008
+ console.log('populate dashboard error =>', error);
3898
4009
  }
3899
4010
  }
3900
4011
  setFrequency(event, mode) {
@@ -3908,10 +4019,14 @@ class CreateDashboardComponent {
3908
4019
  case 'monthly':
3909
4020
  const monthlyValueData = (_d = (_c = this.dashboardForm) === null || _c === void 0 ? void 0 : _c.selectedFrequencies) === null || _d === void 0 ? void 0 : _d.map((ele) => Number(ele) + 1);
3910
4021
  const monthlyValue = monthlyValueData === null || monthlyValueData === void 0 ? void 0 : monthlyValueData.join();
3911
- return '3~' + ((_e = this.dashboardForm) === null || _e === void 0 ? void 0 : _e.frequencyDate) + '~' + monthlyValue + '~0';
4022
+ return ('3~' + ((_e = this.dashboardForm) === null || _e === void 0 ? void 0 : _e.frequencyDate) + '~' + monthlyValue + '~0');
3912
4023
  case 'quarterly':
3913
4024
  const quarterlyValueData = Number(this.dashboardForm.selectedFrequencies) + 1;
3914
- return '7~' + this.dashboardForm.frequencyDate + '~' + quarterlyValueData + '~0';
4025
+ return ('7~' +
4026
+ this.dashboardForm.frequencyDate +
4027
+ '~' +
4028
+ quarterlyValueData +
4029
+ '~0');
3915
4030
  }
3916
4031
  }
3917
4032
  if (mode === 'import') {
@@ -3919,61 +4034,70 @@ class CreateDashboardComponent {
3919
4034
  switch (val[0]) {
3920
4035
  case '2':
3921
4036
  {
3922
- let stringVal = "Every ";
4037
+ let stringVal = 'Every ';
3923
4038
  this.dashboardForm.selectedFrequencyType = 'weekly';
3924
4039
  this.dashboardForm.selectedFrequencies = (_g = (_f = val[1]) === null || _f === void 0 ? void 0 : _f.split(',')) === null || _g === void 0 ? void 0 : _g.map((element) => Number(element) - 1);
3925
4040
  (_h = this.dashboardForm.selectedFrequencies) === null || _h === void 0 ? void 0 : _h.forEach((dayIndex, index) => {
3926
- stringVal += index === 0 ? this.dayNames[dayIndex] : ', ' + this.dayNames[dayIndex];
4041
+ stringVal +=
4042
+ index === 0
4043
+ ? this.dayNames[dayIndex]
4044
+ : ', ' + this.dayNames[dayIndex];
3927
4045
  });
3928
4046
  this.dashboardForm.frequencyMessage = stringVal;
3929
4047
  }
3930
4048
  break;
3931
4049
  case '3':
3932
4050
  {
3933
- let stringVal = "every ";
4051
+ let stringVal = 'every ';
3934
4052
  this.dashboardForm.selectedFrequencyType = 'monthly';
3935
4053
  this.dashboardForm.frequencyDate = val[1];
3936
4054
  this.dashboardForm.selectedFrequencies = (_k = (_j = val[2]) === null || _j === void 0 ? void 0 : _j.split(',')) === null || _k === void 0 ? void 0 : _k.map((element) => Number(element) - 1);
3937
4055
  this.dashboardForm.selectedFrequencies.forEach((monthIndex, index) => {
3938
- stringVal += index === 0 ? this.monthNames[monthIndex] : ', ' + this.monthNames[monthIndex];
4056
+ stringVal +=
4057
+ index === 0
4058
+ ? this.monthNames[monthIndex]
4059
+ : ', ' + this.monthNames[monthIndex];
3939
4060
  });
3940
4061
  let monthDateName;
3941
- if (this.dashboardForm.frequencyDate == "1") {
4062
+ if (this.dashboardForm.frequencyDate == '1') {
3942
4063
  monthDateName = '1st';
3943
4064
  }
3944
- else if (this.dashboardForm.frequencyDate == "2") {
4065
+ else if (this.dashboardForm.frequencyDate == '2') {
3945
4066
  monthDateName = '2nd';
3946
4067
  }
3947
- else if (this.dashboardForm.frequencyDate == "3") {
4068
+ else if (this.dashboardForm.frequencyDate == '3') {
3948
4069
  monthDateName = '3rd';
3949
4070
  }
3950
4071
  else {
3951
4072
  monthDateName = this.dashboardForm.frequencyDate + 'th';
3952
4073
  }
3953
- this.dashboardForm.frequencyMessage = monthDateName + ' of ' + stringVal;
4074
+ this.dashboardForm.frequencyMessage =
4075
+ monthDateName + ' of ' + stringVal;
3954
4076
  }
3955
4077
  break;
3956
4078
  case '7':
3957
4079
  {
3958
- let stringVal = "every ";
4080
+ let stringVal = 'every ';
3959
4081
  this.dashboardForm.selectedFrequencyType = 'quarterly';
3960
4082
  this.dashboardForm.frequencyDate = val[1];
3961
- this.dashboardForm.selectedFrequencies = Number(val[2].split(',')[0]) - 1;
4083
+ this.dashboardForm.selectedFrequencies =
4084
+ Number(val[2].split(',')[0]) - 1;
3962
4085
  stringVal += this.quarters[this.dashboardForm.selectedFrequencies];
3963
4086
  let monthDateName;
3964
- if (this.dashboardForm.frequencyDate == "1") {
4087
+ if (this.dashboardForm.frequencyDate == '1') {
3965
4088
  monthDateName = '1st';
3966
4089
  }
3967
- else if (this.dashboardForm.frequencyDate == "2") {
4090
+ else if (this.dashboardForm.frequencyDate == '2') {
3968
4091
  monthDateName = '2nd';
3969
4092
  }
3970
- else if (this.dashboardForm.frequencyDate == "3") {
4093
+ else if (this.dashboardForm.frequencyDate == '3') {
3971
4094
  monthDateName = '3rd';
3972
4095
  }
3973
4096
  else {
3974
4097
  monthDateName = this.dashboardForm.frequencyDate + 'th';
3975
4098
  }
3976
- this.dashboardForm.frequencyMessage = monthDateName + ' of ' + stringVal;
4099
+ this.dashboardForm.frequencyMessage =
4100
+ monthDateName + ' of ' + stringVal;
3977
4101
  }
3978
4102
  break;
3979
4103
  }
@@ -3985,7 +4109,7 @@ class CreateDashboardComponent {
3985
4109
  }
3986
4110
  setPermission(roleActions) {
3987
4111
  var _a;
3988
- let ifExistRisk = roleActions === null || roleActions === void 0 ? void 0 : roleActions.find((el) => el.moduleName == "risk");
4112
+ let ifExistRisk = roleActions === null || roleActions === void 0 ? void 0 : roleActions.find((el) => el.moduleName == 'risk');
3989
4113
  (_a = ifExistRisk === null || ifExistRisk === void 0 ? void 0 : ifExistRisk.subModule) === null || _a === void 0 ? void 0 : _a.forEach((module) => {
3990
4114
  var _a;
3991
4115
  (_a = module === null || module === void 0 ? void 0 : module.permissions) === null || _a === void 0 ? void 0 : _a.forEach((permission) => {
@@ -3994,7 +4118,6 @@ class CreateDashboardComponent {
3994
4118
  if ((permission === null || permission === void 0 ? void 0 : permission.defaultPermission) == 1 || (permission === null || permission === void 0 ? void 0 : permission.enable) == 1) {
3995
4119
  this.isManageRisk = true;
3996
4120
  }
3997
- ;
3998
4121
  break;
3999
4122
  }
4000
4123
  }
@@ -4003,10 +4126,10 @@ class CreateDashboardComponent {
4003
4126
  }
4004
4127
  }
4005
4128
  CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
4006
- CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
4129
+ CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <!-- Dashboard Name -->\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n \r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
4007
4130
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, decorators: [{
4008
4131
  type: Component,
4009
- args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
4132
+ args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <!-- Dashboard Name -->\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n \r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
4010
4133
  }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
4011
4134
  type: Input
4012
4135
  }], mode: [{
@@ -4480,9 +4603,11 @@ class DashboardFooterModule {
4480
4603
  }
4481
4604
  DashboardFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4482
4605
  DashboardFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterModule, declarations: [DashboardFooterComponent], imports: [CommonModule,
4483
- PopoverModule], exports: [DashboardFooterComponent] });
4606
+ PopoverModule,
4607
+ TooltipModule], exports: [DashboardFooterComponent] });
4484
4608
  DashboardFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterModule, imports: [CommonModule,
4485
- PopoverModule] });
4609
+ PopoverModule,
4610
+ TooltipModule] });
4486
4611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterModule, decorators: [{
4487
4612
  type: NgModule,
4488
4613
  args: [{
@@ -4491,7 +4616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
4491
4616
  ],
4492
4617
  imports: [
4493
4618
  CommonModule,
4494
- PopoverModule
4619
+ PopoverModule,
4620
+ TooltipModule
4495
4621
  ],
4496
4622
  exports: [
4497
4623
  DashboardFooterComponent
@@ -4681,15 +4807,14 @@ class FormGroupComponent {
4681
4807
  this.dashboardDescription = {
4682
4808
  placeholder: 'Description (Max limit: 250 characters)',
4683
4809
  mode: 'prime',
4684
- id: 'description'
4810
+ id: 'description',
4685
4811
  };
4686
4812
  this.fromDatePickerConfig = {
4687
- min: this.getCurrentDate()
4813
+ min: this.getCurrentDate(),
4688
4814
  };
4689
4815
  this.toDatePickerConfig = {};
4690
4816
  }
4691
- ngOnInit() {
4692
- }
4817
+ ngOnInit() { }
4693
4818
  openFromDatePicker() {
4694
4819
  this.fromDatePicker.api.open();
4695
4820
  this.datePickerOverlay = true;
@@ -4742,7 +4867,9 @@ class FormGroupComponent {
4742
4867
  let allFieldsValid = true;
4743
4868
  this.dashboardNameError = '';
4744
4869
  this.dashboardDescriptionError = '';
4745
- if (this.dashboardName === null || this.dashboardName === undefined || this.dashboardName === '') {
4870
+ if (this.dashboardName === null ||
4871
+ this.dashboardName === undefined ||
4872
+ this.dashboardName === '') {
4746
4873
  this.dashboardNameError = this.fieldEmptyErrorMessage;
4747
4874
  allFieldsValid = false;
4748
4875
  }
@@ -4750,19 +4877,22 @@ class FormGroupComponent {
4750
4877
  this.dashboardNameError = this.fieldLimitExceededErrorMessage.replace('XYZ', '30');
4751
4878
  allFieldsValid = false;
4752
4879
  }
4753
- else if (this.dashboardDescriptionText === null || this.dashboardDescriptionText === undefined || this.dashboardDescriptionText === '') {
4880
+ else if (this.dashboardDescriptionText === null ||
4881
+ this.dashboardDescriptionText === undefined ||
4882
+ this.dashboardDescriptionText === '') {
4754
4883
  this.dashboardDescriptionError = this.fieldEmptyErrorMessage;
4755
4884
  allFieldsValid = false;
4756
4885
  }
4757
4886
  else if (this.dashboardDescriptionText.length > 250) {
4758
- this.dashboardDescriptionError = this.fieldLimitExceededErrorMessage.replace('XYZ', '250');
4887
+ this.dashboardDescriptionError =
4888
+ this.fieldLimitExceededErrorMessage.replace('XYZ', '250');
4759
4889
  allFieldsValid = false;
4760
4890
  }
4761
4891
  return allFieldsValid;
4762
4892
  }
4763
4893
  getCurrentDate() {
4764
4894
  let today = new Date();
4765
- return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
4895
+ return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
4766
4896
  }
4767
4897
  displayCriteriaSelected(event, selection) {
4768
4898
  this.displayCriteria = selection;
@@ -4797,9 +4927,11 @@ class FloatingBarModule {
4797
4927
  }
4798
4928
  FloatingBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4799
4929
  FloatingBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule,
4800
- PopoverModule], exports: [FloatingBarComponent] });
4930
+ PopoverModule,
4931
+ TooltipModule], exports: [FloatingBarComponent] });
4801
4932
  FloatingBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarModule, imports: [CommonModule,
4802
- PopoverModule] });
4933
+ PopoverModule,
4934
+ TooltipModule] });
4803
4935
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FloatingBarModule, decorators: [{
4804
4936
  type: NgModule,
4805
4937
  args: [{
@@ -4809,6 +4941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
4809
4941
  imports: [
4810
4942
  CommonModule,
4811
4943
  PopoverModule,
4944
+ TooltipModule
4812
4945
  ],
4813
4946
  exports: [
4814
4947
  FloatingBarComponent