verben-authentication-ui 1.0.13 → 1.0.15

package/fesm2022/verben-authentication-ui-src-lib-components-role-control.mjs

@@ -0,0 +1,1893 @@
+import * as i0 from '@angular/core';
+import { Injectable, viewChildren, Component, ViewChild, ViewChildren, Input, NgModule } from '@angular/core';
+import * as i5 from 'verben-ng-ui';
+import { ColumnDirective, DataFilterType } from 'verben-ng-ui';
+import { SearchOperator, SearchPropertySign, ErrorResponse, ObjectState, SearchPropertyValueType, SortDirection } from 'verben-authentication-ui/src/lib/models';
+import { Subject, debounceTime } from 'rxjs';
+import * as i1 from 'verben-authentication-ui/src/lib/services';
+import * as i3 from '@angular/forms';
+import * as i4 from '@angular/common';
+import { SharedModule } from 'verben-authentication-ui/src/lib/shared';
+
+const baseStyle = {
+    width: '100%',
+    fontFamily: '"Fraunces", serif',
+    fontSize: '125%',
+    whiteSpace: 'nowrap',
+    margin: '0',
+    border: '1px solid #D4A007',
+    borderRadius: '16px',
+    borderCollapse: 'separate',
+    borderSpacing: '0',
+    // tableLayout: 'fixed',
+    overflow: 'hidden',
+    rows: {
+        even: {
+            backgroundColor: '#FDFDFD',
+        },
+        odd: {
+            backgroundColor: '#F1F4FB',
+        },
+        height: '68px',
+    },
+    cells: {
+        padding: '0.5rem 1rem',
+    },
+    header: {
+        // stickyTop: true,
+        // zIndex: 2,
+        backgroundColor: '#EFF2FB',
+        fontWeight: 'bold',
+        textAlign: 'left',
+        padding: '12px 16px',
+        height: '30px',
+    },
+    footer: {
+        // stickyBottom: true,
+        // zIndex: 2,
+        padding: '3px',
+    },
+    //   body: {
+    //     background: '#fff',
+    //     padding: '4px 5px',
+    //     textAlign: 'center',
+    //   },
+    // firstColumn: {
+    //   stickyLeft: true,
+    //   zIndex: 1,
+    // },
+    lastColumn: {
+    // stickyRight: true,
+    // zIndex: 1,
+    },
+};
+
+var UIs;
+(function (UIs) {
+    UIs["ProductDistribution"] = "ProductDistribution";
+    UIs["Terminals"] = "Terminals";
+    UIs["Meters"] = "Meters";
+    UIs["ProductInbound"] = "ProductInbound";
+    UIs["TerminalDocumentation"] = "TerminalDocumentation";
+    UIs["Laboratories"] = "Laboratories";
+    UIs["Surveyors"] = "Surveyors";
+    UIs["Products"] = "Products";
+    UIs["Stocks"] = "Stocks";
+    UIs["Tanks"] = "Tanks";
+    UIs["Customers"] = "Customers";
+    UIs["ProductAllocation"] = "ProductAllocation";
+    UIs["ReleaseManagement"] = "ReleaseManagement";
+    UIs["ProductPricing"] = "ProductPricing";
+    UIs["Purchases"] = "Purchases";
+    UIs["Agents"] = "Agents";
+    UIs["Banks"] = "Banks";
+    UIs["Vendors"] = "Vendors";
+    UIs["Vessels"] = "Vessels";
+    UIs["ExpenseList"] = "ExpenseList";
+    UIs["ProcurementDocumentation"] = "ProcurementDocumentation";
+    UIs["Journal"] = "Journal";
+    UIs["JournalTemplate"] = "JournalTemplate";
+    UIs["RecurringJournal"] = "RecurringJournal";
+    UIs["InterCompanyJournal"] = "InterCompanyJournal";
+    UIs["InterCompanyJournalTemplate"] = "InterCompanyJournalTemplate";
+    UIs["UserManagement"] = "UserManagement";
+    UIs["AccessRequest"] = "AccessRequest";
+    UIs["RolesAndPermissions"] = "RolesAndPermissions";
+    UIs["AuditTrail"] = "AuditTrail";
+    UIs["LogViewer"] = "LogViewer";
+    UIs["MessageHistory"] = "MessageHistory";
+    UIs["MessageConfig"] = "MessageConfig";
+    UIs["MessageList"] = "MessageList";
+    UIs["Config"] = "Config";
+    UIs["Reports"] = "Reports";
+})(UIs || (UIs = {}));
+
+var UIActions;
+(function (UIActions) {
+    UIActions["Save"] = "Save";
+    UIActions["Edit"] = "Edit";
+    UIActions["Delete"] = "Delete";
+})(UIActions || (UIActions = {}));
+
+var ChildrenType;
+(function (ChildrenType) {
+    ChildrenType["Permission"] = "Permission";
+    ChildrenType["Action"] = "Action";
+})(ChildrenType || (ChildrenType = {}));
+
+class RoleControlService {
+    constructor() { }
+    get roleColumns() {
+        return [
+            {
+                id: 'select',
+                header: '',
+                canExport: false,
+            },
+            {
+                id: 'createdAt',
+                header: 'CREATED',
+                accessorKey: 'CreatedAt',
+            },
+            {
+                id: 'updatedAt',
+                header: 'UPDATED',
+                accessorKey: 'UpdatedAt',
+            },
+            {
+                id: 'name',
+                header: 'NAME',
+                accessorFn: (row) => {
+                    return row;
+                },
+                importKey: 'Name',
+            },
+            {
+                id: 'permissions',
+                header: 'PERMISSIONS',
+                accessorFn: (row) => {
+                    const sum = row.RoleContexts.filter((x) => x.Selected == true).length;
+                    return `${sum} of ${row.RoleContexts.length} Permissions`;
+                },
+            },
+            {
+                id: 'actions',
+                header: 'ACTIONS',
+                accessorFn: (row) => {
+                    return row;
+                },
+                canExport: false,
+            },
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+var DateFilterTypes;
+(function (DateFilterTypes) {
+    DateFilterTypes["Before"] = "LT";
+    DateFilterTypes["On"] = "EQ";
+    DateFilterTypes["After"] = "GT";
+})(DateFilterTypes || (DateFilterTypes = {}));
+class RoleControlComponent {
+    authService;
+    roleControlSvc;
+    utilService;
+    server;
+    cdr;
+    fb;
+    envSvc;
+    importService;
+    visibleColumnDef = [];
+    styles = baseStyle;
+    data = [];
+    cardData = [];
+    //dataCopy: CardData[] = [];
+    currentData = null;
+    currentExpandedCard = null;
+    cardContext = null;
+    cardContextHistory = [];
+    cardContextHistoryData = [];
+    //dataCopyHistory: CardData[][] = [];
+    cardDataView;
+    dataView;
+    popUps;
+    tableView;
+    isGlobal = true;
+    serviceName = null;
+    application = null;
+    pageSize = 10;
+    searchDebounceTime = 500;
+    permissionConfig = null;
+    pageState = null;
+    sourceData = [];
+    isOpen = false;
+    openDropdownId = null;
+    currentFilters = [];
+    currentSorts = [];
+    searchTerm$ = new Subject();
+    visibleColumns = [];
+    columnTemplates = viewChildren(ColumnDirective);
+    filterArray = [
+        {
+            name: 'CreatedAt',
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: 'UpdatedAt',
+            type: DataFilterType.Date,
+            checked: false,
+        },
+    ];
+    sortOptions = [
+        {
+            name: 'CreatedAt',
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: 'UpdatedAt',
+            type: DataFilterType.Date,
+            checked: false,
+        },
+    ];
+    searchContext = '';
+    searchContextHistory = [];
+    isInputFocused = false;
+    // private _searchItem: string = '';
+    // get searchItem(): string {
+    //   return this._searchItem
+    // }
+    // set searchItem(value: string) {
+    //   this._searchItem = value;
+    //   this.searchTerm$.next(value);
+    // }
+    // form: FormGroup;
+    childPermissionRef = ChildrenType.Permission;
+    roleContextsStore = [];
+    roleActionsStore = [];
+    currentSearchTerm = '';
+    constructor(authService, roleControlSvc, utilService, server, cdr, fb, envSvc, importService) {
+        this.authService = authService;
+        this.roleControlSvc = roleControlSvc;
+        this.utilService = utilService;
+        this.server = server;
+        this.cdr = cdr;
+        this.fb = fb;
+        this.envSvc = envSvc;
+        this.importService = importService;
+        this.visibleColumnDef = roleControlSvc.roleColumns;
+        this.visibleColumns = roleControlSvc.roleColumns.map((col) => ({
+            checked: true,
+            name: typeof col.header === 'string' ? col.header : col.id,
+            type: DataFilterType.Bool,
+        }));
+        // this.form = this.fb.group({
+        //   Name: new FormControl<string | null>(null, Validators.required),
+        // });
+    }
+    async ngOnInit() {
+        const mockData = this.getMockRoles();
+        const roles = await this.getAllRoles();
+        const contextsRes = await this.getSavedContexts();
+        if (this.isGlobal) {
+            if (contextsRes) {
+                this.roleContextsStore = contextsRes;
+                this.roleActionsStore = contextsRes.flatMap((x) => x.RoleActions);
+                const authConfig = contextsRes.map((x) => {
+                    return {
+                        Name: x.Name,
+                        Actions: x.RoleActions.map((y) => {
+                            return y.Name;
+                        }),
+                    };
+                });
+                this.sourceData = authConfig;
+            }
+        }
+        else {
+            this.sourceData = this.authService.authorizationConfig;
+        }
+        if (roles) {
+            this.setUpMappedData(roles);
+            this.setUpCardData();
+        }
+        this.searchTerm$
+            .pipe(debounceTime(this.searchDebounceTime)) // Adjust debounce time here (in ms)
+            .subscribe(async (searchTerm) => {
+            this.currentSearchTerm = searchTerm;
+            this.updateFiltersAndSorts(true);
+        });
+    }
+    async getSavedContexts() {
+        if (!this.isGlobal || !this.application) {
+            return undefined;
+        }
+        var payload = [
+            {
+                PropertyName: 'Application',
+                EntityValue: this.application,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+            // {
+            //   PropertyName: 'APIKey',
+            //   EntityValue: this.envSvc.environment.APIKey,
+            //   Operator: SearchOperator.And,
+            //   Sign: SearchPropertySign.EQ,
+            // },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Application/SearchApplicationRoleContexts/0/0`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
+    async getAllRoles() {
+        //   var payload: SearchPropertyValue[] = [
+        //     {
+        //       PropertyName: 'APIKey',
+        //       EntityValue: this.envSvc.environment.APIKey,
+        //       Operator: SearchOperator.And,
+        //       Sign: SearchPropertySign.EQ
+        //     }
+        // ]
+        this.utilService.sendBI(true);
+        const res = await this.server.get(`Role/GetRoles/0/${this.pageSize}`);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            this.pageState = res;
+            var result = res.Result;
+            return result;
+        }
+    }
+    async loadMore() {
+        if (!this.pageState) {
+            return;
+        }
+        this.utilService.sendBI(true);
+        const res = this.currentFilters.length > 0 ||
+            this.currentSorts.length > 0 ||
+            this.currentSearchTerm.trim().length > 0
+            ? await this.loadMoreFiltersAndSorts()
+            : await this.server.get(`Role/GetRoles/${this.pageState.Skip}/${this.pageSize}`);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            this.pageState = res;
+            var result = res.Result;
+            const data = this.setUpMappedDataExtra(result);
+            this.data = this.data.concat(data);
+            this.setUpCardDataExtra(data);
+        }
+    }
+    getApplicationContextCode(name) {
+        const item = this.roleContextsStore.find((x) => x.Name == name);
+        return item ? item.Code : '';
+    }
+    getApplicationActionCode(name) {
+        const item = this.roleActionsStore.find((x) => x.Name == name);
+        return item ? item.Code : '';
+    }
+    findParent(cardData, target) {
+        for (const item of cardData) {
+            if (item.children.includes(target)) {
+                return item; // Immediate parent found
+            }
+            const parent = this.findParent(item.children, target);
+            if (parent) {
+                return parent;
+            }
+        }
+        return null; // Not found
+    }
+    isAllSelected(item) {
+        const parent = this.cardContextHistoryData.length > 0
+            ? this.findParent(this.cardContextHistoryData[0], item)
+            : this.findParent(this.cardData, item);
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Action &&
+            parent.data.RoleActions.some((y) => !y.Selected)) {
+            return false;
+        }
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Permission &&
+            parent.data.RoleContexts.some((y) => !y.Selected)) {
+            return false;
+        }
+        return true;
+    }
+    isCheckboxDisabled(item) {
+        const parent = this.cardContextHistoryData.length > 0
+            ? this.findParent(this.cardContextHistoryData[0], item)
+            : this.findParent(this.cardData, item);
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Action &&
+            (parent.data.Selected == false ||
+                (this.permissionConfig != null &&
+                    !this.permissionConfig.Actions['AddAction']))) {
+            return true;
+        }
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Permission &&
+            this.permissionConfig != null &&
+            !this.permissionConfig.Actions['AddContext']) {
+            return true;
+        }
+        return false;
+    }
+    setUpMappedData(data) {
+        this.data = data.map((x) => {
+            return {
+                ...x,
+                Id: x.Code,
+                ChildrenType: ChildrenType.Permission,
+                RoleContexts: this.sourceData.map((config) => {
+                    const existingId = x.RoleContexts.findIndex((y) => y.Name == config.Name);
+                    var context = {
+                        ChildrenType: ChildrenType.Action,
+                        Selected: existingId > -1 ? true : false,
+                        RoleActions: config.Actions.map((action) => {
+                            const existingAction = existingId > -1
+                                ? x.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                : -1;
+                            var act = {
+                                Selected: existingAction > -1 ? true : false,
+                                Name: action,
+                                Role: x.Code,
+                                Context: '',
+                                id: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                Id: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                CreatedAt: new Date(),
+                                UpdatedAt: new Date(),
+                                DataState: ObjectState.New,
+                                TenantId: x.TenantId,
+                                Code: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                ServiceName: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .ServiceName
+                                    : '',
+                                APIKey: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .APIKey
+                                    : this.envSvc.environment.APIKey,
+                                ApplicationRoleAction: this.getApplicationActionCode(action),
+                            };
+                            return act;
+                        }),
+                        Name: config.Name,
+                        Role: x.Code,
+                        id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        Id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        CreatedAt: new Date(),
+                        UpdatedAt: new Date(),
+                        DataState: ObjectState.New,
+                        TenantId: x.TenantId,
+                        Code: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        ServiceName: existingId > -1 ? x.RoleContexts[existingId].ServiceName : '',
+                        APIKey: existingId > -1
+                            ? x.RoleContexts[existingId].APIKey
+                            : this.envSvc.environment.APIKey,
+                        ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                    };
+                    return context;
+                }),
+            };
+        });
+    }
+    setUpMappedDataExtra(data) {
+        return data.map((x) => {
+            return {
+                ...x,
+                Id: x.Code,
+                ChildrenType: ChildrenType.Permission,
+                RoleContexts: this.sourceData.map((config) => {
+                    const existingId = x.RoleContexts.findIndex((y) => y.Name == config.Name);
+                    var context = {
+                        ChildrenType: ChildrenType.Action,
+                        Selected: existingId > -1 ? true : false,
+                        RoleActions: config.Actions.map((action) => {
+                            const existingAction = existingId > -1
+                                ? x.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                : -1;
+                            var act = {
+                                Selected: existingAction > -1 ? true : false,
+                                Name: action,
+                                Role: x.Code,
+                                Context: '',
+                                id: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                Id: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                CreatedAt: new Date(),
+                                UpdatedAt: new Date(),
+                                DataState: ObjectState.New,
+                                TenantId: x.TenantId,
+                                Code: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .Code
+                                    : '',
+                                ServiceName: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .ServiceName
+                                    : '',
+                                APIKey: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .APIKey
+                                    : this.envSvc.environment.APIKey,
+                                ApplicationRoleAction: this.getApplicationActionCode(action),
+                            };
+                            return act;
+                        }),
+                        Name: config.Name,
+                        Role: x.Code,
+                        id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        Id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        CreatedAt: new Date(),
+                        UpdatedAt: new Date(),
+                        DataState: ObjectState.New,
+                        TenantId: x.TenantId,
+                        Code: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+                        ServiceName: existingId > -1 ? x.RoleContexts[existingId].ServiceName : '',
+                        APIKey: existingId > -1
+                            ? x.RoleContexts[existingId].APIKey
+                            : this.envSvc.environment.APIKey,
+                        ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                    };
+                    return context;
+                }),
+            };
+        });
+    }
+    setUpCardData() {
+        const cardData = this.data.map((x) => {
+            return {
+                selected: false,
+                title: x.Name,
+                data: x,
+                body: [],
+                children: x.RoleContexts.map((c) => {
+                    return {
+                        selected: false,
+                        title: this.getFormattedName(c.Name),
+                        data: c,
+                        body: [],
+                        children: c.RoleActions.map((a) => {
+                            return {
+                                selected: false,
+                                title: this.getFormattedName(a.Name),
+                                data: a,
+                                body: [],
+                                children: [],
+                            };
+                        }),
+                    };
+                }),
+            };
+        });
+        this.cardData = cardData;
+    }
+    setUpCardDataExtra(baseData) {
+        const cardData = baseData.map((x) => {
+            return {
+                selected: false,
+                title: x.Name,
+                data: x,
+                body: [],
+                children: x.RoleContexts.map((c) => {
+                    return {
+                        selected: false,
+                        title: this.getFormattedName(c.Name),
+                        data: c,
+                        body: [],
+                        children: c.RoleActions.map((a) => {
+                            return {
+                                selected: false,
+                                title: this.getFormattedName(a.Name),
+                                data: a,
+                                body: [],
+                                children: [],
+                            };
+                        }),
+                    };
+                }),
+            };
+        });
+        this.cardData = this.cardData.concat(cardData);
+    }
+    getFormattedName(name) {
+        // Split the key on capital letters, handling "And" as lowercase
+        const words = name
+            .split(/(?=[A-Z])/)
+            .map((word) => (word === 'And' ? 'and' : word));
+        // Join the words with spaces
+        return words.join(' ');
+    }
+    viewDetailsFromTable(data) {
+        const cardData = this.cardData.find((x) => x.data == data);
+        console.log({ Data: data });
+        console.log({ CardData: this.cardData });
+        if (cardData) {
+            this.dataView.isTableView = false;
+            this.viewDetails(cardData);
+        }
+        this.closePopUp();
+    }
+    viewDetails(context) {
+        this.cardContextHistory.push(context);
+        this.cardContextHistoryData.push(this.cardData);
+        if (context.data.ChildrenType &&
+            context.data.ChildrenType != this.childPermissionRef) {
+            this.searchContextHistory.push(this.searchContext);
+            this.searchContext = '';
+        }
+        this.cardData = context.children;
+        this.cardDataView.clearData();
+    }
+    viewDetailsChild(context) {
+        if (this.currentExpandedCard) {
+            this.cardContextHistory.push(this.currentExpandedCard);
+            this.cardContextHistory.push(context);
+            this.cardContextHistoryData.push(this.cardData);
+            this.cardContextHistoryData.push(this.currentExpandedCard.children);
+            this.cardData = context.children;
+            this.cardDataView.clearData();
+        }
+    }
+    roleCardClicked(item) {
+        this.currentData = this.cardDataView.onItemClick(item);
+        // if (this.currentData) {
+        //   this.form.controls['Name'].setValue(this.currentData.data?.Name);
+        // }
+    }
+    toggleChildren(item) {
+        var currToggleState = item.isChildrenExpanded;
+        this.cardData.forEach((_) => {
+            _.isChildrenExpanded = false;
+        });
+        item.isChildrenExpanded = !currToggleState;
+        if (item.isChildrenExpanded) {
+            this.currentExpandedCard = item;
+        }
+        else {
+            this.currentExpandedCard = null;
+        }
+    }
+    goToTableView() {
+        if (!this.currentData) {
+            return;
+        }
+        this.dataView.toggleView();
+        const id = this.currentData.data ? this.currentData.data.Id : '';
+        if (id.trim().length > 0 && !this.tableView.isRowEditing(id)) {
+            this.tableView.toggleRowEdit(id);
+        }
+    }
+    closeDetails() {
+        this.cardData =
+            this.cardContextHistoryData[this.cardContextHistoryData.length - 1];
+        this.cardContextHistoryData.pop();
+        this.cardContextHistory.pop();
+        if (this.searchContextHistory.length > 0) {
+            this.searchContext =
+                this.searchContextHistory[this.searchContextHistory.length - 1];
+            this.searchContextHistory.pop();
+        }
+        else {
+            this.searchContext = '';
+        }
+        setTimeout(() => {
+            if (this.dataView.isTableView) {
+                this.dataView.toggleView();
+            }
+        }, 200);
+    }
+    getCardSubCaption(item) {
+        const selected = item.children.filter((x) => x.data.Selected).length;
+        const total = item.children.length;
+        return `${selected} of ${total} ${total > 1 ? item.data.ChildrenType + 's' : item.data.ChildrenType}`;
+    }
+    getUpdatedRole(role) {
+        const newRole = role;
+        newRole.RoleContexts = role.RoleContexts.filter((x) => x.Selected).map((y) => {
+            y.RoleActions = y.RoleActions.filter((z) => z.Selected);
+            return y;
+        });
+        newRole.DataState =
+            newRole.DataState == ObjectState.New
+                ? ObjectState.New
+                : ObjectState.Changed;
+        newRole.Id = '';
+        return newRole;
+    }
+    async saveRole() {
+        if (this.currentData) {
+            var role = this.currentData.data;
+            // role.Name = this.form.controls['Name'].value;
+            if (this.currentData.data.Name.trim().length == 0) {
+                this.utilService.showInfo('Role name cannot be empty');
+                return;
+            }
+            const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role)));
+            this.utilService.sendBI(true);
+            const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+            }
+            else {
+                this.utilService.showSuccess('Role saved successfully');
+                const result = res;
+                if (result.length > 0) {
+                    var roleResult = result[0];
+                    var mappedRoleSave = {
+                        ...roleResult,
+                        ChildrenType: ChildrenType.Permission,
+                        RoleContexts: this.sourceData.map((config) => {
+                            const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
+                            var context = {
+                                ChildrenType: ChildrenType.Action,
+                                Selected: existingId > -1 ? true : false,
+                                RoleActions: config.Actions.map((action) => {
+                                    const existingAction = existingId > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                        : -1;
+                                    var act = {
+                                        Selected: existingAction > -1 ? true : false,
+                                        Name: action,
+                                        Role: roleResult.Code,
+                                        Context: '',
+                                        id: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                            : '',
+                                        Id: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                            : '',
+                                        CreatedAt: new Date(),
+                                        UpdatedAt: new Date(),
+                                        DataState: ObjectState.New,
+                                        TenantId: roleResult.TenantId,
+                                        Code: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                            : '',
+                                        ServiceName: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
+                                            : '',
+                                        APIKey: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                            : this.envSvc.environment.APIKey,
+                                        ApplicationRoleAction: this.getApplicationActionCode(action),
+                                    };
+                                    return act;
+                                }),
+                                Name: config.Name,
+                                Role: roleResult.Code,
+                                id: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].Code
+                                    : '',
+                                Id: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].Code
+                                    : '',
+                                CreatedAt: new Date(),
+                                UpdatedAt: new Date(),
+                                DataState: ObjectState.New,
+                                TenantId: roleResult.TenantId,
+                                Code: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].Code
+                                    : '',
+                                ServiceName: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].ServiceName
+                                    : '',
+                                APIKey: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].APIKey
+                                    : this.envSvc.environment.APIKey,
+                                ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                            };
+                            return context;
+                        }),
+                    };
+                    const itemIndex = this.data.findIndex((x) => x == this.currentData?.data);
+                    if (itemIndex > -1) {
+                        this.data[itemIndex].Code = mappedRoleSave.Code;
+                        this.data[itemIndex].Id = mappedRoleSave.Code;
+                        this.data[itemIndex].DataState = mappedRoleSave.DataState;
+                        this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+                        this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+                        mappedRoleSave.RoleContexts.forEach((x, i) => {
+                            this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+                            this.data[itemIndex].RoleContexts[i].Code = x.Code;
+                            this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+                            x.RoleActions.forEach((y, j) => {
+                                this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                                    mappedRoleSave.Code;
+                                this.data[itemIndex].RoleContexts[i].RoleActions[j].Code =
+                                    y.Code;
+                                this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName = y.ServiceName;
+                            });
+                        });
+                        this.data = this.data.map((x) => x);
+                        this.cacheItem(this.data[itemIndex]);
+                        // this.currentData = {
+                        //   selected: true,
+                        //   title: mappedRoleSave.Name,
+                        //   data: mappedRoleSave,
+                        //   isChildrenExpanded: this.currentData.isChildrenExpanded,
+                        //   body: [],
+                        //   children: mappedRoleSave.RoleContexts.map((c) => {
+                        //     return {
+                        //       selected: false,
+                        //       title: this.getFormattedName(c.Name),
+                        //       data: c,
+                        //       body: [],
+                        //       children: c.RoleActions.map((a) => {
+                        //         return {
+                        //           selected: false,
+                        //           title: this.getFormattedName(a.Name),
+                        //           data: a,
+                        //           body: [],
+                        //           children: [],
+                        //         };
+                        //       }),
+                        //     };
+                        //   }),
+                        // };
+                    }
+                }
+            }
+        }
+    }
+    async tableSaveRole(role, callBack) {
+        if (role.Name.trim().length == 0) {
+            this.utilService.showInfo('Role name cannot be empty');
+            return;
+        }
+        const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role)));
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+        }
+        else {
+            this.utilService.showSuccess('Role saved successfully');
+            const result = res;
+            if (result.length > 0) {
+                var roleResult = result[0];
+                var mappedRoleSave = {
+                    ...roleResult,
+                    ChildrenType: ChildrenType.Permission,
+                    RoleContexts: this.sourceData.map((config) => {
+                        const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
+                        var context = {
+                            ChildrenType: ChildrenType.Action,
+                            Selected: existingId > -1 ? true : false,
+                            RoleActions: config.Actions.map((action) => {
+                                const existingAction = existingId > -1
+                                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                    : -1;
+                                var act = {
+                                    Selected: existingAction > -1 ? true : false,
+                                    Name: action,
+                                    Role: roleResult.Code,
+                                    Context: '',
+                                    id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    Id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    CreatedAt: new Date(),
+                                    UpdatedAt: new Date(),
+                                    DataState: ObjectState.New,
+                                    TenantId: roleResult.TenantId,
+                                    Code: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    ServiceName: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
+                                        : '',
+                                    APIKey: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                        : this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
+                                };
+                                return act;
+                            }),
+                            Name: config.Name,
+                            Role: roleResult.Code,
+                            id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            Id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            TenantId: roleResult.TenantId,
+                            Code: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            ServiceName: existingId > -1
+                                ? roleResult.RoleContexts[existingId].ServiceName
+                                : '',
+                            APIKey: existingId > -1
+                                ? roleResult.RoleContexts[existingId].APIKey
+                                : this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                        };
+                        return context;
+                    }),
+                };
+                const itemIndex = this.data.findIndex((x) => x == this.currentData?.data);
+                if (itemIndex > -1) {
+                    this.data[itemIndex].Code = mappedRoleSave.Code;
+                    this.data[itemIndex].Id = mappedRoleSave.Code;
+                    this.data[itemIndex].DataState = mappedRoleSave.DataState;
+                    this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+                    this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+                    mappedRoleSave.RoleContexts.forEach((x, i) => {
+                        this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+                        this.data[itemIndex].RoleContexts[i].Code = x.Code;
+                        this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+                        x.RoleActions.forEach((y, j) => {
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                                mappedRoleSave.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                                y.ServiceName;
+                        });
+                    });
+                    this.data = this.data.map((x) => x);
+                    this.cacheItem(this.data[itemIndex]);
+                }
+                callBack();
+            }
+        }
+    }
+    async saveRoleDynamic(item) {
+        if (this.isCheckboxDisabled(item)) {
+            this.utilService.showInfo('Parent UI not selected');
+            return;
+        }
+        var role = this.cardContextHistory.length > 0
+            ? this.cardContextHistory[0]
+            : this.currentExpandedCard
+                ? this.currentExpandedCard
+                : null;
+        var cardDataRef = this.cardContextHistoryData.length > 0
+            ? this.cardContextHistoryData[0]
+            : this.currentExpandedCard
+                ? this.cardData
+                : null;
+        // const isExpandedCard: boolean =
+        //   this.cardContextHistory.length > 0
+        //     ? false
+        //     : this.currentExpandedCard
+        //     ? true
+        //     : false;
+        if (!role) {
+            return;
+        }
+        if (role.data.Name.trim().length == 0) {
+            item.data.Selected = false;
+            this.utilService.showInfo('Role name cannot be empty');
+            return;
+        }
+        item.data.Selected = !item.data.Selected;
+        const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role.data)));
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            item.data.Selected = false;
+        }
+        else {
+            this.utilService.showSuccess('Role saved successfully');
+            const result = res;
+            if (result.length > 0) {
+                var roleResult = result[0];
+                var mappedRoleSave = {
+                    ...roleResult,
+                    ChildrenType: ChildrenType.Permission,
+                    RoleContexts: this.sourceData.map((config) => {
+                        const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
+                        var context = {
+                            ChildrenType: ChildrenType.Action,
+                            Selected: existingId > -1 ? true : false,
+                            RoleActions: config.Actions.map((action) => {
+                                const existingAction = existingId > -1
+                                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                    : -1;
+                                var act = {
+                                    Selected: existingAction > -1 ? true : false,
+                                    Name: action,
+                                    Role: roleResult.Code,
+                                    Context: '',
+                                    id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    Id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    CreatedAt: new Date(),
+                                    UpdatedAt: new Date(),
+                                    DataState: ObjectState.New,
+                                    TenantId: roleResult.TenantId,
+                                    Code: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    ServiceName: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
+                                        : '',
+                                    APIKey: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                        : this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
+                                };
+                                return act;
+                            }),
+                            Name: config.Name,
+                            Role: roleResult.Code,
+                            id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            Id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            TenantId: roleResult.TenantId,
+                            Code: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            ServiceName: existingId > -1
+                                ? roleResult.RoleContexts[existingId].ServiceName
+                                : '',
+                            APIKey: existingId > -1
+                                ? roleResult.RoleContexts[existingId].APIKey
+                                : this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                        };
+                        return context;
+                    }),
+                };
+                const itemIndex = cardDataRef
+                    ? cardDataRef.findIndex((x) => x.data == role?.data)
+                    : -1;
+                if (itemIndex > -1) {
+                    this.data[itemIndex].Code = mappedRoleSave.Code;
+                    this.data[itemIndex].Id = mappedRoleSave.Code;
+                    this.data[itemIndex].DataState = mappedRoleSave.DataState;
+                    this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+                    this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+                    mappedRoleSave.RoleContexts.forEach((x, i) => {
+                        this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+                        this.data[itemIndex].RoleContexts[i].Code = x.Code;
+                        this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+                        x.RoleActions.forEach((y, j) => {
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                                mappedRoleSave.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                                y.ServiceName;
+                        });
+                    });
+                    // this.data[itemIndex].RoleContexts = mappedRoleSave.RoleContexts;
+                    this.data = this.data.map((x) => x);
+                    // if (cardDataRef) {
+                    //   console.log({
+                    //     XDataIsHere: JSON.parse(JSON.stringify(cardDataRef)),
+                    //   });
+                    //   cardDataRef[itemIndex] = {
+                    //     selected: cardDataRef[itemIndex].selected,
+                    //     isChildrenExpanded: cardDataRef[itemIndex].isChildrenExpanded,
+                    //     title: mappedRoleSave.Name,
+                    //     data: mappedRoleSave,
+                    //     body: [],
+                    //     children: mappedRoleSave.RoleContexts.map((c) => {
+                    //       return {
+                    //         selected: false,
+                    //         title: this.getFormattedName(c.Name),
+                    //         data: c,
+                    //         body: [],
+                    //         children: c.RoleActions.map((a) => {
+                    //           return {
+                    //             selected: false,
+                    //             title: this.getFormattedName(a.Name),
+                    //             data: a,
+                    //             body: [],
+                    //             children: [],
+                    //           };
+                    //         }),
+                    //       };
+                    //     }),
+                    //   };
+                    // }
+                }
+            }
+        }
+    }
+    async saveAllRoleDynamic(item) {
+        if (this.isCheckboxDisabled(item)) {
+            this.utilService.showInfo('Parent UI not selected');
+            return;
+        }
+        var role = this.cardContextHistory.length > 0
+            ? this.cardContextHistory[0]
+            : this.currentExpandedCard
+                ? this.currentExpandedCard
+                : null;
+        var cardDataRef = this.cardContextHistoryData.length > 0
+            ? this.cardContextHistoryData[0]
+            : this.currentExpandedCard
+                ? this.cardData
+                : null;
+        // const isExpandedCard: boolean =
+        //   this.cardContextHistory.length > 0
+        //     ? false
+        //     : this.currentExpandedCard
+        //     ? true
+        //     : false;
+        if (!role) {
+            return;
+        }
+        if (role.data.Name.trim().length == 0) {
+            this.utilService.showInfo('Role name cannot be empty');
+            return;
+        }
+        const isAllSelected = this.isAllSelected(item);
+        const parent = this.cardContextHistoryData.length > 0
+            ? this.findParent(this.cardContextHistoryData[0], item)
+            : this.findParent(this.cardData, item);
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Action) {
+            parent.data.RoleActions.forEach((x) => {
+                x.Selected = !isAllSelected;
+            });
+        }
+        if (parent &&
+            parent.data.ChildrenType &&
+            parent.data.ChildrenType == ChildrenType.Permission) {
+            parent.data.RoleContexts.forEach((x) => {
+                x.Selected = !isAllSelected;
+            });
+        }
+        const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role.data)));
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            item.data.Selected = false;
+        }
+        else {
+            this.utilService.showSuccess('Role saved successfully');
+            const result = res;
+            if (result.length > 0) {
+                var roleResult = result[0];
+                var mappedRoleSave = {
+                    ...roleResult,
+                    ChildrenType: ChildrenType.Permission,
+                    RoleContexts: this.sourceData.map((config) => {
+                        const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
+                        var context = {
+                            ChildrenType: ChildrenType.Action,
+                            Selected: existingId > -1 ? true : false,
+                            RoleActions: config.Actions.map((action) => {
+                                const existingAction = existingId > -1
+                                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
+                                    : -1;
+                                var act = {
+                                    Selected: existingAction > -1 ? true : false,
+                                    Name: action,
+                                    Role: roleResult.Code,
+                                    Context: '',
+                                    id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    Id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    CreatedAt: new Date(),
+                                    UpdatedAt: new Date(),
+                                    DataState: ObjectState.New,
+                                    TenantId: roleResult.TenantId,
+                                    Code: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
+                                        : '',
+                                    ServiceName: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
+                                        : '',
+                                    APIKey: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                        : this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
+                                };
+                                return act;
+                            }),
+                            Name: config.Name,
+                            Role: roleResult.Code,
+                            id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            Id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            TenantId: roleResult.TenantId,
+                            Code: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+                            ServiceName: existingId > -1
+                                ? roleResult.RoleContexts[existingId].ServiceName
+                                : '',
+                            APIKey: existingId > -1
+                                ? roleResult.RoleContexts[existingId].APIKey
+                                : this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                        };
+                        return context;
+                    }),
+                };
+                const itemIndex = cardDataRef
+                    ? cardDataRef.findIndex((x) => x.data == role?.data)
+                    : -1;
+                if (itemIndex > -1) {
+                    this.data[itemIndex].Code = mappedRoleSave.Code;
+                    this.data[itemIndex].Id = mappedRoleSave.Code;
+                    this.data[itemIndex].DataState = mappedRoleSave.DataState;
+                    this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+                    this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+                    mappedRoleSave.RoleContexts.forEach((x, i) => {
+                        this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+                        this.data[itemIndex].RoleContexts[i].Code = x.Code;
+                        this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+                        x.RoleActions.forEach((y, j) => {
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                                mappedRoleSave.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+                            this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                                y.ServiceName;
+                        });
+                    });
+                    // this.data[itemIndex].RoleContexts = mappedRoleSave.RoleContexts;
+                    this.data = this.data.map((x) => x);
+                    // if (cardDataRef) {
+                    //   console.log({
+                    //     XDataIsHere: JSON.parse(JSON.stringify(cardDataRef)),
+                    //   });
+                    //   cardDataRef[itemIndex] = {
+                    //     selected: cardDataRef[itemIndex].selected,
+                    //     isChildrenExpanded: cardDataRef[itemIndex].isChildrenExpanded,
+                    //     title: mappedRoleSave.Name,
+                    //     data: mappedRoleSave,
+                    //     body: [],
+                    //     children: mappedRoleSave.RoleContexts.map((c) => {
+                    //       return {
+                    //         selected: false,
+                    //         title: this.getFormattedName(c.Name),
+                    //         data: c,
+                    //         body: [],
+                    //         children: c.RoleActions.map((a) => {
+                    //           return {
+                    //             selected: false,
+                    //             title: this.getFormattedName(a.Name),
+                    //             data: a,
+                    //             body: [],
+                    //             children: [],
+                    //           };
+                    //         }),
+                    //       };
+                    //     }),
+                    //   };
+                    // }
+                }
+            }
+        }
+    }
+    saveDataAll() {
+        const roles = this.data.map((x) => {
+            return {
+                ...x,
+                RoleContexts: x.RoleContexts.filter((y) => y.Selected).map((z) => {
+                    return {
+                        ...z,
+                        RoleActions: z.RoleActions.filter((a) => a.Selected),
+                    };
+                }),
+            };
+        });
+    }
+    updateTable() {
+        this.data = this.data.map((x) => x);
+    }
+    onViewChange(isGridView) { }
+    onStateChange(event) {
+        switch (event.key) {
+            case 'create':
+                var newMappedRole = {
+                    RoleContexts: this.sourceData.map((config) => {
+                        var context = {
+                            ChildrenType: ChildrenType.Action,
+                            Selected: false,
+                            RoleActions: config.Actions.map((action) => {
+                                var act = {
+                                    Selected: false,
+                                    Name: action,
+                                    Role: '',
+                                    Context: '',
+                                    id: '',
+                                    Id: '',
+                                    CreatedAt: new Date(),
+                                    UpdatedAt: new Date(),
+                                    DataState: ObjectState.New,
+                                    TenantId: '',
+                                    Code: '',
+                                    ServiceName: '',
+                                    APIKey: this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
+                                };
+                                return act;
+                            }),
+                            Name: config.Name,
+                            Role: '',
+                            id: '',
+                            Id: '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            TenantId: '',
+                            Code: '',
+                            ServiceName: '',
+                            APIKey: this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                        };
+                        return context;
+                    }),
+                    ChildrenType: ChildrenType.Permission,
+                    Name: '',
+                    id: (this.cardData.length + 1).toString(),
+                    Id: (this.cardData.length + 1).toString(),
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    TenantId: '',
+                    Code: '',
+                    ServiceName: '',
+                    Application: this.application ? this.application : undefined,
+                    APIKey: this.envSvc.environment.APIKey,
+                };
+                const cardData = {
+                    selected: false,
+                    title: newMappedRole.Name,
+                    data: newMappedRole,
+                    body: [],
+                    children: newMappedRole.RoleContexts.map((c) => {
+                        return {
+                            selected: false,
+                            title: this.getFormattedName(c.Name),
+                            data: c,
+                            body: [],
+                            children: c.RoleActions.map((a) => {
+                                return {
+                                    selected: false,
+                                    title: this.getFormattedName(a.Name),
+                                    data: a,
+                                    body: [],
+                                    children: [],
+                                };
+                            }),
+                        };
+                    }),
+                };
+                this.data = this.data.concat([newMappedRole]);
+                this.cardData.push(cardData);
+                this.roleCardClicked(cardData);
+                this.dataView.isTableView = false;
+                break;
+            default:
+                break;
+        }
+    }
+    showTableView = false;
+    onSelectionChange(selectedRows) { }
+    retryMessage() { }
+    onColumnsUpdated(updatedColumns) {
+        const updatedColumnDef = [];
+        updatedColumns.forEach((col) => {
+            const matchingCol = this.roleControlSvc.roleColumns.find((column) => column.header === col.name || column.id === col.name);
+            if (matchingCol) {
+                updatedColumnDef.push(matchingCol);
+            }
+        });
+        this.visibleColumnDef = [...updatedColumnDef];
+    }
+    exportFiltersAndSorts = async (pageState) => {
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: x.name,
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(DateFilterTypes).includes(x.condition)
+                    ? DateFilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: SearchPropertyValueType.Date,
+            };
+        });
+        payload.push({
+            PropertyName: 'APIKey',
+            EntityValue: this.envSvc.environment.APIKey,
+            Operator: SearchOperator.And,
+            Sign: SearchPropertySign.EQ,
+        });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: sort.name,
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.get(`Role/GetRolesWithParam/${this.currentSearchTerm.trim()}/${pageState.skip}/${pageState.limit}`)
+            : await this.server.post(`Role/SearchRoles/${pageState.skip}/${pageState.limit}`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return [];
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    };
+    async updateFiltersAndSorts(isSearch = false) {
+        if (!isSearch) {
+            this.dataView.onClearSearch();
+            this.currentSearchTerm = '';
+            this.cdr.detectChanges();
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            });
+            document.dispatchEvent(clickEvent);
+        }
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: x.name,
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(DateFilterTypes).includes(x.condition)
+                    ? DateFilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: SearchPropertyValueType.Date,
+            };
+        });
+        payload.push({
+            PropertyName: 'APIKey',
+            EntityValue: this.envSvc.environment.APIKey,
+            Operator: SearchOperator.And,
+            Sign: SearchPropertySign.EQ,
+        });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: sort.name,
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.get(`Role/GetRolesWithParam/${this.currentSearchTerm.trim()}/0/${this.pageSize}`)
+            : await this.server.post(`Role/SearchRoles/0/${this.pageSize}`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            this.currentFilters = [];
+            this.currentSorts = [];
+            return undefined;
+        }
+        else {
+            this.cardDataView.clearData();
+            this.currentData = null;
+            this.pageState = res;
+            var result = res.Result;
+            this.setUpMappedData(result);
+            this.setUpCardData();
+        }
+    }
+    async loadMoreFiltersAndSorts() {
+        if (!this.pageState) {
+            return;
+        }
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: x.name,
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(DateFilterTypes).includes(x.condition)
+                    ? DateFilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: SearchPropertyValueType.Date,
+            };
+        });
+        payload.push({
+            PropertyName: 'APIKey',
+            EntityValue: this.envSvc.environment.APIKey,
+            Operator: SearchOperator.And,
+            Sign: SearchPropertySign.EQ,
+        });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: sort.name,
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.get(`Role/GetRolesWithParam/${this.currentSearchTerm.trim()}/${this.pageState.Skip}/${this.pageSize}`)
+            : await this.server.post(`Role/SearchRoles/${this.pageState.Skip}/${this.pageSize}`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            var result = res;
+            return result;
+        }
+    }
+    onFilterUpdated(updatedFilters) {
+        // Ensure updatedFilters is an array
+        if (Array.isArray(updatedFilters)) {
+            this.currentFilters = updatedFilters;
+            this.updateFiltersAndSorts();
+        }
+    }
+    onSortUpdated(updatedSorts) {
+        this.currentSorts = updatedSorts;
+        console.log({ CurrSorts: this.currentSorts });
+        this.updateFiltersAndSorts();
+    }
+    handleSearch(event) {
+        this.searchTerm$.next(event.value);
+    }
+    handleExport(exportedData) {
+        // console.log('Exported data:', exportedData);
+        this.downloadCSV(exportedData);
+    }
+    downloadCSV(data) {
+        const headers = Object.keys(data[0]);
+        const csvContent = [
+            headers.join(','),
+            ...data.map((row) => headers.map((header) => row[header]).join(',')),
+        ].join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        if (link.download !== undefined) {
+            const url = URL.createObjectURL(blob);
+            link.setAttribute('href', url);
+            link.setAttribute('download', 'export.csv');
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    getMockRoles() {
+        return new Array(10).fill(1).map((id, i) => ({
+            Id: id + i,
+            id: (id + i).toString(),
+            Name: this.mockNames[i] || '',
+            RoleContexts: this.randomContexts(),
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            TenantId: `Tenant${id + i}`,
+            Code: '',
+            ServiceName: '',
+            APIKey: '',
+        }));
+    }
+    mockNames = [
+        'Admin',
+        'Super Admin',
+        'Manager',
+        'Intern',
+        'Production Manager',
+        'CEO',
+        'CTO',
+        'COO',
+        'Developer',
+        'Engineer',
+    ];
+    randomName() {
+        const randomIndex = Math.floor(Math.random() * this.mockNames.length);
+        return this.mockNames[randomIndex];
+    }
+    randomContexts() {
+        const randomNumber = Math.floor(Math.random() * Object.keys(UIs).length + 1);
+        var returnArray = [];
+        const usedList = [];
+        for (let i = 0; i < randomNumber; i++) {
+            let randomIndex;
+            do {
+                randomIndex = Math.floor(Math.random() * Object.keys(UIs).length);
+            } while (usedList.includes(randomIndex));
+            returnArray.push({
+                Id: 'context' + i,
+                id: ('context' + i).toString(),
+                Name: Object.keys(UIs)[randomIndex],
+                Role: '',
+                RoleActions: this.randomActions(),
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                TenantId: `Tenant${'context' + i}`,
+                Code: '',
+                ServiceName: '',
+                APIKey: '',
+                ApplicationRoleContext: '',
+            });
+            usedList.push(randomIndex);
+        }
+        return returnArray;
+    }
+    randomActions() {
+        const randomNumber = Math.floor(Math.random() * Object.keys(UIActions).length + 1);
+        var returnArray = [];
+        const usedList = [];
+        for (let i = 0; i < randomNumber; i++) {
+            let randomIndex;
+            do {
+                randomIndex = Math.floor(Math.random() * Object.keys(UIActions).length);
+            } while (usedList.includes(randomIndex));
+            returnArray.push({
+                Id: 'action' + i,
+                id: ('action' + i).toString(),
+                Name: Object.keys(UIActions)[randomIndex],
+                Role: '',
+                Context: '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                TenantId: `Tenant${'action' + i}`,
+                Code: '',
+                ServiceName: '',
+                APIKey: '',
+                ApplicationRoleAction: '',
+            });
+            usedList.push(randomIndex);
+        }
+        return returnArray;
+    }
+    closePopUp() {
+        this.openDropdownId = null;
+        this.popUps.forEach((popUp) => {
+            if (popUp.dropdownOpen) {
+                popUp.toggleDropdown();
+            }
+        });
+    }
+    updateItem(value, key) {
+        return {
+            [key]: value,
+        };
+    }
+    editValue(value) {
+        const card = this.cardData.find((x) => x.data.Id == value.Id);
+        if (card && this.cardDataView) {
+            this.dataView.toggleView();
+            card.selected = true;
+            this.currentData = this.cardDataView.onItemClick(card);
+            this.closePopUp();
+            // if (this.currentData) {
+            //   this.form.controls['Name'].setValue(this.currentData.data?.Name);
+            // }
+        }
+    }
+    tableCache = new Map();
+    cacheItem(item) {
+        const cacheKey = item.Id;
+        this.tableCache.set(cacheKey, JSON.parse(JSON.stringify(item)));
+    }
+    restoreCache(item) {
+        const cacheKey = item.Id;
+        const itemCache = this.tableCache.get(cacheKey);
+        if (itemCache) {
+            item.Name = itemCache.Name;
+        }
+        this.tableCache.delete(cacheKey);
+    }
+    onSearchFocus() {
+        this.isInputFocused = true;
+    }
+    onSearchBlur() {
+        this.isInputFocused = false;
+    }
+    onInputFocus() {
+        this.isInputFocused = true;
+    }
+    onInputBlur() {
+        this.isInputFocused = false;
+    }
+    // onSearch(event: any) {
+    //   const searchTerm = event.target.value;
+    //     // if (this.firstSearch == false) {
+    //     //   this.optionsCopy = cloneDeep(this._options);
+    //     //   this.firstSearch = true;
+    //     // }
+    //     if (searchTerm.trim().length == 0) {
+    //       this.cardData = JSON.parse(JSON.stringify(this.dataCopy));
+    //       //this.firstSearch = false;
+    //       return;
+    //     }
+    //     this.cardData = this.dataCopy.filter(
+    //       (x) => typeof x.data.Name == 'string' && new RegExp(searchTerm, 'i').test(x.data.Name)
+    //     );
+    // }
+    get filteredData() {
+        if (this.searchContext.trim().length == 0) {
+            return this.cardData;
+        }
+        return this.cardData.filter((x) => typeof x.data.Name == 'string' &&
+            new RegExp(this.searchContext, 'i').test(x.data.Name));
+    }
+    onComplete(event) {
+        var defaultItem = {
+            RoleContexts: this.sourceData.map((config) => {
+                var context = {
+                    ChildrenType: ChildrenType.Action,
+                    Selected: false,
+                    RoleActions: config.Actions.map((action) => {
+                        var act = {
+                            Selected: false,
+                            Name: action,
+                            Role: '',
+                            Context: '',
+                            id: '',
+                            Id: '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            TenantId: '',
+                            Code: '',
+                            ServiceName: '',
+                            APIKey: this.envSvc.environment.APIKey,
+                            ApplicationRoleAction: this.getApplicationActionCode(action),
+                        };
+                        return act;
+                    }),
+                    Name: config.Name,
+                    Role: '',
+                    id: '',
+                    Id: '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    TenantId: '',
+                    Code: '',
+                    ServiceName: '',
+                    APIKey: this.envSvc.environment.APIKey,
+                    ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+                };
+                return context;
+            }),
+            ChildrenType: ChildrenType.Permission,
+            Name: '',
+            id: (this.cardData.length + 1).toString(),
+            Id: (this.cardData.length + 1).toString(),
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            TenantId: '',
+            Code: '',
+            ServiceName: '',
+            Application: this.application ? this.application : undefined,
+            APIKey: this.envSvc.environment.APIKey,
+        };
+        this.importService.onComplete(event, defaultItem, 'Role/SaveRoles', this.envSvc.environment.AuthenticationAPI, 'Role', (items) => {
+            this.data = this.data.concat(items);
+            const cardData = items.map((x) => {
+                return {
+                    selected: false,
+                    title: x.Name,
+                    data: x,
+                    body: [],
+                    children: [],
+                };
+            });
+            this.cardData = this.cardData.concat(cardData);
+        }, this.pageState);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: i1.AuthorizationService }, { token: RoleControlService }, { token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i3.FormBuilder }, { token: i1.EnvironmentService }, { token: i1.ImportService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(value)\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button> -->\n            </div>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i5.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i5.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i5.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(value)\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button> -->\n            </div>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AuthorizationService }, { type: RoleControlService }, { type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i3.FormBuilder }, { type: i1.EnvironmentService }, { type: i1.ImportService }], propDecorators: { cardDataView: [{
+                type: ViewChild,
+                args: ['vdcv']
+            }], dataView: [{
+                type: ViewChild,
+                args: ['vdv']
+            }], popUps: [{
+                type: ViewChildren,
+                args: ['popup']
+            }], tableView: [{
+                type: ViewChild,
+                args: ['dt']
+            }], isGlobal: [{
+                type: Input
+            }], serviceName: [{
+                type: Input
+            }], application: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], searchDebounceTime: [{
+                type: Input
+            }], permissionConfig: [{
+                type: Input
+            }] } });
+
+class RoleControlModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RoleControlModule, declarations: [RoleControlComponent], imports: [SharedModule], exports: [RoleControlComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlModule, imports: [SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RoleControlComponent],
+                    imports: [SharedModule],
+                    exports: [RoleControlComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RoleControlComponent, RoleControlModule };
+//# sourceMappingURL=verben-authentication-ui-src-lib-components-role-control.mjs.map