verben-authentication-ui 0.7.3 → 0.7.5

package/esm2022/lib/components/role-control/role-control.service.mjs

@@ -19,9 +19,11 @@ export class RoleControlService {
                 accessorKey: 'UpdatedAt',
             },
             {
-                id: 'Name',
+                id: 'name',
                 header: 'NAME',
-                accessorKey: 'Name',
+                accessorFn: (row) => {
+                    return row;
+                },
             },
             {
                 id: 'permissions',
@@ -49,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9sZS1jb250cm9sLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tYXV0aGVudGljYXRpb24tdWkvc3JjL2xpYi9jb21wb25lbnRzL3JvbGUtY29udHJvbC9yb2xlLWNvbnRyb2wuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVMzQyxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCLGdCQUFlLENBQUM7SUFFaEIsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMO2dCQUNFLEVBQUUsRUFBRSxRQUFRO2dCQUNaLE1BQU0sRUFBRSxFQUFFO2FBQ1g7WUFDRDtnQkFDRSxFQUFFLEVBQUUsV0FBVztnQkFDZixNQUFNLEVBQUUsU0FBUztnQkFDakIsV0FBVyxFQUFFLFdBQVc7YUFDekI7WUFDRDtnQkFDRSxFQUFFLEVBQUUsV0FBVztnQkFDZixNQUFNLEVBQUUsU0FBUztnQkFDakIsV0FBVyxFQUFFLFdBQVc7YUFDekI7WUFDRDtnQkFDRSxFQUFFLEVBQUUsTUFBTTtnQkFDVixNQUFNLEVBQUUsTUFBTTtnQkFDZCxXQUFXLEVBQUUsTUFBTTthQUNwQjtZQUNEO2dCQUNFLEVBQUUsRUFBRSxhQUFhO2dCQUNqQixNQUFNLEVBQUUsYUFBYTtnQkFDckIsVUFBVSxFQUFFLENBQUMsR0FBZSxFQUFFLEVBQUU7b0JBQzlCLE1BQU0sR0FBRyxHQUFHLEdBQUcsQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxDQUFDLE1BQU0sQ0FBQztvQkFDdEUsT0FBTyxHQUFHLEdBQUcsT0FBTyxHQUFHLENBQUMsWUFBWSxDQUFDLE1BQU0sY0FBYyxDQUFDO2dCQUM1RCxDQUFDO2FBQ0Y7WUFDRDtnQkFDRSxFQUFFLEVBQUUsU0FBUztnQkFDYixNQUFNLEVBQUUsU0FBUztnQkFDakIsVUFBVSxFQUFFLENBQUMsR0FBZSxFQUFFLEVBQUU7b0JBQzlCLE9BQU8sR0FBRyxDQUFDO2dCQUNiLENBQUM7YUFDRjtTQUNGLENBQUM7SUFDSixDQUFDO3dHQXhDVSxrQkFBa0I7NEdBQWxCLGtCQUFrQixjQUZqQixNQUFNOzs0RkFFUCxrQkFBa0I7a0JBSDlCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29sdW1uRGVmaW5pdGlvbiB9IGZyb20gJ3ZlcmJlbi1uZy11aSc7XG5pbXBvcnQgeyBSb2xlIH0gZnJvbSAnLi4vLi4vbW9kZWxzL1JvbGUnO1xuaW1wb3J0IHsgQXV0aG9yaXphdGlvblNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9hdXRob3JpemF0aW9uLnNlcnZpY2UnO1xuaW1wb3J0IHsgTWFwcGVkUm9sZSB9IGZyb20gJy4vTWFwcGVkUm9sZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxufSlcbmV4cG9ydCBjbGFzcyBSb2xlQ29udHJvbFNlcnZpY2Uge1xuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgZ2V0IHJvbGVDb2x1bW5zKCk6IENvbHVtbkRlZmluaXRpb248TWFwcGVkUm9sZT5bXSB7XG4gICAgcmV0dXJuIFtcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdzZWxlY3QnLFxuICAgICAgICBoZWFkZXI6ICcnLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdjcmVhdGVkQXQnLFxuICAgICAgICBoZWFkZXI6ICdDUkVBVEVEJyxcbiAgICAgICAgYWNjZXNzb3JLZXk6ICdDcmVhdGVkQXQnLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICd1cGRhdGVkQXQnLFxuICAgICAgICBoZWFkZXI6ICdVUERBVEVEJyxcbiAgICAgICAgYWNjZXNzb3JLZXk6ICdVcGRhdGVkQXQnLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdOYW1lJyxcbiAgICAgICAgaGVhZGVyOiAnTkFNRScsXG4gICAgICAgIGFjY2Vzc29yS2V5OiAnTmFtZScsXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogJ3Blcm1pc3Npb25zJyxcbiAgICAgICAgaGVhZGVyOiAnUEVSTUlTU0lPTlMnLFxuICAgICAgICBhY2Nlc3NvckZuOiAocm93OiBNYXBwZWRSb2xlKSA9PiB7XG4gICAgICAgICAgY29uc3Qgc3VtID0gcm93LlJvbGVDb250ZXh0cy5maWx0ZXIoKHgpID0+IHguU2VsZWN0ZWQgPT0gdHJ1ZSkubGVuZ3RoO1xuICAgICAgICAgIHJldHVybiBgJHtzdW19IG9mICR7cm93LlJvbGVDb250ZXh0cy5sZW5ndGh9IFBlcm1pc3Npb25zYDtcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGlkOiAnYWN0aW9ucycsXG4gICAgICAgIGhlYWRlcjogJ0FDVElPTlMnLFxuICAgICAgICBhY2Nlc3NvckZuOiAocm93OiBNYXBwZWRSb2xlKSA9PiB7XG4gICAgICAgICAgcmV0dXJuIHJvdztcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgXTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9sZS1jb250cm9sLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tYXV0aGVudGljYXRpb24tdWkvc3JjL2xpYi9jb21wb25lbnRzL3JvbGUtY29udHJvbC9yb2xlLWNvbnRyb2wuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVMzQyxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCLGdCQUFlLENBQUM7SUFFaEIsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMO2dCQUNFLEVBQUUsRUFBRSxRQUFRO2dCQUNaLE1BQU0sRUFBRSxFQUFFO2FBQ1g7WUFDRDtnQkFDRSxFQUFFLEVBQUUsV0FBVztnQkFDZixNQUFNLEVBQUUsU0FBUztnQkFDakIsV0FBVyxFQUFFLFdBQVc7YUFDekI7WUFDRDtnQkFDRSxFQUFFLEVBQUUsV0FBVztnQkFDZixNQUFNLEVBQUUsU0FBUztnQkFDakIsV0FBVyxFQUFFLFdBQVc7YUFDekI7WUFDRDtnQkFDRSxFQUFFLEVBQUUsTUFBTTtnQkFDVixNQUFNLEVBQUUsTUFBTTtnQkFDZCxVQUFVLEVBQUUsQ0FBQyxHQUFlLEVBQUUsRUFBRTtvQkFDOUIsT0FBTyxHQUFHLENBQUM7Z0JBQ2IsQ0FBQzthQUNGO1lBQ0Q7Z0JBQ0UsRUFBRSxFQUFFLGFBQWE7Z0JBQ2pCLE1BQU0sRUFBRSxhQUFhO2dCQUNyQixVQUFVLEVBQUUsQ0FBQyxHQUFlLEVBQUUsRUFBRTtvQkFDOUIsTUFBTSxHQUFHLEdBQUcsR0FBRyxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDO29CQUN0RSxPQUFPLEdBQUcsR0FBRyxPQUFPLEdBQUcsQ0FBQyxZQUFZLENBQUMsTUFBTSxjQUFjLENBQUM7Z0JBQzVELENBQUM7YUFDRjtZQUNEO2dCQUNFLEVBQUUsRUFBRSxTQUFTO2dCQUNiLE1BQU0sRUFBRSxTQUFTO2dCQUNqQixVQUFVLEVBQUUsQ0FBQyxHQUFlLEVBQUUsRUFBRTtvQkFDOUIsT0FBTyxHQUFHLENBQUM7Z0JBQ2IsQ0FBQzthQUNGO1NBQ0YsQ0FBQztJQUNKLENBQUM7d0dBMUNVLGtCQUFrQjs0R0FBbEIsa0JBQWtCLGNBRmpCLE1BQU07OzRGQUVQLGtCQUFrQjtrQkFIOUIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb2x1bW5EZWZpbml0aW9uIH0gZnJvbSAndmVyYmVuLW5nLXVpJztcbmltcG9ydCB7IFJvbGUgfSBmcm9tICcuLi8uLi9tb2RlbHMvUm9sZSc7XG5pbXBvcnQgeyBBdXRob3JpemF0aW9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2F1dGhvcml6YXRpb24uc2VydmljZSc7XG5pbXBvcnQgeyBNYXBwZWRSb2xlIH0gZnJvbSAnLi9NYXBwZWRSb2xlJztcblxuQEluamVjdGFibGUoe1xuICBwcm92aWRlZEluOiAncm9vdCcsXG59KVxuZXhwb3J0IGNsYXNzIFJvbGVDb250cm9sU2VydmljZSB7XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBnZXQgcm9sZUNvbHVtbnMoKTogQ29sdW1uRGVmaW5pdGlvbjxNYXBwZWRSb2xlPltdIHtcbiAgICByZXR1cm4gW1xuICAgICAge1xuICAgICAgICBpZDogJ3NlbGVjdCcsXG4gICAgICAgIGhlYWRlcjogJycsXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogJ2NyZWF0ZWRBdCcsXG4gICAgICAgIGhlYWRlcjogJ0NSRUFURUQnLFxuICAgICAgICBhY2Nlc3NvcktleTogJ0NyZWF0ZWRBdCcsXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogJ3VwZGF0ZWRBdCcsXG4gICAgICAgIGhlYWRlcjogJ1VQREFURUQnLFxuICAgICAgICBhY2Nlc3NvcktleTogJ1VwZGF0ZWRBdCcsXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogJ25hbWUnLFxuICAgICAgICBoZWFkZXI6ICdOQU1FJyxcbiAgICAgICAgYWNjZXNzb3JGbjogKHJvdzogTWFwcGVkUm9sZSkgPT4ge1xuICAgICAgICAgIHJldHVybiByb3c7XG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogJ3Blcm1pc3Npb25zJyxcbiAgICAgICAgaGVhZGVyOiAnUEVSTUlTU0lPTlMnLFxuICAgICAgICBhY2Nlc3NvckZuOiAocm93OiBNYXBwZWRSb2xlKSA9PiB7XG4gICAgICAgICAgY29uc3Qgc3VtID0gcm93LlJvbGVDb250ZXh0cy5maWx0ZXIoKHgpID0+IHguU2VsZWN0ZWQgPT0gdHJ1ZSkubGVuZ3RoO1xuICAgICAgICAgIHJldHVybiBgJHtzdW19IG9mICR7cm93LlJvbGVDb250ZXh0cy5sZW5ndGh9IFBlcm1pc3Npb25zYDtcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGlkOiAnYWN0aW9ucycsXG4gICAgICAgIGhlYWRlcjogJ0FDVElPTlMnLFxuICAgICAgICBhY2Nlc3NvckZuOiAocm93OiBNYXBwZWRSb2xlKSA9PiB7XG4gICAgICAgICAgcmV0dXJuIHJvdztcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgXTtcbiAgfVxufVxuIl19

package/fesm2022/verben-authentication-ui.mjs

@@ -4577,9 +4577,11 @@ class RoleControlService {
                 accessorKey: 'UpdatedAt',
             },
             {
-                id: 'Name',
+                id: 'name',
                 header: 'NAME',
-                accessorKey: 'Name',
+                accessorFn: (row) => {
+                    return row;
+                },
             },
             {
                 id: 'permissions',
@@ -4634,6 +4636,7 @@ class RoleControlComponent {
     cardDataView;
     dataView;
     popUp;
+    tableView;
     isGlobal = true;
     serviceName = null;
     application = null;
@@ -5039,8 +5042,8 @@ class RoleControlComponent {
         const cardData = this.cardData.find((x) => x.data == data);
         if (cardData) {
             this.viewDetails(cardData);
-            this.closePopUp();
         }
+        this.closePopUp();
     }
     viewDetails(context) {
         this.cardContextHistory.push(context);
@@ -5077,6 +5080,16 @@ class RoleControlComponent {
             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];
@@ -5236,6 +5249,107 @@ class RoleControlComponent {
             }
         }
     }
+    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].id
+                                        : '',
+                                    Id: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].Id
+                                        : '',
+                                    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].id : '',
+                            Id: existingId > -1 ? roleResult.RoleContexts[existingId].Id : '',
+                            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.Id;
+                    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);
+                }
+                callBack();
+            }
+        }
+    }
     async saveRoleDynamic(item) {
         if (this.isCheckboxDisabled(item)) {
             this.utilService.showInfo('Parent UI not selected');
@@ -5414,7 +5528,6 @@ class RoleControlComponent {
         this.isOpen = false;
     }
     openDropdown(item) {
-        console.log('item is here', item);
         if (this.openDropdownId === item.id) {
             this.openDropdownId = null;
         }
@@ -5538,7 +5651,6 @@ class RoleControlComponent {
             });
             document.dispatchEvent(clickEvent);
         }
-        console.log({ This: this });
         var payload = this.currentFilters.map((x) => {
             return {
                 PropertyName: x.name,
@@ -5634,7 +5746,6 @@ class RoleControlComponent {
     }
     onSortUpdated(updatedSorts) {
         this.currentSorts = updatedSorts;
-        console.log({ Sorts: updatedSorts });
         this.updateFiltersAndSorts();
     }
     handleSearch(event) {
@@ -5750,11 +5861,13 @@ class RoleControlComponent {
         return returnArray;
     }
     closePopUp() {
-        if (this.popUp.dropdownOpen == true) {
-            this.popUp.toggleDropdown();
-            this.openDropdownId = null;
-            this.onClose();
-        }
+        this.openDropdownId = null;
+        this.onClose();
+    }
+    updateItem(value, key) {
+        return {
+            [key]: value,
+        };
     }
     editValue(value) {
         const card = this.cardData.find((x) => x.data.Id == value.Id);
@@ -5769,11 +5882,11 @@ class RoleControlComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: AuthorizationService }, { token: RoleControlService }, { token: UtilService }, { token: HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "popUp", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [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: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n              <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n                icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\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\">Load more</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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i2.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i2.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "popUp", first: true, predicate: ["popup"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [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: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\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 #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n              <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n                icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp();\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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 #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></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 borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\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\">Load more</button>\n    </div>\n  </div>\n</div>", 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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i2.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i2.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i2$1.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 *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [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: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n              <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n                icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\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\">Load more</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}\n"] }]
+            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [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: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\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 #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n              <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n                icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp();\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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 #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></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 borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\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\">Load more</button>\n    </div>\n  </div>\n</div>", 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}\n"] }]
         }], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']
@@ -5783,6 +5896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], popUp: [{
                 type: ViewChild,
                 args: ['popup']
+            }], tableView: [{
+                type: ViewChild,
+                args: ['dt']
             }], isGlobal: [{
                 type: Input
             }], serviceName: [{