vc-create-dashboard 3.1.1 → 3.1.5

package/fesm2022/vc-create-dashboard.mjs

@@ -6,16 +6,16 @@ import { map, retry, catchError, debounceTime, takeUntil, finalize } from 'rxjs/
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import * as i1$1 from '@angular/common';
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import * as i7 from '@vcomply/editor';
+import * as i6 from '@vcomply/editor';
 import { VcomplyEditorModule } from '@vcomply/editor';
-import * as i5 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i17 from 'ng2-date-picker';
+import * as i2 from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import * as i16 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import { nanoid } from 'nanoid';
-import * as i1$2 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
 import * as i3 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 
@@ -1096,11 +1096,11 @@ class PopoverComponent {
         this.positionY = this.topValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: PopoverComponent, isStandalone: false, selector: "app-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: PopoverComponent, isStandalone: false, selector: "app-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "@if (popoverContainer) {\n  <div class=\"popover-overlay\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\n}\n@if (popoverContainer) {\n  <div class=\"action\" [class.active]=\"showPopover\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\n    <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popover', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"] }]
+            args: [{ selector: 'app-popover', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (popoverContainer) {\n  <div class=\"popover-overlay\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\n}\n@if (popoverContainer) {\n  <div class=\"action\" [class.active]=\"showPopover\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\n    <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"] }]
         }], ctorParameters: () => [{ type: PopoverService }], propDecorators: { dontCloseonClick: [{
                 type: Input
             }], popoverRatio: [{
@@ -1233,11 +1233,11 @@ class FloatingBarComponent {
         this.deleteEvent.emit(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FloatingBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FloatingBarComponent, isStandalone: false, 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\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"$safeNavigationMigration(selectedData[0]?.title)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\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>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(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>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\n        </div>\n    </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:#fff}.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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FloatingBarComponent, isStandalone: false, 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\">\n  <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n    @if (text && !frequencyMessage && !singleCategory) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n      </div>\n    }\n    @if (frequencyMessage && !text) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n      </div>\n    }\n    @if (singleCategory && !frequencyMessage && !text) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n        </div>\n      </div>\n    }\n    @if (!singleCategory && !text && !frequencyMessage) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        @if (selectedData.length) {\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"$safeNavigationMigration(selectedData[0]?.title)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n            @if (selectedData?.length > 1) {\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\">+{{selectedData?.length - 1}}</button>\n            }\n          </div>\n        }\n        @if ((selectedData?.length - 1) === 1) {\n          <span class=\"vx-fs-12 vx-paragraph-txt\">Widget Selected</span>\n        }\n        @if ((selectedData?.length - 1) > 1) {\n          <span class=\"vx-fs-12 vx-paragraph-txt\">Widgets Selected</span>\n        }\n        <app-popover #countPopup [dontCloseonClick]=\"true\">\n          <div class=\"lib-floating-bar-action-list\">\n            <ul class=\"action-item\">\n              @for (data of selectedData | slice: 1; track data; let j = $index) {\n                <li>\n                  <div class=\"avatar-card\">\n                    <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(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>\n                  </div>\n                </li>\n              }\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    }\n    <div class=\"right vx-d-flex vx-align-center\">\n      <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n      <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n      <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:#fff}.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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.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: "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: i2.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FloatingBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'floating-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"lib-floating-bar-container\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"$safeNavigationMigration(selectedData[0]?.title)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\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>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(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>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\n        </div>\n    </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:#fff}.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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.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"] }]
+            args: [{ selector: 'floating-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"lib-floating-bar-container\">\n  <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n    @if (text && !frequencyMessage && !singleCategory) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n      </div>\n    }\n    @if (frequencyMessage && !text) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n      </div>\n    }\n    @if (singleCategory && !frequencyMessage && !text) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n        </div>\n      </div>\n    }\n    @if (!singleCategory && !text && !frequencyMessage) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        @if (selectedData.length) {\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"$safeNavigationMigration(selectedData[0]?.title)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n            @if (selectedData?.length > 1) {\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\">+{{selectedData?.length - 1}}</button>\n            }\n          </div>\n        }\n        @if ((selectedData?.length - 1) === 1) {\n          <span class=\"vx-fs-12 vx-paragraph-txt\">Widget Selected</span>\n        }\n        @if ((selectedData?.length - 1) > 1) {\n          <span class=\"vx-fs-12 vx-paragraph-txt\">Widgets Selected</span>\n        }\n        <app-popover #countPopup [dontCloseonClick]=\"true\">\n          <div class=\"lib-floating-bar-action-list\">\n            <ul class=\"action-item\">\n              @for (data of selectedData | slice: 1; track data; let j = $index) {\n                <li>\n                  <div class=\"avatar-card\">\n                    <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(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>\n                  </div>\n                </li>\n              }\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    }\n    <div class=\"right vx-d-flex vx-align-center\">\n      <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n      <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n      <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:#fff}.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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.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"] }]
         }], ctorParameters: () => [{ type: SnackBarService }], propDecorators: { cancelEvent: [{
                 type: Output
             }], submitEvent: [{
@@ -1265,7 +1265,7 @@ class CsCheckboxComponent {
         this.ngValueChange.emit(this.ngValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CsCheckboxComponent, isStandalone: false, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CsCheckboxComponent, isStandalone: false, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsCheckboxComponent, decorators: [{
             type: Component,
@@ -1297,11 +1297,11 @@ class NoDataComponent {
         this.buttonAction.emit(button);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: NoDataComponent, isStandalone: false, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"$safeNavigationMigration(button?.buttonIcon)\"></i> <span\n                        [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"></span>\n                </button>\n        </div>\n    </div>\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 .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: NoDataComponent, isStandalone: false, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\n  <div class=\"no-data-container\">\n    <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n    @if (noDataText) {\n      <p class=\"text\" [innerHTML]=\"noDataText\"></p>\n    }\n    @for (button of action; track button) {\n      <div class=\"button-row\">\n        @if (!button?.buttonIcon) {\n          <button (click)=\"actionEmitter(button)\" [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"\n          [class.small]=\"smallButton\"></button>\n        }\n        @if (button?.buttonIcon) {\n          <button (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n            <i class=\"icons\" [innerHTML]=\"$safeNavigationMigration(button?.buttonIcon)\"></i> <span\n          [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"></span>\n        </button>\n      }\n    </div>\n  }\n</div>\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 .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NoDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-no-data', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"$safeNavigationMigration(button?.buttonIcon)\"></i> <span\n                        [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"></span>\n                </button>\n        </div>\n    </div>\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 .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'app-no-data', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"no-data-wrapper\">\n  <div class=\"no-data-container\">\n    <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n    @if (noDataText) {\n      <p class=\"text\" [innerHTML]=\"noDataText\"></p>\n    }\n    @for (button of action; track button) {\n      <div class=\"button-row\">\n        @if (!button?.buttonIcon) {\n          <button (click)=\"actionEmitter(button)\" [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"\n          [class.small]=\"smallButton\"></button>\n        }\n        @if (button?.buttonIcon) {\n          <button (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n            <i class=\"icons\" [innerHTML]=\"$safeNavigationMigration(button?.buttonIcon)\"></i> <span\n          [innerHTML]=\"$safeNavigationMigration(button?.buttonText)\"></span>\n        </button>\n      }\n    </div>\n  }\n</div>\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 .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { action: [{
                 type: Input
             }], noDataImage: [{
@@ -1665,11 +1665,11 @@ class ConfigureWidgetsComponent {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: ConfigureWidgetsComponent, isStandalone: false, 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\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      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\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <!-- <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button> -->\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"$safeNavigationMigration(widget?.title)\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"$safeNavigationMigration(widget?.description)\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"$safeNavigationMigration(widget?.widgetImage)\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:100vw;height:100vh;background:#fff}@media screen and (max-width:1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::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:#fff;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:#fff}::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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ConfigureWidgetsComponent, isStandalone: false, 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: "@if (showWidgets) {\n  <div class=\"configure-widgets vx-d-block\">\n    <div\n      class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n      >\n      <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n        Configure Widgets\n      </div>\n      <button\n        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\"\n        (click)=\"closeConfigureDashboard()\"\n        >\n        <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n      </button>\n    </div>\n    <div class=\"configure-widgets-body\">\n      <div class=\"configure-widgets-tab\">\n        <ul>\n          @if (showCompliance) {\n            <li\n              [class.active]=\"module === 'COMPLIANCE'\"\n              (click)=\"module = 'COMPLIANCE'\"\n              >\n              <!-- <button>\n              Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n            </button> -->\n          </li>\n        }\n        @if (showRisk) {\n          <li [class.active]=\"module === 'RISK'\">\n            <button (click)=\"module = 'RISK'\">\n              Risks<span>{{ riskWidgetsDisplayCount }}</span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    @if ((widgetsList[module] | search : search).length !== 0) {\n      <div\n        class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n        >\n        @for (widget of widgetsList[module] | search : search; track widget) {\n          @if (widget?.visibility) {\n            <div class=\"configure-widgets-item\">\n              <label class=\"block\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"widget.value\"\n                  (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n                  />\n                <div class=\"check-icon\">\n                  <svg\n                    class=\"check\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 52 52\"\n                    >\n                    <circle\n                      class=\"check-circle\"\n                      cx=\"26\"\n                      cy=\"26\"\n                      r=\"25\"\n                      fill=\"none\"\n                      />\n                    <path\n                      class=\"check-circle\"\n                      fill=\"none\"\n                      d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                      />\n                  </svg>\n                </div>\n                <div class=\"configure-widgets-item-head\">\n                  <h4\n                    class=\"configure-widgets-item-title\"\n                    [innerHTML]=\"$safeNavigationMigration(widget?.title)\"\n                  ></h4>\n                  <p\n                    class=\"configure-widgets-item-description\"\n                    [innerHTML]=\"$safeNavigationMigration(widget?.description)\"\n                  ></p>\n                  @if (!widget.value) {\n                    <button\n                      class=\"configure-widgets-item-button add\"\n                      (click)=\"selectWidget(true, module, widget.id)\"\n                      >\n                      + ADD\n                    </button>\n                  }\n                  @if (widget.value) {\n                    <button\n                      class=\"configure-widgets-item-button remove\"\n                      (click)=\"selectWidget(false, module, widget.id)\"\n                      >\n                      - Remove\n                    </button>\n                  }\n                </div>\n                <div class=\"configure-widgets-item-body\">\n                  <div class=\"image-wrapper\">\n                    <img\n                      [ngSrc]=\"$safeNavigationMigration(widget?.widgetImage)\"\n                      alt=\"\"\n                      width=\"790\"\n                      height=\"613\"\n                      />\n                  </div>\n                  @if (widget?.subWidgets?.length > 0) {\n                    <div\n                      class=\"floating-option vx-d-flex\"\n                      >\n                      @for (subWidget of widget.subWidgets; track subWidget) {\n                        @if (subWidget.visibility) {\n                          <app-cs-checkbox\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                            [ngValue]=\"subWidget.value\"\n                            >{{ subWidget.title }}\n                          </app-cs-checkbox>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              </label>\n            </div>\n          }\n        }\n        <!-- No Data Image -->\n      </div>\n    }\n    @if ((widgetsList[module] | search : search).length === 0) {\n      <app-no-data\n        [noDataImage]=\"ASSETS.configure_widget\"\n        [noDataText]=\"'No data to display'\"\n        >\n      </app-no-data>\n    }\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n}\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:100vw;height:100vh;background:#fff}@media screen and (max-width:1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::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:#fff;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:#fff}::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: "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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "directive", type: i2.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-configure-widgets', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      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\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <!-- <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button> -->\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"$safeNavigationMigration(widget?.title)\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"$safeNavigationMigration(widget?.description)\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"$safeNavigationMigration(widget?.widgetImage)\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:100vw;height:100vh;background:#fff}@media screen and (max-width:1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::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:#fff;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:#fff}::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"] }]
+            args: [{ selector: 'app-configure-widgets', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (showWidgets) {\n  <div class=\"configure-widgets vx-d-block\">\n    <div\n      class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n      >\n      <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n        Configure Widgets\n      </div>\n      <button\n        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\"\n        (click)=\"closeConfigureDashboard()\"\n        >\n        <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n      </button>\n    </div>\n    <div class=\"configure-widgets-body\">\n      <div class=\"configure-widgets-tab\">\n        <ul>\n          @if (showCompliance) {\n            <li\n              [class.active]=\"module === 'COMPLIANCE'\"\n              (click)=\"module = 'COMPLIANCE'\"\n              >\n              <!-- <button>\n              Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n            </button> -->\n          </li>\n        }\n        @if (showRisk) {\n          <li [class.active]=\"module === 'RISK'\">\n            <button (click)=\"module = 'RISK'\">\n              Risks<span>{{ riskWidgetsDisplayCount }}</span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    @if ((widgetsList[module] | search : search).length !== 0) {\n      <div\n        class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n        >\n        @for (widget of widgetsList[module] | search : search; track widget) {\n          @if (widget?.visibility) {\n            <div class=\"configure-widgets-item\">\n              <label class=\"block\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"widget.value\"\n                  (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n                  />\n                <div class=\"check-icon\">\n                  <svg\n                    class=\"check\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 52 52\"\n                    >\n                    <circle\n                      class=\"check-circle\"\n                      cx=\"26\"\n                      cy=\"26\"\n                      r=\"25\"\n                      fill=\"none\"\n                      />\n                    <path\n                      class=\"check-circle\"\n                      fill=\"none\"\n                      d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                      />\n                  </svg>\n                </div>\n                <div class=\"configure-widgets-item-head\">\n                  <h4\n                    class=\"configure-widgets-item-title\"\n                    [innerHTML]=\"$safeNavigationMigration(widget?.title)\"\n                  ></h4>\n                  <p\n                    class=\"configure-widgets-item-description\"\n                    [innerHTML]=\"$safeNavigationMigration(widget?.description)\"\n                  ></p>\n                  @if (!widget.value) {\n                    <button\n                      class=\"configure-widgets-item-button add\"\n                      (click)=\"selectWidget(true, module, widget.id)\"\n                      >\n                      + ADD\n                    </button>\n                  }\n                  @if (widget.value) {\n                    <button\n                      class=\"configure-widgets-item-button remove\"\n                      (click)=\"selectWidget(false, module, widget.id)\"\n                      >\n                      - Remove\n                    </button>\n                  }\n                </div>\n                <div class=\"configure-widgets-item-body\">\n                  <div class=\"image-wrapper\">\n                    <img\n                      [ngSrc]=\"$safeNavigationMigration(widget?.widgetImage)\"\n                      alt=\"\"\n                      width=\"790\"\n                      height=\"613\"\n                      />\n                  </div>\n                  @if (widget?.subWidgets?.length > 0) {\n                    <div\n                      class=\"floating-option vx-d-flex\"\n                      >\n                      @for (subWidget of widget.subWidgets; track subWidget) {\n                        @if (subWidget.visibility) {\n                          <app-cs-checkbox\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                            [ngValue]=\"subWidget.value\"\n                            >{{ subWidget.title }}\n                          </app-cs-checkbox>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              </label>\n            </div>\n          }\n        }\n        <!-- No Data Image -->\n      </div>\n    }\n    @if ((widgetsList[module] | search : search).length === 0) {\n      <app-no-data\n        [noDataImage]=\"ASSETS.configure_widget\"\n        [noDataText]=\"'No data to display'\"\n        >\n      </app-no-data>\n    }\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n}\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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:100vw;height:100vh;background:#fff}@media screen and (max-width:1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::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:#fff;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:#fff}::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"] }]
         }], ctorParameters: () => [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }], propDecorators: { widgetsDataModified: [{
                 type: Output
             }], closeConfigureWidgets: [{
@@ -1697,7 +1697,7 @@ class LoaderInlineComponent {
     }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: LoaderInlineComponent, isStandalone: false, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: LoaderInlineComponent, isStandalone: false, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoaderInlineComponent, decorators: [{
             type: Component,
@@ -1741,11 +1741,11 @@ class SnackBarComponent {
     ngOnDestroy() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SnackBarComponent, isStandalone: false, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SnackBarComponent, isStandalone: false, selector: "app-snack-bar", ngImport: i0, template: "@if (show) {\n  <div class=\"snackbar\">\n    <div class=\"snackbar-inner\">\n      <div class=\"snackbarText\">\n        <!-- &#xe914; -->\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i>\n        <span [innerHTML]=\"message\">{{ message }}</span>\n      </div>\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\n    </div>\n  </div>\n}\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-snack-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"] }]
+            args: [{ selector: 'app-snack-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (show) {\n  <div class=\"snackbar\">\n    <div class=\"snackbar-inner\">\n      <div class=\"snackbarText\">\n        <!-- &#xe914; -->\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i>\n        <span [innerHTML]=\"message\">{{ message }}</span>\n      </div>\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\n    </div>\n  </div>\n}\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: SnackBarService }] });
 
 class ScrollInViewDirective {
@@ -1812,11 +1812,11 @@ class SmileyDialogComponent {
         this.closeSmiley.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SmileyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SmileyDialogComponent, isStandalone: false, selector: "app-smiley-dialog", inputs: { message: "message", autoClose: "autoClose", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SmileyDialogComponent, isStandalone: false, selector: "app-smiley-dialog", inputs: { message: "message", autoClose: "autoClose", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      @for (button of actionButtons; track button) {\n        <button (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n          {{ button?.buttonText }}\n        </button>\n      }\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n    <button class=\"blue-btn\">Blue Button</button> -->\n  <!-- </div> -->\n</div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SmileyDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-smiley-dialog', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'app-smiley-dialog', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      @for (button of actionButtons; track button) {\n        <button (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n          {{ button?.buttonText }}\n        </button>\n      }\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n    <button class=\"blue-btn\">Blue Button</button> -->\n  <!-- </div> -->\n</div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { message: [{
                 type: Input
             }], autoClose: [{
@@ -1887,11 +1887,11 @@ class TableLoaderComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: TableLoaderComponent, isStandalone: false, selector: "app-table-loader", inputs: { listSize: "listSize" }, ngImport: i0, template: "<div class=\"table\">\n    <table class=\"table-loader\">\n        <tbody>\n            <tr *ngFor=\"let data of listSize\">\n                <td class=\"serial\">\n                    <span class=\"serial\"></span>\n                </td>\n                <td class=\"name\" width=\"50%\">\n                    <span class=\"loader\"></span>\n                </td>\n                <td class=\"action\" width=\"50%\">\n                    <span class=\"loader\"></span>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".table table.table-loader{width:100%;position:relative;border-collapse:separate;border-spacing:0 .1875rem;border:none;table-layout:auto}.table table.table-loader thead tr th{font-size:.6875rem;padding:.75rem .625rem;background:#f1f1f1;text-transform:uppercase;color:#747576;font-weight:600;line-height:1.0625rem;text-align:left;position:sticky;top:.1875rem;font-weight:400;white-space:nowrap;z-index:2}.table table.table-loader thead tr th:before{height:.3125rem;content:\"\";position:absolute;top:-.1875rem;right:0;left:0;background:#f1f1f1;z-index:1}.table table.table-loader thead tr th:first-child{border-radius:2px 0 0;text-align:center;width:2.75rem}.table table.table-loader thead tr th:last-child{border-radius:0 2px 0 0}.table table.table-loader thead tr th:last-child:before{border-radius:0 2px 0 0}.table table.table-loader tbody tr{margin-bottom:.1875rem;table-layout:auto;position:relative;transition:all .2s ease-in-out}.table table.table-loader tbody tr td{background:#fff;padding:0 .5rem;height:3.125rem;max-width:15.625rem;border:none;width:50%;table-layout:auto}.table table.table-loader tbody tr td.serial{width:2rem}.table table.table-loader tbody tr td span.serial{width:1rem;margin:0;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;display:flex;align-items:center;justify-content:center;height:3.125rem;font-weight:500}.table table.table-loader tbody tr td span.loader{display:block;width:100%;height:.75rem;border-radius:.75rem;background:#f3f3f3}.table table.table-loader tbody tr td.name{width:calc(100% - 31.25rem);padding-left:0}.table table.table-loader tbody tr td:first-child{border-radius:2px 0 0 2px}.table table.table-loader tbody tr td:last-child{text-align:right;border-radius:0 2px 2px 0}.table table.table-loader tbody tr td:last-child .loader{border-radius:.5rem;width:1.5rem;float:right}.table table.table-loader tbody tr:hover{box-shadow:0 0 15px #1e5dd359;z-index:2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TableLoaderComponent, isStandalone: false, selector: "app-table-loader", inputs: { listSize: "listSize" }, ngImport: i0, template: "<div class=\"table\">\n  <table class=\"table-loader\">\n    <tbody>\n      @for (data of listSize; track data) {\n        <tr>\n          <td class=\"serial\">\n            <span class=\"serial\"></span>\n          </td>\n          <td class=\"name\" width=\"50%\">\n            <span class=\"loader\"></span>\n          </td>\n          <td class=\"action\" width=\"50%\">\n            <span class=\"loader\"></span>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>", styles: [".table table.table-loader{width:100%;position:relative;border-collapse:separate;border-spacing:0 .1875rem;border:none;table-layout:auto}.table table.table-loader thead tr th{font-size:.6875rem;padding:.75rem .625rem;background:#f1f1f1;text-transform:uppercase;color:#747576;font-weight:600;line-height:1.0625rem;text-align:left;position:sticky;top:.1875rem;font-weight:400;white-space:nowrap;z-index:2}.table table.table-loader thead tr th:before{height:.3125rem;content:\"\";position:absolute;top:-.1875rem;right:0;left:0;background:#f1f1f1;z-index:1}.table table.table-loader thead tr th:first-child{border-radius:2px 0 0;text-align:center;width:2.75rem}.table table.table-loader thead tr th:last-child{border-radius:0 2px 0 0}.table table.table-loader thead tr th:last-child:before{border-radius:0 2px 0 0}.table table.table-loader tbody tr{margin-bottom:.1875rem;table-layout:auto;position:relative;transition:all .2s ease-in-out}.table table.table-loader tbody tr td{background:#fff;padding:0 .5rem;height:3.125rem;max-width:15.625rem;border:none;width:50%;table-layout:auto}.table table.table-loader tbody tr td.serial{width:2rem}.table table.table-loader tbody tr td span.serial{width:1rem;margin:0;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;display:flex;align-items:center;justify-content:center;height:3.125rem;font-weight:500}.table table.table-loader tbody tr td span.loader{display:block;width:100%;height:.75rem;border-radius:.75rem;background:#f3f3f3}.table table.table-loader tbody tr td.name{width:calc(100% - 31.25rem);padding-left:0}.table table.table-loader tbody tr td:first-child{border-radius:2px 0 0 2px}.table table.table-loader tbody tr td:last-child{text-align:right;border-radius:0 2px 2px 0}.table table.table-loader tbody tr td:last-child .loader{border-radius:.5rem;width:1.5rem;float:right}.table table.table-loader tbody tr:hover{box-shadow:0 0 15px #1e5dd359;z-index:2}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-loader', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"table\">\n    <table class=\"table-loader\">\n        <tbody>\n            <tr *ngFor=\"let data of listSize\">\n                <td class=\"serial\">\n                    <span class=\"serial\"></span>\n                </td>\n                <td class=\"name\" width=\"50%\">\n                    <span class=\"loader\"></span>\n                </td>\n                <td class=\"action\" width=\"50%\">\n                    <span class=\"loader\"></span>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".table table.table-loader{width:100%;position:relative;border-collapse:separate;border-spacing:0 .1875rem;border:none;table-layout:auto}.table table.table-loader thead tr th{font-size:.6875rem;padding:.75rem .625rem;background:#f1f1f1;text-transform:uppercase;color:#747576;font-weight:600;line-height:1.0625rem;text-align:left;position:sticky;top:.1875rem;font-weight:400;white-space:nowrap;z-index:2}.table table.table-loader thead tr th:before{height:.3125rem;content:\"\";position:absolute;top:-.1875rem;right:0;left:0;background:#f1f1f1;z-index:1}.table table.table-loader thead tr th:first-child{border-radius:2px 0 0;text-align:center;width:2.75rem}.table table.table-loader thead tr th:last-child{border-radius:0 2px 0 0}.table table.table-loader thead tr th:last-child:before{border-radius:0 2px 0 0}.table table.table-loader tbody tr{margin-bottom:.1875rem;table-layout:auto;position:relative;transition:all .2s ease-in-out}.table table.table-loader tbody tr td{background:#fff;padding:0 .5rem;height:3.125rem;max-width:15.625rem;border:none;width:50%;table-layout:auto}.table table.table-loader tbody tr td.serial{width:2rem}.table table.table-loader tbody tr td span.serial{width:1rem;margin:0;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;display:flex;align-items:center;justify-content:center;height:3.125rem;font-weight:500}.table table.table-loader tbody tr td span.loader{display:block;width:100%;height:.75rem;border-radius:.75rem;background:#f3f3f3}.table table.table-loader tbody tr td.name{width:calc(100% - 31.25rem);padding-left:0}.table table.table-loader tbody tr td:first-child{border-radius:2px 0 0 2px}.table table.table-loader tbody tr td:last-child{text-align:right;border-radius:0 2px 2px 0}.table table.table-loader tbody tr td:last-child .loader{border-radius:.5rem;width:1.5rem;float:right}.table table.table-loader tbody tr:hover{box-shadow:0 0 15px #1e5dd359;z-index:2}\n"] }]
+            args: [{ selector: 'app-table-loader', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"table\">\n  <table class=\"table-loader\">\n    <tbody>\n      @for (data of listSize; track data) {\n        <tr>\n          <td class=\"serial\">\n            <span class=\"serial\"></span>\n          </td>\n          <td class=\"name\" width=\"50%\">\n            <span class=\"loader\"></span>\n          </td>\n          <td class=\"action\" width=\"50%\">\n            <span class=\"loader\"></span>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>", styles: [".table table.table-loader{width:100%;position:relative;border-collapse:separate;border-spacing:0 .1875rem;border:none;table-layout:auto}.table table.table-loader thead tr th{font-size:.6875rem;padding:.75rem .625rem;background:#f1f1f1;text-transform:uppercase;color:#747576;font-weight:600;line-height:1.0625rem;text-align:left;position:sticky;top:.1875rem;font-weight:400;white-space:nowrap;z-index:2}.table table.table-loader thead tr th:before{height:.3125rem;content:\"\";position:absolute;top:-.1875rem;right:0;left:0;background:#f1f1f1;z-index:1}.table table.table-loader thead tr th:first-child{border-radius:2px 0 0;text-align:center;width:2.75rem}.table table.table-loader thead tr th:last-child{border-radius:0 2px 0 0}.table table.table-loader thead tr th:last-child:before{border-radius:0 2px 0 0}.table table.table-loader tbody tr{margin-bottom:.1875rem;table-layout:auto;position:relative;transition:all .2s ease-in-out}.table table.table-loader tbody tr td{background:#fff;padding:0 .5rem;height:3.125rem;max-width:15.625rem;border:none;width:50%;table-layout:auto}.table table.table-loader tbody tr td.serial{width:2rem}.table table.table-loader tbody tr td span.serial{width:1rem;margin:0;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;display:flex;align-items:center;justify-content:center;height:3.125rem;font-weight:500}.table table.table-loader tbody tr td span.loader{display:block;width:100%;height:.75rem;border-radius:.75rem;background:#f3f3f3}.table table.table-loader tbody tr td.name{width:calc(100% - 31.25rem);padding-left:0}.table table.table-loader tbody tr td:first-child{border-radius:2px 0 0 2px}.table table.table-loader tbody tr td:last-child{text-align:right;border-radius:0 2px 2px 0}.table table.table-loader tbody tr td:last-child .loader{border-radius:.5rem;width:1.5rem;float:right}.table table.table-loader tbody tr:hover{box-shadow:0 0 15px #1e5dd359;z-index:2}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listSize: [{
                 type: Input
             }] } });
@@ -2212,11 +2212,11 @@ class ProgramListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ProgramListComponent, deps: [{ token: ListUtilsService }, { token: ProgramListApiService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: ProgramListComponent, isStandalone: false, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"$safeNavigationMigration(appliedProgramType[0]?.name)\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\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\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | searchProgram : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"$safeNavigationMigration(item?.id)\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"$safeNavigationMigration(item?.parentTree?.join(' > '))\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\" dontCloseonClick=\"true\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", 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 .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-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 .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-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 .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-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 .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-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 .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-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 .new-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 .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }, { kind: "pipe", type: SearchProgramPipe, name: "searchProgram" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ProgramListComponent, isStandalone: false, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      @if (appliedProgramType.length === 0) {\n        <div class=\"filter-text\">\n          Select Program Type\n        </div>\n      } @else {\n        @if (appliedProgramType.length) {\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"$safeNavigationMigration(appliedProgramType[0]?.name)\"\n              placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n            @if (appliedProgramType.length > 1) {\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\"\n                appPopover placement=\"right\">\n                +{{ appliedProgramType.length - 1 }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  @if (\n    paginatedItems?.length > 0 ||\n    loaderState.programList || loaderState.categoryList) {\n    <div class=\"dynamic-list-table\">\n      <div class=\"dynamic-list-header vx-d-flex\">\n        @for (header of tableHeaders; track header) {\n          <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n            <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n              #\n            </div>\n            <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n              {{ header }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"dynamic-list-body vx-d-flex\">\n        <div class=\"left-column\">\n          @if (!loaderState.programList) {\n            @for (\n              item of paginatedItems | searchProgram : searchTerm : 'name'; track\n              item; let i = $index) {\n              <div class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n                <div class=\"list-column serial\">\n                  <div class=\"srNo\">{{ i + 1 }}</div>\n                </div>\n                <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n                  <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n                </div>\n                @if (selectedItems[item.id]?.length > 0) {\n                  <div class=\"list-column count\">\n                    <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                      {{ selectedItems[item.id].length }}\n                    </div>\n                    <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                      {{\n                      selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                      }}\n                      SELECTED\n                    </div>\n                  </div>\n                }\n                <div class=\"list-column action\">\n                  <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                    <i class=\"icons\"> &#xe970; </i>\n                  </button>\n                </div>\n              </div>\n            }\n          } @else {\n            <app-table-loader></app-table-loader>\n          }\n        </div>\n        <div class=\"right-column\">\n          @if (\n            !loaderState.categoryList && !loaderState.programList) {\n            @if (\n              categoryList[activeProgram?.id]?.length > 0) {\n              @for (\n                item of categoryList[activeProgram?.id]; track\n                item; let i = $index) {\n                <div class=\"list-row vx-pl-2 vx-pr-2\">\n              <app-cs-checkbox [value]=\"$safeNavigationMigration(item?.id)\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                    <span class=\"value-inner\">\n                      <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                      <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                        @if (item?.parentTree?.length) {\n                          <div\n                            class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                            Within\n                          </div>\n                        }\n                        <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"$safeNavigationMigration(item?.parentTree?.join(' > '))\"\n                          placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{ item?.parentTree?.join(\" > \") }}\n                        </div>\n                      </div>\n                    </span>\n                  </app-cs-checkbox>\n                </div>\n              }\n            } @else {\n              <div class=\"sub-no-data\">\n                <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n              </div>\n            }\n          } @else {\n            <app-table-loader></app-table-loader>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  }\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\" dontCloseonClick=\"true\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      @for (item of programTypeList; track item) {\n        <li>\n          <div class=\"chip-item\">\n            <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n              (ngValueChange)=\"selectFilter($event, item)\">\n              {{ item?.name }}\n            </app-cs-checkbox>\n          </div>\n        </li>\n      }\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", 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 .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-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 .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-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 .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-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 .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-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 .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-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 .new-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 .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }, { kind: "pipe", type: SearchProgramPipe, name: "searchProgram" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ProgramListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-program-list', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"$safeNavigationMigration(appliedProgramType[0]?.name)\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\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\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | searchProgram : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"$safeNavigationMigration(item?.id)\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"$safeNavigationMigration(item?.parentTree?.join(' > '))\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\" dontCloseonClick=\"true\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", 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 .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-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 .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-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 .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-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 .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-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 .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-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 .new-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 .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-program-list', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      @if (appliedProgramType.length === 0) {\n        <div class=\"filter-text\">\n          Select Program Type\n        </div>\n      } @else {\n        @if (appliedProgramType.length) {\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"$safeNavigationMigration(appliedProgramType[0]?.name)\"\n              placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n            @if (appliedProgramType.length > 1) {\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\"\n                appPopover placement=\"right\">\n                +{{ appliedProgramType.length - 1 }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  @if (\n    paginatedItems?.length > 0 ||\n    loaderState.programList || loaderState.categoryList) {\n    <div class=\"dynamic-list-table\">\n      <div class=\"dynamic-list-header vx-d-flex\">\n        @for (header of tableHeaders; track header) {\n          <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n            <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n              #\n            </div>\n            <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n              {{ header }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"dynamic-list-body vx-d-flex\">\n        <div class=\"left-column\">\n          @if (!loaderState.programList) {\n            @for (\n              item of paginatedItems | searchProgram : searchTerm : 'name'; track\n              item; let i = $index) {\n              <div class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n                <div class=\"list-column serial\">\n                  <div class=\"srNo\">{{ i + 1 }}</div>\n                </div>\n                <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n                  <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n                </div>\n                @if (selectedItems[item.id]?.length > 0) {\n                  <div class=\"list-column count\">\n                    <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                      {{ selectedItems[item.id].length }}\n                    </div>\n                    <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                      {{\n                      selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                      }}\n                      SELECTED\n                    </div>\n                  </div>\n                }\n                <div class=\"list-column action\">\n                  <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                    <i class=\"icons\"> &#xe970; </i>\n                  </button>\n                </div>\n              </div>\n            }\n          } @else {\n            <app-table-loader></app-table-loader>\n          }\n        </div>\n        <div class=\"right-column\">\n          @if (\n            !loaderState.categoryList && !loaderState.programList) {\n            @if (\n              categoryList[activeProgram?.id]?.length > 0) {\n              @for (\n                item of categoryList[activeProgram?.id]; track\n                item; let i = $index) {\n                <div class=\"list-row vx-pl-2 vx-pr-2\">\n              <app-cs-checkbox [value]=\"$safeNavigationMigration(item?.id)\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                    <span class=\"value-inner\">\n                      <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                      <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                        @if (item?.parentTree?.length) {\n                          <div\n                            class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                            Within\n                          </div>\n                        }\n                        <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"$safeNavigationMigration(item?.parentTree?.join(' > '))\"\n                          placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{ item?.parentTree?.join(\" > \") }}\n                        </div>\n                      </div>\n                    </span>\n                  </app-cs-checkbox>\n                </div>\n              }\n            } @else {\n              <div class=\"sub-no-data\">\n                <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n              </div>\n            }\n          } @else {\n            <app-table-loader></app-table-loader>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  }\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\" dontCloseonClick=\"true\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      @for (item of programTypeList; track item) {\n        <li>\n          <div class=\"chip-item\">\n            <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n              (ngValueChange)=\"selectFilter($event, item)\">\n              {{ item?.name }}\n            </app-cs-checkbox>\n          </div>\n        </li>\n      }\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", 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 .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-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 .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-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 .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-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 .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-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 .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-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 .new-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 .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: ListUtilsService }, { type: ProgramListApiService }], propDecorators: { items: [{
                 type: Input
             }], selectedItems: [{
@@ -2319,11 +2319,11 @@ class DashboardFooterComponent {
         this.deleteEvent.emit(element);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: DashboardFooterComponent, isStandalone: false, 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\">\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\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\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>\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>\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>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\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>\n        </div>\n    </div>\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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DashboardFooterComponent, isStandalone: false, 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\">\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\">\n    @if (footerDetails.showFrequency) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n      </div>\n    }\n\n    @if (footerDetails.selectedData.length>0) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n          @if (!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])) {\n            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n          }\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>\n          @if (footerDetails.selectedData.length > 1) {\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\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n          }\n        </div>\n        @if (footerDetails?.selectedData?.length>1) {\n          @if (footerDetails?.selectedData?.slice(1).length === 1) {\n            <span class=\"value vx-ml-2\">{{footerDetails.singularText}}</span>\n          }\n          @if (footerDetails?.selectedData?.slice(1).length > 1) {\n            <span class=\"value vx-ml-2\">{{footerDetails.pluralText}}</span>\n          }\n        }\n        <app-popover #countPopup [dontCloseonClick]=\"true\">\n          <div class=\"dashboard-floating-bar-action-list\">\n            <ul class=\"action-item\">\n              @for (element of footerDetails.selectedData.slice(1); track element; let j = $index) {\n                <li>\n                  <div class=\"avatar-card\">\n                    <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      @if (!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])) {\n                        <i class=\"icons cross-icon\" (click)=\"deleteSelected(element)\">&#xe90d;</i>\n                        } {{element[footerDetails.displayElementKey]}}\n                      </span>\n                    </div>\n                  </li>\n                }\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      }\n      <div class=\"right vx-d-flex vx-align-center\">\n        <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n        <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\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>\n      </div>\n    </div>\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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DashboardFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dashboard-footer', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"dashboard-floating-bar-container\">\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\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\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>\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>\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>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\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>\n        </div>\n    </div>\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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::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"] }]
+            args: [{ selector: 'app-dashboard-footer', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"dashboard-floating-bar-container\">\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\">\n    @if (footerDetails.showFrequency) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n      </div>\n    }\n\n    @if (footerDetails.selectedData.length>0) {\n      <div class=\"left vx-d-flex vx-align-center\">\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n          @if (!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])) {\n            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n          }\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>\n          @if (footerDetails.selectedData.length > 1) {\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\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n          }\n        </div>\n        @if (footerDetails?.selectedData?.length>1) {\n          @if (footerDetails?.selectedData?.slice(1).length === 1) {\n            <span class=\"value vx-ml-2\">{{footerDetails.singularText}}</span>\n          }\n          @if (footerDetails?.selectedData?.slice(1).length > 1) {\n            <span class=\"value vx-ml-2\">{{footerDetails.pluralText}}</span>\n          }\n        }\n        <app-popover #countPopup [dontCloseonClick]=\"true\">\n          <div class=\"dashboard-floating-bar-action-list\">\n            <ul class=\"action-item\">\n              @for (element of footerDetails.selectedData.slice(1); track element; let j = $index) {\n                <li>\n                  <div class=\"avatar-card\">\n                    <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      @if (!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])) {\n                        <i class=\"icons cross-icon\" (click)=\"deleteSelected(element)\">&#xe90d;</i>\n                        } {{element[footerDetails.displayElementKey]}}\n                      </span>\n                    </div>\n                  </li>\n                }\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      }\n      <div class=\"right vx-d-flex vx-align-center\">\n        <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n        <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\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>\n      </div>\n    </div>\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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::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"] }]
         }], ctorParameters: () => [], propDecorators: { cancelEvent: [{
                 type: Output
             }], submitEvent: [{
@@ -2447,11 +2447,11 @@ class PaginationComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: PaginationComponent, isStandalone: false, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\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:#fff;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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: PaginationComponent, isStandalone: false, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\n  <ul>\n    <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n    @for (page of paginationArray; track page) {\n      <li>\n        <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n          @if (page=='...') {\n            <i class=\"icons\">&#xe911;</i>\n            }{{page!='...'?page : ''}}\n          </button>\n        </li>\n      }\n      <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\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:#fff;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"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pagination', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\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:#fff;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"] }]
+            args: [{ selector: 'app-pagination', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-box\">\n  <ul>\n    <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n    @for (page of paginationArray; track page) {\n      <li>\n        <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n          @if (page=='...') {\n            <i class=\"icons\">&#xe911;</i>\n            }{{page!='...'?page : ''}}\n          </button>\n        </li>\n      }\n      <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\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:#fff;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"] }]
         }], ctorParameters: () => [{ type: PaginationService }], propDecorators: { totalPages: [{
                 type: Input
             }], limit: [{
@@ -2861,11 +2861,11 @@ class UserListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UserListComponent, isStandalone: false, 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\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            $safeNavigationMigration(element?.member_id)\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"$safeNavigationMigration(element?.group_name)\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;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:#fff;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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UserListComponent, isStandalone: false, 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\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    @if (groupsEnabled) {\n      <div\n        class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n        >\n        <button\n          (click)=\"switchTab('USER')\"\n          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\"\n          [class.active]=\"currentTab === 'USER'\"\n          >\n          USERS\n          <span\n            class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n            >{{ totalList }}</span\n            >\n          </button>\n          <button\n            id=\"switchtab\"\n            (click)=\"switchTab('GROUP')\"\n            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\"\n            [class.active]=\"currentTab === 'GROUP'\"\n            >\n            USER GROUPS\n            <span\n              id=\"groupscount\"\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{ totalgroups }}</span\n              >\n            </button>\n          </div>\n        }\n\n        <div class=\"user-list-search vx-mb-2\">\n          <i class=\"icons\">&#xe90b;</i>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n            (keyup.enter)=\"setSearchValue()\"\n            (focusout)=\"setSearchValue()\"\n            />\n        </div>\n\n        @if (currentTab === 'USER') {\n          @if (totalPages > 1) {\n            <div\n              class=\"vx-d-flex vx-align-center vx-justify-end\"\n              >\n              @if (totalPages > 1 && searchList.length > 1) {\n                <div\n                  class=\"pagination-box\"\n                  >\n                  <app-pagination\n                    (paginationFilter)=\"paginationFilter($event)\"\n                    [limit]=\"limit\"\n                    [totalPages]=\"totalPages\"\n                    [totalList]=\"totalList\"\n                  ></app-pagination>\n                </div>\n              }\n            </div>\n          }\n          @if (searchList.length !== 0) {\n            <div class=\"user-list-body-top\">\n              @if (!searchValue && searchList.length > 1) {\n                <app-cs-checkbox\n                  [ngValue]=\"selectedList.length == totalList\"\n                  (ngValueChange)=\"selectAllUsers($event)\"\n                  >\n                  <strong>{{\n                    selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n                  }}</strong>\n                </app-cs-checkbox>\n              }\n              @if (searchValue && searchList.length > 1) {\n                <app-cs-checkbox\n                  [ngValue]=\"checkSelectAll()\"\n                  (ngValueChange)=\"selectAll($event)\"\n                  >\n                  <strong>{{\n                    selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n                  }}</strong>\n                </app-cs-checkbox>\n              }\n            </div>\n          }\n          <div class=\"list-of-user\">\n            <div\n              class=\"selection-list vx-mb-4\"\n              [class.with-group]=\"groupsEnabled\"\n              [class.with-noData]=\"searchList.length == 0\"\n              [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n              >\n              @if (searchList.length !== 0) {\n                <ul>\n                  @for (data of searchList; track data; let i = $index) {\n                    <li>\n                      <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                        (ngValueChange)=\"selectElement(data)\"\n                        [arTooltip]=\"data[listDetails.tooltipKey]\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                        >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n                        >\n                      </li>\n                    }\n                  </ul>\n                }\n                @if (!vLoader && searchList.length == 0) {\n                  <app-no-data\n                    [noDataImage]=\"ASSETS.search_data\"\n                    [noDataText]=\"'No data to display'\"\n                  ></app-no-data>\n                }\n              </div>\n              @if (vLoader) {\n                <app-loader-inline></app-loader-inline>\n              }\n            </div>\n          }\n\n          @if (currentTab === 'GROUP' && groupsEnabled) {\n            @if (groupdata; as groups) {\n              @if (true) {\n                <div class=\"vx-d-flex vx-align-center vx-justify-end\">\n                  @if (total_group_pages > 1) {\n                    <div class=\"pagination-box\">\n                      <app-pagination\n                        (paginationFilter)=\"paginationFilter($event)\"\n                        [limit]=\"limit\"\n                        [totalPages]=\"total_group_pages\"\n                        [totalList]=\"totalgroups\"\n                      ></app-pagination>\n                    </div>\n                  }\n                </div>\n              }\n              @if (true) {\n                <div\n                  class=\"user-list-mid vx-mb-4\"\n                  [class.with-pagination]=\"total_group_pages > 1\"\n                  >\n                  @if (groups?.length > 0) {\n                    <div class=\"user-list-select vx-mb-4\">\n                      @if (!searchValue && groups.length > 1) {\n                        <app-cs-checkbox\n                          [disabled]=\"false\"\n                          [ngValue]=\"selectedgroupList.length == totalgroups\"\n                          (ngValueChange)=\"selectAllGroups($event)\"\n                          >\n                          <div\n                            class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                            >\n                            {{\n                            selectedgroupList.length == totalgroups\n                            ? \"Deselect All\"\n                            : \"Select All\"\n                            }}\n                          </div>\n                        </app-cs-checkbox>\n                      }\n                      @if (searchValue && groups.length > 1) {\n                        <app-cs-checkbox\n                          [disabled]=\"false\"\n                          [ngValue]=\"checkSelectAllGroups()\"\n                          (ngValueChange)=\"selectAllsearchgroups($event)\"\n                          >\n                          <div\n                            class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                            >\n                            {{\n                            selectedgroupList.length == totalgroups\n                            ? \"Deselect All\"\n                            : \"Select All\"\n                            }}\n                          </div>\n                        </app-cs-checkbox>\n                      }\n                    </div>\n                    <div class=\"user-list-item\">\n                      <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                        @for (data of groups; track data; let i = $index) {\n                          <li\n                            class=\"vx-mb-4\"\n                            >\n                            <app-cs-checkbox\n                              (ngValueChange)=\"selectGroupElement(data)\"\n                              [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                              >\n                              <div class=\"user-name vx-d-flex vx-align-center\">\n                                <div\n                                  class=\"group-name\"\n                                  [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                                  placement=\"bottom-left\"\n                                  delay=\"0\"\n                                  [tooltipMandatory]=\"true\"\n                                  >\n                                  {{ data[listDetails.displayGroupKey] }}\n                                </div>\n                                <span\n                                  id=\"usersofgroup\"\n                                  class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                                  >{{ data[\"associatedUsers\"].length }}\n                                  {{\n                                  data[\"associatedUsers\"].length > 1\n                                  ? \"USERS\"\n                                  : \"USER\"\n                                  }}</span\n                                  >\n                                </div>\n                              </app-cs-checkbox>\n                            </li>\n                          }\n                        </ul>\n                      </div>\n                    }\n                    @if (groups?.length == 0 && !vLoaderGroups) {\n                      <app-no-data\n                        [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n                      ></app-no-data>\n                    }\n                    @if (vLoaderGroups) {\n                      <app-loader-inline></app-loader-inline>\n                    }\n                  </div>\n                }\n              }\n            }\n\n            @if (groupsEnabled) {\n              <div class=\"user-floating-bar\">\n                <div\n                  class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n                  >\n                  <div class=\"left vx-d-flex vx-align-center\">\n                    @if (selectedList?.length) {\n                      <button\n                        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\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                        >\n                        {{ selectedList?.length }}\n                      </button>\n                    }\n                    <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n                      @if (selectedList?.length === 1) {\n                        <span\n                          >User\n                          {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n                          >\n                        }\n                        @if (selectedList?.length > 1) {\n                          <span\n                            >Users\n                            {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n                            >\n                          }\n                        </div>\n                        @if (selectedgroupList?.length) {\n                          <button\n                            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\"\n                            appPopover\n                            (click)=\"groupCount.popover()\"\n                            placement=\"left\"\n                            >\n                            {{ selectedgroupList?.length }}\n                          </button>\n                        }\n                        <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n                          @if (selectedgroupList?.length === 1) {\n                            <span\n                              >User Group selected</span\n                              >\n                            }\n                            @if (selectedgroupList?.length > 1) {\n                              <span\n                                >User Groups selected</span\n                                >\n                              }\n                            </div>\n                            <app-popover #userCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (element of selectedList; track element) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span\n                                          class=\"value\"\n                                          [arTooltip]=\"element.member_name\"\n                                          placement=\"bottom-left\"\n                                          delay=\"0\"\n                                          type=\"black\"\n                                          [tooltipMandatory]=\"false\"\n                                          >\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            $safeNavigationMigration(element?.member_id)\n                                            )\n                                            ) {\n                                            <i\n                                              class=\"icons cross-icon\"\n                                              (click)=\"selectElement(element)\"\n                                              >&#xe90d;</i\n                                              >\n                                            }\n                                            {{ element.member_name }}\n                                          </span>\n                                        </div>\n                                      </li>\n                                    }\n                                  </ul>\n                                </div>\n                              </app-popover>\n                              <app-popover #groupCount [dontCloseonClick]=\"true\">\n                                <div class=\"action-list\">\n                                  <ul class=\"action-item\">\n                                    @for (element of selectedgroupList; track element) {\n                                      <li>\n                                        <div class=\"avatar-card\">\n                                          <span\n                                            class=\"value\"\n                                            [arTooltip]=\"$safeNavigationMigration(element?.group_name)\"\n                                            placement=\"bottom-left\"\n                                            delay=\"0\"\n                                            type=\"black\"\n                                            [tooltipMandatory]=\"false\"\n                                            >\n                                            <i\n                                              class=\"icons cross-icon\"\n                                              (click)=\"selectGroupElement(element)\"\n                                              >&#xe90d;</i\n                                              >\n                                              {{ element?.group_name }}\n                                            </span>\n                                          </div>\n                                        </li>\n                                      }\n                                    </ul>\n                                  </div>\n                                </app-popover>\n                              </div>\n                              <div class=\"right vx-d-flex vx-align-center\">\n                                <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n                                <button [disabled]=\"false\" (click)=\"onSubmit()\">\n                                  Next <i class=\"icons\">&#xe91e;</i>\n                                </button>\n                              </div>\n                            </div>\n                          </div>\n                        }\n\n                        @if (!groupsEnabled) {\n                          <div class=\"user-list-footer\">\n                            <app-dashboard-footer\n                              [footerDetails]=\"footerDetails\"\n                              (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n                              (deleteEvent)=\"selectElement($event)\"\n                              (submitEvent)=\"onSubmit()\"\n                              [userButtonColor]=\"'greenBg'\"\n                            ></app-dashboard-footer>\n                          </div>\n                        }\n                      </div>\n                    </div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;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:#fff;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: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-list', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            $safeNavigationMigration(element?.member_id)\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"$safeNavigationMigration(element?.group_name)\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;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:#fff;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"] }]
+            args: [{ selector: 'app-user-list', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    @if (groupsEnabled) {\n      <div\n        class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n        >\n        <button\n          (click)=\"switchTab('USER')\"\n          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\"\n          [class.active]=\"currentTab === 'USER'\"\n          >\n          USERS\n          <span\n            class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n            >{{ totalList }}</span\n            >\n          </button>\n          <button\n            id=\"switchtab\"\n            (click)=\"switchTab('GROUP')\"\n            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\"\n            [class.active]=\"currentTab === 'GROUP'\"\n            >\n            USER GROUPS\n            <span\n              id=\"groupscount\"\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{ totalgroups }}</span\n              >\n            </button>\n          </div>\n        }\n\n        <div class=\"user-list-search vx-mb-2\">\n          <i class=\"icons\">&#xe90b;</i>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n            (keyup.enter)=\"setSearchValue()\"\n            (focusout)=\"setSearchValue()\"\n            />\n        </div>\n\n        @if (currentTab === 'USER') {\n          @if (totalPages > 1) {\n            <div\n              class=\"vx-d-flex vx-align-center vx-justify-end\"\n              >\n              @if (totalPages > 1 && searchList.length > 1) {\n                <div\n                  class=\"pagination-box\"\n                  >\n                  <app-pagination\n                    (paginationFilter)=\"paginationFilter($event)\"\n                    [limit]=\"limit\"\n                    [totalPages]=\"totalPages\"\n                    [totalList]=\"totalList\"\n                  ></app-pagination>\n                </div>\n              }\n            </div>\n          }\n          @if (searchList.length !== 0) {\n            <div class=\"user-list-body-top\">\n              @if (!searchValue && searchList.length > 1) {\n                <app-cs-checkbox\n                  [ngValue]=\"selectedList.length == totalList\"\n                  (ngValueChange)=\"selectAllUsers($event)\"\n                  >\n                  <strong>{{\n                    selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n                  }}</strong>\n                </app-cs-checkbox>\n              }\n              @if (searchValue && searchList.length > 1) {\n                <app-cs-checkbox\n                  [ngValue]=\"checkSelectAll()\"\n                  (ngValueChange)=\"selectAll($event)\"\n                  >\n                  <strong>{{\n                    selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n                  }}</strong>\n                </app-cs-checkbox>\n              }\n            </div>\n          }\n          <div class=\"list-of-user\">\n            <div\n              class=\"selection-list vx-mb-4\"\n              [class.with-group]=\"groupsEnabled\"\n              [class.with-noData]=\"searchList.length == 0\"\n              [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n              >\n              @if (searchList.length !== 0) {\n                <ul>\n                  @for (data of searchList; track data; let i = $index) {\n                    <li>\n                      <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                        (ngValueChange)=\"selectElement(data)\"\n                        [arTooltip]=\"data[listDetails.tooltipKey]\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                        >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n                        >\n                      </li>\n                    }\n                  </ul>\n                }\n                @if (!vLoader && searchList.length == 0) {\n                  <app-no-data\n                    [noDataImage]=\"ASSETS.search_data\"\n                    [noDataText]=\"'No data to display'\"\n                  ></app-no-data>\n                }\n              </div>\n              @if (vLoader) {\n                <app-loader-inline></app-loader-inline>\n              }\n            </div>\n          }\n\n          @if (currentTab === 'GROUP' && groupsEnabled) {\n            @if (groupdata; as groups) {\n              @if (true) {\n                <div class=\"vx-d-flex vx-align-center vx-justify-end\">\n                  @if (total_group_pages > 1) {\n                    <div class=\"pagination-box\">\n                      <app-pagination\n                        (paginationFilter)=\"paginationFilter($event)\"\n                        [limit]=\"limit\"\n                        [totalPages]=\"total_group_pages\"\n                        [totalList]=\"totalgroups\"\n                      ></app-pagination>\n                    </div>\n                  }\n                </div>\n              }\n              @if (true) {\n                <div\n                  class=\"user-list-mid vx-mb-4\"\n                  [class.with-pagination]=\"total_group_pages > 1\"\n                  >\n                  @if (groups?.length > 0) {\n                    <div class=\"user-list-select vx-mb-4\">\n                      @if (!searchValue && groups.length > 1) {\n                        <app-cs-checkbox\n                          [disabled]=\"false\"\n                          [ngValue]=\"selectedgroupList.length == totalgroups\"\n                          (ngValueChange)=\"selectAllGroups($event)\"\n                          >\n                          <div\n                            class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                            >\n                            {{\n                            selectedgroupList.length == totalgroups\n                            ? \"Deselect All\"\n                            : \"Select All\"\n                            }}\n                          </div>\n                        </app-cs-checkbox>\n                      }\n                      @if (searchValue && groups.length > 1) {\n                        <app-cs-checkbox\n                          [disabled]=\"false\"\n                          [ngValue]=\"checkSelectAllGroups()\"\n                          (ngValueChange)=\"selectAllsearchgroups($event)\"\n                          >\n                          <div\n                            class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                            >\n                            {{\n                            selectedgroupList.length == totalgroups\n                            ? \"Deselect All\"\n                            : \"Select All\"\n                            }}\n                          </div>\n                        </app-cs-checkbox>\n                      }\n                    </div>\n                    <div class=\"user-list-item\">\n                      <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                        @for (data of groups; track data; let i = $index) {\n                          <li\n                            class=\"vx-mb-4\"\n                            >\n                            <app-cs-checkbox\n                              (ngValueChange)=\"selectGroupElement(data)\"\n                              [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                              >\n                              <div class=\"user-name vx-d-flex vx-align-center\">\n                                <div\n                                  class=\"group-name\"\n                                  [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                                  placement=\"bottom-left\"\n                                  delay=\"0\"\n                                  [tooltipMandatory]=\"true\"\n                                  >\n                                  {{ data[listDetails.displayGroupKey] }}\n                                </div>\n                                <span\n                                  id=\"usersofgroup\"\n                                  class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                                  >{{ data[\"associatedUsers\"].length }}\n                                  {{\n                                  data[\"associatedUsers\"].length > 1\n                                  ? \"USERS\"\n                                  : \"USER\"\n                                  }}</span\n                                  >\n                                </div>\n                              </app-cs-checkbox>\n                            </li>\n                          }\n                        </ul>\n                      </div>\n                    }\n                    @if (groups?.length == 0 && !vLoaderGroups) {\n                      <app-no-data\n                        [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n                      ></app-no-data>\n                    }\n                    @if (vLoaderGroups) {\n                      <app-loader-inline></app-loader-inline>\n                    }\n                  </div>\n                }\n              }\n            }\n\n            @if (groupsEnabled) {\n              <div class=\"user-floating-bar\">\n                <div\n                  class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n                  >\n                  <div class=\"left vx-d-flex vx-align-center\">\n                    @if (selectedList?.length) {\n                      <button\n                        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\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                        >\n                        {{ selectedList?.length }}\n                      </button>\n                    }\n                    <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n                      @if (selectedList?.length === 1) {\n                        <span\n                          >User\n                          {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n                          >\n                        }\n                        @if (selectedList?.length > 1) {\n                          <span\n                            >Users\n                            {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n                            >\n                          }\n                        </div>\n                        @if (selectedgroupList?.length) {\n                          <button\n                            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\"\n                            appPopover\n                            (click)=\"groupCount.popover()\"\n                            placement=\"left\"\n                            >\n                            {{ selectedgroupList?.length }}\n                          </button>\n                        }\n                        <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n                          @if (selectedgroupList?.length === 1) {\n                            <span\n                              >User Group selected</span\n                              >\n                            }\n                            @if (selectedgroupList?.length > 1) {\n                              <span\n                                >User Groups selected</span\n                                >\n                              }\n                            </div>\n                            <app-popover #userCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (element of selectedList; track element) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span\n                                          class=\"value\"\n                                          [arTooltip]=\"element.member_name\"\n                                          placement=\"bottom-left\"\n                                          delay=\"0\"\n                                          type=\"black\"\n                                          [tooltipMandatory]=\"false\"\n                                          >\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            $safeNavigationMigration(element?.member_id)\n                                            )\n                                            ) {\n                                            <i\n                                              class=\"icons cross-icon\"\n                                              (click)=\"selectElement(element)\"\n                                              >&#xe90d;</i\n                                              >\n                                            }\n                                            {{ element.member_name }}\n                                          </span>\n                                        </div>\n                                      </li>\n                                    }\n                                  </ul>\n                                </div>\n                              </app-popover>\n                              <app-popover #groupCount [dontCloseonClick]=\"true\">\n                                <div class=\"action-list\">\n                                  <ul class=\"action-item\">\n                                    @for (element of selectedgroupList; track element) {\n                                      <li>\n                                        <div class=\"avatar-card\">\n                                          <span\n                                            class=\"value\"\n                                            [arTooltip]=\"$safeNavigationMigration(element?.group_name)\"\n                                            placement=\"bottom-left\"\n                                            delay=\"0\"\n                                            type=\"black\"\n                                            [tooltipMandatory]=\"false\"\n                                            >\n                                            <i\n                                              class=\"icons cross-icon\"\n                                              (click)=\"selectGroupElement(element)\"\n                                              >&#xe90d;</i\n                                              >\n                                              {{ element?.group_name }}\n                                            </span>\n                                          </div>\n                                        </li>\n                                      }\n                                    </ul>\n                                  </div>\n                                </app-popover>\n                              </div>\n                              <div class=\"right vx-d-flex vx-align-center\">\n                                <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n                                <button [disabled]=\"false\" (click)=\"onSubmit()\">\n                                  Next <i class=\"icons\">&#xe91e;</i>\n                                </button>\n                              </div>\n                            </div>\n                          </div>\n                        }\n\n                        @if (!groupsEnabled) {\n                          <div class=\"user-list-footer\">\n                            <app-dashboard-footer\n                              [footerDetails]=\"footerDetails\"\n                              (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n                              (deleteEvent)=\"selectElement($event)\"\n                              (submitEvent)=\"onSubmit()\"\n                              [userButtonColor]=\"'greenBg'\"\n                            ></app-dashboard-footer>\n                          </div>\n                        }\n                      </div>\n                    </div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;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:#fff;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"] }]
         }], ctorParameters: () => [{ type: PaginationService }, { type: CreateDashboardService }], propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
@@ -3125,11 +3125,11 @@ class ResponsibilityCenterComponent {
         this.closeRcList.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: ResponsibilityCenterComponent, isStandalone: false, 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\">\n  <div\n    class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"isAllSelected\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            isAllSelected ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"!!selectedIdLookup[rc.item_id]\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ResponsibilityCenterComponent, isStandalone: false, 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\">\n  <div\n    class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n        />\n    </div>\n\n    @if (responsibilityCentersList | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"isAllSelected\"\n            (ngValueChange)=\"selectAll($event)\"\n            >\n            <strong>{{\n              isAllSelected ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <ul class=\"responsibility-center-list\">\n          @for (rc of searchList; track rc; let i = $index) {\n            <li>\n              <app-cs-checkbox\n                [ngValue]=\"!!selectedIdLookup[rc.item_id]\"\n                (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n                >\n                <ul class=\"responsibility-center-list-name\">\n                  @for (entity of rc.rc_name; track entity; let j = $index) {\n                    <li\n                      [arTooltip]=\"entity\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >\n                      @if (j !== 0) {\n                        <i class=\"icons\">&#xe910;</i>\n                      }\n                      {{ entity }}\n                      <!-- <span class=\"name\">{{entity}}</span> -->\n                    </li>\n                  }\n                </ul>\n              </app-cs-checkbox>\n            </li>\n          }\n        </ul>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;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: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-responsibility-center', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"isAllSelected\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            isAllSelected ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"!!selectedIdLookup[rc.item_id]\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;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"] }]
+            args: [{ selector: 'app-responsibility-center', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n        />\n    </div>\n\n    @if (responsibilityCentersList | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"isAllSelected\"\n            (ngValueChange)=\"selectAll($event)\"\n            >\n            <strong>{{\n              isAllSelected ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <ul class=\"responsibility-center-list\">\n          @for (rc of searchList; track rc; let i = $index) {\n            <li>\n              <app-cs-checkbox\n                [ngValue]=\"!!selectedIdLookup[rc.item_id]\"\n                (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n                >\n                <ul class=\"responsibility-center-list-name\">\n                  @for (entity of rc.rc_name; track entity; let j = $index) {\n                    <li\n                      [arTooltip]=\"entity\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >\n                      @if (j !== 0) {\n                        <i class=\"icons\">&#xe910;</i>\n                      }\n                      {{ entity }}\n                      <!-- <span class=\"name\">{{entity}}</span> -->\n                    </li>\n                  }\n                </ul>\n              </app-cs-checkbox>\n            </li>\n          }\n        </ul>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;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"] }]
         }], ctorParameters: () => [], propDecorators: { saveSelectedList: [{
                 type: Output
             }], closeRcList: [{
@@ -4681,11 +4681,11 @@ class CreateDashboardComponent {
         this.openedDatePicker = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CreateDashboardComponent, isStandalone: false, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", dashboardDetails: "dashboardDetails", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($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>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of $safeNavigationMigration(dashboardForm?.selectedViewers)\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(user?.member_name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of $safeNavigationMigration(dashboardForm?.selectedResponsibilityCenters)\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rc?.item_name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rCategory?.name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\n                  displayed to users. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedFromDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedToDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width:1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::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:#fff;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 (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:#fff;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{position:relative;z-index:1;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 dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::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:2}::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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side 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}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.VcomplyEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { 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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CreateDashboardComponent, isStandalone: false, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", dashboardDetails: "dashboardDetails", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($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>\n@if (!openConfigureWidgets) {\n  <div class=\"create-dashboard\">\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n      @if (activeSelector && activeSelector !== 'name') {\n        <div class=\"more-option\">\n          @if (activeSelector === 'whoCanView') {\n            <app-user-list\n              (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n              [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n            [feature]=\"feature\"></app-user-list>\n          }\n          @if (activeSelector === 'rcList') {\n            <app-responsibility-center\n              [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n              (closeRcList)=\"activateSelector('', false)\">\n            </app-responsibility-center>\n          }\n          <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n          [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n          [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n        @if (activeSelector === 'responsibilityCategories') {\n          <app-list-container list\n            (close)=\"activateSelector('', false)\">\n            <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n            [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n              <div class=\"left-side vx-fs-12 vx-d-flex\">\n                @if (allProgamSelected?.length > 0) {\n                  <button\n                    class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                    {{ allProgamSelected.length }}\n                  </button>\n                  <span class=\"selected-text\">\n                    Program\n                    {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                  Selected</span>\n                }\n              </div>\n              <div class=\"right-side vx-d-flex\">\n                <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n                <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n                  Next <i class=\"icons\">&#xe91e;</i>\n                </button>\n              </div>\n            </div>\n          </app-list-container>\n        }\n      </div>\n    }\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      @if (vLoader) {\n        <app-loader-inline></app-loader-inline>\n      }\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              @if (\n                !dashboardForm.dashboardName || activeSelector === 'name'\n                ) {\n                <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              }\n              @if (dashboardForm.dashboardName && activeSelector !== 'name') {\n                <svg class=\"checkIcon\"\n                  xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                </svg>\n              }\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                  <div class=\"vx-input-group\">\n                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                      [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                      (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n                    @if (dashboardForm?.dashboardName?.length > 0) {\n                      <span class=\"counter\">{{ 30 -\n                      dashboardForm.dashboardName.length }}</span>\n                    }\n                  </div>\n                  @if (\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                    !dashboardForm?.dashboardName)\n                    ) {\n                    <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                      {{\n                      dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                      }}\n                    </p>\n                  }\n                  <div class=\"vx-input-group vx-mt-2\">\n                    <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                    @if (dashboardForm?.dashboardDescriptionText?.length > 0) {\n                      <span class=\"counter\">{{\n                        250 -\n                        ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount)\n                      }}</span>\n                    }\n                  </div>\n                  @if (\n                    submitted &&\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount) > 250\n                    ) {\n                    <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                      You have exceeded the maximum character limit of 250\n                      characters.\n                    </p>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- Dashboard Display Criteria  -->\n            <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n              Dashboard Display Criteria\n            </span>\n            <app-information-block></app-information-block>\n            <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n              <div class=\"image\">\n                @if (\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                  ) {\n                  <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                }\n                @if (\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                  ) {\n                  <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                  </svg>\n                }\n              </div>\n              <div class=\"form\">\n                <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                    can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                    @if (dashboardForm?.selectedViewers?.length == 0) {\n                      <div\n                        class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                        (click)=\"activateSelector('whoCanView', true)\">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Who can view this dashboard?\n                        </div>\n                      </div>\n                    }\n                    @if (dashboardForm?.selectedViewers?.length > 0) {\n                      <div\n                        class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @if (!groupsEnabled) {\n                          <ng-container id=\"onlyuserslist\">\n                            @for (\n                              user of dashboardForm?.selectedViewers?.slice(0, 1)\n                              ; track\n                              user) {\n                              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                                @if (\n                                  !listDetails.nonRemovableUsersList.includes(\n                                  user.member_id\n                                  )\n                                  ) {\n                                  <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                                }\n                                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                                }}</span>\n                                @if (\n                                  dashboardForm?.selectedViewers?.length > 1 &&\n                                  !groupsEnabled\n                                  ) {\n                                  <button\n                                    class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                    appPopover (click)=\"userList.popover()\" placement=\"left\">\n                                    +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                                  </button>\n                                }\n                              </div>\n                            }\n                            <app-popover #userList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    user of $safeNavigationMigration(dashboardForm?.selectedViewers)\n                                    | slice : 1; track\n                                    user; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(user?.member_name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            user.member_id\n                                            ) && !groupsEnabled\n                                            ) {\n                                            <i class=\"icons cross-icon\" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                          }\n                                          {{ user?.member_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </ng-container>\n                        }\n                        @if (groupsEnabled) {\n                          <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                              <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                              <button\n                                class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                                {{ dashboardForm?.selectedViewers?.length }}\n                              </button>\n                            </div>\n                            @if (\n                              dashboardForm?.selectedGroup?.length &&\n                              dashboardForm?.selectedViewers?.length\n                              ) {\n                              <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\n                            }\n                            @if (dashboardForm?.selectedGroup?.length) {\n                              <div id=\"usersandgroups\"\n                                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                                <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                                <button\n                                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                  appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                                  {{ dashboardForm?.selectedGroup?.length }}\n                                </button>\n                              </div>\n                            }\n                            <app-popover #userCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (data of dashboardForm?.selectedViewers; track data) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            data.member_id\n                                            )\n                                            ) {\n                                            <i class=\"icons cross-icon\" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                          }\n                                          {{ data.member_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                            <app-popover #groupCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (data of dashboardForm?.selectedGroup; track data) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                          {{ data.group_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'whoCanView') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('whoCanView', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n                <div class=\"image\">\n                  @if (\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                    activeSelector === 'rcList'\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                    activeSelector !== 'rcList'\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                      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\n                    CENTER(S)</label>\n                    @if (\n                      dashboardForm?.selectedResponsibilityCenters?.length == 0\n                      ) {\n                      <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Select the Responsibility Center(s) that you would like<br />displayed\n                          in the Dashboard, if any.\n                        </div>\n                      </div>\n                    }\n                    @if (\n                      dashboardForm?.selectedResponsibilityCenters?.length > 0\n                      ) {\n                      <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @for (\n                          rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                          0,\n                          1\n                          )\n                          ; track\n                          rc) {\n                          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                            @if (\n                              dashboardForm?.selectedResponsibilityCenters?.length > 1\n                              ) {\n                              <button\n                                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                                +{{\n                                dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                                .length\n                                }}\n                              </button>\n                            }\n                            <app-popover #rcList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    rc of $safeNavigationMigration(dashboardForm?.selectedResponsibilityCenters)\n                                    | slice : 1; track\n                                    rc; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rc?.item_name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                          {{ rc?.item_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'rcList') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('rcList', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n                <div class=\"image\">\n                  @if (\n                    allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    allProgamSelected?.length > 0 &&\n                    activeSelector !== 'responsibilityCategories'\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                    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>\n                    @if (\n                      allProgamSelected?.length == 0\n                      ) {\n                      <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Select the Program(s) that you would like displayed in\n                          the<br />Dashboard, if any.\n                        </div>\n                      </div>\n                    }\n                    @if (\n                      allProgamSelected?.length > 0\n                      ) {\n                      <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @for (\n                          rCategory of allProgamSelected?.slice(\n                          0,\n                          1\n                          )\n                          ; track\n                          rCategory) {\n                          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                            (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                              placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                            }}</span>\n                            @if (\n                              allProgamSelected\n                              ?.length > 1\n                              ) {\n                              <button\n                                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                                +{{\n                                allProgamSelected?.slice(\n                                1\n                                ).length\n                                }}\n                              </button>\n                            }\n                            <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    rCategory of allProgamSelected\n                                    | slice : 1; track\n                                    rCategory; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rCategory?.name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                          {{ rCategory?.name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'responsibilityCategories') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('responsibilityCategories', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Timeframe -->\n              <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n                <div class=\"image\">\n                  @if (\n                    !dashboardForm?.selectedFromDate ||\n                    !dashboardForm?.selectedToDate\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    dashboardForm?.selectedFromDate &&\n                    dashboardForm?.selectedToDate\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                    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>\n                    <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\n                      Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\n                      displayed to users. If no timeframe is selected, the information\n                    will be displayed permanently.</label>\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\n                      <div class=\"date-select\">\n                        <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedFromDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\n                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                        @if (datePickerOverlay) {\n                          <div class=\"overlay\" (click)=\"closeFromDatePicker()\"></div>\n                        }\n                      </div>\n                      @if (!hideToDate) {\n                        <div class=\"date-select\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                          <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedToDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\n                          <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\"></div>\n                          }\n                        </div>\n                      }\n                    </div>\n                    @if (\n                      submitted &&\n                      dashboardForm.selectedFromDate &&\n                      !dashboardForm.selectedToDate\n                      ) {\n                      <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                        Select a time-frame.\n                      </p>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Email Summary -->\n              <!-- <div\n              class=\"form-group-row\"\n              [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n              >\n              <div class=\"image\">\n                <img\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                  alt=\"\"\n                  width=\"36\"\n                  height=\"36\"\n                  />\n                <svg\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"checkIcon\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 52 52\"\n                  >\n                  <circle\n                    class=\"checkIcon__circle\"\n                    cx=\"26\"\n                    cy=\"26\"\n                    r=\"25\"\n                    fill=\"none\"\n                    />\n                  <path\n                    class=\"checkIcon__check\"\n                    fill=\"none\"\n                    d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                    />\n                </svg>\n              </div>\n              <div class=\"form\">\n                <div class=\"vx-form-group vx-d-block\">\n                  <label\n                    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\"\n                    >Email Summaries</label\n                    >\n                    <label class=\"vx-control-panel-sub-label\"\n                      >If you would like to send a summary of this Dashboard, please\n                      select a frequency(By default VComply sends a weekly\n                      Summary).</label\n                      >\n                      <div\n                        *ngIf=\"!dashboardForm.frequencyMessage\"\n                        class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                        (click)=\"activateSelector('frequency', true)\"\n                        >\n                        <div\n                          class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                          >\n                          Email Summaries\n                        </div>\n                      </div>\n                      <div\n                        *ngIf=\"dashboardForm.frequencyMessage\"\n                        class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                        >\n                        <div\n                          class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                          [arTooltip]=\"dashboardForm.frequencyMessage\"\n                          placement=\"bottom-left\"\n                          type=\"black\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"false\"\n                          [innerHTML]=\"dashboardForm.frequencyMessage\"\n                        ></div>\n                        <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                          class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                          (click)=\"activateSelector('frequency', true)\"\n                          >\n                          <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div> -->\n              </div>\n              <div class=\"button-block\">\n                <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n                  (click)=\"configureDashboard()\">\n                  Next: Configure Widgets\n                </button>\n              </div>\n            </div>\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n              (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n              [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n              <i class=\"icons\">&#xe93f;</i>\n            </button>\n            @if (\n              submitted &&\n              dashboardForm?.selectedResponsibilityCenters?.length == 0\n              ) {\n              <div class=\"global-confirmation-alert\">\n                <div class=\"global-confirmation-alert-top\">\n                  <span class=\"icon-block\">\n                    <i class=\"icons\">&#xe930;</i>\n                  </span>\n                  @if (showRiskCategory) {\n                    <p class=\"text\">\n                      Select a Responsibility Center or Risk Category.\n                    </p>\n                  }\n                  @if (!showRiskCategory) {\n                    <p class=\"text\">\n                      Select a Responsibility Center.\n                    </p>\n                  }\n                </div>\n                <div class=\"global-confirmation-alert-bottom\">\n                  <p class=\"message\"></p>\n                  <div class=\"button-group\">\n                    <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n                      OKAY\n                    </button>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (isSmiley) {\n      <app-smiley-dialog [message]=\"smileyMessage\"></app-smiley-dialog>\n    }\n\n    @if (openConfigureWidgets) {\n      <app-configure-widgets [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n        [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n        (widgetsDataModified)=\"setSelectedWidgets($event)\"\n      (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>\n    }", 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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width:1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::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:#fff;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 (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:#fff;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{position:relative;z-index:1;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 dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::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:2}::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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side 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}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"], dependencies: [{ kind: "component", type: i6.VcomplyEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i16.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i2.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { 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: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of $safeNavigationMigration(dashboardForm?.selectedViewers)\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(user?.member_name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of $safeNavigationMigration(dashboardForm?.selectedResponsibilityCenters)\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rc?.item_name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rCategory?.name)\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\n                  displayed to users. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedFromDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedToDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width:1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::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:#fff;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 (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:#fff;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{position:relative;z-index:1;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 dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::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:2}::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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side 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}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<app-snack-bar></app-snack-bar>\n@if (!openConfigureWidgets) {\n  <div class=\"create-dashboard\">\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n      @if (activeSelector && activeSelector !== 'name') {\n        <div class=\"more-option\">\n          @if (activeSelector === 'whoCanView') {\n            <app-user-list\n              (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n              [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n            [feature]=\"feature\"></app-user-list>\n          }\n          @if (activeSelector === 'rcList') {\n            <app-responsibility-center\n              [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n              (closeRcList)=\"activateSelector('', false)\">\n            </app-responsibility-center>\n          }\n          <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n          [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n          [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n        @if (activeSelector === 'responsibilityCategories') {\n          <app-list-container list\n            (close)=\"activateSelector('', false)\">\n            <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n            [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n              <div class=\"left-side vx-fs-12 vx-d-flex\">\n                @if (allProgamSelected?.length > 0) {\n                  <button\n                    class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                    {{ allProgamSelected.length }}\n                  </button>\n                  <span class=\"selected-text\">\n                    Program\n                    {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                  Selected</span>\n                }\n              </div>\n              <div class=\"right-side vx-d-flex\">\n                <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n                <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n                  Next <i class=\"icons\">&#xe91e;</i>\n                </button>\n              </div>\n            </div>\n          </app-list-container>\n        }\n      </div>\n    }\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      @if (vLoader) {\n        <app-loader-inline></app-loader-inline>\n      }\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              @if (\n                !dashboardForm.dashboardName || activeSelector === 'name'\n                ) {\n                <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              }\n              @if (dashboardForm.dashboardName && activeSelector !== 'name') {\n                <svg class=\"checkIcon\"\n                  xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                </svg>\n              }\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                  <div class=\"vx-input-group\">\n                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                      [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                      (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n                    @if (dashboardForm?.dashboardName?.length > 0) {\n                      <span class=\"counter\">{{ 30 -\n                      dashboardForm.dashboardName.length }}</span>\n                    }\n                  </div>\n                  @if (\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                    !dashboardForm?.dashboardName)\n                    ) {\n                    <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                      {{\n                      dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                      }}\n                    </p>\n                  }\n                  <div class=\"vx-input-group vx-mt-2\">\n                    <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                    @if (dashboardForm?.dashboardDescriptionText?.length > 0) {\n                      <span class=\"counter\">{{\n                        250 -\n                        ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount)\n                      }}</span>\n                    }\n                  </div>\n                  @if (\n                    submitted &&\n                    ($safeNavigationMigration(dashboardForm?.dashboardDescriptionText) | textCount) > 250\n                    ) {\n                    <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                      You have exceeded the maximum character limit of 250\n                      characters.\n                    </p>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- Dashboard Display Criteria  -->\n            <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n              Dashboard Display Criteria\n            </span>\n            <app-information-block></app-information-block>\n            <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n              <div class=\"image\">\n                @if (\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                  ) {\n                  <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                }\n                @if (\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                  ) {\n                  <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                  </svg>\n                }\n              </div>\n              <div class=\"form\">\n                <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                    can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                    @if (dashboardForm?.selectedViewers?.length == 0) {\n                      <div\n                        class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                        (click)=\"activateSelector('whoCanView', true)\">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Who can view this dashboard?\n                        </div>\n                      </div>\n                    }\n                    @if (dashboardForm?.selectedViewers?.length > 0) {\n                      <div\n                        class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @if (!groupsEnabled) {\n                          <ng-container id=\"onlyuserslist\">\n                            @for (\n                              user of dashboardForm?.selectedViewers?.slice(0, 1)\n                              ; track\n                              user) {\n                              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                                @if (\n                                  !listDetails.nonRemovableUsersList.includes(\n                                  user.member_id\n                                  )\n                                  ) {\n                                  <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                                }\n                                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                                }}</span>\n                                @if (\n                                  dashboardForm?.selectedViewers?.length > 1 &&\n                                  !groupsEnabled\n                                  ) {\n                                  <button\n                                    class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                    appPopover (click)=\"userList.popover()\" placement=\"left\">\n                                    +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                                  </button>\n                                }\n                              </div>\n                            }\n                            <app-popover #userList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    user of $safeNavigationMigration(dashboardForm?.selectedViewers)\n                                    | slice : 1; track\n                                    user; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(user?.member_name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            user.member_id\n                                            ) && !groupsEnabled\n                                            ) {\n                                            <i class=\"icons cross-icon\" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                          }\n                                          {{ user?.member_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </ng-container>\n                        }\n                        @if (groupsEnabled) {\n                          <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                              <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                              <button\n                                class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                                {{ dashboardForm?.selectedViewers?.length }}\n                              </button>\n                            </div>\n                            @if (\n                              dashboardForm?.selectedGroup?.length &&\n                              dashboardForm?.selectedViewers?.length\n                              ) {\n                              <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\n                            }\n                            @if (dashboardForm?.selectedGroup?.length) {\n                              <div id=\"usersandgroups\"\n                                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                                <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                                <button\n                                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                  appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                                  {{ dashboardForm?.selectedGroup?.length }}\n                                </button>\n                              </div>\n                            }\n                            <app-popover #userCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (data of dashboardForm?.selectedViewers; track data) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          @if (\n                                            !listDetails.nonRemovableUsersList.includes(\n                                            data.member_id\n                                            )\n                                            ) {\n                                            <i class=\"icons cross-icon\" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                          }\n                                          {{ data.member_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                            <app-popover #groupCount [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (data of dashboardForm?.selectedGroup; track data) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                          {{ data.group_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'whoCanView') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('whoCanView', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n                <div class=\"image\">\n                  @if (\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                    activeSelector === 'rcList'\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                    activeSelector !== 'rcList'\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                      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\n                    CENTER(S)</label>\n                    @if (\n                      dashboardForm?.selectedResponsibilityCenters?.length == 0\n                      ) {\n                      <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Select the Responsibility Center(s) that you would like<br />displayed\n                          in the Dashboard, if any.\n                        </div>\n                      </div>\n                    }\n                    @if (\n                      dashboardForm?.selectedResponsibilityCenters?.length > 0\n                      ) {\n                      <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @for (\n                          rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                          0,\n                          1\n                          )\n                          ; track\n                          rc) {\n                          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                            @if (\n                              dashboardForm?.selectedResponsibilityCenters?.length > 1\n                              ) {\n                              <button\n                                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                                +{{\n                                dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                                .length\n                                }}\n                              </button>\n                            }\n                            <app-popover #rcList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    rc of $safeNavigationMigration(dashboardForm?.selectedResponsibilityCenters)\n                                    | slice : 1; track\n                                    rc; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rc?.item_name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                          <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                          {{ rc?.item_name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'rcList') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('rcList', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n                <div class=\"image\">\n                  @if (\n                    allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    allProgamSelected?.length > 0 &&\n                    activeSelector !== 'responsibilityCategories'\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                    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>\n                    @if (\n                      allProgamSelected?.length == 0\n                      ) {\n                      <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                        <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                          Select the Program(s) that you would like displayed in\n                          the<br />Dashboard, if any.\n                        </div>\n                      </div>\n                    }\n                    @if (\n                      allProgamSelected?.length > 0\n                      ) {\n                      <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                        @for (\n                          rCategory of allProgamSelected?.slice(\n                          0,\n                          1\n                          )\n                          ; track\n                          rCategory) {\n                          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                            (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                              placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                            }}</span>\n                            @if (\n                              allProgamSelected\n                              ?.length > 1\n                              ) {\n                              <button\n                                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                                appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                                +{{\n                                allProgamSelected?.slice(\n                                1\n                                ).length\n                                }}\n                              </button>\n                            }\n                            <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                              <div class=\"action-list\">\n                                <ul class=\"action-item\">\n                                  @for (\n                                    rCategory of allProgamSelected\n                                    | slice : 1; track\n                                    rCategory; let j = $index) {\n                                    <li>\n                                      <div class=\"avatar-card\">\n                                        <span class=\"value\" [arTooltip]=\"$safeNavigationMigration(rCategory?.name)\" placement=\"bottom-left\" delay=\"0\"\n                                          type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                          {{ rCategory?.name }}\n                                        </span>\n                                      </div>\n                                    </li>\n                                  }\n                                </ul>\n                              </div>\n                            </app-popover>\n                          </div>\n                        }\n                        @if (activeSelector !== 'responsibilityCategories') {\n                          <button\n                            class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                            (click)=\"activateSelector('responsibilityCategories', true)\">\n                            <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Timeframe -->\n              <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n                <div class=\"image\">\n                  @if (\n                    !dashboardForm?.selectedFromDate ||\n                    !dashboardForm?.selectedToDate\n                    ) {\n                    <img [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n                  }\n                  @if (\n                    dashboardForm?.selectedFromDate &&\n                    dashboardForm?.selectedToDate\n                    ) {\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                      <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                      <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n                    </svg>\n                  }\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                    <label\n                    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>\n                    <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\n                      Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\n                      displayed to users. If no timeframe is selected, the information\n                    will be displayed permanently.</label>\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\n                      <div class=\"date-select\">\n                        <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedFromDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\n                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                        @if (datePickerOverlay) {\n                          <div class=\"overlay\" (click)=\"closeFromDatePicker()\"></div>\n                        }\n                      </div>\n                      @if (!hideToDate) {\n                        <div class=\"date-select\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                          <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        $safeNavigationMigration(dashboardForm?.selectedToDate) | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\n                          <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\"></div>\n                          }\n                        </div>\n                      }\n                    </div>\n                    @if (\n                      submitted &&\n                      dashboardForm.selectedFromDate &&\n                      !dashboardForm.selectedToDate\n                      ) {\n                      <p class=\"vx-txt-error\" [appScrollInView]=\"true\">\n                        Select a time-frame.\n                      </p>\n                    }\n                  </div>\n                </div>\n              </div>\n              <!-- Email Summary -->\n              <!-- <div\n              class=\"form-group-row\"\n              [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n              >\n              <div class=\"image\">\n                <img\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                  alt=\"\"\n                  width=\"36\"\n                  height=\"36\"\n                  />\n                <svg\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"checkIcon\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 52 52\"\n                  >\n                  <circle\n                    class=\"checkIcon__circle\"\n                    cx=\"26\"\n                    cy=\"26\"\n                    r=\"25\"\n                    fill=\"none\"\n                    />\n                  <path\n                    class=\"checkIcon__check\"\n                    fill=\"none\"\n                    d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                    />\n                </svg>\n              </div>\n              <div class=\"form\">\n                <div class=\"vx-form-group vx-d-block\">\n                  <label\n                    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\"\n                    >Email Summaries</label\n                    >\n                    <label class=\"vx-control-panel-sub-label\"\n                      >If you would like to send a summary of this Dashboard, please\n                      select a frequency(By default VComply sends a weekly\n                      Summary).</label\n                      >\n                      <div\n                        *ngIf=\"!dashboardForm.frequencyMessage\"\n                        class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                        (click)=\"activateSelector('frequency', true)\"\n                        >\n                        <div\n                          class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                          >\n                          Email Summaries\n                        </div>\n                      </div>\n                      <div\n                        *ngIf=\"dashboardForm.frequencyMessage\"\n                        class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                        >\n                        <div\n                          class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                          [arTooltip]=\"dashboardForm.frequencyMessage\"\n                          placement=\"bottom-left\"\n                          type=\"black\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"false\"\n                          [innerHTML]=\"dashboardForm.frequencyMessage\"\n                        ></div>\n                        <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                          class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                          (click)=\"activateSelector('frequency', true)\"\n                          >\n                          <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div> -->\n              </div>\n              <div class=\"button-block\">\n                <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n                  (click)=\"configureDashboard()\">\n                  Next: Configure Widgets\n                </button>\n              </div>\n            </div>\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n              (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n              [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n              <i class=\"icons\">&#xe93f;</i>\n            </button>\n            @if (\n              submitted &&\n              dashboardForm?.selectedResponsibilityCenters?.length == 0\n              ) {\n              <div class=\"global-confirmation-alert\">\n                <div class=\"global-confirmation-alert-top\">\n                  <span class=\"icon-block\">\n                    <i class=\"icons\">&#xe930;</i>\n                  </span>\n                  @if (showRiskCategory) {\n                    <p class=\"text\">\n                      Select a Responsibility Center or Risk Category.\n                    </p>\n                  }\n                  @if (!showRiskCategory) {\n                    <p class=\"text\">\n                      Select a Responsibility Center.\n                    </p>\n                  }\n                </div>\n                <div class=\"global-confirmation-alert-bottom\">\n                  <p class=\"message\"></p>\n                  <div class=\"button-group\">\n                    <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n                      OKAY\n                    </button>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (isSmiley) {\n      <app-smiley-dialog [message]=\"smileyMessage\"></app-smiley-dialog>\n    }\n\n    @if (openConfigureWidgets) {\n      <app-configure-widgets [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n        [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n        (widgetsDataModified)=\"setSelectedWidgets($event)\"\n      (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>\n    }", 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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width:1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width:1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::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:#fff;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 (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:#fff;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{position:relative;z-index:1;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 dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::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:2}::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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side 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}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
         }], ctorParameters: () => [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: TextCountPipe }], propDecorators: { feature: [{
                 type: Input
             }], mode: [{
@@ -4722,7 +4722,7 @@ class SafeHtmlPipe {
     transform(html) {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SafeHtmlPipe, isStandalone: false, name: "safeHtml" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SafeHtmlPipe, decorators: [{
@@ -4731,7 +4731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     name: 'safeHtml',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 // import { CsOptionComponent } from '../cs-option/cs-option.component';
 class CsSelectComponent {
@@ -4804,13 +4804,13 @@ class CsSelectComponent {
         this.dropdownToggle = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CsSelectComponent, isStandalone: false, selector: "cs-select", inputs: { dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", isRequired: "isRequired", placeholder: "placeholder" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CsSelectComponent, isStandalone: false, selector: "cs-select", inputs: { dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", isRequired: "isRequired", placeholder: "placeholder" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CsSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"selection-wrap\">\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </label>\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"selection-wrap\">\n  @if (dropdownLabel != undefined) {\n    <label class=\"label\">\n      {{ dropdownLabel }}\n      <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n      @if (isRequired) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  @if (dropdownToggle === true) {\n    <div class=\"overlay\" (click)=\"closeDropdown()\"></div>\n  }\n  @if (dropdownToggle === true) {\n    <div class=\"select-options\" #optionList (keyup.Escape)=\"closeDropdown()\"\n      (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n      [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n      <ng-content select=\"cs-option\"></ng-content>\n    </div>\n  }\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsSelectComponent, decorators: [{
             type: Component,
@@ -4820,7 +4820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                             useExisting: forwardRef(() => CsSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"selection-wrap\">\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </label>\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"selection-wrap\">\n  @if (dropdownLabel != undefined) {\n    <label class=\"label\">\n      {{ dropdownLabel }}\n      <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n      @if (isRequired) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  @if (dropdownToggle === true) {\n    <div class=\"overlay\" (click)=\"closeDropdown()\"></div>\n  }\n  @if (dropdownToggle === true) {\n    <div class=\"select-options\" #optionList (keyup.Escape)=\"closeDropdown()\"\n      (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n      [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n      <ng-content select=\"cs-option\"></ng-content>\n    </div>\n  }\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dropdownLabel: [{
                 type: Input
             }], dropdownSubLabel: [{
@@ -5080,11 +5080,11 @@ class CategoriesComponent {
         this.closeCategoriesList.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CategoriesComponent, isStandalone: false, 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\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CategoriesComponent, isStandalone: false, 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\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n        >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          @if (categoryList?.regulations?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.regulations?.selectedList?.length }}\n              {{\n              categoryList?.regulations?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n        >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          @if (categoryList?.standards?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.standards?.selectedList?.length }}\n              {{\n              categoryList?.standards?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n        >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          @if (categoryList?.internalControls?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.internalControls?.selectedList?.length }}\n              {{\n              categoryList?.internalControls?.selectedList?.length == 1\n              ? \"Program\"\n              : \"programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n        >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          @if (categoryList?.others?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.others?.selectedList?.length }}\n              {{\n              categoryList?.others?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    @if (categoryList[activeTab].list | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll(activeTab)\"\n            (ngValueChange)=\"selectAll($event, activeTab)\"\n            >\n            <strong>{{\n              checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <div\n          class=\"category-list-item vx-mb-4\"\n          [class.with-selectAll]=\"searchList.length > 1\"\n          >\n          <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n            @for (category of searchList; track category) {\n              <li class=\"vx-mb-4\">\n                <app-cs-checkbox\n                  [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n                  (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n                  >\n                  <ul class=\"categories\">\n                    @for (entity of category.category_name; track entity; let j = $index) {\n                      <li\n                        [arTooltip]=\"entity\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        >\n                        {{ entity }}\n                      </li>\n                    }\n                  </ul>\n                </app-cs-checkbox>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;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: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-categories', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;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"] }]
+            args: [{ selector: 'app-categories', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n        >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          @if (categoryList?.regulations?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.regulations?.selectedList?.length }}\n              {{\n              categoryList?.regulations?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n        >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          @if (categoryList?.standards?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.standards?.selectedList?.length }}\n              {{\n              categoryList?.standards?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n        >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          @if (categoryList?.internalControls?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.internalControls?.selectedList?.length }}\n              {{\n              categoryList?.internalControls?.selectedList?.length == 1\n              ? \"Program\"\n              : \"programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n        >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          @if (categoryList?.others?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.others?.selectedList?.length }}\n              {{\n              categoryList?.others?.selectedList?.length == 1\n              ? \"Program\"\n              : \"Programs\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    @if (categoryList[activeTab].list | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll(activeTab)\"\n            (ngValueChange)=\"selectAll($event, activeTab)\"\n            >\n            <strong>{{\n              checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <div\n          class=\"category-list-item vx-mb-4\"\n          [class.with-selectAll]=\"searchList.length > 1\"\n          >\n          <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n            @for (category of searchList; track category) {\n              <li class=\"vx-mb-4\">\n                <app-cs-checkbox\n                  [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n                  (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n                  >\n                  <ul class=\"categories\">\n                    @for (entity of category.category_name; track entity; let j = $index) {\n                      <li\n                        [arTooltip]=\"entity\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        >\n                        {{ entity }}\n                      </li>\n                    }\n                  </ul>\n                </app-cs-checkbox>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;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"] }]
         }], ctorParameters: () => [], propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
@@ -5417,7 +5417,7 @@ class FrequencyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FrequencyComponent, isStandalone: false, 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\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\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\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\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)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\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\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\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)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\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\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\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:#fff;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 (min-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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FrequencyComponent, isStandalone: false, 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\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\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\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\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)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\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\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\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)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\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\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\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:#fff;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 (min-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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FrequencyComponent, decorators: [{
             type: Component,
@@ -5463,11 +5463,11 @@ class CsSwitchComponent {
         this.ngValueChange.emit(this.ngValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CsSwitchComponent, isStandalone: false, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CsSwitchComponent, isStandalone: false, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    @if (value != undefined) {\n      <span [innerHTML]=\"value\"></span>\n    }\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n    <i class=\"vc-icons\">&#xe9f3;</i>\n  </span> -->\n</span>\n<!-- [class.last]=\"last\" -->\n@if (tooltipMessage === '' || tooltipMessage === undefined) {\n  <span class=\"switch\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n}\n@if (tooltipMessage !== '' && tooltipMessage !== undefined) {\n  <span\n    class=\"switch\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n    >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n}\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-switch', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
+            args: [{ selector: 'app-cs-switch', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    @if (value != undefined) {\n      <span [innerHTML]=\"value\"></span>\n    }\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n    <i class=\"vc-icons\">&#xe9f3;</i>\n  </span> -->\n</span>\n<!-- [class.last]=\"last\" -->\n@if (tooltipMessage === '' || tooltipMessage === undefined) {\n  <span class=\"switch\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n}\n@if (tooltipMessage !== '' && tooltipMessage !== undefined) {\n  <span\n    class=\"switch\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n    >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n}\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
@@ -5611,11 +5611,11 @@ class CsFormSelectComponent {
         this.dropdownOption = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsFormSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CsFormSelectComponent, isStandalone: false, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CsFormSelectComponent, isStandalone: false, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  @if (dropdownLabel != undefined) {\n    <label>\n      {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> @if (isRequired) {\n      <span class=\"required\">*</span>\n      }</label\n      >\n    }\n    <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n      @if (!colorProperty) {\n        <input\n          type=\"text\"\n          [class.line]=\"stylex\"\n          [placeholder]=\"placeholder\"\n          [value]=\"selectedValue | pascal\"\n          readonly\n          (click)=\"openDropdown($event)\"\n          (keyup.enter)=\"openDropdown($event)\"\n          (keyup.arrowup)=\"openDropdown($event)\"\n          (keyup.arrowdown)=\"openDropdown($event)\"\n          />\n      }\n      @if (colorProperty) {\n        <span class=\"show-label\" (click)=\"openDropdown($event)\">\n          <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n        </span>\n      }\n      <span class=\"arrow\" [class.line]=\"stylex\">\n        <i class=\"risk-icons\">&#xe919;</i>\n      </span>\n      @if (dropdownOption === true) {\n        <div class=\"overlay active\" (click)=\"closeDropdown()\"></div>\n      }\n      @if (dropdownOption === true && !colorProperty) {\n        <ul\n          class=\"list-of-option\"\n          #optionList\n          (keyup.Escape)=\"closeDropdown()\"\n          [style.top.px]=\"getTop\"\n          [style.left.px]=\"getLeft\"\n          [style.min-width.px]=\"getWidth\"\n          [style.max-width.px]=\"maxWidth\"\n          [class.active]=\"activeDoropdown\"\n          >\n          @for (data of dataList; track data) {\n            <li>\n              <label>\n                <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n                @if (displayProperty && displayProperty !== '') {\n                  <span (click)=\"closeDropdown(); selectOption(data)\" class=\"value\">{{ data[displayProperty] }}</span>\n                }\n                @if (!displayProperty || displayProperty === '') {\n                  <span (click)=\"closeDropdown(); selectOption(data)\" class=\"value\">{{ data }}</span>\n                }\n              </label>\n            </li>\n          }\n        </ul>\n      }\n      @if (dropdownOption === true && colorProperty) {\n        <ul\n          class=\"list-of-option\"\n          #optionList\n          (keyup.Escape)=\"closeDropdown()\"\n          [style.top.px]=\"getTop\"\n          [style.left.px]=\"getLeft\"\n          [style.min-width.px]=\"getWidth\"\n          [style.max-width.px]=\"maxWidth\"\n          [class.active]=\"activeDoropdown\"\n          >\n          @for (data of dataList; track data) {\n            <li>\n              <label class=\"colors\">\n                <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n                @if (displayProperty && displayProperty !== '') {\n                  <span\n                    (click)=\"selectOption(data)\"\n                    class=\"value\"\n                    [ngStyle]=\"{ color: data.segment_color }\"\n                    [style.backgroundColor]=\"data.segment_color + '1A'\"\n                    >{{ data[displayProperty] }}</span\n                    >\n                  }\n                  @if (!displayProperty || displayProperty === '') {\n                    <span\n                      (click)=\"selectOption(data)\"\n                      class=\"value\"\n                      [ngStyle]=\"{ color: data.segment_color }\"\n                      [style.backgroundColor]=\"data.segment_color + '1A'\"\n                      >{{ data }}</span\n                      >\n                    }\n                  </label>\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CsFormSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
+            args: [{ selector: 'app-cs-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  @if (dropdownLabel != undefined) {\n    <label>\n      {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> @if (isRequired) {\n      <span class=\"required\">*</span>\n      }</label\n      >\n    }\n    <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n      @if (!colorProperty) {\n        <input\n          type=\"text\"\n          [class.line]=\"stylex\"\n          [placeholder]=\"placeholder\"\n          [value]=\"selectedValue | pascal\"\n          readonly\n          (click)=\"openDropdown($event)\"\n          (keyup.enter)=\"openDropdown($event)\"\n          (keyup.arrowup)=\"openDropdown($event)\"\n          (keyup.arrowdown)=\"openDropdown($event)\"\n          />\n      }\n      @if (colorProperty) {\n        <span class=\"show-label\" (click)=\"openDropdown($event)\">\n          <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n        </span>\n      }\n      <span class=\"arrow\" [class.line]=\"stylex\">\n        <i class=\"risk-icons\">&#xe919;</i>\n      </span>\n      @if (dropdownOption === true) {\n        <div class=\"overlay active\" (click)=\"closeDropdown()\"></div>\n      }\n      @if (dropdownOption === true && !colorProperty) {\n        <ul\n          class=\"list-of-option\"\n          #optionList\n          (keyup.Escape)=\"closeDropdown()\"\n          [style.top.px]=\"getTop\"\n          [style.left.px]=\"getLeft\"\n          [style.min-width.px]=\"getWidth\"\n          [style.max-width.px]=\"maxWidth\"\n          [class.active]=\"activeDoropdown\"\n          >\n          @for (data of dataList; track data) {\n            <li>\n              <label>\n                <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n                @if (displayProperty && displayProperty !== '') {\n                  <span (click)=\"closeDropdown(); selectOption(data)\" class=\"value\">{{ data[displayProperty] }}</span>\n                }\n                @if (!displayProperty || displayProperty === '') {\n                  <span (click)=\"closeDropdown(); selectOption(data)\" class=\"value\">{{ data }}</span>\n                }\n              </label>\n            </li>\n          }\n        </ul>\n      }\n      @if (dropdownOption === true && colorProperty) {\n        <ul\n          class=\"list-of-option\"\n          #optionList\n          (keyup.Escape)=\"closeDropdown()\"\n          [style.top.px]=\"getTop\"\n          [style.left.px]=\"getLeft\"\n          [style.min-width.px]=\"getWidth\"\n          [style.max-width.px]=\"maxWidth\"\n          [class.active]=\"activeDoropdown\"\n          >\n          @for (data of dataList; track data) {\n            <li>\n              <label class=\"colors\">\n                <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n                @if (displayProperty && displayProperty !== '') {\n                  <span\n                    (click)=\"selectOption(data)\"\n                    class=\"value\"\n                    [ngStyle]=\"{ color: data.segment_color }\"\n                    [style.backgroundColor]=\"data.segment_color + '1A'\"\n                    >{{ data[displayProperty] }}</span\n                    >\n                  }\n                  @if (!displayProperty || displayProperty === '') {\n                    <span\n                      (click)=\"selectOption(data)\"\n                      class=\"value\"\n                      [ngStyle]=\"{ color: data.segment_color }\"\n                      [style.backgroundColor]=\"data.segment_color + '1A'\"\n                      >{{ data }}</span\n                      >\n                    }\n                  </label>\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
         }], propDecorators: { dataList: [{
                 type: Input
             }], dropdownLabel: [{
@@ -5870,7 +5870,7 @@ class DialogComponent {
         document.body.style.overflow = 'auto';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: DialogComponent, isStandalone: false, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{-webkit-animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.dialog.animate.right{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: DialogComponent, isStandalone: false, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{-webkit-animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.dialog.animate.right{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -6080,11 +6080,11 @@ class FormGroupComponent {
         this.displayCriteria = selection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: false, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\n          <label class=\"vx-control-panel-sub-label\"\n            >Select how long you would like the information selected to be\n            displayed for. If no timeframe is selected, the information will be\n            displayed permanently.</label\n          >\n          <div class=\"input-group vx-d-flex vx-justify-between\">\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                [config]=\"toDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeToDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.VcomplyEditorComponent, 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: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: false, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n            >\n            <div class=\"vx-input-group\">\n              <input\n                type=\"text\"\n                placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                [(ngModel)]=\"dashboardName\"\n                />\n              @if (dashboardName?.length > 0) {\n                <span class=\"counter\">{{\n                  30 - dashboardName?.length\n                }}</span>\n              }\n            </div>\n            <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n            <div class=\"vx-input-group\">\n              <vcomply-editor\n                [editorConfig]=\"dashboardDescription\"\n                [(ngModel)]=\"dashboardDescriptionText\"\n              ></vcomply-editor>\n              @if (dashboardDescriptionText?.length > 0) {\n                <span\n                  class=\"counter\"\n                  >{{ 250 - dashboardDescriptionText?.length }}</span\n                  >\n                }\n              </div>\n              <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"form-group-row\">\n          <div class=\"image\">\n            <img\n              [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n              alt=\"\"\n              width=\"36\"\n              height=\"36\"\n              />\n          </div>\n          <div class=\"form\">\n            <div class=\"vx-form-group\">\n              <label class=\"vx-control-panel\"\n                >Who can view this dashboard?<span class=\"required\">*</span></label\n                >\n                <div class=\"selectbox\">\n                  <input\n                    type=\"text\"\n                    placeholder=\"Who can view this dashboard?\"\n                    readonly\n                    (click)=\"selectWhoCanViewThis()\"\n                    />\n                </div>\n                <div class=\"selected\">\n                  <div class=\"left\">\n                    <div class=\"chip-container\">\n                      <span class=\"chip\">\n                        <span class=\"value\">Samantha Jones</span>\n                      </span>\n                      <span class=\"chip\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        <span class=\"value\">Angel Kleven</span>\n                      </span>\n                    </div>\n                    <button class=\"count\">+10</button>\n                  </div>\n                  <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n                    (click)=\"selectResponsibilityCenter()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n                />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">PROGRAM</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Program that this responsibility relates to.\"\n                    (click)=\"selectCategories()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n                    (click)=\"selectCategories()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n                />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n                <div class=\"radio-group\">\n                  <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n                    >Those responsibilities that have been assigned to both the\n                    selected Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                    >\n                    <app-cs-radio\n                      (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n                      >Those responsibilities that have been assigned to either the\n                      selected Responsibility Center(s) or the selected\n                      Categories.</app-cs-radio\n                      >\n                    </div>\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-group-row\">\n                <div class=\"image\">\n                  <img\n                    [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                    alt=\"\"\n                    width=\"36\"\n                    height=\"36\"\n                    />\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group\">\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\n                    <label class=\"vx-control-panel-sub-label\"\n                      >Select how long you would like the information selected to be\n                      displayed for. If no timeframe is selected, the information will be\n                      displayed permanently.</label\n                      >\n                      <div class=\"input-group vx-d-flex vx-justify-between\">\n                        <div class=\"date-select\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <input\n                            type=\"text\"\n                            [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                            [placeholder]=\"'From'\"\n                            (click)=\"openFromDatePicker()\"\n                            readonly\n                            />\n                          <dp-date-picker\n                            #fromDatePicker\n                            [(ngModel)]=\"selectedFromDate\"\n                            placeholder=\"Select Date\"\n                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                            [config]=\"fromDatePickerConfig\"\n                          ></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div\n                              class=\"overlay\"\n                              (click)=\"closeFromDatePicker()\"\n                            ></div>\n                          }\n                        </div>\n                        <div class=\"date-select\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <input\n                            type=\"text\"\n                            [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                            [placeholder]=\"'To'\"\n                            (click)=\"openToDatePicker()\"\n                            readonly\n                            />\n                          <dp-date-picker\n                            #toDatePicker\n                            [(ngModel)]=\"selectedToDate\"\n                            placeholder=\"Select Date\"\n                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                            [config]=\"toDatePickerConfig\"\n                          ></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div\n                              class=\"overlay\"\n                              (click)=\"closeToDatePicker()\"\n                            ></div>\n                          }\n                        </div>\n                      </div>\n                      <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                    </div>\n                  </div>\n                </div>\n                <div class=\"form-group-row\">\n                  <!--active class will appear on open list-->\n                  <div class=\"image\">\n                    <img\n                      [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                      alt=\"\"\n                      width=\"36\"\n                      height=\"36\"\n                      />\n                  </div>\n                  <div class=\"form\">\n                    <div class=\"vx-form-group\">\n                      <label class=\"vx-control-panel\">\n                        Email Summaries\n                        <i\n                          class=\"icons\"\n                          [arTooltip]=\"'This is a test tooltip'\"\n                          placement=\"bottom-left\"\n                          type=\"white\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                          >&#xe91f;</i\n                          ></label\n                          >\n                          <label class=\"vx-control-panel-sub-label\">\n                            If you would like to send a summary of this Dashboard, please select\n                            a frequency(By default VComply sends a weekly Summary).\n                          </label>\n                          <div class=\"selectbox\">\n                            <input\n                              type=\"text\"\n                              placeholder=\"Email Summaries\"\n                              readonly\n                              (click)=\"selectFrequency()\"\n                              />\n                          </div>\n                          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"button-block\">\n                    <button\n                      class=\"vx-btn block primary\"\n                      [disabled]=\"disabled\"\n                      (click)=\"configureDashboard()\"\n                      >\n                      Next: Configure Widgets\n                    </button>\n                  </div>\n                </div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "component", type: i6.VcomplyEditorComponent, 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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i16.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i2.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\n          <label class=\"vx-control-panel-sub-label\"\n            >Select how long you would like the information selected to be\n            displayed for. If no timeframe is selected, the information will be\n            displayed permanently.</label\n          >\n          <div class=\"input-group vx-d-flex vx-justify-between\">\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                [config]=\"toDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeToDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
+            args: [{ selector: 'app-form-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n            >\n            <div class=\"vx-input-group\">\n              <input\n                type=\"text\"\n                placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                [(ngModel)]=\"dashboardName\"\n                />\n              @if (dashboardName?.length > 0) {\n                <span class=\"counter\">{{\n                  30 - dashboardName?.length\n                }}</span>\n              }\n            </div>\n            <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n            <div class=\"vx-input-group\">\n              <vcomply-editor\n                [editorConfig]=\"dashboardDescription\"\n                [(ngModel)]=\"dashboardDescriptionText\"\n              ></vcomply-editor>\n              @if (dashboardDescriptionText?.length > 0) {\n                <span\n                  class=\"counter\"\n                  >{{ 250 - dashboardDescriptionText?.length }}</span\n                  >\n                }\n              </div>\n              <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"form-group-row\">\n          <div class=\"image\">\n            <img\n              [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n              alt=\"\"\n              width=\"36\"\n              height=\"36\"\n              />\n          </div>\n          <div class=\"form\">\n            <div class=\"vx-form-group\">\n              <label class=\"vx-control-panel\"\n                >Who can view this dashboard?<span class=\"required\">*</span></label\n                >\n                <div class=\"selectbox\">\n                  <input\n                    type=\"text\"\n                    placeholder=\"Who can view this dashboard?\"\n                    readonly\n                    (click)=\"selectWhoCanViewThis()\"\n                    />\n                </div>\n                <div class=\"selected\">\n                  <div class=\"left\">\n                    <div class=\"chip-container\">\n                      <span class=\"chip\">\n                        <span class=\"value\">Samantha Jones</span>\n                      </span>\n                      <span class=\"chip\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        <span class=\"value\">Angel Kleven</span>\n                      </span>\n                    </div>\n                    <button class=\"count\">+10</button>\n                  </div>\n                  <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n                    (click)=\"selectResponsibilityCenter()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n                />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">PROGRAM</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Program that this responsibility relates to.\"\n                    (click)=\"selectCategories()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n                <div class=\"selectbox\">\n                  <div\n                    class=\"custom-input\"\n                    aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n                    (click)=\"selectCategories()\"\n                  ></div>\n                </div>\n                <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n              </div>\n            </div>\n          </div>\n          <div class=\"form-group-row\">\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n                />\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group\">\n                <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n                <div class=\"radio-group\">\n                  <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n                    >Those responsibilities that have been assigned to both the\n                    selected Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                    >\n                    <app-cs-radio\n                      (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n                      >Those responsibilities that have been assigned to either the\n                      selected Responsibility Center(s) or the selected\n                      Categories.</app-cs-radio\n                      >\n                    </div>\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-group-row\">\n                <div class=\"image\">\n                  <img\n                    [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                    alt=\"\"\n                    width=\"36\"\n                    height=\"36\"\n                    />\n                </div>\n                <div class=\"form\">\n                  <div class=\"vx-form-group\">\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\n                    <label class=\"vx-control-panel-sub-label\"\n                      >Select how long you would like the information selected to be\n                      displayed for. If no timeframe is selected, the information will be\n                      displayed permanently.</label\n                      >\n                      <div class=\"input-group vx-d-flex vx-justify-between\">\n                        <div class=\"date-select\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <input\n                            type=\"text\"\n                            [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                            [placeholder]=\"'From'\"\n                            (click)=\"openFromDatePicker()\"\n                            readonly\n                            />\n                          <dp-date-picker\n                            #fromDatePicker\n                            [(ngModel)]=\"selectedFromDate\"\n                            placeholder=\"Select Date\"\n                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                            [config]=\"fromDatePickerConfig\"\n                          ></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div\n                              class=\"overlay\"\n                              (click)=\"closeFromDatePicker()\"\n                            ></div>\n                          }\n                        </div>\n                        <div class=\"date-select\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <input\n                            type=\"text\"\n                            [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                            [placeholder]=\"'To'\"\n                            (click)=\"openToDatePicker()\"\n                            readonly\n                            />\n                          <dp-date-picker\n                            #toDatePicker\n                            [(ngModel)]=\"selectedToDate\"\n                            placeholder=\"Select Date\"\n                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                            [config]=\"toDatePickerConfig\"\n                          ></dp-date-picker>\n                          @if (datePickerOverlay) {\n                            <div\n                              class=\"overlay\"\n                              (click)=\"closeToDatePicker()\"\n                            ></div>\n                          }\n                        </div>\n                      </div>\n                      <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                    </div>\n                  </div>\n                </div>\n                <div class=\"form-group-row\">\n                  <!--active class will appear on open list-->\n                  <div class=\"image\">\n                    <img\n                      [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                      alt=\"\"\n                      width=\"36\"\n                      height=\"36\"\n                      />\n                  </div>\n                  <div class=\"form\">\n                    <div class=\"vx-form-group\">\n                      <label class=\"vx-control-panel\">\n                        Email Summaries\n                        <i\n                          class=\"icons\"\n                          [arTooltip]=\"'This is a test tooltip'\"\n                          placement=\"bottom-left\"\n                          type=\"white\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                          >&#xe91f;</i\n                          ></label\n                          >\n                          <label class=\"vx-control-panel-sub-label\">\n                            If you would like to send a summary of this Dashboard, please select\n                            a frequency(By default VComply sends a weekly Summary).\n                          </label>\n                          <div class=\"selectbox\">\n                            <input\n                              type=\"text\"\n                              placeholder=\"Email Summaries\"\n                              readonly\n                              (click)=\"selectFrequency()\"\n                              />\n                          </div>\n                          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"button-block\">\n                    <button\n                      class=\"vx-btn block primary\"\n                      [disabled]=\"disabled\"\n                      (click)=\"configureDashboard()\"\n                      >\n                      Next: Configure Widgets\n                    </button>\n                  </div>\n                </div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
         }], ctorParameters: () => [{ type: DialogService }], propDecorators: { openCategoryList: [{
                 type: Output
             }], openResponsibilityCenterList: [{
@@ -6306,11 +6306,11 @@ class RiskCategoriesComponent {
         this.closeCategoriesList.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RiskCategoriesComponent, isStandalone: false, 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\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label>strategic</label>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label>operational</label>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label>compliance</label>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"$safeNavigationMigration(categoryList[activeTab]?.list) | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RiskCategoriesComponent, isStandalone: false, 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\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n        >\n        <div class=\"left\">\n          <label>strategic</label>\n          @if (categoryList?.strategic?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.strategic?.selectedList?.length }}\n              {{\n              categoryList?.strategic?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n        >\n        <div class=\"left\">\n          <label>operational</label>\n          @if (categoryList?.operational?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.operational?.selectedList?.length }}\n              {{\n              categoryList?.operational?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n        >\n        <div class=\"left\">\n          <label>compliance</label>\n          @if (categoryList?.compliance?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.compliance?.selectedList?.length }}\n              {{\n              categoryList?.compliance?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n        >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          @if (categoryList?.others?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.others?.selectedList?.length }}\n              {{\n              categoryList?.others?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n        />\n    </div>\n\n    @if ($safeNavigationMigration(categoryList[activeTab]?.list) | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll(activeTab)\"\n            (ngValueChange)=\"selectAll($event, activeTab)\"\n            >\n            <strong>{{\n              checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <div\n          class=\"risk-category-list-item vx-mb-4\"\n          [class.with-selectAll]=\"searchList.length > 1\"\n          >\n          <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n            @for (category of searchList; track category) {\n              <li class=\"vx-mb-4\">\n                <app-cs-checkbox\n                  [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n                  (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n                  >\n                  <ul class=\"categories\">\n                    <li\n                      [arTooltip]=\"category.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >\n                      {{ category.category_name }}\n                    </li>\n                  </ul>\n                </app-cs-checkbox>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;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: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-risk-categories', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label>strategic</label>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label>operational</label>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label>compliance</label>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"$safeNavigationMigration(categoryList[activeTab]?.list) | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;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"] }]
+            args: [{ selector: 'app-risk-categories', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n        >\n        <div class=\"left\">\n          <label>strategic</label>\n          @if (categoryList?.strategic?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.strategic?.selectedList?.length }}\n              {{\n              categoryList?.strategic?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n        >\n        <div class=\"left\">\n          <label>operational</label>\n          @if (categoryList?.operational?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.operational?.selectedList?.length }}\n              {{\n              categoryList?.operational?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n        >\n        <div class=\"left\">\n          <label>compliance</label>\n          @if (categoryList?.compliance?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.compliance?.selectedList?.length }}\n              {{\n              categoryList?.compliance?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n        >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          @if (categoryList?.others?.selectedList?.length != 0) {\n            <p>\n              {{ categoryList?.others?.selectedList?.length }}\n              {{\n              categoryList?.others?.selectedList?.length == 1\n              ? \"Category\"\n              : \"Categories\"\n              }}\n              selected\n            </p>\n          }\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n        />\n    </div>\n\n    @if ($safeNavigationMigration(categoryList[activeTab]?.list) | filter : search; as searchList) {\n      @if (searchList.length > 1) {\n        <div class=\"select-all\">\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll(activeTab)\"\n            (ngValueChange)=\"selectAll($event, activeTab)\"\n            >\n            <strong>{{\n              checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n            }}</strong>\n          </app-cs-checkbox>\n        </div>\n      }\n      @if (searchList.length > 0) {\n        <div\n          class=\"risk-category-list-item vx-mb-4\"\n          [class.with-selectAll]=\"searchList.length > 1\"\n          >\n          <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n            @for (category of searchList; track category) {\n              <li class=\"vx-mb-4\">\n                <app-cs-checkbox\n                  [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n                  (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n                  >\n                  <ul class=\"categories\">\n                    <li\n                      [arTooltip]=\"category.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >\n                      {{ category.category_name }}\n                    </li>\n                  </ul>\n                </app-cs-checkbox>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (searchList.length == 0) {\n        <app-no-data\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"'No data to display'\"\n          >\n        </app-no-data>\n      }\n    }\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;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"] }]
         }], ctorParameters: () => [], propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
@@ -6409,7 +6409,7 @@ class LoaderComponent {
     }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: LoaderComponent, isStandalone: false, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: LoaderComponent, isStandalone: false, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,