@memberjunction/ng-explorer-settings 2.70.0 → 2.71.0

package/dist/lib/role-management/role-management.component.js

@@ -5,25 +5,27 @@ import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { RunView, Metadata } from '@memberjunction/core';
 import { SharedSettingsModule } from '../shared/shared-settings.module';
+import { RoleDialogComponent } from './role-dialog/role-dialog.component';
+import { WindowModule } from '@progress/kendo-angular-dialog';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.ID;
 function RoleManagementComponent_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 31);
-    i0.ɵɵelement(2, "div", 32)(3, "div", 32)(4, "div", 32);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 32);
+    i0.ɵɵelement(2, "div", 33)(3, "div", 33)(4, "div", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 33);
+    i0.ɵɵelementStart(5, "div", 34);
     i0.ɵɵtext(6, "Loading roles...");
     i0.ɵɵelementEnd()();
 } }
 function RoleManagementComponent_Conditional_57_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 34);
-    i0.ɵɵelement(2, "i", 35);
-    i0.ɵɵelementStart(3, "p", 36);
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 35);
+    i0.ɵɵelement(2, "i", 36);
+    i0.ɵɵelementStart(3, "p", 37);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 37);
+    i0.ɵɵelementStart(5, "button", 38);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_57_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
     i0.ɵɵelement(6, "i", 3);
     i0.ɵɵtext(7, " Try Again ");
@@ -34,16 +36,16 @@ function RoleManagementComponent_Conditional_57_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
 function RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58)(2, "div", 59);
-    i0.ɵɵelement(3, "i", 60);
+    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59)(2, "div", 60);
+    i0.ɵɵelement(3, "i", 61);
     i0.ɵɵelementStart(4, "span", 12);
     i0.ɵɵtext(5, "Users:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "span", 11);
     i0.ɵɵtext(7, "0");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59);
-    i0.ɵɵelement(9, "i", 61);
+    i0.ɵɵelementStart(8, "div", 60);
+    i0.ɵɵelement(9, "i", 62);
     i0.ɵɵelementStart(10, "span", 12);
     i0.ɵɵtext(11, "Created:");
     i0.ɵɵelementEnd();
@@ -51,8 +53,8 @@ function RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template(rf
     i0.ɵɵtext(13);
     i0.ɵɵpipe(14, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 59);
-    i0.ɵɵelement(16, "i", 62);
+    i0.ɵɵelementStart(15, "div", 60);
+    i0.ɵɵelement(16, "i", 63);
     i0.ɵɵelementStart(17, "span", 12);
     i0.ɵɵtext(18, "Updated:");
     i0.ɵɵelementEnd();
@@ -60,11 +62,11 @@ function RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template(rf
     i0.ɵɵtext(20);
     i0.ɵɵpipe(21, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 63)(23, "h4", 64);
-    i0.ɵɵelement(24, "i", 65);
+    i0.ɵɵelementStart(22, "div", 64)(23, "h4", 65);
+    i0.ɵɵelement(24, "i", 66);
     i0.ɵɵtext(25, " Permissions Preview ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 66);
+    i0.ɵɵelementStart(26, "p", 67);
     i0.ɵɵtext(27, "Full permission management available in the Permissions tab");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -76,34 +78,34 @@ function RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template(rf
 } }
 function RoleManagementComponent_Conditional_58_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 42);
+    i0.ɵɵelementStart(0, "div", 42)(1, "div", 43);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_58_For_3_Template_div_click_1_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleRoleExpansion(role_r4.ID)); });
-    i0.ɵɵelementStart(2, "div", 43)(3, "div", 44);
+    i0.ɵɵelementStart(2, "div", 44)(3, "div", 45);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 45)(6, "h3", 46);
+    i0.ɵɵelementStart(5, "div", 46)(6, "h3", 47);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "p", 47);
+    i0.ɵɵelementStart(8, "p", 48);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "div", 48)(11, "span", 49);
+    i0.ɵɵelementStart(10, "div", 49)(11, "span", 50);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 50);
+    i0.ɵɵelementStart(13, "div", 51);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_58_For_3_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(14, "button", 51);
+    i0.ɵɵelementStart(14, "button", 52);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_58_For_3_Template_button_click_14_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editRole(role_r4)); });
-    i0.ɵɵelement(15, "i", 52);
+    i0.ɵɵelement(15, "i", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 53);
+    i0.ɵɵelementStart(16, "button", 54);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_58_For_3_Template_button_click_16_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteRole(role_r4)); });
-    i0.ɵɵelement(17, "i", 54);
+    i0.ɵɵelement(17, "i", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "button", 55);
-    i0.ɵɵelement(19, "i", 56);
+    i0.ɵɵelementStart(18, "button", 56);
+    i0.ɵɵelement(19, "i", 57);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(20, RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template, 28, 8, "div", 57);
+    i0.ɵɵtemplate(20, RoleManagementComponent_Conditional_58_For_3_Conditional_20_Template, 28, 8, "div", 58);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const role_r4 = ctx.$implicit;
@@ -127,19 +129,19 @@ function RoleManagementComponent_Conditional_58_For_3_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r1.isRoleExpanded(role_r4.ID) ? 20 : -1);
 } }
 function RoleManagementComponent_Conditional_58_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 67);
-    i0.ɵɵelementStart(2, "p", 68);
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(2, "p", 69);
     i0.ɵɵtext(3, "No roles found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 69);
+    i0.ɵɵelementStart(4, "p", 70);
     i0.ɵɵtext(5, "Try adjusting your filters or create a new role");
     i0.ɵɵelementEnd()();
 } }
 function RoleManagementComponent_Conditional_58_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 38);
-    i0.ɵɵrepeaterCreate(2, RoleManagementComponent_Conditional_58_For_3_Template, 21, 12, "div", 39, _forTrack0);
-    i0.ɵɵtemplate(4, RoleManagementComponent_Conditional_58_Conditional_4_Template, 6, 0, "div", 40);
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 39);
+    i0.ɵɵrepeaterCreate(2, RoleManagementComponent_Conditional_58_For_3_Template, 21, 12, "div", 40, _forTrack0);
+    i0.ɵɵtemplate(4, RoleManagementComponent_Conditional_58_Conditional_4_Template, 6, 0, "div", 41);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -148,38 +150,38 @@ function RoleManagementComponent_Conditional_58_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.filteredRoles.length === 0 ? 4 : -1);
 } }
-function RoleManagementComponent_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+function RoleManagementComponent_Conditional_60_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_59_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
-    i0.ɵɵelementStart(1, "div", 71);
-    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_59_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 72)(3, "h3", 73);
-    i0.ɵɵelement(4, "i", 74);
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_60_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(1, "div", 72);
+    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_60_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 73)(3, "h3", 74);
+    i0.ɵɵelement(4, "i", 75);
     i0.ɵɵtext(5, " Confirm Delete ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 75);
-    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_59_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
-    i0.ɵɵelement(7, "i", 76);
+    i0.ɵɵelementStart(6, "button", 76);
+    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_60_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelement(7, "i", 77);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 77)(9, "p");
+    i0.ɵɵelementStart(8, "div", 78)(9, "p");
     i0.ɵɵtext(10, "Are you sure you want to delete the role ");
     i0.ɵɵelementStart(11, "strong");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13, "?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 78);
-    i0.ɵɵelement(15, "i", 79);
+    i0.ɵɵelementStart(14, "p", 79);
+    i0.ɵɵelement(15, "i", 80);
     i0.ɵɵtext(16, " This will affect all users assigned to this role. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 80)(18, "button", 81);
-    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_59_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(17, "div", 81)(18, "button", 82);
+    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_60_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
     i0.ɵɵtext(19, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 82);
-    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_59_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteRole()); });
-    i0.ɵɵelement(21, "i", 54);
+    i0.ɵɵelementStart(20, "button", 83);
+    i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_60_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteRole()); });
+    i0.ɵɵelement(21, "i", 55);
     i0.ɵɵtext(22, " Delete Role ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -194,6 +196,9 @@ export class RoleManagementComponent {
     selectedRole = null;
     isLoading = false;
     error = null;
+    // Dialog state
+    showRoleDialog = false;
+    roleDialogData = null;
     // Stats
     stats = {
         totalRoles: 0,
@@ -311,12 +316,17 @@ export class RoleManagementComponent {
         return this.expandedRoleId === roleId;
     }
     createNewRole() {
-        this.selectedRole = null;
-        this.showCreateDialog = true;
+        this.roleDialogData = {
+            mode: 'create'
+        };
+        this.showRoleDialog = true;
     }
     editRole(role) {
-        this.selectedRole = role;
-        this.showEditDialog = true;
+        this.roleDialogData = {
+            role: role,
+            mode: 'edit'
+        };
+        this.showRoleDialog = true;
     }
     confirmDeleteRole(role) {
         this.selectedRole = role;
@@ -326,13 +336,27 @@ export class RoleManagementComponent {
         if (!this.selectedRole)
             return;
         try {
-            // Implement role deletion logic
-            this.showDeleteConfirm = false;
-            await this.loadInitialData();
+            // Load role entity to delete
+            const role = await this.metadata.GetEntityObject('Roles');
+            const loadResult = await role.Load(this.selectedRole.ID);
+            if (loadResult) {
+                const deleteResult = await role.Delete();
+                if (deleteResult) {
+                    this.showDeleteConfirm = false;
+                    this.selectedRole = null;
+                    await this.loadInitialData();
+                }
+                else {
+                    throw new Error(role.LatestResult?.Message || 'Failed to delete role');
+                }
+            }
+            else {
+                throw new Error('Role not found or permission denied');
+            }
         }
         catch (error) {
             console.error('Error deleting role:', error);
-            this.error = 'Failed to delete role';
+            this.error = error.message || 'Failed to delete role';
         }
     }
     getRoleIcon(role) {
@@ -350,8 +374,16 @@ export class RoleManagementComponent {
     refreshData() {
         this.loadInitialData();
     }
+    onRoleDialogResult(result) {
+        this.showRoleDialog = false;
+        this.roleDialogData = null;
+        if (result.action === 'save') {
+            // Refresh the role list to show changes
+            this.loadInitialData();
+        }
+    }
     static ɵfac = function RoleManagementComponent_Factory(t) { return new (t || RoleManagementComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoleManagementComponent, selectors: [["mj-role-management"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 60, vars: 18, consts: [[1, "role-management-container"], [1, "action-buttons"], [1, "btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "stats-grid", 2, "display", "flex"], [1, "stat-card"], [1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-user-tag"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "stat-icon-system"], [1, "fa-solid", "fa-shield-halved"], [1, "stat-icon", "stat-icon-custom"], [1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], [1, "filters-section"], [1, "filters-row"], [1, "search-container"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search roles by name or description...", 1, "search-input", 3, "input", "value"], [1, "filter-group"], [1, "filter-label"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "loading-container"], [1, "error-container"], [1, "content-area"], [1, "modal-backdrop"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "roles-list"], [1, "role-card", 3, "expanded"], [1, "empty-state"], [1, "role-card"], [1, "role-header", 3, "click"], [1, "role-info"], [1, "role-icon-wrapper"], [1, "role-details"], [1, "role-name"], [1, "role-description"], [1, "role-meta"], [1, "role-type-badge"], [1, "role-actions", 3, "click"], ["title", "Edit", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "action-btn", "action-btn-danger", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], [1, "expand-btn"], [1, "fa-solid", "fa-chevron-down"], [1, "role-content"], [1, "role-stats"], [1, "stat-item"], [1, "fa-solid", "fa-users"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-clock"], [1, "permissions-preview"], [1, "section-title"], [1, "fa-solid", "fa-key"], [1, "permissions-note"], [1, "fa-solid", "fa-user-tag", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-title"], [1, "fa-solid", "fa-exclamation-triangle", "text-danger"], [1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "text-warning"], [1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "btn-secondary", 3, "click"], [1, "btn-danger", 3, "click"]], template: function RoleManagementComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoleManagementComponent, selectors: [["mj-role-management"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 61, vars: 20, consts: [[1, "role-management-container"], [1, "action-buttons"], [1, "mj-btn", "mj-btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "mj-grid", "mj-grid-4"], [1, "mj-card"], [1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-user-tag"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "stat-icon-system"], [1, "fa-solid", "fa-shield-halved"], [1, "stat-icon", "stat-icon-custom"], [1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], [1, "filters-section"], [1, "filters-row"], [1, "search-container"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search roles by name or description...", 1, "search-input", 3, "input", "value"], [1, "filter-group"], [1, "filter-label"], [1, "filter-buttons"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "loading-container"], [1, "error-container"], [1, "content-area"], [3, "result", "data", "visible"], [1, "modal-backdrop"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "roles-list"], [1, "role-card", 3, "expanded"], [1, "empty-state"], [1, "role-card"], [1, "role-header", 3, "click"], [1, "role-info"], [1, "role-icon-wrapper"], [1, "role-details"], [1, "role-name"], [1, "role-description"], [1, "role-meta"], [1, "role-type-badge"], [1, "role-actions", 3, "click"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "text-danger", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], [1, "expand-btn"], [1, "fa-solid", "fa-chevron-down"], [1, "role-content"], [1, "role-stats"], [1, "stat-item"], [1, "fa-solid", "fa-users"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-clock"], [1, "permissions-preview"], [1, "section-title"], [1, "fa-solid", "fa-key"], [1, "permissions-note"], [1, "fa-solid", "fa-user-tag", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-title"], [1, "fa-solid", "fa-exclamation-triangle", "text-danger"], [1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "text-warning"], [1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], [1, "mj-btn", "mj-btn-primary", "text-danger", 3, "click"]], template: function RoleManagementComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
             i0.ɵɵlistener("click", function RoleManagementComponent_Template_button_click_2_listener() { return ctx.refreshData(); });
             i0.ɵɵelement(3, "i", 3);
@@ -418,7 +450,11 @@ export class RoleManagementComponent {
             i0.ɵɵlistener("click", function RoleManagementComponent_Template_button_click_54_listener() { return ctx.onTypeFilterChange("custom"); });
             i0.ɵɵtext(55, " Custom ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵtemplate(56, RoleManagementComponent_Conditional_56_Template, 7, 0, "div", 27)(57, RoleManagementComponent_Conditional_57_Template, 8, 1, "div", 28)(58, RoleManagementComponent_Conditional_58_Template, 5, 1, "div", 29)(59, RoleManagementComponent_Conditional_59_Template, 23, 1, "div", 30);
+            i0.ɵɵtemplate(56, RoleManagementComponent_Conditional_56_Template, 7, 0, "div", 27)(57, RoleManagementComponent_Conditional_57_Template, 8, 1, "div", 28)(58, RoleManagementComponent_Conditional_58_Template, 5, 1, "div", 29);
+            i0.ɵɵelementStart(59, "mj-role-dialog", 30);
+            i0.ɵɵlistener("result", function RoleManagementComponent_Template_mj_role_dialog_result_59_listener($event) { return ctx.onRoleDialogResult($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(60, RoleManagementComponent_Conditional_60_Template, 23, 1, "div", 31);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -436,11 +472,11 @@ export class RoleManagementComponent {
             i0.ɵɵadvance(7);
             i0.ɵɵproperty("value", ctx.filters$.value.search);
             i0.ɵɵadvance(5);
-            i0.ɵɵclassProp("active", ctx.filters$.value.type === "all");
+            i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.type === "all");
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.filters$.value.type === "system");
+            i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.type === "system");
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.filters$.value.type === "custom");
+            i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.type === "custom");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.isLoading ? 56 : -1);
             i0.ɵɵadvance();
@@ -448,17 +484,23 @@ export class RoleManagementComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 58 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedRole ? 59 : -1);
+            i0.ɵɵproperty("data", ctx.roleDialogData)("visible", ctx.showRoleDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedRole ? 60 : -1);
         } }, dependencies: [CommonModule, i1.DatePipe, FormsModule,
-            SharedSettingsModule], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.role-management-container[_ngcontent-%COMP%] {\n  @include scrollable-container;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n//[_ngcontent-%COMP%]   Action[_ngcontent-%COMP%]   Buttons\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  margin-bottom: 1.5rem;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n//[_ngcontent-%COMP%]   Buttons\n.btn-primary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n//[_ngcontent-%COMP%]   Stats[_ngcontent-%COMP%]   Grid\n.stats-grid[_ngcontent-%COMP%] {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n\n  &-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #ff9800;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   Section\n.filters-section[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   Area\n.content-area[_ngcontent-%COMP%] {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  padding: 1.5rem;\n}\n\n//[_ngcontent-%COMP%]   Roles[_ngcontent-%COMP%]   List\n.roles-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: auto;\n  padding-right: 0.5rem; // Space for scrollbar\n}\n\n.role-card[_ngcontent-%COMP%] {\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  &.expanded {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    \n    .expand-btn i {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.role-header[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: #f9fafb;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n  }\n}\n\n.role-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n}\n\n.role-icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: rgba(33, 150, 243, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  font-size: 1.25rem;\n}\n\n.role-details[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .role-name {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .role-description {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n.role-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.role-type-badge[_ngcontent-%COMP%] {\n  padding: 0.375rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 600;\n\n  &.badge-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #7b1fa2;\n  }\n\n  &.badge-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #f57c00;\n  }\n}\n\n.role-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover:not(:disabled) {\n    background: white;\n    color: #2196f3;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  &:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  &-danger:hover:not(:disabled) {\n    color: #f44336;\n  }\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  i {\n    transition: transform 0.3s ease;\n  }\n}\n\n//[_ngcontent-%COMP%]   Role[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   (Expanded)\n.role-content[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  background: white;\n  border-top: 1px solid #e5e7eb;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.role-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n\n  .stat-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n\n    i {\n      color: #6b7280;\n    }\n\n    .stat-label {\n      color: #6b7280;\n    }\n\n    .stat-value {\n      color: #1f2937;\n      font-weight: 500;\n    }\n  }\n}\n\n.permissions-preview[_ngcontent-%COMP%] {\n  padding: 1rem;\n  background: #f9fafb;\n  border-radius: 8px;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.5rem 0;\n\n    i {\n      color: #2196f3;\n    }\n  }\n\n  .permissions-note {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Method[_ngcontent-%COMP%]   not[_ngcontent-%COMP%]   accessible[_ngcontent-%COMP%]   from[_ngcontent-%COMP%]   template[_ngcontent-%COMP%], so[_ngcontent-%COMP%]   we[_ngcontent-%COMP%]   duplicate[_ngcontent-%COMP%]   the[_ngcontent-%COMP%]   logic\n.role-card[data-system=\"true\"][_ngcontent-%COMP%] {\n  .role-icon-wrapper {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Empty[_ngcontent-%COMP%]   State\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #9c27b0 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%]   Error[_ngcontent-%COMP%]   State\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n//[_ngcontent-%COMP%]   Modal[_ngcontent-%COMP%]   Styles\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s ease;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-warning {\n    color: #f57c00;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    max-height: 500px;\n  }\n}\n\n//[_ngcontent-%COMP%]   Utility[_ngcontent-%COMP%]   Classes\n.text-danger[_ngcontent-%COMP%] {\n  color: #f44336;\n}"] });
+            SharedSettingsModule,
+            RoleDialogComponent,
+            WindowModule], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.role-management-container[_ngcontent-%COMP%] {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n//[_ngcontent-%COMP%]   Action[_ngcontent-%COMP%]   Buttons\n.action-buttons[_ngcontent-%COMP%] {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Buttons\n.btn-primary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n//[_ngcontent-%COMP%]   Stats[_ngcontent-%COMP%]   Grid\n.stats-grid[_ngcontent-%COMP%] {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n\n  &-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #ff9800;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   Section\n.filters-section[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   Area\n.content-area[_ngcontent-%COMP%] {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  padding: 1.5rem;\n}\n\n//[_ngcontent-%COMP%]   Roles[_ngcontent-%COMP%]   List\n.roles-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: auto;\n  padding-right: 0.5rem; // Space for scrollbar\n}\n\n.role-card[_ngcontent-%COMP%] {\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  &.expanded {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    \n    .expand-btn i {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.role-header[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: #f9fafb;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n  }\n}\n\n.role-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n}\n\n.role-icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: rgba(33, 150, 243, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  font-size: 1.25rem;\n}\n\n.role-details[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .role-name {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .role-description {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n.role-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.role-type-badge[_ngcontent-%COMP%] {\n  padding: 0.375rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 600;\n\n  &.badge-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #7b1fa2;\n  }\n\n  &.badge-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #f57c00;\n  }\n}\n\n.role-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover:not(:disabled) {\n    background: white;\n    color: #2196f3;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  &:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  &-danger:hover:not(:disabled) {\n    color: #f44336;\n  }\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  i {\n    transition: transform 0.3s ease;\n  }\n}\n\n//[_ngcontent-%COMP%]   Role[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   (Expanded)\n.role-content[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  background: white;\n  border-top: 1px solid #e5e7eb;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.role-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n\n  .stat-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n\n    i {\n      color: #6b7280;\n    }\n\n    .stat-label {\n      color: #6b7280;\n    }\n\n    .stat-value {\n      color: #1f2937;\n      font-weight: 500;\n    }\n  }\n}\n\n.permissions-preview[_ngcontent-%COMP%] {\n  padding: 1rem;\n  background: #f9fafb;\n  border-radius: 8px;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.5rem 0;\n\n    i {\n      color: #2196f3;\n    }\n  }\n\n  .permissions-note {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Method[_ngcontent-%COMP%]   not[_ngcontent-%COMP%]   accessible[_ngcontent-%COMP%]   from[_ngcontent-%COMP%]   template[_ngcontent-%COMP%], so[_ngcontent-%COMP%]   we[_ngcontent-%COMP%]   duplicate[_ngcontent-%COMP%]   the[_ngcontent-%COMP%]   logic\n.role-card[data-system=\"true\"][_ngcontent-%COMP%] {\n  .role-icon-wrapper {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Empty[_ngcontent-%COMP%]   State\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #9c27b0 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%]   Error[_ngcontent-%COMP%]   State\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n//[_ngcontent-%COMP%]   Modal[_ngcontent-%COMP%]   Styles\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s ease;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-warning {\n    color: #f57c00;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    max-height: 500px;\n  }\n}\n\n//[_ngcontent-%COMP%]   Utility[_ngcontent-%COMP%]   Classes\n.text-danger[_ngcontent-%COMP%] {\n  color: #f44336;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RoleManagementComponent, [{
         type: Component,
         args: [{ selector: 'mj-role-management', standalone: true, imports: [
                     CommonModule,
                     FormsModule,
-                    SharedSettingsModule
-                ], template: "<div class=\"role-management-container\">\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button class=\"btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n      <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n      Refresh\n    </button>\n    <button class=\"btn-primary\" (click)=\"createNewRole()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Role\n    </button>\n  </div>\n\n  <!-- Stats Cards -->\n  <div class=\"stats-grid\" style=\"display: flex\">\n    <div class=\"stat-card\">\n      <div class=\"stat-icon stat-icon-total\">\n        <i class=\"fa-solid fa-user-tag\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.totalRoles }}</div>\n        <div class=\"stat-label\">Total Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"stat-card\">\n      <div class=\"stat-icon stat-icon-system\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.systemRoles }}</div>\n        <div class=\"stat-label\">System Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"stat-card\">\n      <div class=\"stat-icon stat-icon-custom\">\n        <i class=\"fa-solid fa-user-tag\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.customRoles }}</div>\n        <div class=\"stat-label\">Custom Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"stat-card\">\n      <div class=\"stat-icon stat-icon-active\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.activeRoles }}</div>\n        <div class=\"stat-label\">Active Roles</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Filters Section -->\n  <div class=\"filters-section\">\n    <div class=\"filters-row\">\n      <!-- Search -->\n      <div class=\"search-container\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"search-input\" \n          placeholder=\"Search roles by name or description...\"\n          (input)=\"onSearchChange($event)\"\n          [value]=\"filters$.value.search\"\n        />\n      </div>\n      \n      <!-- Type Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Type</label>\n        <div class=\"filter-buttons\">\n          <button \n            class=\"filter-btn\"\n            [class.active]=\"filters$.value.type === 'all'\"\n            (click)=\"onTypeFilterChange('all')\"\n          >\n            All\n          </button>\n          <button \n            class=\"filter-btn\"\n            [class.active]=\"filters$.value.type === 'system'\"\n            (click)=\"onTypeFilterChange('system')\"\n          >\n            System\n          </button>\n          <button \n            class=\"filter-btn\"\n            [class.active]=\"filters$.value.type === 'custom'\"\n            (click)=\"onTypeFilterChange('custom')\"\n          >\n            Custom\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\">\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n      </div>\n      <div class=\"loading-text\">Loading roles...</div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Content Area -->\n  @if (!isLoading && !error) {\n    <div class=\"content-area\">\n      <div class=\"roles-list\">\n        @for (role of filteredRoles; track role.ID) {\n          <div class=\"role-card\" [class.expanded]=\"isRoleExpanded(role.ID)\">\n            <div class=\"role-header\" (click)=\"toggleRoleExpansion(role.ID)\">\n              <div class=\"role-info\">\n                <div class=\"role-icon-wrapper\">\n                  <i [class]=\"'fa-solid ' + getRoleIcon(role)\"></i>\n                </div>\n                <div class=\"role-details\">\n                  <h3 class=\"role-name\">{{ role.Name }}</h3>\n                  <p class=\"role-description\">{{ role.Description || 'No description available' }}</p>\n                </div>\n              </div>\n              \n              <div class=\"role-meta\">\n                <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                  {{ getRoleTypeLabel(role) }}\n                </span>\n                <div class=\"role-actions\" (click)=\"$event.stopPropagation()\">\n                  <button class=\"action-btn\" (click)=\"editRole(role)\" title=\"Edit\" [disabled]=\"isSystemRole(role)\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button class=\"action-btn action-btn-danger\" (click)=\"confirmDeleteRole(role)\" title=\"Delete\" [disabled]=\"isSystemRole(role)\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                </div>\n                <button class=\"expand-btn\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n              </div>\n            </div>\n            \n            @if (isRoleExpanded(role.ID)) {\n              <div class=\"role-content\">\n                <div class=\"role-stats\">\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-users\"></i>\n                    <span class=\"stat-label\">Users:</span>\n                    <span class=\"stat-value\">0</span><!-- UserCount would come from a join -->\n                  </div>\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    <span class=\"stat-label\">Created:</span>\n                    <span class=\"stat-value\">{{ role.__mj_CreatedAt | date:'short' }}</span>\n                  </div>\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"stat-label\">Updated:</span>\n                    <span class=\"stat-value\">{{ role.__mj_UpdatedAt | date:'short' }}</span>\n                  </div>\n                </div>\n                \n                <div class=\"permissions-preview\">\n                  <h4 class=\"section-title\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    Permissions Preview\n                  </h4>\n                  <p class=\"permissions-note\">Full permission management available in the Permissions tab</p>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        \n        @if (filteredRoles.length === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-user-tag empty-icon\"></i>\n            <p class=\"empty-text\">No roles found</p>\n            <p class=\"empty-subtext\">Try adjusting your filters or create a new role</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedRole) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n            Confirm Delete\n          </h3>\n          <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete the role <strong>{{ selectedRole.Name }}</strong>?</p>\n          <p class=\"text-warning\">\n            <i class=\"fa-solid fa-warning\"></i>\n            This will affect all users assigned to this role.\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <button class=\"btn-secondary\" (click)=\"showDeleteConfirm = false\">Cancel</button>\n          <button class=\"btn-danger\" (click)=\"deleteRole()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete Role\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.role-management-container {\n  @include scrollable-container;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n// Action Buttons\n.action-buttons {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  margin-bottom: 1.5rem;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n// Buttons\n.btn-primary {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n// Stats Grid\n.stats-grid {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n\n  &-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #ff9800;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n}\n\n.stat-content {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n// Filters Section\n.filters-section {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n// Content Area\n.content-area {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  padding: 1.5rem;\n}\n\n// Roles List\n.roles-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: auto;\n  padding-right: 0.5rem; // Space for scrollbar\n}\n\n.role-card {\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  &.expanded {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    \n    .expand-btn i {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.role-header {\n  padding: 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: #f9fafb;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n  }\n}\n\n.role-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n}\n\n.role-icon-wrapper {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: rgba(33, 150, 243, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  font-size: 1.25rem;\n}\n\n.role-details {\n  flex: 1;\n\n  .role-name {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .role-description {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n.role-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.role-type-badge {\n  padding: 0.375rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 600;\n\n  &.badge-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #7b1fa2;\n  }\n\n  &.badge-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #f57c00;\n  }\n}\n\n.role-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.action-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover:not(:disabled) {\n    background: white;\n    color: #2196f3;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  &:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  &-danger:hover:not(:disabled) {\n    color: #f44336;\n  }\n}\n\n.expand-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  i {\n    transition: transform 0.3s ease;\n  }\n}\n\n// Role Content (Expanded)\n.role-content {\n  padding: 1.5rem;\n  background: white;\n  border-top: 1px solid #e5e7eb;\n  animation: slideDown 0.3s ease-out;\n}\n\n.role-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n\n  .stat-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n\n    i {\n      color: #6b7280;\n    }\n\n    .stat-label {\n      color: #6b7280;\n    }\n\n    .stat-value {\n      color: #1f2937;\n      font-weight: 500;\n    }\n  }\n}\n\n.permissions-preview {\n  padding: 1rem;\n  background: #f9fafb;\n  border-radius: 8px;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.5rem 0;\n\n    i {\n      color: #2196f3;\n    }\n  }\n\n  .permissions-note {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin: 0;\n  }\n}\n\n// Method not accessible from template, so we duplicate the logic\n.role-card[data-system=\"true\"] {\n  .role-icon-wrapper {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n// Empty State\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n// Loading State\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #9c27b0 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n// Modal Styles\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s ease;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-warning {\n    color: #f57c00;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    max-height: 500px;\n  }\n}\n\n// Utility Classes\n.text-danger {\n  color: #f44336;\n}"] }]
+                    SharedSettingsModule,
+                    RoleDialogComponent,
+                    WindowModule
+                ], template: "<div class=\"role-management-container\">\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button class=\"mj-btn mj-btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n      <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n      Refresh\n    </button>\n    <button class=\"mj-btn mj-btn-primary\" (click)=\"createNewRole()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Role\n    </button>\n  </div>\n\n  <!-- Stats Cards -->\n  <div class=\"mj-grid mj-grid-4\">\n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-total\">\n        <i class=\"fa-solid fa-user-tag\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.totalRoles }}</div>\n        <div class=\"stat-label\">Total Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-system\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.systemRoles }}</div>\n        <div class=\"stat-label\">System Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-custom\">\n        <i class=\"fa-solid fa-user-tag\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.customRoles }}</div>\n        <div class=\"stat-label\">Custom Roles</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-active\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.activeRoles }}</div>\n        <div class=\"stat-label\">Active Roles</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Filters Section -->\n  <div class=\"filters-section\">\n    <div class=\"filters-row\">\n      <!-- Search -->\n      <div class=\"search-container\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"search-input\" \n          placeholder=\"Search roles by name or description...\"\n          (input)=\"onSearchChange($event)\"\n          [value]=\"filters$.value.search\"\n        />\n      </div>\n      \n      <!-- Type Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Type</label>\n        <div class=\"filter-buttons\">\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.type === 'all'\"\n            (click)=\"onTypeFilterChange('all')\"\n          >\n            All\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.type === 'system'\"\n            (click)=\"onTypeFilterChange('system')\"\n          >\n            System\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.type === 'custom'\"\n            (click)=\"onTypeFilterChange('custom')\"\n          >\n            Custom\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\">\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n      </div>\n      <div class=\"loading-text\">Loading roles...</div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Content Area -->\n  @if (!isLoading && !error) {\n    <div class=\"content-area\">\n      <div class=\"roles-list\">\n        @for (role of filteredRoles; track role.ID) {\n          <div class=\"role-card\" [class.expanded]=\"isRoleExpanded(role.ID)\">\n            <div class=\"role-header\" (click)=\"toggleRoleExpansion(role.ID)\">\n              <div class=\"role-info\">\n                <div class=\"role-icon-wrapper\">\n                  <i [class]=\"'fa-solid ' + getRoleIcon(role)\"></i>\n                </div>\n                <div class=\"role-details\">\n                  <h3 class=\"role-name\">{{ role.Name }}</h3>\n                  <p class=\"role-description\">{{ role.Description || 'No description available' }}</p>\n                </div>\n              </div>\n              \n              <div class=\"role-meta\">\n                <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                  {{ getRoleTypeLabel(role) }}\n                </span>\n                <div class=\"role-actions\" (click)=\"$event.stopPropagation()\">\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editRole(role)\" title=\"Edit\" [disabled]=\"isSystemRole(role)\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm text-danger\" (click)=\"confirmDeleteRole(role)\" title=\"Delete\" [disabled]=\"isSystemRole(role)\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                </div>\n                <button class=\"expand-btn\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n              </div>\n            </div>\n            \n            @if (isRoleExpanded(role.ID)) {\n              <div class=\"role-content\">\n                <div class=\"role-stats\">\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-users\"></i>\n                    <span class=\"stat-label\">Users:</span>\n                    <span class=\"stat-value\">0</span><!-- UserCount would come from a join -->\n                  </div>\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    <span class=\"stat-label\">Created:</span>\n                    <span class=\"stat-value\">{{ role.__mj_CreatedAt | date:'short' }}</span>\n                  </div>\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"stat-label\">Updated:</span>\n                    <span class=\"stat-value\">{{ role.__mj_UpdatedAt | date:'short' }}</span>\n                  </div>\n                </div>\n                \n                <div class=\"permissions-preview\">\n                  <h4 class=\"section-title\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    Permissions Preview\n                  </h4>\n                  <p class=\"permissions-note\">Full permission management available in the Permissions tab</p>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        \n        @if (filteredRoles.length === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-user-tag empty-icon\"></i>\n            <p class=\"empty-text\">No roles found</p>\n            <p class=\"empty-subtext\">Try adjusting your filters or create a new role</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Role Create/Edit Dialog -->\n  <mj-role-dialog \n    [data]=\"roleDialogData\"\n    [visible]=\"showRoleDialog\"\n    (result)=\"onRoleDialogResult($event)\">\n  </mj-role-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedRole) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n            Confirm Delete\n          </h3>\n          <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete the role <strong>{{ selectedRole.Name }}</strong>?</p>\n          <p class=\"text-warning\">\n            <i class=\"fa-solid fa-warning\"></i>\n            This will affect all users assigned to this role.\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">Cancel</button>\n          <button class=\"mj-btn mj-btn-primary text-danger\" (click)=\"deleteRole()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete Role\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.role-management-container {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n// Action Buttons\n.action-buttons {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n// Buttons\n.btn-primary {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n// Stats Grid\n.stats-grid {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n\n  &-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #ff9800;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n}\n\n.stat-content {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n// Filters Section\n.filters-section {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n// Content Area\n.content-area {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  padding: 1.5rem;\n}\n\n// Roles List\n.roles-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: auto;\n  padding-right: 0.5rem; // Space for scrollbar\n}\n\n.role-card {\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  overflow: hidden;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  &.expanded {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    \n    .expand-btn i {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.role-header {\n  padding: 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: #f9fafb;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n  }\n}\n\n.role-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n}\n\n.role-icon-wrapper {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: rgba(33, 150, 243, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  font-size: 1.25rem;\n}\n\n.role-details {\n  flex: 1;\n\n  .role-name {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .role-description {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n.role-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.role-type-badge {\n  padding: 0.375rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 600;\n\n  &.badge-system {\n    background: rgba(156, 39, 176, 0.1);\n    color: #7b1fa2;\n  }\n\n  &.badge-custom {\n    background: rgba(255, 152, 0, 0.1);\n    color: #f57c00;\n  }\n}\n\n.role-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.action-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover:not(:disabled) {\n    background: white;\n    color: #2196f3;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  &:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  &-danger:hover:not(:disabled) {\n    color: #f44336;\n  }\n}\n\n.expand-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  i {\n    transition: transform 0.3s ease;\n  }\n}\n\n// Role Content (Expanded)\n.role-content {\n  padding: 1.5rem;\n  background: white;\n  border-top: 1px solid #e5e7eb;\n  animation: slideDown 0.3s ease-out;\n}\n\n.role-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n\n  .stat-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n\n    i {\n      color: #6b7280;\n    }\n\n    .stat-label {\n      color: #6b7280;\n    }\n\n    .stat-value {\n      color: #1f2937;\n      font-weight: 500;\n    }\n  }\n}\n\n.permissions-preview {\n  padding: 1rem;\n  background: #f9fafb;\n  border-radius: 8px;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.5rem 0;\n\n    i {\n      color: #2196f3;\n    }\n  }\n\n  .permissions-note {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin: 0;\n  }\n}\n\n// Method not accessible from template, so we duplicate the logic\n.role-card[data-system=\"true\"] {\n  .role-icon-wrapper {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n// Empty State\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n// Loading State\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #9c27b0 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n// Modal Styles\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s ease;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-warning {\n    color: #f57c00;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    max-height: 500px;\n  }\n}\n\n// Utility Classes\n.text-danger {\n  color: #f44336;\n}"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleManagementComponent, { className: "RoleManagementComponent", filePath: "src/lib/role-management/role-management.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleManagementComponent, { className: "RoleManagementComponent", filePath: "src/lib/role-management/role-management.component.ts", lineNumber: 37 }); })();
 //# sourceMappingURL=role-management.component.js.map

package/dist/lib/role-management/role-management.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-management.component.js","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts","../../../src/lib/role-management/role-management.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"role-management.component.js","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts","../../../src/lib/role-management/role-management.component.html"],"names":[],"mappings":"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"}