@masterteam/permissions 0.0.1 → 0.0.2

package/fesm2022/masterteam-permissions.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, signal, effect, Component, DestroyRef, linkedSignal, computed } from '@angular/core';
+import { inject, Injectable, computed, input, output, signal, effect, Component, DestroyRef, linkedSignal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -14,13 +14,26 @@ import * as i2 from '@jsverse/transloco';
 import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
 import * as i2$1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import { Action, Selector, State, Store } from '@ngxs/store';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
-import { map, tap, catchError, finalize } from 'rxjs';
+import { map } from 'rxjs';
+import { CrudStateBase, handleApiRequest } from '@masterteam/components';
 import { ModalRef } from '@masterteam/components/dialog';
 import { Tabs } from '@masterteam/components/tabs';
 import { AccessibilitiesFacade } from '@masterteam/accessibilities';
 
+var PermissionsActionKey;
+(function (PermissionsActionKey) {
+    PermissionsActionKey["LoadRoles"] = "loadRoles";
+    PermissionsActionKey["SelectRole"] = "selectRole";
+    PermissionsActionKey["SelectGroup"] = "selectGroup";
+    PermissionsActionKey["LoadPermissions"] = "loadPermissions";
+    PermissionsActionKey["LoadGroupPermissions"] = "loadGroupPermissions";
+    PermissionsActionKey["UpdatePermission"] = "updatePermission";
+    PermissionsActionKey["UpdateGroupPermission"] = "updateGroupPermission";
+    PermissionsActionKey["ToggleAllLevelPermissions"] = "toggleAllLevelPermissions";
+    PermissionsActionKey["ToggleAllGroupPermissions"] = "toggleAllGroupPermissions";
+})(PermissionsActionKey || (PermissionsActionKey = {}));
 var ModuleType;
 (function (ModuleType) {
     ModuleType["LEVEL"] = "level";
@@ -32,20 +45,6 @@ class LoadRoles {
     static type = '[Permissions] Load Roles';
     constructor() { }
 }
-class LoadRolesSuccess {
-    roles;
-    static type = '[Permissions] Load Roles Success';
-    constructor(roles) {
-        this.roles = roles;
-    }
-}
-class LoadRolesFail {
-    error;
-    static type = '[Permissions] Load Roles Fail';
-    constructor(error) {
-        this.error = error;
-    }
-}
 class SelectRole {
     roleValue;
     static type = '[Permissions] Select Role';
@@ -78,27 +77,6 @@ class LoadGroupPermissions {
         this.levelId = levelId;
     }
 }
-class LoadPermissionsSuccess {
-    permissions;
-    static type = '[Permissions] Load Permissions Success';
-    constructor(permissions) {
-        this.permissions = permissions;
-    }
-}
-class LoadGroupPermissionsSuccess {
-    permissions;
-    static type = '[Permissions] Load Group Permissions Success';
-    constructor(permissions) {
-        this.permissions = permissions;
-    }
-}
-class LoadPermissionsFail {
-    error;
-    static type = '[Permissions] Load Permissions Fail';
-    constructor(error) {
-        this.error = error;
-    }
-}
 class UpdatePermissionLocally {
     roleValue;
     levelId;
@@ -145,16 +123,6 @@ class UpdateGroupPermission {
         this.levelId = levelId;
     }
 }
-class UpdatePermissionSuccess {
-    static type = '[Permissions] Update Permission Success';
-}
-class UpdatePermissionFail {
-    error;
-    static type = '[Permissions] Update Permission Fail';
-    constructor(error) {
-        this.error = error;
-    }
-}
 class ToggleAllLevelPermissions {
     roleValue;
     levelId;
@@ -205,78 +173,74 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-let PermissionsState = class PermissionsState {
+let PermissionsState = class PermissionsState extends CrudStateBase {
     http = inject(HttpClient);
-    static roles(state) {
+    // ============================================================================
+    // Data Selectors - Individual for fine-grained reactivity
+    // ============================================================================
+    static getRoles(state) {
         return state.roles;
     }
-    static selectedRoleValue(state) {
+    static getSelectedRoleValue(state) {
         return state.selectedRoleValue;
     }
-    static selectedGroupValue(state) {
+    static getSelectedGroupValue(state) {
         return state.selectedGroupValue;
     }
-    static permissions(state) {
+    static getPermissions(state) {
         return state.permissions;
     }
-    static groupPermissions(state) {
+    static getGroupPermissions(state) {
         return state.groupPermissions;
     }
-    static loading(state) {
-        return state.loading;
-    }
-    static permissionsLoading(state) {
-        return state.permissionsLoading;
-    }
-    static addPermissionsLoading(state) {
-        return state.addPermissionsLoading;
-    }
-    static moduleType(state) {
+    static getModuleType(state) {
         return state.moduleType;
     }
-    static moduleId(state) {
+    static getModuleId(state) {
         return state.moduleId;
     }
-    static levelId(state) {
+    static getLevelId(state) {
         return state.moduleType === 'module'
             ? state.parentModuleId.toString()
             : state.moduleId.toString();
     }
-    static error(state) {
-        return state.error;
-    }
+    // ============================================================================
+    // Loading/Error Slice Selectors - REQUIRED for optimal performance
+    // ============================================================================
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    // ============================================================================
+    // CRUD Actions
+    // ============================================================================
+    // ============================================================================
+    // CRUD Actions
+    // ============================================================================
     loadRoles(ctx) {
-        ctx.patchState({
-            loading: true,
-            error: null,
-            currentLevelId: ctx.getState().moduleId.toString() || '',
-        });
-        return this.http
-            .get(`identity/roles/scopes/${ctx.getState().moduleType}/${ctx.getState().moduleId}?inherited=true`)
-            .pipe(map((response) => response.data), tap((roles) => {
-            ctx.dispatch(new LoadRolesSuccess(roles));
-        }), catchError((error) => {
-            ctx.dispatch(new LoadRolesFail(error.message || 'Failed to load roles'));
-            throw error;
-        }));
-    }
-    loadRolesSuccess(ctx, action) {
-        ctx.patchState({
-            roles: action.roles,
-            loading: false,
-            error: null,
-        });
-    }
-    loadRolesFail(ctx, action) {
-        ctx.patchState({
-            loading: false,
-            error: action.error,
+        const { moduleType, moduleId } = ctx.getState();
+        const req$ = this.http
+            .get(`identity/roles/scopes/${moduleType}/${moduleId}?inherited=true`)
+            .pipe(map((response) => response.data));
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.LoadRoles,
+            request$: req$,
+            onSuccess: (roles) => ({
+                roles,
+                currentLevelId: moduleId.toString() || '',
+            }),
         });
     }
+    // ============================================================================
+    // Simple State Updates (No HTTP)
+    // ============================================================================
     selectRole(ctx, action) {
         const state = ctx.getState();
         ctx.patchState({ selectedRoleValue: action.roleValue });
-        if (state.currentLevelId) {
+        if (state.currentLevelId && action.roleValue) {
             ctx.dispatch(new LoadPermissions(action.roleValue, state.currentLevelId));
         }
     }
@@ -288,61 +252,40 @@ let PermissionsState = class PermissionsState {
         }
     }
     loadPermissions(ctx, action) {
-        ctx.patchState({ permissionsLoading: true, error: null });
-        // identity/roles/${action.roleValue}/permissions
-        return this.http
-            .get(`identity/roles/level/${ctx.getState().moduleType === 'module'
-            ? ctx.getState().parentModuleId
-            : ctx.getState().moduleId}/${ctx.getState().moduleType === 'module' ? 'module/' : ''}${ctx.getState().moduleType === 'module'
-            ? `${ctx.getState().moduleId}/`
-            : ''}${action.roleValue}/permissions`, {
+        const state = ctx.getState();
+        const modulePath = state.moduleType === 'module' ? `module/${state.moduleId}/` : '';
+        const levelId = state.moduleType === 'module' ? state.parentModuleId : state.moduleId;
+        const req$ = this.http
+            .get(`identity/roles/level/${levelId}/${modulePath}${action.roleValue}/permissions`, {
             params: {
-                scopeId: ctx.getState().moduleType === 'module'
-                    ? ctx.getState().parentModuleId
-                    : ctx.getState().moduleId,
+                scopeId: levelId,
                 scopeType: ModuleType.LEVEL,
             },
         })
-            .pipe(map((response) => response.data.permissions), tap((permissions) => {
-            ctx.dispatch(new LoadPermissionsSuccess(permissions));
-        }), catchError((error) => {
-            ctx.dispatch(new LoadPermissionsFail(error.message || 'Failed to load permissions'));
-            throw error;
-        }));
-    }
-    loadGroupPermissions(ctx, action) {
-        ctx.patchState({ permissionsLoading: true, error: null });
-        return this.http
-            .get(`identity/groups/level/${ctx.getState().moduleType === 'module'
-            ? ctx.getState().parentModuleId
-            : ctx.getState().moduleId}/${ctx.getState().moduleType === 'module' ? 'module/' : ''}${ctx.getState().moduleType === 'module'
-            ? `${ctx.getState().moduleId}/`
-            : ''}${action.groupId}/permissions`)
-            .pipe(map((response) => response.data), tap((permissions) => {
-            ctx.dispatch(new LoadGroupPermissionsSuccess(permissions));
-        }), catchError((error) => {
-            ctx.dispatch(new LoadPermissionsFail(error.message || 'Failed to load permissions'));
-            throw error;
-        }));
-    }
-    loadPermissionsSuccess(ctx, action) {
-        ctx.patchState({
-            permissions: action.permissions,
-            permissionsLoading: false,
-            error: null,
+            .pipe(map((response) => response.data.permissions));
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.LoadPermissions,
+            request$: req$,
+            onSuccess: (permissions) => ({
+                permissions,
+            }),
         });
     }
-    loadGroupPermissionsSuccess(ctx, action) {
-        ctx.patchState({
-            groupPermissions: action.permissions,
-            permissionsLoading: false,
-            error: null,
-        });
-    }
-    loadPermissionsFail(ctx, action) {
-        ctx.patchState({
-            permissionsLoading: false,
-            error: action.error,
+    loadGroupPermissions(ctx, action) {
+        const state = ctx.getState();
+        const modulePath = state.moduleType === 'module' ? `module/${state.moduleId}/` : '';
+        const levelId = state.moduleType === 'module' ? state.parentModuleId : state.moduleId;
+        const req$ = this.http
+            .get(`identity/groups/level/${levelId}/${modulePath}${action.groupId}/permissions`)
+            .pipe(map((response) => response.data));
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.LoadGroupPermissions,
+            request$: req$,
+            onSuccess: (permissions) => ({
+                groupPermissions: permissions,
+            }),
         });
     }
     updatePermissionLocally(ctx, action) {
@@ -368,54 +311,46 @@ let PermissionsState = class PermissionsState {
         }));
         ctx.patchState({ groupPermissions: updatedPermissions });
     }
+    // ============================================================================
+    // Complex Operations - use handleApiRequest for transformations
+    // ============================================================================
     updatePermission(ctx, action) {
         const state = ctx.getState();
-        ctx.patchState({ addPermissionsLoading: true, error: null });
         const updatedPermissions = state.permissions;
-        ctx.patchState({ permissions: updatedPermissions });
-        return this.http
-            .put(`identity/roles/${action.roleValue}/setAllPermissions`, { permissions: updatedPermissions }, {
+        const scopeId = state.moduleType === 'module' ? state.parentModuleId : state.moduleId;
+        const req$ = this.http.put(`identity/roles/${action.roleValue}/setAllPermissions`, { permissions: updatedPermissions }, {
             params: {
-                scopeId: ctx.getState().moduleType === 'module'
-                    ? ctx.getState().parentModuleId
-                    : ctx.getState().moduleId,
+                scopeId,
                 scopeType: ModuleType.LEVEL,
             },
-        })
-            .pipe(tap(() => {
-            ctx.dispatch(new UpdatePermissionSuccess());
-        }), finalize(() => {
-            ctx.patchState({ addPermissionsLoading: false });
-        }), catchError((error) => {
-            // Rollback on error
-            ctx.patchState({
-                permissions: state.permissions,
-                addPermissionsLoading: false,
-            });
-            ctx.dispatch(new UpdatePermissionFail(error.message || 'Failed to update permission'));
-            throw error;
-        }));
+        });
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.UpdatePermission,
+            request$: req$,
+            onSuccess: () => ({}),
+            onError: (error, currentState) => {
+                // Rollback on error
+                return { permissions: currentState.permissions };
+            },
+            errorMessage: 'Failed to update permission',
+        });
     }
     updateGroupPermission(ctx, action) {
         const state = ctx.getState();
-        ctx.patchState({ addPermissionsLoading: true, error: null });
         const updatedPermissions = state.groupPermissions;
-        ctx.patchState({ groupPermissions: updatedPermissions });
-        return this.http
-            .put(`identity/groups/${action.groupId}/setAllPermissions`, { permissions: updatedPermissions[0].logs || [] })
-            .pipe(tap(() => {
-            ctx.dispatch(new UpdatePermissionSuccess());
-        }), finalize(() => {
-            ctx.patchState({ addPermissionsLoading: false });
-        }), catchError((error) => {
-            // Rollback on error
-            ctx.patchState({
-                groupPermissions: state.groupPermissions,
-                addPermissionsLoading: false,
-            });
-            ctx.dispatch(new UpdatePermissionFail(error.message || 'Failed to update permission'));
-            throw error;
-        }));
+        const req$ = this.http.put(`identity/groups/${action.groupId}/setAllPermissions`, { permissions: updatedPermissions[0].logs || [] });
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.UpdateGroupPermission,
+            request$: req$,
+            onSuccess: () => ({}),
+            onError: (error, currentState) => {
+                // Rollback on error
+                return { groupPermissions: currentState.groupPermissions };
+            },
+            errorMessage: 'Failed to update permission',
+        });
     }
     toggleAllLevelPermissions(ctx, action) {
         const state = ctx.getState();
@@ -426,23 +361,25 @@ let PermissionsState = class PermissionsState {
                 isSelected: action.enabled,
             })),
         }));
-        ctx.patchState({ permissions: updatedPermissions });
-        return this.http
-            .put(`identity/roles/${action.roleValue}/setAllPermissions`, { permissions: updatedPermissions }, {
+        const scopeId = state.moduleType === 'module' ? state.parentModuleId : state.moduleId;
+        const req$ = this.http.put(`identity/roles/${action.roleValue}/setAllPermissions`, { permissions: updatedPermissions }, {
             params: {
-                scopeId: ctx.getState().moduleType === 'module'
-                    ? ctx.getState().parentModuleId
-                    : ctx.getState().moduleId,
+                scopeId,
                 scopeType: ModuleType.LEVEL,
             },
-        })
-            .pipe(tap(() => {
-            ctx.dispatch(new UpdatePermissionSuccess());
-        }), catchError((error) => {
-            ctx.patchState({ permissions: state.permissions });
-            ctx.dispatch(new UpdatePermissionFail(error.message || 'Failed to toggle all permissions'));
-            throw error;
-        }));
+        });
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.ToggleAllLevelPermissions,
+            request$: req$,
+            onSuccess: () => ({
+                permissions: updatedPermissions,
+            }),
+            onError: () => ({
+                permissions: state.permissions,
+            }),
+            errorMessage: 'Failed to toggle all permissions',
+        });
     }
     toggleAllGroupPermissions(ctx, action) {
         const state = ctx.getState();
@@ -456,16 +393,19 @@ let PermissionsState = class PermissionsState {
                 })),
             })),
         }));
-        ctx.patchState({ groupPermissions: updatedPermissions });
-        return this.http
-            .put(`identity/groups/${action.groupId}/setAllPermissions`, { permissions: updatedPermissions[0].logs || [] })
-            .pipe(tap(() => {
-            ctx.dispatch(new UpdatePermissionSuccess());
-        }), catchError((error) => {
-            ctx.patchState({ groupPermissions: state.groupPermissions });
-            ctx.dispatch(new UpdatePermissionFail(error.message || 'Failed to toggle all permissions'));
-            throw error;
-        }));
+        const req$ = this.http.put(`identity/groups/${action.groupId}/setAllPermissions`, { permissions: updatedPermissions[0].logs || [] });
+        return handleApiRequest({
+            ctx,
+            key: PermissionsActionKey.ToggleAllGroupPermissions,
+            request$: req$,
+            onSuccess: () => ({
+                groupPermissions: updatedPermissions,
+            }),
+            onError: () => ({
+                groupPermissions: state.groupPermissions,
+            }),
+            errorMessage: 'Failed to toggle all permissions',
+        });
     }
     setModuleInfo(ctx, action) {
         let parentPath = '';
@@ -497,18 +437,12 @@ let PermissionsState = class PermissionsState {
             groupPermissions: [],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsState });
 };
 __decorate([
     Action(LoadRoles)
 ], PermissionsState.prototype, "loadRoles", null);
-__decorate([
-    Action(LoadRolesSuccess)
-], PermissionsState.prototype, "loadRolesSuccess", null);
-__decorate([
-    Action(LoadRolesFail)
-], PermissionsState.prototype, "loadRolesFail", null);
 __decorate([
     Action(SelectRole)
 ], PermissionsState.prototype, "selectRole", null);
@@ -521,15 +455,6 @@ __decorate([
 __decorate([
     Action(LoadGroupPermissions)
 ], PermissionsState.prototype, "loadGroupPermissions", null);
-__decorate([
-    Action(LoadPermissionsSuccess)
-], PermissionsState.prototype, "loadPermissionsSuccess", null);
-__decorate([
-    Action(LoadGroupPermissionsSuccess)
-], PermissionsState.prototype, "loadGroupPermissionsSuccess", null);
-__decorate([
-    Action(LoadPermissionsFail)
-], PermissionsState.prototype, "loadPermissionsFail", null);
 __decorate([
     Action(UpdatePermissionLocally)
 ], PermissionsState.prototype, "updatePermissionLocally", null);
@@ -556,40 +481,34 @@ __decorate([
 ], PermissionsState.prototype, "reset", null);
 __decorate([
     Selector()
-], PermissionsState, "roles", null);
-__decorate([
-    Selector()
-], PermissionsState, "selectedRoleValue", null);
+], PermissionsState, "getRoles", null);
 __decorate([
     Selector()
-], PermissionsState, "selectedGroupValue", null);
+], PermissionsState, "getSelectedRoleValue", null);
 __decorate([
     Selector()
-], PermissionsState, "permissions", null);
+], PermissionsState, "getSelectedGroupValue", null);
 __decorate([
     Selector()
-], PermissionsState, "groupPermissions", null);
+], PermissionsState, "getPermissions", null);
 __decorate([
     Selector()
-], PermissionsState, "loading", null);
+], PermissionsState, "getGroupPermissions", null);
 __decorate([
     Selector()
-], PermissionsState, "permissionsLoading", null);
+], PermissionsState, "getModuleType", null);
 __decorate([
     Selector()
-], PermissionsState, "addPermissionsLoading", null);
+], PermissionsState, "getModuleId", null);
 __decorate([
     Selector()
-], PermissionsState, "moduleType", null);
+], PermissionsState, "getLevelId", null);
 __decorate([
     Selector()
-], PermissionsState, "moduleId", null);
+], PermissionsState, "getLoadingActive", null);
 __decorate([
     Selector()
-], PermissionsState, "levelId", null);
-__decorate([
-    Selector()
-], PermissionsState, "error", null);
+], PermissionsState, "getErrors", null);
 PermissionsState = __decorate([
     State({
         name: 'permissions',
@@ -600,36 +519,59 @@ PermissionsState = __decorate([
             permissions: [],
             groupPermissions: [],
             currentLevelId: null,
-            loading: false,
-            permissionsLoading: false,
-            addPermissionsLoading: false,
-            error: null,
             moduleType: '',
             moduleId: '',
-            parentModuleType: '',
-            parentModuleId: '',
+            parentModuleType: null,
+            parentModuleId: null,
             parentPath: '',
+            loadingActive: [], // Required by LoadingStateShape
+            errors: {}, // Required by LoadingStateShape
         },
     })
 ], PermissionsState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsState, decorators: [{
             type: Injectable
-        }], propDecorators: { loadRoles: [], loadRolesSuccess: [], loadRolesFail: [], selectRole: [], selectGroup: [], loadPermissions: [], loadGroupPermissions: [], loadPermissionsSuccess: [], loadGroupPermissionsSuccess: [], loadPermissionsFail: [], updatePermissionLocally: [], updateGroupPermissionLocally: [], updatePermission: [], updateGroupPermission: [], toggleAllLevelPermissions: [], toggleAllGroupPermissions: [], setModuleInfo: [], reset: [] } });
+        }], propDecorators: { loadRoles: [], selectRole: [], selectGroup: [], loadPermissions: [], loadGroupPermissions: [], updatePermissionLocally: [], updateGroupPermissionLocally: [], updatePermission: [], updateGroupPermission: [], toggleAllLevelPermissions: [], toggleAllGroupPermissions: [], setModuleInfo: [], reset: [] } });
 
 class PermissionsFacade {
     store = inject(Store);
-    selectors = {
-        roles: this.store.selectSignal(PermissionsState.roles),
-        selectedRoleValue: this.store.selectSignal(PermissionsState.selectedRoleValue),
-        selectedGroupValue: this.store.selectSignal(PermissionsState.selectedGroupValue),
-        permissions: this.store.selectSignal(PermissionsState.permissions),
-        groupPermissions: this.store.selectSignal(PermissionsState.groupPermissions),
-        loading: this.store.selectSignal(PermissionsState.loading),
-        permissionsLoading: this.store.selectSignal(PermissionsState.permissionsLoading),
-        addPermissionsLoading: this.store.selectSignal(PermissionsState.addPermissionsLoading),
-        error: this.store.selectSignal(PermissionsState.error),
-        levelId: this.store.selectSignal(PermissionsState.levelId),
-    };
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
+    roles = select(PermissionsState.getRoles);
+    selectedRoleValue = select(PermissionsState.getSelectedRoleValue);
+    selectedGroupValue = select(PermissionsState.getSelectedGroupValue);
+    permissions = select(PermissionsState.getPermissions);
+    groupPermissions = select(PermissionsState.getGroupPermissions);
+    moduleType = select(PermissionsState.getModuleType);
+    moduleId = select(PermissionsState.getModuleId);
+    levelId = select(PermissionsState.getLevelId);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(PermissionsState.getLoadingActive);
+    errors = select(PermissionsState.getErrors);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingRoles = computed(() => this.loadingActive().includes(PermissionsActionKey.LoadRoles), ...(ngDevMode ? [{ debugName: "isLoadingRoles" }] : []));
+    isLoadingPermissions = computed(() => this.loadingActive().includes(PermissionsActionKey.LoadPermissions), ...(ngDevMode ? [{ debugName: "isLoadingPermissions" }] : []));
+    isLoadingGroupPermissions = computed(() => this.loadingActive().includes(PermissionsActionKey.LoadGroupPermissions), ...(ngDevMode ? [{ debugName: "isLoadingGroupPermissions" }] : []));
+    isUpdatingPermission = computed(() => this.loadingActive().includes(PermissionsActionKey.UpdatePermission), ...(ngDevMode ? [{ debugName: "isUpdatingPermission" }] : []));
+    isUpdatingGroupPermission = computed(() => this.loadingActive().includes(PermissionsActionKey.UpdateGroupPermission), ...(ngDevMode ? [{ debugName: "isUpdatingGroupPermission" }] : []));
+    isTogglingLevelPermissions = computed(() => this.loadingActive().includes(PermissionsActionKey.ToggleAllLevelPermissions), ...(ngDevMode ? [{ debugName: "isTogglingLevelPermissions" }] : []));
+    isTogglingGroupPermissions = computed(() => this.loadingActive().includes(PermissionsActionKey.ToggleAllGroupPermissions), ...(ngDevMode ? [{ debugName: "isTogglingGroupPermissions" }] : []));
+    // ============================================================================
+    // Error Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    rolesError = computed(() => this.errors()[PermissionsActionKey.LoadRoles] ?? null, ...(ngDevMode ? [{ debugName: "rolesError" }] : []));
+    permissionsError = computed(() => this.errors()[PermissionsActionKey.LoadPermissions] ?? null, ...(ngDevMode ? [{ debugName: "permissionsError" }] : []));
+    groupPermissionsError = computed(() => this.errors()[PermissionsActionKey.LoadGroupPermissions] ?? null, ...(ngDevMode ? [{ debugName: "groupPermissionsError" }] : []));
+    updatePermissionError = computed(() => this.errors()[PermissionsActionKey.UpdatePermission] ?? null, ...(ngDevMode ? [{ debugName: "updatePermissionError" }] : []));
+    updateGroupPermissionError = computed(() => this.errors()[PermissionsActionKey.UpdateGroupPermission] ?? null, ...(ngDevMode ? [{ debugName: "updateGroupPermissionError" }] : []));
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
     loadRoles() {
         return this.store.dispatch(new LoadRoles());
     }
@@ -689,8 +631,9 @@ class PermissionsEditDialog {
     ref = inject(ModalRef);
     // permissionGroup = input.required<PermissionLog | null>();
     permissionGroup = input(null, ...(ngDevMode ? [{ debugName: "permissionGroup" }] : []));
-    addPermissionsLoading = this.permissionsFacade.selectors.addPermissionsLoading;
-    addPermissionsError = this.permissionsFacade.selectors.error;
+    // Use new facade pattern
+    addPermissionsLoading = this.permissionsFacade.isUpdatingPermission;
+    addPermissionsError = this.permissionsFacade.updatePermissionError;
     levelId = input.required(...(ngDevMode ? [{ debugName: "levelId" }] : []));
     roleValue = input.required(...(ngDevMode ? [{ debugName: "roleValue" }] : []));
     isGroup = input.required(...(ngDevMode ? [{ debugName: "isGroup" }] : []));
@@ -791,16 +734,17 @@ class PermissionsPage {
     modal = inject(ModalService);
     destroyRef = inject(DestroyRef);
     defaultLevelName = 'Project';
-    levelRoles = this.permissionsFacade.selectors.roles;
-    selectedRoleValue = this.permissionsFacade.selectors.selectedRoleValue;
+    // Use new facade pattern
+    levelRoles = this.permissionsFacade.roles;
+    selectedRoleValue = this.permissionsFacade.selectedRoleValue;
     selectedRole = linkedSignal(this.selectedRoleValue, ...(ngDevMode ? [{ debugName: "selectedRole" }] : []));
-    selectedGroupValue = this.permissionsFacade.selectors.selectedGroupValue;
+    selectedGroupValue = this.permissionsFacade.selectedGroupValue;
     selectedGroup = linkedSignal(this.selectedGroupValue, ...(ngDevMode ? [{ debugName: "selectedGroup" }] : []));
-    permissions = this.permissionsFacade.selectors.permissions;
-    groupPermissions = this.permissionsFacade.selectors.groupPermissions;
-    loading = this.permissionsFacade.selectors.loading;
-    permissionsLoading = this.permissionsFacade.selectors.permissionsLoading;
-    levelId = this.permissionsFacade.selectors.levelId;
+    permissions = this.permissionsFacade.permissions;
+    groupPermissions = this.permissionsFacade.groupPermissions;
+    loading = this.permissionsFacade.isLoadingRoles;
+    permissionsLoading = this.permissionsFacade.isLoadingPermissions;
+    levelId = this.permissionsFacade.levelId;
     groups = this.accessibilitiesFacade.groups;
     allPermissionsToggle = new FormControl(false);
     groupOrRoleId = computed(() => {
@@ -944,7 +888,7 @@ class PermissionsPage {
         this.permissionsFacade.reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PermissionsPage, isStandalone: true, selector: "mt-permissions-page", ngImport: i0, template: "<div id=\"permissions-page-card\" class=\"flex gap-4 p-1\">\r\n  <div class=\"w-1/5 flex-shrink-0\">\r\n    <mt-card class=\"h-full flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"flex flex-col h-full\">\r\n          <div\r\n            class=\"p-4 pb-0 bg-surface-50 rounded-t-2xl border-b border-surface\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold mb-3\">\r\n              {{ \"permissions.rolesAndGroups\" | transloco }}\r\n            </h2>\r\n\r\n            <mt-tabs\r\n              [(active)]=\"selectedTab\"\r\n              [options]=\"tabsList()\"\r\n              size=\"large\"\r\n              (onChange)=\"onTabChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"flex-1 overflow-y-auto p-4\">\r\n            @if (loading()) {\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n            } @else {\r\n              @if (selectedTab() === \"roles\") {\r\n                @for (level of levelRoles(); track level.levelKey) {\r\n                  <div class=\"flex flex-col gap-2 mb-4\">\r\n                    <h2 class=\"font-semibold\">{{ level.level }}</h2>\r\n                    @for (role of level.roles; track role.value) {\r\n                      <div\r\n                        class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                        [class.bg-primary-50]=\"selectedRole() === role.value\"\r\n                        [class.hover:bg-surface]=\"selectedRole() !== role.value\"\r\n                        [class.border-primary-400]=\"\r\n                          selectedRole() === role.value\r\n                        \"\r\n                        [style.--p-avatar-background]=\"\r\n                          selectedRole() === role.value\r\n                            ? 'var(--p-primary-color)'\r\n                            : 'var(--p-surface-100)'\r\n                        \"\r\n                        [style.--p-avatar-color]=\"\r\n                          selectedRole() === role.value ? '#ffffff' : ''\r\n                        \"\r\n                        (click)=\"selectRole(role.value)\"\r\n                      >\r\n                        <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                        </mt-avatar>\r\n                        <div class=\"flex-1 min-w-0\">\r\n                          <div class=\"font-medium truncate\">\r\n                            {{ role.name }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noRolesFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                } @empty {\r\n                  <div\r\n                    class=\"flex items-center justify-center h-full text-muted-color\"\r\n                  >\r\n                    {{ \"permissions.noLevelRolesFound\" | transloco }}\r\n                  </div>\r\n                }\r\n              } @else {\r\n                <div class=\"flex flex-col gap-2 mb-4\">\r\n                  @for (group of groups(); track group.name) {\r\n                    <div\r\n                      class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                      [class.bg-primary-50]=\"selectedGroup() === group.id\"\r\n                      [class.hover:bg-surface]=\"selectedGroup() !== group.id\"\r\n                      [class.border-primary-400]=\"selectedGroup() === group.id\"\r\n                      [style.--p-avatar-background]=\"\r\n                        selectedGroup() === group.id\r\n                          ? 'var(--p-primary-color)'\r\n                          : 'var(--p-surface-100)'\r\n                      \"\r\n                      [style.--p-avatar-color]=\"\r\n                        selectedGroup() === group.id ? '#ffffff' : ''\r\n                      \"\r\n                      (click)=\"selectGroup(group.id)\"\r\n                    >\r\n                      <mt-avatar [icon]=\"'user.users-check'\" shape=\"square\">\r\n                      </mt-avatar>\r\n                      <div class=\"flex-1 min-w-0\">\r\n                        <div class=\"font-medium truncate\">{{ group.name }}</div>\r\n                      </div>\r\n                    </div>\r\n                  } @empty {\r\n                    <div\r\n                      class=\"flex items-center justify-center h-full text-muted-color\"\r\n                    >\r\n                      {{ \"permissions.noGroupsFound\" | transloco }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n  </div>\r\n\r\n  <div class=\"min-w-0 w-1/2\">\r\n    @if (!selectedRole() && !selectedGroup()) {\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex items-center justify-center h-full text-muted-color\">\r\n            {{ \"permissions.selectRoleToViewPermissions\" | transloco }}\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n    } @else {\r\n      <mt-card class=\"h-full\">\r\n        <div class=\"flex flex-col h-full\">\r\n          <ng-template #headless>\r\n            <div class=\"p-4 pb-2 mb-5 border-b border-surface\">\r\n              <h2 class=\"text-lg font-semibold mb-3\">\r\n                {{\r\n                  (selectedTab() === \"roles\"\r\n                    ? \"permissions.levelPermissions\"\r\n                    : \"permissions.groupsPermissions\"\r\n                  ) | transloco\r\n                }}\r\n              </h2>\r\n            </div>\r\n            @if (permissionsLoading()) {\r\n              <div class=\"mx-4\">\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"mb-5 p-3 mx-4 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"text-sm font-semibold\">\r\n                      {{\r\n                        (selectedTab() === \"roles\"\r\n                          ? \"permissions.setAllProjectPermissions\"\r\n                          : \"permissions.setAllGroupPermissions\"\r\n                        ) | transloco\r\n                      }}\r\n                    </div>\r\n                    <div class=\"text-xs text-muted-color\">\r\n                      {{ \"permissions.recommendedForSimpleForms\" | transloco }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <mt-toggle-field\r\n                  [formControl]=\"allPermissionsToggle\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n\r\n              <div class=\"flex-1 px-4 overflow-y-auto border-t border-surface\">\r\n                <div class=\"space-y-3 my-5\">\r\n                  @if (selectedTab() === \"roles\") {\r\n                    @for (group of permissions(); track group.name) {\r\n                      <div\r\n                        class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                      >\r\n                        <div class=\"flex items-center gap-3\">\r\n                          <mt-avatar\r\n                            [icon]=\"'editor.dotpoints-02'\"\r\n                            shape=\"square\"\r\n                            size=\"normal\"\r\n                            [style.--p-avatar-background]=\"\r\n                              'var(--p-' + 'surface' + '-100)'\r\n                            \"\r\n                            [style.--p-avatar-color]=\"\r\n                              'var(--p-' + 'primary' + '-600)'\r\n                            \"\r\n                          >\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm\">{{ group.name }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          [text]=\"true\"\r\n                          icon=\"custom.pencil\"\r\n                          severity=\"primary\"\r\n                          (click)=\"openPermissionDialog(group)\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  } @else {\r\n                    @for (group of groupPermissions(); track group.levelName) {\r\n                      <div class=\"flex flex-col justify-between gap-3\">\r\n                        @for (log of group.logs; track log.name) {\r\n                          <div\r\n                            class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                          >\r\n                            <div class=\"flex items-center gap-3\">\r\n                              <mt-avatar\r\n                                [icon]=\"'editor.dotpoints-02'\"\r\n                                shape=\"square\"\r\n                                size=\"normal\"\r\n                                [style.--p-avatar-background]=\"\r\n                                  'var(--p-' + 'surface' + '-100)'\r\n                                \"\r\n                                [style.--p-avatar-color]=\"\r\n                                  'var(--p-' + 'primary' + '-600)'\r\n                                \"\r\n                              >\r\n                              </mt-avatar>\r\n                              <span class=\"text-sm\">{{ log.name }}</span>\r\n                            </div>\r\n                            <mt-button\r\n                              [text]=\"true\"\r\n                              icon=\"custom.pencil\"\r\n                              severity=\"primary\"\r\n                              (click)=\"openPermissionDialog(log)\"\r\n                            >\r\n                            </mt-button>\r\n                          </div>\r\n                        } @empty {\r\n                          <div\r\n                            class=\"flex items-center justify-center h-full text-muted-color\"\r\n                          >\r\n                            {{\r\n                              \"permissions.noPermissionsFoundForSelectedGroup\"\r\n                                | transloco\r\n                            }}\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PermissionsPage, isStandalone: true, selector: "mt-permissions-page", ngImport: i0, template: "<div id=\"permissions-page-card\" class=\"flex gap-4 p-1\">\r\n  <div class=\"w-1/5 flex-shrink-0\">\r\n    <mt-card class=\"h-full flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"flex flex-col h-full\">\r\n          <div\r\n            class=\"p-4 pb-0 bg-surface-50 rounded-t-2xl border-b border-surface\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold mb-3\">\r\n              {{ \"permissions.rolesAndGroups\" | transloco }}\r\n            </h2>\r\n\r\n            <mt-tabs\r\n              [(active)]=\"selectedTab\"\r\n              [options]=\"tabsList()\"\r\n              size=\"large\"\r\n              (onChange)=\"onTabChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"flex-1 overflow-y-auto p-4\">\r\n            @if (loading()) {\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n            } @else {\r\n              @if (selectedTab() === \"roles\") {\r\n                @for (level of levelRoles(); track level.levelKey) {\r\n                  <div class=\"flex flex-col gap-2 mb-4\">\r\n                    <h2 class=\"font-semibold\">{{ level.level }}</h2>\r\n                    @for (role of level.roles; track role.value) {\r\n                      <div\r\n                        class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                        [class.bg-primary-50]=\"selectedRole() === role.value\"\r\n                        [class.hover:bg-surface]=\"selectedRole() !== role.value\"\r\n                        [class.border-primary-400]=\"\r\n                          selectedRole() === role.value\r\n                        \"\r\n                        [style.--p-avatar-background]=\"\r\n                          selectedRole() === role.value\r\n                            ? 'var(--p-primary-color)'\r\n                            : 'var(--p-surface-100)'\r\n                        \"\r\n                        [style.--p-avatar-color]=\"\r\n                          selectedRole() === role.value ? '#ffffff' : ''\r\n                        \"\r\n                        (click)=\"selectRole(role.value)\"\r\n                      >\r\n                        <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                        </mt-avatar>\r\n                        <div class=\"flex-1 min-w-0\">\r\n                          <div class=\"font-medium truncate\">\r\n                            {{ role.name }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noRolesFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                } @empty {\r\n                  <div\r\n                    class=\"flex items-center justify-center h-full text-muted-color\"\r\n                  >\r\n                    {{ \"permissions.noLevelRolesFound\" | transloco }}\r\n                  </div>\r\n                }\r\n              } @else {\r\n                <div class=\"flex flex-col gap-2 mb-4\">\r\n                  @for (group of groups(); track group.name) {\r\n                    <div\r\n                      class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                      [class.bg-primary-50]=\"selectedGroup() === group.id\"\r\n                      [class.hover:bg-surface]=\"selectedGroup() !== group.id\"\r\n                      [class.border-primary-400]=\"selectedGroup() === group.id\"\r\n                      [style.--p-avatar-background]=\"\r\n                        selectedGroup() === group.id\r\n                          ? 'var(--p-primary-color)'\r\n                          : 'var(--p-surface-100)'\r\n                      \"\r\n                      [style.--p-avatar-color]=\"\r\n                        selectedGroup() === group.id ? '#ffffff' : ''\r\n                      \"\r\n                      (click)=\"selectGroup(group.id)\"\r\n                    >\r\n                      <mt-avatar [icon]=\"'user.users-check'\" shape=\"square\">\r\n                      </mt-avatar>\r\n                      <div class=\"flex-1 min-w-0\">\r\n                        <div class=\"font-medium truncate\">\r\n                          {{ group.name?.display }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  } @empty {\r\n                    <div\r\n                      class=\"flex items-center justify-center h-full text-muted-color\"\r\n                    >\r\n                      {{ \"permissions.noGroupsFound\" | transloco }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n  </div>\r\n\r\n  <div class=\"min-w-0 w-1/2\">\r\n    @if (!selectedRole() && !selectedGroup()) {\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex items-center justify-center h-full text-muted-color\">\r\n            {{ \"permissions.selectRoleToViewPermissions\" | transloco }}\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n    } @else {\r\n      <mt-card class=\"h-full\">\r\n        <div class=\"flex flex-col h-full\">\r\n          <ng-template #headless>\r\n            <div class=\"p-4 pb-2 mb-5 border-b border-surface\">\r\n              <h2 class=\"text-lg font-semibold mb-3\">\r\n                {{\r\n                  (selectedTab() === \"roles\"\r\n                    ? \"permissions.levelPermissions\"\r\n                    : \"permissions.groupsPermissions\"\r\n                  ) | transloco\r\n                }}\r\n              </h2>\r\n            </div>\r\n            @if (permissionsLoading()) {\r\n              <div class=\"mx-4\">\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"mb-5 p-3 mx-4 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"text-sm font-semibold\">\r\n                      {{\r\n                        (selectedTab() === \"roles\"\r\n                          ? \"permissions.setAllProjectPermissions\"\r\n                          : \"permissions.setAllGroupPermissions\"\r\n                        ) | transloco\r\n                      }}\r\n                    </div>\r\n                    <div class=\"text-xs text-muted-color\">\r\n                      {{ \"permissions.recommendedForSimpleForms\" | transloco }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <mt-toggle-field\r\n                  [formControl]=\"allPermissionsToggle\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n\r\n              <div class=\"flex-1 px-4 overflow-y-auto border-t border-surface\">\r\n                <div class=\"space-y-3 my-5\">\r\n                  @if (selectedTab() === \"roles\") {\r\n                    @for (group of permissions(); track group.name) {\r\n                      <div\r\n                        class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                      >\r\n                        <div class=\"flex items-center gap-3\">\r\n                          <mt-avatar\r\n                            [icon]=\"'editor.dotpoints-02'\"\r\n                            shape=\"square\"\r\n                            size=\"normal\"\r\n                            [style.--p-avatar-background]=\"\r\n                              'var(--p-' + 'surface' + '-100)'\r\n                            \"\r\n                            [style.--p-avatar-color]=\"\r\n                              'var(--p-' + 'primary' + '-600)'\r\n                            \"\r\n                          >\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm\">{{ group.name }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          [text]=\"true\"\r\n                          icon=\"custom.pencil\"\r\n                          severity=\"primary\"\r\n                          (click)=\"openPermissionDialog(group)\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  } @else {\r\n                    @for (group of groupPermissions(); track group.levelName) {\r\n                      <div class=\"flex flex-col justify-between gap-3\">\r\n                        @for (log of group.logs; track log.name) {\r\n                          <div\r\n                            class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                          >\r\n                            <div class=\"flex items-center gap-3\">\r\n                              <mt-avatar\r\n                                [icon]=\"'editor.dotpoints-02'\"\r\n                                shape=\"square\"\r\n                                size=\"normal\"\r\n                                [style.--p-avatar-background]=\"\r\n                                  'var(--p-' + 'surface' + '-100)'\r\n                                \"\r\n                                [style.--p-avatar-color]=\"\r\n                                  'var(--p-' + 'primary' + '-600)'\r\n                                \"\r\n                              >\r\n                              </mt-avatar>\r\n                              <span class=\"text-sm\">{{ log.name }}</span>\r\n                            </div>\r\n                            <mt-button\r\n                              [text]=\"true\"\r\n                              icon=\"custom.pencil\"\r\n                              severity=\"primary\"\r\n                              (click)=\"openPermissionDialog(log)\"\r\n                            >\r\n                            </mt-button>\r\n                          </div>\r\n                        } @empty {\r\n                          <div\r\n                            class=\"flex items-center justify-center h-full text-muted-color\"\r\n                          >\r\n                            {{\r\n                              \"permissions.noPermissionsFoundForSelectedGroup\"\r\n                                | transloco\r\n                            }}\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PermissionsPage, decorators: [{
             type: Component,
@@ -958,7 +902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Avatar,
                         SkeletonModule,
                         Tabs,
-                    ], template: "<div id=\"permissions-page-card\" class=\"flex gap-4 p-1\">\r\n  <div class=\"w-1/5 flex-shrink-0\">\r\n    <mt-card class=\"h-full flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"flex flex-col h-full\">\r\n          <div\r\n            class=\"p-4 pb-0 bg-surface-50 rounded-t-2xl border-b border-surface\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold mb-3\">\r\n              {{ \"permissions.rolesAndGroups\" | transloco }}\r\n            </h2>\r\n\r\n            <mt-tabs\r\n              [(active)]=\"selectedTab\"\r\n              [options]=\"tabsList()\"\r\n              size=\"large\"\r\n              (onChange)=\"onTabChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"flex-1 overflow-y-auto p-4\">\r\n            @if (loading()) {\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n            } @else {\r\n              @if (selectedTab() === \"roles\") {\r\n                @for (level of levelRoles(); track level.levelKey) {\r\n                  <div class=\"flex flex-col gap-2 mb-4\">\r\n                    <h2 class=\"font-semibold\">{{ level.level }}</h2>\r\n                    @for (role of level.roles; track role.value) {\r\n                      <div\r\n                        class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                        [class.bg-primary-50]=\"selectedRole() === role.value\"\r\n                        [class.hover:bg-surface]=\"selectedRole() !== role.value\"\r\n                        [class.border-primary-400]=\"\r\n                          selectedRole() === role.value\r\n                        \"\r\n                        [style.--p-avatar-background]=\"\r\n                          selectedRole() === role.value\r\n                            ? 'var(--p-primary-color)'\r\n                            : 'var(--p-surface-100)'\r\n                        \"\r\n                        [style.--p-avatar-color]=\"\r\n                          selectedRole() === role.value ? '#ffffff' : ''\r\n                        \"\r\n                        (click)=\"selectRole(role.value)\"\r\n                      >\r\n                        <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                        </mt-avatar>\r\n                        <div class=\"flex-1 min-w-0\">\r\n                          <div class=\"font-medium truncate\">\r\n                            {{ role.name }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noRolesFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                } @empty {\r\n                  <div\r\n                    class=\"flex items-center justify-center h-full text-muted-color\"\r\n                  >\r\n                    {{ \"permissions.noLevelRolesFound\" | transloco }}\r\n                  </div>\r\n                }\r\n              } @else {\r\n                <div class=\"flex flex-col gap-2 mb-4\">\r\n                  @for (group of groups(); track group.name) {\r\n                    <div\r\n                      class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                      [class.bg-primary-50]=\"selectedGroup() === group.id\"\r\n                      [class.hover:bg-surface]=\"selectedGroup() !== group.id\"\r\n                      [class.border-primary-400]=\"selectedGroup() === group.id\"\r\n                      [style.--p-avatar-background]=\"\r\n                        selectedGroup() === group.id\r\n                          ? 'var(--p-primary-color)'\r\n                          : 'var(--p-surface-100)'\r\n                      \"\r\n                      [style.--p-avatar-color]=\"\r\n                        selectedGroup() === group.id ? '#ffffff' : ''\r\n                      \"\r\n                      (click)=\"selectGroup(group.id)\"\r\n                    >\r\n                      <mt-avatar [icon]=\"'user.users-check'\" shape=\"square\">\r\n                      </mt-avatar>\r\n                      <div class=\"flex-1 min-w-0\">\r\n                        <div class=\"font-medium truncate\">{{ group.name }}</div>\r\n                      </div>\r\n                    </div>\r\n                  } @empty {\r\n                    <div\r\n                      class=\"flex items-center justify-center h-full text-muted-color\"\r\n                    >\r\n                      {{ \"permissions.noGroupsFound\" | transloco }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n  </div>\r\n\r\n  <div class=\"min-w-0 w-1/2\">\r\n    @if (!selectedRole() && !selectedGroup()) {\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex items-center justify-center h-full text-muted-color\">\r\n            {{ \"permissions.selectRoleToViewPermissions\" | transloco }}\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n    } @else {\r\n      <mt-card class=\"h-full\">\r\n        <div class=\"flex flex-col h-full\">\r\n          <ng-template #headless>\r\n            <div class=\"p-4 pb-2 mb-5 border-b border-surface\">\r\n              <h2 class=\"text-lg font-semibold mb-3\">\r\n                {{\r\n                  (selectedTab() === \"roles\"\r\n                    ? \"permissions.levelPermissions\"\r\n                    : \"permissions.groupsPermissions\"\r\n                  ) | transloco\r\n                }}\r\n              </h2>\r\n            </div>\r\n            @if (permissionsLoading()) {\r\n              <div class=\"mx-4\">\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"mb-5 p-3 mx-4 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"text-sm font-semibold\">\r\n                      {{\r\n                        (selectedTab() === \"roles\"\r\n                          ? \"permissions.setAllProjectPermissions\"\r\n                          : \"permissions.setAllGroupPermissions\"\r\n                        ) | transloco\r\n                      }}\r\n                    </div>\r\n                    <div class=\"text-xs text-muted-color\">\r\n                      {{ \"permissions.recommendedForSimpleForms\" | transloco }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <mt-toggle-field\r\n                  [formControl]=\"allPermissionsToggle\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n\r\n              <div class=\"flex-1 px-4 overflow-y-auto border-t border-surface\">\r\n                <div class=\"space-y-3 my-5\">\r\n                  @if (selectedTab() === \"roles\") {\r\n                    @for (group of permissions(); track group.name) {\r\n                      <div\r\n                        class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                      >\r\n                        <div class=\"flex items-center gap-3\">\r\n                          <mt-avatar\r\n                            [icon]=\"'editor.dotpoints-02'\"\r\n                            shape=\"square\"\r\n                            size=\"normal\"\r\n                            [style.--p-avatar-background]=\"\r\n                              'var(--p-' + 'surface' + '-100)'\r\n                            \"\r\n                            [style.--p-avatar-color]=\"\r\n                              'var(--p-' + 'primary' + '-600)'\r\n                            \"\r\n                          >\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm\">{{ group.name }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          [text]=\"true\"\r\n                          icon=\"custom.pencil\"\r\n                          severity=\"primary\"\r\n                          (click)=\"openPermissionDialog(group)\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  } @else {\r\n                    @for (group of groupPermissions(); track group.levelName) {\r\n                      <div class=\"flex flex-col justify-between gap-3\">\r\n                        @for (log of group.logs; track log.name) {\r\n                          <div\r\n                            class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                          >\r\n                            <div class=\"flex items-center gap-3\">\r\n                              <mt-avatar\r\n                                [icon]=\"'editor.dotpoints-02'\"\r\n                                shape=\"square\"\r\n                                size=\"normal\"\r\n                                [style.--p-avatar-background]=\"\r\n                                  'var(--p-' + 'surface' + '-100)'\r\n                                \"\r\n                                [style.--p-avatar-color]=\"\r\n                                  'var(--p-' + 'primary' + '-600)'\r\n                                \"\r\n                              >\r\n                              </mt-avatar>\r\n                              <span class=\"text-sm\">{{ log.name }}</span>\r\n                            </div>\r\n                            <mt-button\r\n                              [text]=\"true\"\r\n                              icon=\"custom.pencil\"\r\n                              severity=\"primary\"\r\n                              (click)=\"openPermissionDialog(log)\"\r\n                            >\r\n                            </mt-button>\r\n                          </div>\r\n                        } @empty {\r\n                          <div\r\n                            class=\"flex items-center justify-center h-full text-muted-color\"\r\n                          >\r\n                            {{\r\n                              \"permissions.noPermissionsFoundForSelectedGroup\"\r\n                                | transloco\r\n                            }}\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div id=\"permissions-page-card\" class=\"flex gap-4 p-1\">\r\n  <div class=\"w-1/5 flex-shrink-0\">\r\n    <mt-card class=\"h-full flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"flex flex-col h-full\">\r\n          <div\r\n            class=\"p-4 pb-0 bg-surface-50 rounded-t-2xl border-b border-surface\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold mb-3\">\r\n              {{ \"permissions.rolesAndGroups\" | transloco }}\r\n            </h2>\r\n\r\n            <mt-tabs\r\n              [(active)]=\"selectedTab\"\r\n              [options]=\"tabsList()\"\r\n              size=\"large\"\r\n              (onChange)=\"onTabChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"flex-1 overflow-y-auto p-4\">\r\n            @if (loading()) {\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n            } @else {\r\n              @if (selectedTab() === \"roles\") {\r\n                @for (level of levelRoles(); track level.levelKey) {\r\n                  <div class=\"flex flex-col gap-2 mb-4\">\r\n                    <h2 class=\"font-semibold\">{{ level.level }}</h2>\r\n                    @for (role of level.roles; track role.value) {\r\n                      <div\r\n                        class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                        [class.bg-primary-50]=\"selectedRole() === role.value\"\r\n                        [class.hover:bg-surface]=\"selectedRole() !== role.value\"\r\n                        [class.border-primary-400]=\"\r\n                          selectedRole() === role.value\r\n                        \"\r\n                        [style.--p-avatar-background]=\"\r\n                          selectedRole() === role.value\r\n                            ? 'var(--p-primary-color)'\r\n                            : 'var(--p-surface-100)'\r\n                        \"\r\n                        [style.--p-avatar-color]=\"\r\n                          selectedRole() === role.value ? '#ffffff' : ''\r\n                        \"\r\n                        (click)=\"selectRole(role.value)\"\r\n                      >\r\n                        <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                        </mt-avatar>\r\n                        <div class=\"flex-1 min-w-0\">\r\n                          <div class=\"font-medium truncate\">\r\n                            {{ role.name }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noRolesFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                } @empty {\r\n                  <div\r\n                    class=\"flex items-center justify-center h-full text-muted-color\"\r\n                  >\r\n                    {{ \"permissions.noLevelRolesFound\" | transloco }}\r\n                  </div>\r\n                }\r\n              } @else {\r\n                <div class=\"flex flex-col gap-2 mb-4\">\r\n                  @for (group of groups(); track group.name) {\r\n                    <div\r\n                      class=\"p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                      [class.bg-primary-50]=\"selectedGroup() === group.id\"\r\n                      [class.hover:bg-surface]=\"selectedGroup() !== group.id\"\r\n                      [class.border-primary-400]=\"selectedGroup() === group.id\"\r\n                      [style.--p-avatar-background]=\"\r\n                        selectedGroup() === group.id\r\n                          ? 'var(--p-primary-color)'\r\n                          : 'var(--p-surface-100)'\r\n                      \"\r\n                      [style.--p-avatar-color]=\"\r\n                        selectedGroup() === group.id ? '#ffffff' : ''\r\n                      \"\r\n                      (click)=\"selectGroup(group.id)\"\r\n                    >\r\n                      <mt-avatar [icon]=\"'user.users-check'\" shape=\"square\">\r\n                      </mt-avatar>\r\n                      <div class=\"flex-1 min-w-0\">\r\n                        <div class=\"font-medium truncate\">\r\n                          {{ group.name?.display }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  } @empty {\r\n                    <div\r\n                      class=\"flex items-center justify-center h-full text-muted-color\"\r\n                    >\r\n                      {{ \"permissions.noGroupsFound\" | transloco }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n  </div>\r\n\r\n  <div class=\"min-w-0 w-1/2\">\r\n    @if (!selectedRole() && !selectedGroup()) {\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex items-center justify-center h-full text-muted-color\">\r\n            {{ \"permissions.selectRoleToViewPermissions\" | transloco }}\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n    } @else {\r\n      <mt-card class=\"h-full\">\r\n        <div class=\"flex flex-col h-full\">\r\n          <ng-template #headless>\r\n            <div class=\"p-4 pb-2 mb-5 border-b border-surface\">\r\n              <h2 class=\"text-lg font-semibold mb-3\">\r\n                {{\r\n                  (selectedTab() === \"roles\"\r\n                    ? \"permissions.levelPermissions\"\r\n                    : \"permissions.groupsPermissions\"\r\n                  ) | transloco\r\n                }}\r\n              </h2>\r\n            </div>\r\n            @if (permissionsLoading()) {\r\n              <div class=\"mx-4\">\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n                <p-skeleton class=\"my-4\" height=\"4rem\" />\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"mb-5 p-3 mx-4 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"text-sm font-semibold\">\r\n                      {{\r\n                        (selectedTab() === \"roles\"\r\n                          ? \"permissions.setAllProjectPermissions\"\r\n                          : \"permissions.setAllGroupPermissions\"\r\n                        ) | transloco\r\n                      }}\r\n                    </div>\r\n                    <div class=\"text-xs text-muted-color\">\r\n                      {{ \"permissions.recommendedForSimpleForms\" | transloco }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <mt-toggle-field\r\n                  [formControl]=\"allPermissionsToggle\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n\r\n              <div class=\"flex-1 px-4 overflow-y-auto border-t border-surface\">\r\n                <div class=\"space-y-3 my-5\">\r\n                  @if (selectedTab() === \"roles\") {\r\n                    @for (group of permissions(); track group.name) {\r\n                      <div\r\n                        class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                      >\r\n                        <div class=\"flex items-center gap-3\">\r\n                          <mt-avatar\r\n                            [icon]=\"'editor.dotpoints-02'\"\r\n                            shape=\"square\"\r\n                            size=\"normal\"\r\n                            [style.--p-avatar-background]=\"\r\n                              'var(--p-' + 'surface' + '-100)'\r\n                            \"\r\n                            [style.--p-avatar-color]=\"\r\n                              'var(--p-' + 'primary' + '-600)'\r\n                            \"\r\n                          >\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm\">{{ group.name }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          [text]=\"true\"\r\n                          icon=\"custom.pencil\"\r\n                          severity=\"primary\"\r\n                          (click)=\"openPermissionDialog(group)\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  } @else {\r\n                    @for (group of groupPermissions(); track group.levelName) {\r\n                      <div class=\"flex flex-col justify-between gap-3\">\r\n                        @for (log of group.logs; track log.name) {\r\n                          <div\r\n                            class=\"p-2 border-1 border-surface rounded-lg flex items-center justify-between hover:bg-surface-100 transition-colors\"\r\n                          >\r\n                            <div class=\"flex items-center gap-3\">\r\n                              <mt-avatar\r\n                                [icon]=\"'editor.dotpoints-02'\"\r\n                                shape=\"square\"\r\n                                size=\"normal\"\r\n                                [style.--p-avatar-background]=\"\r\n                                  'var(--p-' + 'surface' + '-100)'\r\n                                \"\r\n                                [style.--p-avatar-color]=\"\r\n                                  'var(--p-' + 'primary' + '-600)'\r\n                                \"\r\n                              >\r\n                              </mt-avatar>\r\n                              <span class=\"text-sm\">{{ log.name }}</span>\r\n                            </div>\r\n                            <mt-button\r\n                              [text]=\"true\"\r\n                              icon=\"custom.pencil\"\r\n                              severity=\"primary\"\r\n                              (click)=\"openPermissionDialog(log)\"\r\n                            >\r\n                            </mt-button>\r\n                          </div>\r\n                        } @empty {\r\n                          <div\r\n                            class=\"flex items-center justify-center h-full text-muted-color\"\r\n                          >\r\n                            {{\r\n                              \"permissions.noPermissionsFoundForSelectedGroup\"\r\n                                | transloco\r\n                            }}\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    } @empty {\r\n                      <div\r\n                        class=\"flex items-center justify-center h-full text-muted-color\"\r\n                      >\r\n                        {{ \"permissions.noPermissionsFound\" | transloco }}\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
 // store/index.ts
@@ -967,5 +911,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LoadGroupPermissions, LoadGroupPermissionsSuccess, LoadPermissions, LoadPermissionsFail, LoadPermissionsSuccess, LoadRoles, LoadRolesFail, LoadRolesSuccess, ModuleType, PermissionsEditDialog, PermissionsFacade, PermissionsPage, PermissionsState, Reset, SelectGroup, SelectRole, SetModuleInfo, ToggleAllGroupPermissions, ToggleAllLevelPermissions, UpdateGroupPermission, UpdateGroupPermissionLocally, UpdatePermission, UpdatePermissionFail, UpdatePermissionLocally, UpdatePermissionSuccess };
+export { LoadGroupPermissions, LoadPermissions, LoadRoles, ModuleType, PermissionsActionKey, PermissionsEditDialog, PermissionsFacade, PermissionsPage, PermissionsState, Reset, SelectGroup, SelectRole, SetModuleInfo, ToggleAllGroupPermissions, ToggleAllLevelPermissions, UpdateGroupPermission, UpdateGroupPermissionLocally, UpdatePermission, UpdatePermissionLocally };
 //# sourceMappingURL=masterteam-permissions.mjs.map