vc-create-dashboard 2.8.1 → 2.8.3
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.
|
@@ -2154,10 +2154,10 @@ class UserListComponent {
|
|
|
2154
2154
|
}
|
|
2155
2155
|
}
|
|
2156
2156
|
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 });
|
|
2157
|
-
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\"></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\">{{totalgroups}}</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)\" ></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)\" ></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\"></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"] }] });
|
|
2157
|
+
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\"></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\">{{totalgroups}}</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=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container\">\r\n <div class=\"left\">\r\n <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n <div class=\"name\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" ></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)\" ></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\"></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 .user-floating-bar{padding:0 16px 20px}::ng-deep .user-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
|
|
2158
2158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, decorators: [{
|
|
2159
2159
|
type: Component,
|
|
2160
|
-
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\"></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\">{{totalgroups}}</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)\" ></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)\" ></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\"></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"] }]
|
|
2160
|
+
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\"></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\">{{totalgroups}}</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=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container\">\r\n <div class=\"left\">\r\n <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n <div class=\"name\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" ></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)\" ></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\"></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 .user-floating-bar{padding:0 16px 20px}::ng-deep .user-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
|
|
2161
2161
|
}], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
|
|
2162
2162
|
type: Output
|
|
2163
2163
|
}], saveSelectedUsers: [{
|