import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { SearchPipe } from '../pipes/search.pipe';
import { ASSETS } from '../../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i3 from "../pagination/pagination/pagination.component";
import * as i4 from "../../../ui-kit/popover/popover.component";
import * as i5 from "../../../ui-kit/popover/popover.directive";
import * as i6 from "@angular/forms";
import * as i7 from "../../../ui-kit/no-data/no-data.component";
import * as i8 from "../../../ui-kit/formgroup/cs-radio/cs-radio.component";
import * as i9 from "../../../ui-kit/formgroup/cs-switch/cs-switch.component";
import * as i10 from "../../../sharedComponents/v-loader/loader-inline/loader-inline.component";
import * as i11 from "../checkbox/checkbox.component";
import * as i12 from "../floating-bar/floating-bar.component";
import * as i13 from "../define-framework-listing/pipes/tooltip-message.pipe";
import * as i14 from "../pipes/search.pipe";
import * as i15 from "../pipes/filter.pipe";
export class UserGroupListComponent {
    set approvalType(value) {
        this.approvalWorkflowType = value;
    }
    set setUserList(value) {
        if (value && value?.length) {
            this.usersList = [...value];
            this.allUsersIds = this.usersList.map((ele) => ele?.member_id);
            this.allUserSelectedStatus();
            this.setUserListInit();
        }
    }
    set setSelectedUser(value) {
        if (value?.length) {
            this.selectedUsers = this.uniqueByProp([...this.selectedUsers, ...value], 'member_id');
            this.selectedUserIds = this.selectedUsers.map((ele) => ele?.member_id);
            this.allUserSelectedStatus();
            this.setUserListInit();
        }
    }
    set setDefaultSelectedUsers(value) {
        this.defaultSelectedUsers = this.uniqueByProp([...this.defaultSelectedUsers, ...value], 'member_id');
        this.defaultSelectedUserIds = this.defaultSelectedUsers.map((ele) => ele?.member_id);
    }
    setUserListInit() {
        if (this.userCurrentPage === 1) {
            const selected = this.selectedUsers;
            const otherUser = this.usersList.filter((ele) => !this.selectedUserIds.includes(ele?.member_id));
            this.usersList = this.uniqueByProp([...selected?.sort(), ...otherUser?.sort()], 'member_id');
        }
    }
    allUserSelectedStatus() {
        this.allUserSelected =
            this.allUsersIds.sort().toString() ===
                this.selectedUserIds.sort()?.toString();
        this.allUserSelectedDisabled =
            this.allUsersIds.sort().toString() ===
                this.selectedUserIds.sort()?.toString() &&
                this.allUsersIds.sort().toString() ===
                    this.nonRemovableUserIds.sort()?.toString();
    }
    set setGroupList(value) {
        if (value && value?.length) {
            this.groupsList = [...value];
            this.allGroupsIds = this.groupsList.map((ele) => ele?.group_id);
            this.allGroupSelectedStatus();
            this.setGroupListInit();
        }
    }
    set setSelectedGroup(value) {
        this.selectedGroups = this.uniqueByProp([...this.selectedGroups, ...value], 'group_id');
        this.selectedGroupIds = this.selectedGroups.map((ele) => ele?.group_id);
        this.allGroupSelectedStatus();
        this.setGroupListInit();
    }
    setGroupListInit() {
        if (this.userCurrentPage === 1) {
            const selected = this.selectedGroups;
            const otherGroup = this.groupsList.filter((ele) => !this.selectedGroupIds.includes(ele?.group_id));
            this.groupsList = this.uniqueByProp([...selected?.sort(), ...otherGroup?.sort()], 'group_id');
        }
    }
    allGroupSelectedStatus() {
        this.allGroupSelected =
            this.allGroupsIds?.sort()?.toString() ===
                this.selectedGroupIds?.sort()?.toString();
        this.allGroupSelectedDisabled =
            this.allGroupsIds.sort().toString() ===
                this.selectedGroupIds.sort()?.toString() &&
                this.allGroupsIds.sort().toString() ===
                    this.nonRemovableGroupIds.sort()?.toString();
    }
    userPageChange(page) {
        this.userCurrentPage = page;
        this.fetchUserData.emit({ page, searchKey: this.searchKey });
    }
    /**
     * #### Description
     * Selects item or deselect a itme
     * @param evt
     * @param payload
     */
    selectItem(evt, payload) {
        evt?.target?.checked === true
            ? this.manipulateSelectedUser('ADD', payload)
            : this.manipulateSelectedUser('DELETE', payload);
    }
    selectItemRadio(evt, payload) {
        if (evt?.target?.checked) {
            this.selectedUsers = [];
            this.manipulateSelectedUser('ADD', payload);
        }
    }
    /**
     * #### Description
     *
     * Manipulates selected items in role list
     * @param action :'ADD' | 'DELETE'
     * @param payload
     */
    manipulateSelectedUser(action, payload) {
        if (action === 'ADD') {
            this.selectedUsers = this.uniqueByProp([...this.selectedUsers, ...[payload]], 'member_id');
            this.selectedUserIds = this.selectedUsers.map((ele) => ele?.member_id);
        }
        else if (action === 'DELETE') {
            let index = this.selectedUsers.findIndex((ele) => ele?.member_id === payload?.member_id);
            if (index > -1) {
                this.selectedUsers = this.selectedUsers.filter((ele) => ele?.member_id !== payload?.member_id);
                this.selectedUserIds = this.selectedUserIds.filter((ele) => ele !== payload?.member_id);
            }
        }
        this.allUserSelectedStatus();
    }
    selectAllUser(evt) {
        const isChecked = evt?.target?.checked === true;
        const sourceUsers = this.fromResponsibility ? this.disableUsers() : this.usersList;
        if (isChecked) {
            this.selectedUsers = sourceUsers;
            this.selectedUserIds = this.selectedUsers.map((user) => user?.member_id);
        }
        else {
            this.selectedUsers = this.usersList.filter((user) => this.nonRemovableUserIds.includes(user?.member_id));
            this.selectedUserIds = this.selectedUsers.map((user) => user?.member_id);
        }
        this.allUserSelectedStatus();
    }
    /**
     * #### Description
     * Selects item or deselect a itme
     * @param evt
     * @param payload
     */
    selectGroup(evt, payload) {
        evt?.target?.checked === true
            ? this.manipulateSelectedGroup('ADD', payload)
            : this.manipulateSelectedGroup('DELETE', payload);
    }
    /**
     * #### Description
     *
     * Manipulates selected items in role list
     * @param action :'ADD' | 'DELETE'
     * @param payload
     */
    manipulateSelectedGroup(action, payload) {
        if (action === 'ADD') {
            this.selectedGroups = this.uniqueByProp([...this.selectedGroups, ...[payload]], 'group_id');
            this.selectedGroupIds = this.selectedGroups.map((ele) => ele?.group_id);
        }
        else if (action === 'DELETE') {
            let index = this.selectedGroups.findIndex((ele) => ele?.group_id === payload?.group_id);
            if (index > -1) {
                this.selectedGroups = this.selectedGroups.filter((ele) => ele?.group_id !== payload?.group_id);
                this.selectedGroupIds = this.selectedGroupIds.filter((ele) => ele !== payload?.group_id);
            }
        }
        this.allGroupSelectedStatus();
    }
    selectAllGroup(evt) {
        const groupData = this.searchPipe.transform(this.groupsList, this.searchKey, 'group_name');
        if (evt?.target?.checked === true) {
            this.selectedGroups = groupData;
            this.selectedGroupIds = groupData.map((ele) => ele?.group_id);
        }
        else {
            this.selectedGroups = this.groupsList.filter((ele) => this.nonRemovableGroupIds.includes(ele?.group_id));
            this.selectedGroupIds = this.selectedGroups.map((ele) => ele?.group_id);
        }
        this.allGroupSelectedStatus();
    }
    constructor() {
        this.ASSETS = ASSETS;
        this.save = new EventEmitter();
        this.cancel = new EventEmitter();
        this.panelTitle = 'Select User(s)';
        this.singleSelect = false;
        this.selectedReviewer = false;
        this.featureflag = false;
        this.reviewerWorkflowType = 'SEQUENTIAL';
        this.reviewerWorkflowTypeChange = new EventEmitter();
        this.mode = 'CREATE';
        this.fieldType = '';
        this.searchKey = '';
        this.searchSubject = new Subject();
        this.destroy$ = new Subject();
        this.approvalWorkflowType = 'SEQUENTIAL';
        this.usersList = [];
        this.groupsList = [];
        this.assignorId = [];
        this.assigneeIds = [];
        this.reviewerIds = [];
        this.overseerIds = [];
        this.FromProgram = false;
        this.fromApprovalWorkflow = false;
        this.showFutureUsersSwitch = false;
        this.futureUsersWillSelect = false;
        this.isAllDisabled = false;
        this.isGroupTabShow = true;
        this.fetchUserData = new EventEmitter();
        this.disabledIds = [];
        this.nonRemovableUserIds = [];
        this.allUserSelectedDisabled = false;
        this.selectedUsers = [];
        this.selectedUserIds = [];
        this.allUsersIds = [];
        this.allUserSelected = false;
        this.nonRemovableGroupIds = [];
        this.selectedGroups = [];
        this.selectedGroupIds = [];
        this.allGroupsIds = [];
        this.allGroupSelected = false;
        this.allGroupSelectedDisabled = false;
        this.searchPipe = new SearchPipe();
        this.userCurrentPage = 1;
        this.groupCurrentPage = 1;
        this.loading = false;
        this.nonDisabledUsers = [];
        this.defaultSelectedUsers = [];
        this.defaultSelectedUserIds = [];
        this.userType = 'assignees';
        this.isPaginationEnabled = false;
        this.showConfirmation = false;
        this.animation = true;
        this.currentTab = 'USER';
        this.setupDebounceForUserSearch();
    }
    ngOnInit() {
        let disabledIds = [...this.disabledIds, ...this.nonRemovableUserIds];
        this.disabledIds = [...new Set(disabledIds)];
        this.paginationVisible();
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
        // Setup debounced search
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    switchTab(tab) {
        this.currentTab = tab;
        this.searchKey = '';
    }
    saveList() {
        if (this.defaultSelectedUserIds &&
            this.defaultSelectedUserIds?.length &&
            this.selectedUserIds &&
            this.selectedUserIds?.length) {
            this.defaultSelectedUserIds?.forEach((id) => {
                if (!this.selectedUserIds?.includes(id)) {
                    this.showConfirmation = true;
                }
            });
        }
        else {
            this.showConfirmation = false;
        }
        if (!this.showConfirmation)
            this.save.emit({
                users: this.selectedUsers,
                groups: this.selectedGroups,
                futureUsersWillSelect: this.futureUsersWillSelect,
            });
    }
    confirmAction(evt) {
        if (evt === 'YES') {
            this.save.emit({
                users: this.selectedUsers,
                groups: this.selectedGroups,
                futureUsersWillSelect: this.futureUsersWillSelect,
            });
        }
        else if (evt === 'NO') {
            this.showConfirmation = false;
        }
    }
    closeList() {
        this.cancel.emit();
    }
    //
    /**
     * #### Description
     *
     * Returns the unique array of object based on unique key
     * @param array
     * @param key
     * @returns
     */
    uniqueByProp(array, key) {
        return Array.from(array
            .reduce((acc, item) => (item && item[key] && acc.set(item[key], item), acc), new Map())
            .values());
    }
    paginationVisible() {
        if (this.userListInfo?.total_pages > 1) {
            this.isPagination = true;
        }
        else {
            this.isPagination = false;
        }
    }
    workflowTypeChanged(event) {
        this.reviewerWorkflowType = event;
        this.reviewerWorkflowTypeChange.emit(event);
    }
    disableUsers() {
        switch (this.fromResponsibility) {
            case 'Assignee':
                this.nonDisabledUsers = this.usersList.filter((user) => !(this.reviewerIds?.includes(user?.member_id) ||
                    this.overseerIds?.includes(user?.member_id)));
                break;
            case 'Reviewer':
                this.nonDisabledUsers = this.usersList.filter((user) => !(this.overseerIds?.includes(user?.member_id) ||
                    this.assigneeIds?.includes(user?.member_id)));
                break;
            case 'Overseer':
                this.nonDisabledUsers = this.usersList.filter((user) => !(this.assignorId?.includes(user?.member_id) ||
                    this.reviewerIds?.includes(user?.member_id) ||
                    this.assigneeIds?.includes(user?.member_id)));
                break;
            case 'collaborator':
                this.nonDisabledUsers = this.usersList.filter((user) => !(this.disabledIds?.includes(user?.member_id)));
                break;
            default:
        }
        return this.nonDisabledUsers;
    }
    setAllUsersSelected(event) {
        this.futureUsersWillSelect = event;
        if (event) {
            // Clear any existing search and reset to first page
            this.searchKey = '';
            this.userCurrentPage = 1;
            this.fetchUserData.emit({ page: 1, searchKey: '' });
            this.selectedUsers = [];
            this.selectedGroups = [];
            this.selectedUserIds = [];
            this.selectedGroupIds = [];
        }
    }
    onSearchKeyChange(searchKey) {
        this.searchSubject.next(searchKey || '');
    }
    setupDebounceForUserSearch() {
        this.searchSubject.pipe(debounceTime(800), // Wait 800ms after user stops typing
        distinctUntilChanged(), // Only emit if the value has changed
        takeUntil(this.destroy$)).subscribe(searchKey => {
            this.userCurrentPage = 1;
            if (this.isPaginationEnabled) {
                // Server-side search: fetch new data
                this.fetchUserData.emit({ page: 1, searchKey: searchKey });
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserGroupListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserGroupListComponent, selector: "user-group-list", inputs: { groupEnabled: "groupEnabled", panelTitle: "panelTitle", singleSelect: "singleSelect", selectedReviewer: "selectedReviewer", featureflag: "featureflag", reviewerWorkflowType: "reviewerWorkflowType", mode: "mode", fieldType: "fieldType", fromResponsibility: "fromResponsibility", assignorId: "assignorId", assigneeIds: "assigneeIds", reviewerIds: "reviewerIds", overseerIds: "overseerIds", FromProgram: "FromProgram", userListInfo: "userListInfo", groupListInfo: "groupListInfo", fromApprovalWorkflow: "fromApprovalWorkflow", approvalType: "approvalType", showFutureUsersSwitch: "showFutureUsersSwitch", futureUsersWillSelect: "futureUsersWillSelect", isAllDisabled: "isAllDisabled", isGroupTabShow: "isGroupTabShow", disabledIds: "disabledIds", nonRemovableUserIds: "nonRemovableUserIds", allUserSelectedDisabled: "allUserSelectedDisabled", nonRemovableGroupIds: "nonRemovableGroupIds", loading: "loading", setUserList: ["userlist", "setUserList"], setSelectedUser: ["selectedUsers", "setSelectedUser"], setDefaultSelectedUsers: ["defaultSelectedUsers", "setDefaultSelectedUsers"], userType: "userType", isPaginationEnabled: "isPaginationEnabled", setGroupList: ["groupList", "setGroupList"], setSelectedGroup: ["selectedGroups", "setSelectedGroup"] }, outputs: { save: "save", cancel: "cancel", reviewerWorkflowTypeChange: "reviewerWorkflowTypeChange", fetchUserData: "fetchUserData" }, ngImport: i0, template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            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\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            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\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            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\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          [disabled]=\"futureUsersWillSelect\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <ng-container *ngIf=\"featureflag\">\n          <input\n            *ngIf=\"isPaginationEnabled; else searchInputWithoutPagination\"\n            [(ngModel)]=\"searchKey\"\n            (ngModelChange)=\"onSearchKeyChange($event)\"\n            [disabled]=\"futureUsersWillSelect\"\n            type=\"text\"\n            placeholder=\"{{\n              currentTab === 'USER' ? 'Search User' : 'Search User Group'\n            }}\"\n          />\n          <ng-template #searchInputWithoutPagination>\n            <input\n              [(ngModel)]=\"searchKey\"\n              [disabled]=\"futureUsersWillSelect\"\n              type=\"text\"\n              placeholder=\"{{\n                currentTab === 'USER' ? 'Search User' : 'Search User Group'\n              }}\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"usersList | filter : searchKey : isPaginationEnabled as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n            [from]=\"userListInfo?.from\"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"(isPaginationEnabled && userListInfo?.users?.length > 0) || (!isPaginationEnabled && users?.length > 0); else nouser\">\n              <ng-container *ngIf=\"!isPaginationEnabled\">\n                <div class=\"user-list-select vx-mb-2\">\n                  <vui-checkbox\n                    *ngIf=\"!singleSelect\"\n                    #user\n                    [checked]=\"allUserSelected || futureUsersWillSelect\"\n                    [disabled]=\"\n                      allUserSelectedDisabled ||\n                      futureUsersWillSelect ||\n                      isAllDisabled\n                    \"\n                    (change)=\"selectAllUser($event)\"\n                  >\n                    <div\n                      class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                    >\n                      {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                    </div>\n                  </vui-checkbox>\n                </div>\n              </ng-container>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.PaginationComponent, selector: "vui-pagination", inputs: ["from", "to", "total", "showPageDetail", "totalPage", "currentPage", "pageInSingleView"], outputs: ["pageChanged"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: i8.CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i9.CsSwitchComponentUI, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "component", type: i10.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i11.CheckboxComponent, selector: "vui-checkbox", inputs: ["disabled", "checked", "indeterminateEnabled"] }, { kind: "component", type: i12.VuiFloatingBarComponent, selector: "vui-floating-bar", inputs: ["selectedData", "groupSelected", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "nextDisabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "workflowTypeChanged"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.TooltipMessagePipe, name: "tooltipMessage" }, { kind: "pipe", type: i14.SearchPipe, name: "search" }, { kind: "pipe", type: i15.FilterPipe, name: "filter" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserGroupListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'user-group-list', template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            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\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            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\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            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\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          [disabled]=\"futureUsersWillSelect\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <ng-container *ngIf=\"featureflag\">\n          <input\n            *ngIf=\"isPaginationEnabled; else searchInputWithoutPagination\"\n            [(ngModel)]=\"searchKey\"\n            (ngModelChange)=\"onSearchKeyChange($event)\"\n            [disabled]=\"futureUsersWillSelect\"\n            type=\"text\"\n            placeholder=\"{{\n              currentTab === 'USER' ? 'Search User' : 'Search User Group'\n            }}\"\n          />\n          <ng-template #searchInputWithoutPagination>\n            <input\n              [(ngModel)]=\"searchKey\"\n              [disabled]=\"futureUsersWillSelect\"\n              type=\"text\"\n              placeholder=\"{{\n                currentTab === 'USER' ? 'Search User' : 'Search User Group'\n              }}\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"usersList | filter : searchKey : isPaginationEnabled as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n            [from]=\"userListInfo?.from\"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"(isPaginationEnabled && userListInfo?.users?.length > 0) || (!isPaginationEnabled && users?.length > 0); else nouser\">\n              <ng-container *ngIf=\"!isPaginationEnabled\">\n                <div class=\"user-list-select vx-mb-2\">\n                  <vui-checkbox\n                    *ngIf=\"!singleSelect\"\n                    #user\n                    [checked]=\"allUserSelected || futureUsersWillSelect\"\n                    [disabled]=\"\n                      allUserSelectedDisabled ||\n                      futureUsersWillSelect ||\n                      isAllDisabled\n                    \"\n                    (change)=\"selectAllUser($event)\"\n                  >\n                    <div\n                      class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                    >\n                      {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                    </div>\n                  </vui-checkbox>\n                </div>\n              </ng-container>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { save: [{
                type: Output
            }], cancel: [{
                type: Output
            }], groupEnabled: [{
                type: Input
            }], panelTitle: [{
                type: Input
            }], singleSelect: [{
                type: Input
            }], selectedReviewer: [{
                type: Input
            }], featureflag: [{
                type: Input
            }], reviewerWorkflowType: [{
                type: Input
            }], reviewerWorkflowTypeChange: [{
                type: Output
            }], mode: [{
                type: Input
            }], fieldType: [{
                type: Input
            }], fromResponsibility: [{
                type: Input
            }], assignorId: [{
                type: Input
            }], assigneeIds: [{
                type: Input
            }], reviewerIds: [{
                type: Input
            }], overseerIds: [{
                type: Input
            }], FromProgram: [{
                type: Input
            }], userListInfo: [{
                type: Input
            }], groupListInfo: [{
                type: Input
            }], fromApprovalWorkflow: [{
                type: Input
            }], approvalType: [{
                type: Input
            }], showFutureUsersSwitch: [{
                type: Input
            }], futureUsersWillSelect: [{
                type: Input
            }], isAllDisabled: [{
                type: Input
            }], isGroupTabShow: [{
                type: Input
            }], fetchUserData: [{
                type: Output
            }], disabledIds: [{
                type: Input
            }], nonRemovableUserIds: [{
                type: Input
            }], allUserSelectedDisabled: [{
                type: Input
            }], nonRemovableGroupIds: [{
                type: Input
            }], loading: [{
                type: Input
            }], setUserList: [{
                type: Input,
                args: ['userlist']
            }], setSelectedUser: [{
                type: Input,
                args: ['selectedUsers']
            }], setDefaultSelectedUsers: [{
                type: Input,
                args: ['defaultSelectedUsers']
            }], userType: [{
                type: Input
            }], isPaginationEnabled: [{
                type: Input
            }], setGroupList: [{
                type: Input,
                args: ['groupList']
            }], setSelectedGroup: [{
                type: Input,
                args: ['selectedGroups']
            }] } });
//# sourceMappingURL=data:application/json;base64, 