npm - vc-create-dashboard - Versions diffs - 2.9.1 → 2.9.2 - Mend

vc-create-dashboard 2.9.1 → 2.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/fesm2020/create-dashboard.mjs CHANGED Viewed

@@ -1547,10 +1547,10 @@ class LoaderInlineComponent {
     ngOnInit() { }
 }
 LoaderInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>\r\n\r\n<!-- <p>loader-inline works!</p> -->\r\n<!-- <div class=\"inline-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div> -->\r\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}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
+LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", 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}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>\r\n\r\n<!-- <p>loader-inline works!</p> -->\r\n<!-- <div class=\"inline-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div> -->\r\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}\n"] }]
+            args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", 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}\n"] }]
         }], ctorParameters: function () { return []; } });
 class SnackBarComponent {
@@ -2219,10 +2219,10 @@ class UserListComponent {
     }
 }
 UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n      <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n          <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n          <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n      </div>\r\n\r\n      <div class=\"user-list-search vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER'\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n              <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                  <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n              </div>\r\n          </div>\r\n          <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n              <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n              <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n          </div>\r\n          <div class=\"list-of-user\">\r\n              <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                <ul *ngIf=\"searchList.length !== 0\">\r\n                  <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                  </li>\r\n                </ul>\r\n\r\n                <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n              </div>\r\n\r\n              <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n          </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n        <ng-container *ngIf=\"(groupdata) as groups \">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n            <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n              <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"true\">\r\n              <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n                  <ng-container *ngIf=\"groups?.length > 0\">\r\n                      <div class=\"user-list-select vx-mb-4\">\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                        </app-cs-checkbox>\r\n                      </div>\r\n                      <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                            <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                              <div class=\"user-name vx-d-flex vx-align-center\">  \r\n                                <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n                                <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n                              </div>\r\n                            </app-cs-checkbox>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n                      <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n                  </ng-container>\r\n                  <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n              </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n       \r\n      <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n          <div class=\"left vx-d-flex vx-align-center\">\r\n              <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n                <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n                <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n              </div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n        (deleteEvent) =\"selectElement($event)\"\r\n        (submitEvent)=\"onSubmit()\"\r\n        [userButtonColor]=\"'greenBg'\"\r\n        ></app-dashboard-footer>\r\n      </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh -20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n      <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n          <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n          <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n      </div>\r\n\r\n      <div class=\"user-list-search vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER'\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n              <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                  <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n              </div>\r\n          </div>\r\n          <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n              <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n              <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n          </div>\r\n          <div class=\"list-of-user\">\r\n              <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                <ul *ngIf=\"searchList.length !== 0\">\r\n                  <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                  </li>\r\n                </ul>\r\n\r\n                <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n              </div>\r\n\r\n              <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n          </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n        <ng-container *ngIf=\"(groupdata) as groups \">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n            <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n              <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"true\">\r\n              <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n                  <ng-container *ngIf=\"groups?.length > 0\">\r\n                      <div class=\"user-list-select vx-mb-4\">\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                        </app-cs-checkbox>\r\n                      </div>\r\n                      <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                            <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                              <div class=\"user-name vx-d-flex vx-align-center\">  \r\n                                <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n                                <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n                              </div>\r\n                            </app-cs-checkbox>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n                      <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n                  </ng-container>\r\n                  <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n              </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n       \r\n      <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n          <div class=\"left vx-d-flex vx-align-center\">\r\n              <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n                <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n                <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n              </div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n        (deleteEvent) =\"selectElement($event)\"\r\n        (submitEvent)=\"onSubmit()\"\r\n        [userButtonColor]=\"'greenBg'\"\r\n        ></app-dashboard-footer>\r\n      </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n      <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n          <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n          <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n      </div>\r\n\r\n      <div class=\"user-list-search vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER'\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n              <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                  <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n              </div>\r\n          </div>\r\n          <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n              <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n              <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n          </div>\r\n          <div class=\"list-of-user\">\r\n              <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                <ul *ngIf=\"searchList.length !== 0\">\r\n                  <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                  </li>\r\n                </ul>\r\n\r\n                <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n              </div>\r\n\r\n              <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n          </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n        <ng-container *ngIf=\"(groupdata) as groups \">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n            <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n              <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"true\">\r\n              <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n                  <ng-container *ngIf=\"groups?.length > 0\">\r\n                      <div class=\"user-list-select vx-mb-4\">\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                        </app-cs-checkbox>\r\n                      </div>\r\n                      <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                            <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                              <div class=\"user-name vx-d-flex vx-align-center\">  \r\n                                <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n                                <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n                              </div>\r\n                            </app-cs-checkbox>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n                      <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n                  </ng-container>\r\n                  <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n              </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n       \r\n      <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n          <div class=\"left vx-d-flex vx-align-center\">\r\n              <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n                <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n                <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n              </div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n        (deleteEvent) =\"selectElement($event)\"\r\n        (submitEvent)=\"onSubmit()\"\r\n        [userButtonColor]=\"'greenBg'\"\r\n        ></app-dashboard-footer>\r\n      </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh -20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
+            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n      <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n          <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n          <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n      </div>\r\n\r\n      <div class=\"user-list-search vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER'\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n              <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                  <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n              </div>\r\n          </div>\r\n          <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n              <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n              <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n              </app-cs-checkbox>\r\n          </div>\r\n          <div class=\"list-of-user\">\r\n              <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                <ul *ngIf=\"searchList.length !== 0\">\r\n                  <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                  </li>\r\n                </ul>\r\n\r\n                <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n              </div>\r\n\r\n              <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n          </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n        <ng-container *ngIf=\"(groupdata) as groups \">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n            <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n              <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"true\">\r\n              <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n                  <ng-container *ngIf=\"groups?.length > 0\">\r\n                      <div class=\"user-list-select vx-mb-4\">\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                          <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                        </app-cs-checkbox>\r\n                      </div>\r\n                      <div class=\"user-list-item\">\r\n                        <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                          <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                            <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                              <div class=\"user-name vx-d-flex vx-align-center\">  \r\n                                <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n                                delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n                                <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n                              </div>\r\n                            </app-cs-checkbox>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n                      <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n                  </ng-container>\r\n                  <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n              </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n       \r\n      <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n          <div class=\"left vx-d-flex vx-align-center\">\r\n              <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n              <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n                <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n                <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n              </div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\">&#xe90d;</i> {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                          <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\">&#xe90d;</i> {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n        (deleteEvent) =\"selectElement($event)\"\r\n        (submitEvent)=\"onSubmit()\"\r\n        [userButtonColor]=\"'greenBg'\"\r\n        ></app-dashboard-footer>\r\n      </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
@@ -5004,10 +5004,10 @@ class LoaderComponent {
     ngOnInit() { }
 }
 LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>\r\n\r\n<!-- <p>loader works!</p> -->\r\n<!-- <div class=\"main-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div> -->\r\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}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", 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}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>\r\n\r\n<!-- <p>loader works!</p> -->\r\n<!-- <div class=\"main-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div> -->\r\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}\n"] }]
+            args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", 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}\n"] }]
         }], ctorParameters: function () { return []; } });
 class VLoaderModule {