import { Component, EventEmitter, Input, Output } from '@angular/core';
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 "../../../ui-kit/popover/popover.component";
import * as i4 from "../../../ui-kit/popover/popover.directive";
import * as i5 from "@angular/forms";
import * as i6 from "../../../ui-kit/no-data/no-data.component";
import * as i7 from "../checkbox/checkbox.component";
import * as i8 from "../floating-bar/floating-bar.component";
import * as i9 from "./loader/loader.component";
import * as i10 from "../pipes/search.pipe";
export class RoleListComponent {
    constructor() {
        this.save = new EventEmitter();
        this.cancel = new EventEmitter();
        this.animation = true;
        this.ASSETS = ASSETS;
        this.searchKey = '';
        //Used to disable items
        this.systemRolesIds = [];
        //used to check checkbox
        this.selectedIds = [];
        //complete object of selected items
        this.selectedRoles = [];
        //contains id's of all the expanded rows
        this.expandedRows = [];
        //list of all the available roles
        this.rolesList = [];
        this.initialSelected = null;
        this.showConfirmation = false;
        // only used in select all function
        this.allListIds = [];
        //isAllItems
        this.allSelected = false;
        this.loading = false;
    }
    ngOnInit() {
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
    }
    set setList(value) {
        if (value && value?.length) {
            this.rolesList = [...value];
            this.setSystemRole(this.rolesList);
            this.allListIds = this.rolesList.map((ele) => ele?._id);
            this.setAllSelectedStatus();
        }
    }
    set selectedRolesVal(value) {
        this.selectedRoles = this.uniqueByProp([...this.selectedRoles, ...value], '_id');
        this.selectedIds = this.selectedRoles.map((ele) => ele?._id);
        if (!this.initialSelected || !this.initialSelected?.length) {
            this.initialSelected = this.selectedIds;
        }
        this.setAllSelectedStatus();
    }
    /**
     * #### Description
     *
     * Expands or collapse the row
     * @param type
     * @param [id]
     */
    expandOrCollapse(type, id) {
        switch (type) {
            case 'COLLAPSE': {
                this.expandedRows = this.expandedRows.filter((ele) => ele !== id);
                break;
            }
            case 'EXPAND': {
                this.expandedRows = Array.from(new Set([...this.expandedRows, ...[id]]));
                break;
            }
            case 'COLLAPSE_ALL': {
                this.expandedRows = [];
                break;
            }
        }
    }
    selectAll(evt) {
        if (evt?.target?.checked === true) {
            this.selectedRoles = this.rolesList;
            this.selectedIds = this.rolesList.map((ele) => ele?._id);
        }
        else {
            this.selectedRoles = [];
            this.selectedIds = [];
            this.setSystemRole(this.rolesList);
        }
        this.setAllSelectedStatus();
    }
    setAllSelectedStatus() {
        this.allSelected =
            this.allListIds.sort().toString() === this.selectedIds.sort()?.toString();
    }
    /**
     * #### Description
     *
     * Sets system role for admins and key admins
     * @param roles
     */
    setSystemRole(roles) {
        const systemRoles = roles.filter((ele) => ele?.roleName?.toLowerCase() === 'key admin' ||
            ele?.roleName?.toLowerCase() === 'admin');
        this.systemRolesIds = Array.from(new Set([
            ...this.systemRolesIds,
            ...systemRoles.map((ele) => ele?._id),
        ]));
        this.selectedIds = Array.from(new Set([...this.selectedIds, ...this.systemRolesIds]));
        this.selectedRoles = this.uniqueByProp([...systemRoles, ...this.selectedRoles], '_id');
    }
    /**
     * #### Description
     * Selects item or deselect a itme
     * @param evt
     * @param payload
     */
    selectItem(evt, payload) {
        evt?.target?.checked === true
            ? this.manipulateSelectedItems('ADD', payload)
            : this.manipulateSelectedItems('DELETE', payload);
    }
    /**
     * #### Description
     *
     * Manipulates selected items in role list
     * @param action :'ADD' | 'DELETE'
     * @param payload
     */
    manipulateSelectedItems(action, payload) {
        if (action === 'ADD') {
            this.selectedRoles = this.uniqueByProp([...this.selectedRoles, ...[payload]], '_id');
            this.selectedIds = this.selectedRoles.map((ele) => ele?._id);
        }
        else if (action === 'DELETE') {
            let index = this.selectedRoles.findIndex((ele) => ele?._id === payload?._id);
            if (index > -1) {
                this.selectedRoles = this.selectedRoles.filter((ele) => ele?._id !== payload?._id);
                this.selectedIds = this.selectedIds.filter((ele) => ele !== payload?._id);
            }
        }
        this.setAllSelectedStatus();
    }
    saveList() {
        if (this.initialSelected?.sort()?.toString() !==
            this.selectedIds.sort()?.toString()) {
            this.showConfirmation = true;
        }
        else {
            this.save.emit(this.selectedRoles);
        }
    }
    confirmAction(evt) {
        if (evt === 'YES') {
            this.save.emit(this.selectedRoles);
        }
        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());
    }
    //view and manage roles and groups text changed with featureflag
    permissionText(permission) {
        if (permission == 'view roles') {
            if (this.ff_rc_listing) {
                return 'view permissions';
            }
            else {
                return 'view permission groups';
            }
        }
        if (permission == 'manage roles') {
            if (this.ff_rc_listing) {
                return 'Manage permissions';
            }
            else {
                return 'Manage permission groups';
            }
        }
        if (permission == 'view groups') {
            if (this.featureflagGroup) {
                return 'view user groups';
            }
            else {
                return permission;
            }
        }
        if (permission == 'manage groups') {
            if (this.featureflagGroup) {
                return 'Manage user groups';
            }
            else {
                return permission;
            }
        }
        return permission;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleListComponent, selector: "role-list", inputs: { featureflagrole: "featureflagrole", featureflagGroup: "featureflagGroup", ff_rc_listing: "ff_rc_listing", setList: ["list", "setList"], loading: "loading", selectedRolesVal: ["selected", "selectedRolesVal"] }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<div class=\"roles-list\" [class.animate]=\"animation\">\n  <div\n    class=\"roles-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div id=\"titlename\" class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      {{ ff_rc_listing ? \"Select Permissions\" : \"Select Permission Group(s)\" }}\n    </div>\n  </div>\n\n  <div class=\"roles-list-body\">\n    <div class=\"search-block vx-mb-1\" [class.disabled]=\"!rolesList?.length\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [placeholder]=\"\n          ff_rc_listing ? 'Search Permissions' : 'Search Permission Groups'\n        \"\n        [(ngModel)]=\"searchKey\"\n      />\n    </div>\n    <div class=\"vx-mt-4\" *ngIf=\"loading\"><role-loader></role-loader></div>\n\n    <ng-container *ngIf=\"!loading\">\n      <ng-container\n        *ngIf=\"rolesList | search : searchKey : 'roleName' as roles\"\n      >\n        <div *ngIf=\"roles?.length > 0\" class=\"roles-list-mid vx-mb-4\">\n          <div class=\"role-box-select vx-pb-2\">\n            <vui-checkbox\n              [indeterminateEnabled]=\"false\"\n              #check\n              (change)=\"selectAll($event)\"\n              [(ngModel)]=\"allSelected\"\n              [checked]=\"allSelected\"\n            >\n              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt\">\n                {{ !check.checked ? \"Select All\" : \"Deselect All\" }}\n              </div>\n            </vui-checkbox>\n          </div>\n\n          <div\n            class=\"role-box vx-mb-2\"\n            *ngFor=\"let role of roles; let i = index\"\n          >\n            <div\n              (click)=\"\n                !expandedRows.includes(role?._id)\n                  ? expandOrCollapse('EXPAND', role?._id)\n                  : expandOrCollapse('COLLAPSE', role?._id)\n              \"\n              class=\"role-box-heading vx-d-flex vx-align-center vx-justify-between vx-p-3\"\n            >\n              <div class=\"left vx-d-flex vx-align-center vx-lh-4\">\n                <vui-checkbox\n                  [disabled]=\"systemRolesIds.includes(role?._id)\"\n                  [checked]=\"selectedIds.includes(role?._id)\"\n                  (change)=\"selectItem($event, role)\"\n                >\n                </vui-checkbox>\n                <div\n                  class=\"name vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"'Role name'\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{\n                    featureflagrole && role?.permissionGroupName\n                      ? role?.permissionGroupName\n                      : role?.roleName\n                  }}\n                </div>\n                <span\n                  *ngIf=\"role?.roleActions?.length > 0\"\n                  class=\"count vx-fs-9 vx-fw-600 vx-lh-3 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-ml-2\"\n                  >{{ role?.roleActions?.length }} PERMISSIONS</span\n                >\n              </div>\n              <div class=\"right vx-d-flex vx-align-center vx-justify-between\">\n                <div\n                  *ngIf=\"role?.licenseType === 'power users'\"\n                  class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\n                  [class.power-user]=\"true\"\n                  [class.all-user]=\"false\"\n                >\n                  Power User\n                </div>\n                <div\n                  *ngIf=\"role?.licenseType === 'light users'\"\n                  class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\n                  [class.power-user]=\"false\"\n                  [class.all-user]=\"true\"\n                >\n                  Light User\n                </div>\n                <button\n                  class=\"arrow-btn vx-fs-12 vx-paragraph-txt vx-m-0 vx-p-0 vx-d-flex vx-align-center\"\n                >\n                  <i *ngIf=\"!expandedRows.includes(role?._id)\" class=\"icons\"\n                    >&#xe970;</i\n                  >\n                  <i *ngIf=\"expandedRows.includes(role?._id)\" class=\"icons\"\n                    >&#xe9e8;</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div class=\"role-box-list\" *ngIf=\"expandedRows.includes(role?._id)\">\n              <ul class=\"vx-p-0 vx-m-0\">\n                <li\n                  class=\"vx-p-3 vx-lh-4\"\n                  *ngFor=\"let permission of role?.roleActions\"\n                >\n                  <div class=\"value vx-fs-12 vx-label-txt\">\n                    {{ permissionText(permission) }}\n                  </div>\n                </li>\n                <!-- <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">View User List</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Users <span class=\"vx-fs-10 vx-paragraph-txt\">(Create/Edit/Delete/Deactivate)</span></div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Over-ride Log In</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">View Statutory Holidays</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Statutory Holidays</div>\n                            </li> -->\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <app-no-data\n          *ngIf=\"roles?.length === 0\"\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"\n            searchKey?.length > 0 ? 'No match found.' : 'No Roles Found'\n          \"\n        ></app-no-data>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"roles-list-footer\" *ngIf=\"!showConfirmation\">\n      <vui-floating-bar (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\n        <!-- <div class=\"counter\" *ngIf=\"selectedRoles?.length\"\n                placement=\"left\">{{selectedRoles?.length}}</div> -->\n        <button\n          *ngIf=\"selectedRoles?.length\"\n          class=\"counter role-list-counter\"\n          appPopover\n          (click)=\"role.popover()\"\n          placement=\"left\"\n        >\n          {{ selectedRoles?.length }}\n        </button>\n        <div\n          class=\"name\"\n          *ngIf=\"selectedRoles?.length > 1\"\n          id=\"permissionselected\"\n        >\n          <span *ngIf=\"selectedRoles?.length === 1\">{{\n            featureflagrole ? \"Permission selected\" : \"Role selected\"\n          }}</span>\n          <span *ngIf=\"selectedRoles?.length > 1\">{{\n            featureflagrole ? \"Permissions selected\" : \"Roles selected\"\n          }}</span>\n        </div>\n      </vui-floating-bar>\n\n      <app-popover #role [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"let data of selectedRoles\">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i\n                    *ngIf=\"!systemRolesIds.includes(data?._id)\"\n                    class=\"icons\"\n                    (click)=\"selectItem({ target: { checked: false } }, data)\"\n                    >&#xe90d;</i\n                  >\n                  {{\n                    featureflagrole && data?.permissionGroupName\n                      ? data?.permissionGroupName\n                      : data?.roleName\n                  }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <div class=\"roles-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\" id=\"confirmationmessage\">\n        {{\n          featureflagrole\n            ? \"This action will update the Permission settings and impact the owners selected for the Program.\"\n            : \"This action will update the Role settings and impact the owners selected for the Program.\"\n        }}\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .roles-list{position:fixed;inset:0 500px 0 0}::ng-deep .roles-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .roles-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .roles-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .roles-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .roles-list-body .search-block{position:relative}::ng-deep .roles-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .roles-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .roles-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .roles-list-mid{width:calc(100% + .75rem);height:calc(100vh - 13.8rem);overflow:hidden;overflow-y:auto;padding-right:.75rem}::ng-deep .roles-list-mid .role-box{border:1px solid #f1f1f1;border-radius:.25rem}::ng-deep .roles-list-mid .role-box-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;width:100%}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .value{margin:0!important}::ng-deep .roles-list-mid .role-box-heading{cursor:pointer}::ng-deep .roles-list-mid .role-box-heading .left{width:calc(100% - 6.5rem)}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox{height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-heading .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 9.25rem)}::ng-deep .roles-list-mid .role-box-heading .left .count{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .roles-list-mid .role-box-heading .right{width:6.5rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label{border-radius:.125rem;height:.75rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label.all-user{background:#7aa6f7}::ng-deep .roles-list-mid .role-box-heading .right .status-label.power-user{background:#fadd8a}::ng-deep .roles-list-mid .role-box-heading .right button.arrow-btn{background:transparent;border:none;border-radius:0}::ng-deep .roles-list-mid .role-box-list ul{list-style-type:none}::ng-deep .roles-list-mid .role-box-list ul li{border-top:1px solid #f1f1f1;padding-left:2.5rem!important;position:relative}::ng-deep .roles-list-mid .role-box-list ul li:before{background:#dbdbdb;border-radius:.125rem;width:.25rem;height:.25rem;content:\"\";position:absolute;top:18px;left:18px}::ng-deep .roles-list-mid .role-box-list ul li .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-transform:capitalize}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .roles-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .roles-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .roles-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 .roles-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .roles-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .roles-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 .roles-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .roles-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 .roles-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.counter.role-list-counter{background:#1e5dd3!important;border:1px solid #1E5DD3!important;margin-left:0!important}.name{margin-left:4px}.name b{text-transform:lowercase}.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 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;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{width: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 .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: i7.CheckboxComponent, selector: "vui-checkbox", inputs: ["disabled", "checked", "indeterminateEnabled"] }, { kind: "component", type: i8.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: "component", type: i9.LoaderComponent, selector: "role-loader" }, { kind: "pipe", type: i10.SearchPipe, name: "search" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'role-list', template: "<div class=\"roles-list\" [class.animate]=\"animation\">\n  <div\n    class=\"roles-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div id=\"titlename\" class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      {{ ff_rc_listing ? \"Select Permissions\" : \"Select Permission Group(s)\" }}\n    </div>\n  </div>\n\n  <div class=\"roles-list-body\">\n    <div class=\"search-block vx-mb-1\" [class.disabled]=\"!rolesList?.length\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [placeholder]=\"\n          ff_rc_listing ? 'Search Permissions' : 'Search Permission Groups'\n        \"\n        [(ngModel)]=\"searchKey\"\n      />\n    </div>\n    <div class=\"vx-mt-4\" *ngIf=\"loading\"><role-loader></role-loader></div>\n\n    <ng-container *ngIf=\"!loading\">\n      <ng-container\n        *ngIf=\"rolesList | search : searchKey : 'roleName' as roles\"\n      >\n        <div *ngIf=\"roles?.length > 0\" class=\"roles-list-mid vx-mb-4\">\n          <div class=\"role-box-select vx-pb-2\">\n            <vui-checkbox\n              [indeterminateEnabled]=\"false\"\n              #check\n              (change)=\"selectAll($event)\"\n              [(ngModel)]=\"allSelected\"\n              [checked]=\"allSelected\"\n            >\n              <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt\">\n                {{ !check.checked ? \"Select All\" : \"Deselect All\" }}\n              </div>\n            </vui-checkbox>\n          </div>\n\n          <div\n            class=\"role-box vx-mb-2\"\n            *ngFor=\"let role of roles; let i = index\"\n          >\n            <div\n              (click)=\"\n                !expandedRows.includes(role?._id)\n                  ? expandOrCollapse('EXPAND', role?._id)\n                  : expandOrCollapse('COLLAPSE', role?._id)\n              \"\n              class=\"role-box-heading vx-d-flex vx-align-center vx-justify-between vx-p-3\"\n            >\n              <div class=\"left vx-d-flex vx-align-center vx-lh-4\">\n                <vui-checkbox\n                  [disabled]=\"systemRolesIds.includes(role?._id)\"\n                  [checked]=\"selectedIds.includes(role?._id)\"\n                  (change)=\"selectItem($event, role)\"\n                >\n                </vui-checkbox>\n                <div\n                  class=\"name vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"'Role name'\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{\n                    featureflagrole && role?.permissionGroupName\n                      ? role?.permissionGroupName\n                      : role?.roleName\n                  }}\n                </div>\n                <span\n                  *ngIf=\"role?.roleActions?.length > 0\"\n                  class=\"count vx-fs-9 vx-fw-600 vx-lh-3 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-ml-2\"\n                  >{{ role?.roleActions?.length }} PERMISSIONS</span\n                >\n              </div>\n              <div class=\"right vx-d-flex vx-align-center vx-justify-between\">\n                <div\n                  *ngIf=\"role?.licenseType === 'power users'\"\n                  class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\n                  [class.power-user]=\"true\"\n                  [class.all-user]=\"false\"\n                >\n                  Power User\n                </div>\n                <div\n                  *ngIf=\"role?.licenseType === 'light users'\"\n                  class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\n                  [class.power-user]=\"false\"\n                  [class.all-user]=\"true\"\n                >\n                  Light User\n                </div>\n                <button\n                  class=\"arrow-btn vx-fs-12 vx-paragraph-txt vx-m-0 vx-p-0 vx-d-flex vx-align-center\"\n                >\n                  <i *ngIf=\"!expandedRows.includes(role?._id)\" class=\"icons\"\n                    >&#xe970;</i\n                  >\n                  <i *ngIf=\"expandedRows.includes(role?._id)\" class=\"icons\"\n                    >&#xe9e8;</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div class=\"role-box-list\" *ngIf=\"expandedRows.includes(role?._id)\">\n              <ul class=\"vx-p-0 vx-m-0\">\n                <li\n                  class=\"vx-p-3 vx-lh-4\"\n                  *ngFor=\"let permission of role?.roleActions\"\n                >\n                  <div class=\"value vx-fs-12 vx-label-txt\">\n                    {{ permissionText(permission) }}\n                  </div>\n                </li>\n                <!-- <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">View User List</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Users <span class=\"vx-fs-10 vx-paragraph-txt\">(Create/Edit/Delete/Deactivate)</span></div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Over-ride Log In</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">View Statutory Holidays</div>\n                            </li>\n                            <li class=\"vx-p-3 vx-lh-4\">\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Statutory Holidays</div>\n                            </li> -->\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <app-no-data\n          *ngIf=\"roles?.length === 0\"\n          [noDataImage]=\"ASSETS.search_data\"\n          [noDataText]=\"\n            searchKey?.length > 0 ? 'No match found.' : 'No Roles Found'\n          \"\n        ></app-no-data>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"roles-list-footer\" *ngIf=\"!showConfirmation\">\n      <vui-floating-bar (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\n        <!-- <div class=\"counter\" *ngIf=\"selectedRoles?.length\"\n                placement=\"left\">{{selectedRoles?.length}}</div> -->\n        <button\n          *ngIf=\"selectedRoles?.length\"\n          class=\"counter role-list-counter\"\n          appPopover\n          (click)=\"role.popover()\"\n          placement=\"left\"\n        >\n          {{ selectedRoles?.length }}\n        </button>\n        <div\n          class=\"name\"\n          *ngIf=\"selectedRoles?.length > 1\"\n          id=\"permissionselected\"\n        >\n          <span *ngIf=\"selectedRoles?.length === 1\">{{\n            featureflagrole ? \"Permission selected\" : \"Role selected\"\n          }}</span>\n          <span *ngIf=\"selectedRoles?.length > 1\">{{\n            featureflagrole ? \"Permissions selected\" : \"Roles selected\"\n          }}</span>\n        </div>\n      </vui-floating-bar>\n\n      <app-popover #role [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"let data of selectedRoles\">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i\n                    *ngIf=\"!systemRolesIds.includes(data?._id)\"\n                    class=\"icons\"\n                    (click)=\"selectItem({ target: { checked: false } }, data)\"\n                    >&#xe90d;</i\n                  >\n                  {{\n                    featureflagrole && data?.permissionGroupName\n                      ? data?.permissionGroupName\n                      : data?.roleName\n                  }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <div class=\"roles-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\" id=\"confirmationmessage\">\n        {{\n          featureflagrole\n            ? \"This action will update the Permission settings and impact the owners selected for the Program.\"\n            : \"This action will update the Role settings and impact the owners selected for the Program.\"\n        }}\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .roles-list{position:fixed;inset:0 500px 0 0}::ng-deep .roles-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .roles-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .roles-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .roles-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .roles-list-body .search-block{position:relative}::ng-deep .roles-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .roles-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .roles-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .roles-list-mid{width:calc(100% + .75rem);height:calc(100vh - 13.8rem);overflow:hidden;overflow-y:auto;padding-right:.75rem}::ng-deep .roles-list-mid .role-box{border:1px solid #f1f1f1;border-radius:.25rem}::ng-deep .roles-list-mid .role-box-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;width:100%}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .value{margin:0!important}::ng-deep .roles-list-mid .role-box-heading{cursor:pointer}::ng-deep .roles-list-mid .role-box-heading .left{width:calc(100% - 6.5rem)}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox{height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-heading .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 9.25rem)}::ng-deep .roles-list-mid .role-box-heading .left .count{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .roles-list-mid .role-box-heading .right{width:6.5rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label{border-radius:.125rem;height:.75rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label.all-user{background:#7aa6f7}::ng-deep .roles-list-mid .role-box-heading .right .status-label.power-user{background:#fadd8a}::ng-deep .roles-list-mid .role-box-heading .right button.arrow-btn{background:transparent;border:none;border-radius:0}::ng-deep .roles-list-mid .role-box-list ul{list-style-type:none}::ng-deep .roles-list-mid .role-box-list ul li{border-top:1px solid #f1f1f1;padding-left:2.5rem!important;position:relative}::ng-deep .roles-list-mid .role-box-list ul li:before{background:#dbdbdb;border-radius:.125rem;width:.25rem;height:.25rem;content:\"\";position:absolute;top:18px;left:18px}::ng-deep .roles-list-mid .role-box-list ul li .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-transform:capitalize}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .roles-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .roles-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .roles-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 .roles-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .roles-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .roles-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 .roles-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .roles-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 .roles-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.counter.role-list-counter{background:#1e5dd3!important;border:1px solid #1E5DD3!important;margin-left:0!important}.name{margin-left:4px}.name b{text-transform:lowercase}.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 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;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{width: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 .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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
            }], featureflagrole: [{
                type: Input
            }], featureflagGroup: [{
                type: Input
            }], ff_rc_listing: [{
                type: Input
            }], setList: [{
                type: Input,
                args: ['list']
            }], loading: [{
                type: Input
            }], selectedRolesVal: [{
                type: Input,
                args: ['selected']
            }] } });
//# sourceMappingURL=data:application/json;base64, 