vc-create-dashboard 2.6.7 → 2.6.9

package/fesm2015/create-dashboard.mjs

@@ -2006,6 +2006,22 @@ class UserListComponent {
             this.footerDetails.selectedData = [];
         }
     }
+    selectAllsearchgroups(event) {
+        if (event) {
+            this.groupdata.forEach(searchElement => {
+                if (!this.selectedGroupIds.includes(searchElement[this.listDetails.groupIdkey])) {
+                    this.selectedgroupList.push(searchElement);
+                    this.selectedGroupIds.push(searchElement[this.listDetails.groupIdkey]);
+                    this.footerDetails.selectedData = this.selectedgroupList;
+                }
+            });
+        }
+        else {
+            this.selectedgroupList = [];
+            this.selectedGroupIds = [];
+            this.footerDetails.selectedData = [];
+        }
+    }
     /**
      * Selects checked item from the list.
      * In case of user's list calculates number of admins/manages to set visibility(either to all admins/ admins and managers)
@@ -2060,6 +2076,18 @@ class UserListComponent {
             return false;
         }
     }
+    /**
+    * it is used check select all groups condition incase of backend driven search
+    */
+    checkSelectAllGroups() {
+        if (this.groupdata.length > 0) {
+            const data = this.groupdata.every(ele => this.selectedGroupIds.includes(ele[this.listDetails.groupIdkey]));
+            return data;
+        }
+        else {
+            return false;
+        }
+    }
     /**
      * Filter list user's list based on pagination by making api call
      * @param event specifies a boolean value to call api
@@ -2108,10 +2136,12 @@ class UserListComponent {
         if (event.hasOwnProperty("groupName")) {
             params = params.append('groupName', event["groupName"]);
         }
-        if (event.hasOwnProperty("page")) {
+        if (event.hasOwnProperty("page") && !this.searchValue) {
             params = params.append('page', event["page"]);
         }
-        params = params.append('limit', 30);
+        if (this.totalgroupscount > 30 && !this.searchValue) {
+            params = params.append('limit', 30);
+        }
         this.dashboardService.getAllGroups(params).subscribe((res) => {
             this.groupdata = res === null || res === void 0 ? void 0 : res.data;
             this.totalgroups = res.total_items;
@@ -2141,10 +2171,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\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n\r\n        <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n            <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroupscount}}</span></button>\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=\"!searchValue\">\r\n                <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                    <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <div class=\"user-list-body-top\">\r\n                <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n                <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <div class=\"list-of-user\">\r\n                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n                    <li *ngFor=\"let data of searchList; let i = index\">\r\n                        <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n                </app-no-data>\r\n                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n          <ng-container *ngIf=\"(groupdata) as groups \">\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n                <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n                    <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"true\">\r\n                <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0;else nogroup\">\r\n                        <div class=\"user-list-select vx-mb-2\">\r\n                            <app-cs-checkbox [disabled]=\"false\" [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                        </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\">{{data[listDetails.displayGroupKey]}}\r\n                                            <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #nogroup>\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-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n           </ng-container>\r\n       \r\n\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n\r\n        <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n            <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroupscount}}</span></button>\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=\"!searchValue\">\r\n                <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                    <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <div class=\"user-list-body-top\">\r\n                <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n                <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <div class=\"list-of-user\">\r\n                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                    <li *ngFor=\"let data of searchList; let i = index\">\r\n                        <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n                </app-no-data>\r\n                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n          <ng-container *ngIf=\"(groupdata) as groups \">\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n                <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n                    <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"true\">\r\n                <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0;else nogroup\">\r\n                        <div class=\"user-list-select vx-mb-2\">\r\n                            <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\"  >\r\n                                <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                            </app-cs-checkbox>\r\n                            <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\"  >\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"user-list-item\">\r\n                            <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                                <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                                    <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                                        <div class=\"user-name\">{{data[listDetails.displayGroupKey]}}\r\n                                            <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span></div>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #nogroup>\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-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n           </ng-container>\r\n       \r\n\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
 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\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n\r\n        <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n            <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroupscount}}</span></button>\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=\"!searchValue\">\r\n                <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                    <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <div class=\"user-list-body-top\">\r\n                <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n                <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <div class=\"list-of-user\">\r\n                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n                    <li *ngFor=\"let data of searchList; let i = index\">\r\n                        <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n                </app-no-data>\r\n                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n          <ng-container *ngIf=\"(groupdata) as groups \">\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n                <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n                    <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"true\">\r\n                <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0;else nogroup\">\r\n                        <div class=\"user-list-select vx-mb-2\">\r\n                            <app-cs-checkbox [disabled]=\"false\" [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                        </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\">{{data[listDetails.displayGroupKey]}}\r\n                                            <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #nogroup>\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-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n           </ng-container>\r\n       \r\n\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
+            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n\r\n        <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n            <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroupscount}}</span></button>\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=\"!searchValue\">\r\n                <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                    <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <div class=\"user-list-body-top\">\r\n                <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n                <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <div class=\"list-of-user\">\r\n                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n                    <li *ngFor=\"let data of searchList; let i = index\">\r\n                        <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n                </app-no-data>\r\n                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n          <ng-container *ngIf=\"(groupdata) as groups \">\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n                <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\">             \r\n                    <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"true\">\r\n                <div class=\"user-list-mid\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0;else nogroup\">\r\n                        <div class=\"user-list-select vx-mb-2\">\r\n                            <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\"  >\r\n                                <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                            </app-cs-checkbox>\r\n                            <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\"  >\r\n                              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n                          </app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"user-list-item\">\r\n                            <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                                <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n                                    <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n                                        <div class=\"user-name\">{{data[listDetails.displayGroupKey]}}\r\n                                            <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span></div>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #nogroup>\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-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n           </ng-container>\r\n       \r\n\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \r\n                <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n                <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n              </div>\r\n              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n              <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{element.member_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n    \r\n              <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedgroupList\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{element?.group_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n          </div>\r\n        \r\n          <div class=\"right\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{