@memberjunction/ng-explorer-settings 3.2.0 → 3.3.0

package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js

@@ -4,13 +4,12 @@ import { Metadata } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-dialog";
 const _forTrack0 = ($index, $item) => $item.roleId;
 const _forTrack1 = ($index, $item) => $item.ID;
 const _c0 = () => ({ standalone: true });
-function PermissionDialogComponent_kendo_window_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 45);
-    i0.ɵɵelement(2, "i", 46);
+function PermissionDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 49);
+    i0.ɵɵelement(2, "i", 50);
     i0.ɵɵelementStart(3, "div");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
@@ -19,52 +18,52 @@ function PermissionDialogComponent_kendo_window_0_Conditional_10_Template(rf, ct
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function PermissionDialogComponent_kendo_window_0_For_70_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+function PermissionDialogComponent_div_0_For_79_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 54);
     i0.ɵɵtext(1, "New");
     i0.ɵɵelementEnd();
 } }
-function PermissionDialogComponent_kendo_window_0_For_70_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
+function PermissionDialogComponent_div_0_For_79_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 55);
     i0.ɵɵtext(1, "Modified");
     i0.ɵɵelementEnd();
 } }
-function PermissionDialogComponent_kendo_window_0_For_70_Template(rf, ctx) { if (rf & 1) {
+function PermissionDialogComponent_div_0_For_79_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 47)(1, "td", 48)(2, "div", 49);
-    i0.ɵɵelement(3, "i", 50);
+    i0.ɵɵelementStart(0, "tr", 51)(1, "td", 52)(2, "div", 53);
+    i0.ɵɵelement(3, "i", 24);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, PermissionDialogComponent_kendo_window_0_For_70_Conditional_6_Template, 2, 0, "span", 51)(7, PermissionDialogComponent_kendo_window_0_For_70_Conditional_7_Template, 2, 0, "span", 52);
+    i0.ɵɵtemplate(6, PermissionDialogComponent_div_0_For_79_Conditional_6_Template, 2, 0, "span", 54)(7, PermissionDialogComponent_div_0_For_79_Conditional_7_Template, 2, 0, "span", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td", 53)(9, "div", 54)(10, "input", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_kendo_window_0_For_70_Template_input_ngModelChange_10_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanCreate, $event) || (rolePermission_r4.entityPermission.CanCreate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "td", 56)(9, "div", 57)(10, "input", 58);
+    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_div_0_For_79_Template_input_ngModelChange_10_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanCreate, $event) || (rolePermission_r4.entityPermission.CanCreate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "label", 56);
-    i0.ɵɵelement(12, "div", 57);
+    i0.ɵɵelementStart(11, "label", 59);
+    i0.ɵɵelement(12, "div", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "td", 53)(14, "div", 54)(15, "input", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_kendo_window_0_For_70_Template_input_ngModelChange_15_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanRead, $event) || (rolePermission_r4.entityPermission.CanRead = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "td", 56)(14, "div", 57)(15, "input", 58);
+    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_div_0_For_79_Template_input_ngModelChange_15_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanRead, $event) || (rolePermission_r4.entityPermission.CanRead = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "label", 56);
-    i0.ɵɵelement(17, "div", 57);
+    i0.ɵɵelementStart(16, "label", 59);
+    i0.ɵɵelement(17, "div", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "td", 53)(19, "div", 54)(20, "input", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_kendo_window_0_For_70_Template_input_ngModelChange_20_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanUpdate, $event) || (rolePermission_r4.entityPermission.CanUpdate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(18, "td", 56)(19, "div", 57)(20, "input", 58);
+    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_div_0_For_79_Template_input_ngModelChange_20_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanUpdate, $event) || (rolePermission_r4.entityPermission.CanUpdate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "label", 56);
-    i0.ɵɵelement(22, "div", 57);
+    i0.ɵɵelementStart(21, "label", 59);
+    i0.ɵɵelement(22, "div", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "td", 53)(24, "div", 54)(25, "input", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_kendo_window_0_For_70_Template_input_ngModelChange_25_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanDelete, $event) || (rolePermission_r4.entityPermission.CanDelete = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(23, "td", 56)(24, "div", 57)(25, "input", 58);
+    i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_div_0_For_79_Template_input_ngModelChange_25_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanDelete, $event) || (rolePermission_r4.entityPermission.CanDelete = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "label", 56);
-    i0.ɵɵelement(27, "div", 57);
+    i0.ɵɵelementStart(26, "label", 59);
+    i0.ɵɵelement(27, "div", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "td", 58)(29, "button", 59);
-    i0.ɵɵlistener("click", function PermissionDialogComponent_kendo_window_0_For_70_Template_button_click_29_listener() { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.removeRolePermission(rolePermission_r4)); });
-    i0.ɵɵelement(30, "i", 43);
+    i0.ɵɵelementStart(28, "td", 61)(29, "button", 62);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_For_79_Template_button_click_29_listener() { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.removeRolePermission(rolePermission_r4)); });
+    i0.ɵɵelement(30, "i", 9);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const rolePermission_r4 = ctx.$implicit;
@@ -79,202 +78,220 @@ function PermissionDialogComponent_kendo_window_0_For_70_Template(rf, ctx) { if
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("id", "create-" + rolePermission_r4.roleId);
     i0.ɵɵtwoWayProperty("ngModel", rolePermission_r4.entityPermission.CanCreate);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(23, _c0));
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(25, _c0));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", "create-" + rolePermission_r4.roleId);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("id", "read-" + rolePermission_r4.roleId);
     i0.ɵɵtwoWayProperty("ngModel", rolePermission_r4.entityPermission.CanRead);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(24, _c0));
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(26, _c0));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", "read-" + rolePermission_r4.roleId);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("id", "update-" + rolePermission_r4.roleId);
     i0.ɵɵtwoWayProperty("ngModel", rolePermission_r4.entityPermission.CanUpdate);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(25, _c0));
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(27, _c0));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", "update-" + rolePermission_r4.roleId);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("id", "delete-" + rolePermission_r4.roleId);
     i0.ɵɵtwoWayProperty("ngModel", rolePermission_r4.entityPermission.CanDelete);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(26, _c0));
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(28, _c0));
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", "delete-" + rolePermission_r4.roleId);
+    i0.ɵɵadvance(3);
+    i0.ɵɵattributeInterpolate1("aria-label", "Remove permissions for ", rolePermission_r4.roleName, "");
 } }
-function PermissionDialogComponent_kendo_window_0_Conditional_71_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 50);
+function PermissionDialogComponent_div_0_Conditional_80_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No role permissions configured");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 60);
+    i0.ɵɵelementStart(4, "p", 63);
     i0.ɵɵtext(5, "Add permissions for specific roles to control access to this entity");
     i0.ɵɵelementEnd()();
 } }
-function PermissionDialogComponent_kendo_window_0_For_80_Template(rf, ctx) { if (rf & 1) {
+function PermissionDialogComponent_div_0_For_89_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
-    i0.ɵɵlistener("click", function PermissionDialogComponent_kendo_window_0_For_80_Template_button_click_0_listener() { const role_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addRolePermission(role_r6)); });
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_For_89_Template_button_click_0_listener() { const role_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addRolePermission(role_r6)); });
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const role_r6 = ctx.$implicit;
+    i0.ɵɵattributeInterpolate1("aria-label", "Add permissions for ", role_r6.Name, "");
     i0.ɵɵpropertyInterpolate1("title", "Add permissions for ", role_r6.Name, "");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", role_r6.Name, " ");
 } }
-function PermissionDialogComponent_kendo_window_0_Conditional_81_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 37);
+function PermissionDialogComponent_div_0_Conditional_90_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 42);
     i0.ɵɵtext(1, "All roles have been configured");
     i0.ɵɵelementEnd();
 } }
-function PermissionDialogComponent_kendo_window_0_Conditional_84_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
-    i0.ɵɵelement(1, "i", 46);
+function PermissionDialogComponent_div_0_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵtext(2, " You have unsaved changes ");
     i0.ɵɵelementEnd();
 } }
-function PermissionDialogComponent_kendo_window_0_Conditional_90_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 62);
+function PermissionDialogComponent_div_0_Conditional_96_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 65);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function PermissionDialogComponent_kendo_window_0_Conditional_91_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 63);
+function PermissionDialogComponent_div_0_Conditional_97_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
     i0.ɵɵtext(1, " Save Permissions ");
 } }
-function PermissionDialogComponent_kendo_window_0_Template(rf, ctx) { if (rf & 1) {
+function PermissionDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 1);
-    i0.ɵɵlistener("close", function PermissionDialogComponent_kendo_window_0_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 2)(3, "h2", 3);
-    i0.ɵɵelement(4, "i", 4);
-    i0.ɵɵtext(5, " Edit Entity Permissions ");
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4)(4, "h2", 5);
+    i0.ɵɵelement(5, "i", 6);
+    i0.ɵɵtext(6, " Edit Entity Permissions ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 5);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 6)(9, "form", 7);
-    i0.ɵɵlistener("ngSubmit", function PermissionDialogComponent_kendo_window_0_Template_form_ngSubmit_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
-    i0.ɵɵtemplate(10, PermissionDialogComponent_kendo_window_0_Conditional_10_Template, 5, 1, "div", 8);
-    i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10)(14, "h3", 11);
-    i0.ɵɵelement(15, "i", 12);
-    i0.ɵɵtext(16, " Entity Information ");
+    i0.ɵɵelementStart(7, "p", 7);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "button", 8);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelement(10, "i", 9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 10)(12, "form", 11);
+    i0.ɵɵlistener("ngSubmit", function PermissionDialogComponent_div_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
+    i0.ɵɵtemplate(13, PermissionDialogComponent_div_0_Conditional_13_Template, 5, 1, "div", 12);
+    i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "h3", 15);
+    i0.ɵɵelement(18, "i", 16);
+    i0.ɵɵtext(19, " Entity Information ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "p", 13);
-    i0.ɵɵtext(18);
+    i0.ɵɵelementStart(20, "p", 17);
+    i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 14)(20, "div", 15)(21, "div", 16);
-    i0.ɵɵelement(22, "i", 17);
-    i0.ɵɵelementStart(23, "span", 18);
-    i0.ɵɵtext(24, "Entity:");
+    i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "div", 20);
+    i0.ɵɵelement(25, "i", 21);
+    i0.ɵɵelementStart(26, "span", 22);
+    i0.ɵɵtext(27, "Entity:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 19);
-    i0.ɵɵtext(26);
+    i0.ɵɵelementStart(28, "span", 23);
+    i0.ɵɵtext(29);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 16);
-    i0.ɵɵelement(28, "i", 4);
-    i0.ɵɵelementStart(29, "span", 18);
-    i0.ɵɵtext(30, "Total Permissions:");
+    i0.ɵɵelementStart(30, "div", 20);
+    i0.ɵɵelement(31, "i", 24);
+    i0.ɵɵelementStart(32, "span", 22);
+    i0.ɵɵtext(33, "Schema Name:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "span", 19);
-    i0.ɵɵtext(32);
+    i0.ɵɵelementStart(34, "span", 23);
+    i0.ɵɵtext(35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 16);
-    i0.ɵɵelement(34, "i", 20);
-    i0.ɵɵelementStart(35, "span", 18);
-    i0.ɵɵtext(36, "Last Updated:");
+    i0.ɵɵelementStart(36, "div", 20);
+    i0.ɵɵelement(37, "i", 6);
+    i0.ɵɵelementStart(38, "span", 22);
+    i0.ɵɵtext(39, "Total Permissions:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "span", 19);
-    i0.ɵɵtext(38);
-    i0.ɵɵpipe(39, "date");
+    i0.ɵɵelementStart(40, "span", 23);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(42, "div", 20);
+    i0.ɵɵelement(43, "i", 25);
+    i0.ɵɵelementStart(44, "span", 22);
+    i0.ɵɵtext(45, "Last Updated:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(46, "span", 23);
+    i0.ɵɵtext(47);
+    i0.ɵɵpipe(48, "date");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(40, "div", 8)(41, "div", 9)(42, "div", 10)(43, "h3", 11);
-    i0.ɵɵelement(44, "i", 21);
-    i0.ɵɵtext(45, " Role Permissions ");
+    i0.ɵɵelementStart(49, "div", 12)(50, "div", 13)(51, "div", 14)(52, "h3", 15);
+    i0.ɵɵelement(53, "i", 26);
+    i0.ɵɵtext(54, " Role Permissions ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "p", 13);
-    i0.ɵɵtext(47, "Configure CRUD permissions for each role");
+    i0.ɵɵelementStart(55, "p", 17);
+    i0.ɵɵtext(56, "Configure CRUD permissions for each role");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(48, "div", 22)(49, "table", 23)(50, "thead")(51, "tr")(52, "th", 24);
-    i0.ɵɵtext(53, "Role");
+    i0.ɵɵelementStart(57, "div", 27)(58, "table", 28)(59, "thead")(60, "tr")(61, "th", 29);
+    i0.ɵɵtext(62, "Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "th", 25);
-    i0.ɵɵelement(55, "i", 26);
-    i0.ɵɵtext(56, " Create ");
+    i0.ɵɵelementStart(63, "th", 30);
+    i0.ɵɵelement(64, "i", 31);
+    i0.ɵɵtext(65, " Create ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "th", 25);
-    i0.ɵɵelement(58, "i", 27);
-    i0.ɵɵtext(59, " Read ");
+    i0.ɵɵelementStart(66, "th", 30);
+    i0.ɵɵelement(67, "i", 32);
+    i0.ɵɵtext(68, " Read ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "th", 25);
-    i0.ɵɵelement(61, "i", 28);
-    i0.ɵɵtext(62, " Update ");
+    i0.ɵɵelementStart(69, "th", 30);
+    i0.ɵɵelement(70, "i", 33);
+    i0.ɵɵtext(71, " Update ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "th", 25);
-    i0.ɵɵelement(64, "i", 29);
-    i0.ɵɵtext(65, " Delete ");
+    i0.ɵɵelementStart(72, "th", 30);
+    i0.ɵɵelement(73, "i", 34);
+    i0.ɵɵtext(74, " Delete ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(66, "th", 30);
-    i0.ɵɵtext(67, "Actions");
+    i0.ɵɵelementStart(75, "th", 35);
+    i0.ɵɵtext(76, "Actions");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(68, "tbody");
-    i0.ɵɵrepeaterCreate(69, PermissionDialogComponent_kendo_window_0_For_70_Template, 31, 27, "tr", 31, _forTrack0);
+    i0.ɵɵelementStart(77, "tbody");
+    i0.ɵɵrepeaterCreate(78, PermissionDialogComponent_div_0_For_79_Template, 31, 29, "tr", 36, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(71, PermissionDialogComponent_kendo_window_0_Conditional_71_Template, 6, 0, "div", 32);
+    i0.ɵɵtemplate(80, PermissionDialogComponent_div_0_Conditional_80_Template, 6, 0, "div", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "div", 33)(73, "div", 34)(74, "h4");
-    i0.ɵɵtext(75, "Add Role Permissions");
+    i0.ɵɵelementStart(81, "div", 38)(82, "div", 39)(83, "h4");
+    i0.ɵɵtext(84, "Add Role Permissions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(76, "p");
-    i0.ɵɵtext(77, "Select roles to configure permissions for this entity");
+    i0.ɵɵelementStart(85, "p");
+    i0.ɵɵtext(86, "Select roles to configure permissions for this entity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(78, "div", 35);
-    i0.ɵɵrepeaterCreate(79, PermissionDialogComponent_kendo_window_0_For_80_Template, 3, 3, "button", 36, _forTrack1);
-    i0.ɵɵtemplate(81, PermissionDialogComponent_kendo_window_0_Conditional_81_Template, 2, 0, "p", 37);
+    i0.ɵɵelementStart(87, "div", 40);
+    i0.ɵɵrepeaterCreate(88, PermissionDialogComponent_div_0_For_89_Template, 3, 5, "button", 41, _forTrack1);
+    i0.ɵɵtemplate(90, PermissionDialogComponent_div_0_Conditional_90_Template, 2, 0, "p", 42);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(82, "div", 38)(83, "div", 39);
-    i0.ɵɵtemplate(84, PermissionDialogComponent_kendo_window_0_Conditional_84_Template, 3, 0, "span", 40);
+    i0.ɵɵelementStart(91, "div", 43)(92, "div", 44);
+    i0.ɵɵtemplate(93, PermissionDialogComponent_div_0_Conditional_93_Template, 3, 0, "span", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(85, "div", 41)(86, "button", 42);
-    i0.ɵɵlistener("click", function PermissionDialogComponent_kendo_window_0_Template_button_click_86_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelement(87, "i", 43);
-    i0.ɵɵtext(88, " Cancel ");
+    i0.ɵɵelementStart(94, "div", 46)(95, "button", 47);
+    i0.ɵɵtemplate(96, PermissionDialogComponent_div_0_Conditional_96_Template, 2, 0)(97, PermissionDialogComponent_div_0_Conditional_97_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(89, "button", 44);
-    i0.ɵɵtemplate(90, PermissionDialogComponent_kendo_window_0_Conditional_90_Template, 2, 0)(91, PermissionDialogComponent_kendo_window_0_Conditional_91_Template, 2, 0);
-    i0.ɵɵelementEnd()()()()()();
+    i0.ɵɵelementStart(98, "button", 48);
+    i0.ɵɵlistener("click", function PermissionDialogComponent_div_0_Template_button_click_98_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelement(99, "i", 9);
+    i0.ɵɵtext(100, " Cancel ");
+    i0.ɵɵelementEnd()()()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("width", 900)("height", 700)("resizable", false)("draggable", true)("keepContent", true);
-    i0.ɵɵadvance(7);
+    i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate1(" Configure role-based permissions for ", ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.Name, " ");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("formGroup", ctx_r1.permissionForm);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.error ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.error ? 13 : -1);
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate((ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.Description) || "Entity permissions configuration");
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.Name);
     i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate((ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.SchemaName) || "N/A");
+    i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.rolePermissions.length);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(39, 17, ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.__mj_UpdatedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(48, 13, ctx_r1.data == null ? null : ctx_r1.data.entity == null ? null : ctx_r1.data.entity.__mj_UpdatedAt, "medium"));
     i0.ɵɵadvance(31);
     i0.ɵɵrepeater(ctx_r1.rolePermissions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.rolePermissions.length === 0 ? 71 : -1);
+    i0.ɵɵconditional(ctx_r1.rolePermissions.length === 0 ? 80 : -1);
     i0.ɵɵadvance(8);
     i0.ɵɵrepeater(ctx_r1.availableRoles);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.availableRoles.length === 0 ? 81 : -1);
+    i0.ɵɵconditional(ctx_r1.availableRoles.length === 0 ? 90 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.hasChanges ? 84 : -1);
-    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.hasChanges ? 93 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.hasChanges || ctx_r1.isLoading);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading ? 90 : 91);
+    i0.ɵɵconditional(ctx_r1.isLoading ? 96 : 97);
 } }
 export class PermissionDialogComponent {
     data = null;
@@ -439,15 +456,15 @@ export class PermissionDialogComponent {
     static ɵfac = function PermissionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PermissionDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PermissionDialogComponent, selectors: [["mj-permission-dialog"]], hostBindings: function PermissionDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function PermissionDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["kendoWindowContainer", "", 3, "width", "height", "resizable", "draggable", "keepContent", "close", 4, "ngIf"], ["kendoWindowContainer", "", 3, "close", "width", "height", "resizable", "draggable", "keepContent"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-key"], [1, "dialog-subtitle"], [1, "dialog-content"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-database"], [1, "section-description"], [1, "entity-info-card"], [1, "entity-meta"], [1, "meta-item"], [1, "fa-solid", "fa-table"], [1, "meta-label"], [1, "meta-value"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-users-cog"], [1, "permissions-table-container"], [1, "permissions-table"], [1, "role-column"], [1, "permission-column"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-trash"], [1, "actions-column"], [1, "permission-row", 3, "has-changes", "is-new"], [1, "empty-permissions"], [1, "add-role-section"], [1, "add-role-header"], [1, "available-roles"], ["type", "button", 1, "role-chip", 3, "title"], [1, "no-available-roles"], [1, "dialog-footer"], [1, "footer-info"], [1, "changes-indicator"], [1, "footer-actions"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "fa-solid", "fa-times"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "permission-row"], [1, "role-name"], [1, "role-info"], [1, "fa-solid", "fa-shield-halved"], [1, "new-badge"], [1, "changed-badge"], [1, "permission-cell"], [1, "permission-toggle"], ["type", "checkbox", 1, "permission-checkbox", 3, "ngModelChange", "id", "ngModel", "ngModelOptions"], [1, "permission-label", 3, "for"], [1, "checkbox-indicator"], [1, "actions-cell"], ["type", "button", "title", "Remove permissions for this role", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], ["type", "button", 1, "role-chip", 3, "click", "title"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function PermissionDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, PermissionDialogComponent_kendo_window_0_Template, 92, 20, "kendo-window", 0);
+        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "modal-backdrop", 3, "click", 4, "ngIf"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-key"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-database"], [1, "section-description"], [1, "entity-info-card"], [1, "entity-meta"], [1, "meta-item"], [1, "fa-solid", "fa-table"], [1, "meta-label"], [1, "meta-value"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-users-cog"], [1, "permissions-table-container"], [1, "permissions-table"], [1, "role-column"], [1, "permission-column"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-trash"], [1, "actions-column"], [1, "permission-row", 3, "has-changes", "is-new"], [1, "empty-permissions"], [1, "add-role-section"], [1, "add-role-header"], [1, "available-roles"], ["type", "button", 1, "role-chip", 3, "title"], [1, "no-available-roles"], [1, "modal-footer"], [1, "footer-info"], [1, "changes-indicator"], [1, "footer-actions"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "permission-row"], [1, "role-name"], [1, "role-info"], [1, "new-badge"], [1, "changed-badge"], [1, "permission-cell"], [1, "permission-toggle"], ["type", "checkbox", 1, "permission-checkbox", 3, "ngModelChange", "id", "ngModel", "ngModelOptions"], [1, "permission-label", 3, "for"], [1, "checkbox-indicator"], [1, "actions-cell"], ["type", "button", "title", "Remove permissions for this role", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], ["type", "button", 1, "role-chip", 3, "click", "title"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function PermissionDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, PermissionDialogComponent_div_0_Template, 101, 16, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visible);
-        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i3.WindowComponent, i3.WindowTitleBarComponent, i3.WindowContainerDirective, i1.DatePipe], styles: ["/* Modern Dialog Styling - Matching Dashboard Design */\n:host ::ng-deep .k-window {\n  border: none;\n  border-radius: 12px;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: #ffffff;\n  overflow: hidden;\n}\n\n:host ::ng-deep .k-window-titlebar {\n  background: linear-gradient(135deg, #ffc107 0%, #e6a704 100%);\n  border: none;\n  padding: 24px 32px;\n  min-height: 70px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-title {\n  display: none; /* Hide default title */\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: #ffffff;\n  border-radius: 6px;\n  width: 32px;\n  height: 32px;\n  min-width: auto;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n:host ::ng-deep .k-window-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n/* Custom Title Bar */\n.dialog-header {\n  position: relative;\n  color: #ffffff;\n}\n\n.dialog-header .dialog-title {\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 0;\n}\n\n.dialog-header .dialog-title i {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  opacity: 0.85;\n  font-weight: 400;\n}\n\n/* Modal Content Areas */\n.dialog-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n.dialog-content .content-section {\n  padding: 32px;\n}\n\n.dialog-content .content-section:not(:last-child) {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-footer {\n  padding: 24px 32px;\n  background: #fafafa;\n  border-top: 1px solid #e0e0e0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.dialog-footer .footer-info .changes-indicator {\n  color: #ffc107;\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialog-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.dialog-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: #ffc107;\n  font-size: 14px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n/* Entity Info Card */\n.entity-info-card {\n  background: #fafafa;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: #ffc107;\n  width: 16px;\n  font-size: 14px;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: #666666;\n  font-weight: 500;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: #fafafa;\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: #212121;\n  border-bottom: 1px solid #e0e0e0;\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: #ffc107;\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.15s ease;\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: rgba(255, 193, 7, 0.05);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: rgba(0, 188, 212, 0.05);\n  border-left: 3px solid #00bcd4;\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: rgba(76, 175, 80, 0.05);\n  border-left: 3px solid #4caf50;\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid #fafafa;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: #ffc107;\n  width: 16px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  font-size: 11px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: rgba(76, 175, 80, 0.1);\n  color: #4caf50;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: rgba(0, 188, 212, 0.1);\n  color: #00bcd4;\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: #ffc107;\n  border-color: #ffc107;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #bdbdbd;\n  border-radius: 4px;\n  background: #ffffff;\n  position: relative;\n  transition: all 0.15s ease;\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid #ffffff;\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.15s ease;\n}\n\n/* Action Buttons */\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: rgba(244, 67, 54, 0.1);\n  color: #f44336;\n}\n\n.btn-icon.btn-danger:hover {\n  background: rgba(244, 67, 54, 0.2);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: #666666;\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: #bdbdbd;\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: #9e9e9e;\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n  background: #ffffff;\n  color: #212121;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: #ffc107;\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: #ffc107;\n  background: rgba(255, 193, 7, 0.05);\n  transform: translateY(-1px);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: #9e9e9e;\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: 8px;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: rgba(244, 67, 54, 0.1);\n  border: 1px solid rgba(244, 67, 54, 0.2);\n  color: #c62828;\n}\n\n.alert.alert-error i {\n  color: #f44336;\n}\n\n/* Button Styles */\n.dialog-footer .btn {\n  padding: 8px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 36px;\n}\n\n.dialog-footer .btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.dialog-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n.dialog-footer .btn.btn-secondary {\n  background: #ffffff;\n  color: #666666;\n  border-color: #bdbdbd;\n}\n\n.dialog-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #757575;\n  color: #212121;\n}\n\n.dialog-footer .btn.btn-primary {\n  background: #ffc107;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #ffb300;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host ::ng-deep .k-window {\n    margin: 16px;\n    max-width: none;\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 24px) !important;\n  }\n  \n  :host ::ng-deep .k-window-titlebar {\n    padding: 16px 24px;\n    min-height: 60px;\n  }\n  \n  .dialog-content .content-section {\n    padding: 24px 16px;\n  }\n  \n  .dialog-footer {\n    padding: 16px 24px;\n    flex-direction: column;\n  }\n  \n  .dialog-footer .footer-info,\n  .dialog-footer .footer-actions {\n    width: 100%;\n  }\n  \n  .dialog-footer .footer-actions {\n    display: flex;\n    gap: 16px;\n  }\n  \n  .dialog-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n  \n  .permissions-table-container {\n    overflow-x: auto;\n  }\n  \n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n  \n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}"], encapsulation: 2 });
+        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i1.DatePipe], styles: ["/* ==============================================\n   Permission Dialog - Material Design 3\n   Following MD3 Design System Guidelines\n   Pure MD3 Modal (No Kendo UI)\n   ============================================== */\n\n/* MD3 Design Tokens */\n:root {\n  /* Primary - Deep Blue */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  /* Secondary - Light Orange */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  /* Tertiary - Light Green */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  /* Error - Red */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  /* Surface Colors */\n  --md-surface: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  /* Elevation (Box Shadows) */\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* Corner Radii */\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\n}\n\n/* Modal Backdrop - MD3 Style */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--md-surface-container-lowest);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--md-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--md-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--md-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--md-corner-small);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--md-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--md-on-primary);\n  border-radius: var(--md-corner-small);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--md-surface-container-lowest);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--md-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--md-surface-container-low);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--md-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--md-on-surface);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  overflow: hidden;\n  background: var(--md-surface-container-lowest);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--md-surface-container-low);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  border-bottom: 1px solid var(--md-outline-variant);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--md-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: rgba(0, 118, 182, 0.05);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--md-primary-container);\n  border-left: 3px solid var(--md-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--md-tertiary-container);\n  border-left: 3px solid var(--md-tertiary);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--md-surface-container-low);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--md-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--md-corner-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--md-tertiary-container);\n  color: #1B5E20;\n  border: 1px solid var(--md-tertiary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--md-secondary-container);\n  color: #7A4D0C;\n  border: 1px solid var(--md-secondary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - MD3 Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--md-primary);\n  border-color: var(--md-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-extra-small);\n  background: var(--md-surface-container-lowest);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--md-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--md-corner-small);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--md-error-container);\n  color: var(--md-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: rgba(211, 47, 47, 0.2);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--md-on-surface-variant);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--md-outline-variant);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--md-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--md-primary);\n  background: rgba(0, 118, 182, 0.08);\n  transform: translateY(-1px);\n  box-shadow: var(--md-elevation-1);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--md-on-surface-variant);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: var(--md-corner-small);\n  margin-bottom: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: var(--md-error-container);\n  border: 1px solid var(--md-error);\n  color: var(--md-on-error-container);\n}\n\n.alert.alert-error i {\n  color: var(--md-error);\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--md-surface-container-low);\n  border-top: 1px solid var(--md-outline-variant);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--md-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles - MD3 Patterns */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--md-corner-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--md-surface);\n  color: var(--md-primary);\n  border-color: var(--md-outline);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PermissionDialogComponent, [{
         type: Component,
-        args: [{ selector: 'mj-permission-dialog', encapsulation: ViewEncapsulation.None, template: "<kendo-window\n  *ngIf=\"visible\"\n  [width]=\"900\"\n  [height]=\"700\"\n  [resizable]=\"false\"\n  [draggable]=\"true\"\n  [keepContent]=\"true\"\n  (close)=\"onCancel()\"\n  kendoWindowContainer>\n  \n  <kendo-window-titlebar>\n    <div class=\"dialog-header\">\n      <h2 class=\"dialog-title\">\n        <i class=\"fa-solid fa-key\"></i>\n        Edit Entity Permissions\n      </h2>\n      <p class=\"dialog-subtitle\">\n        Configure role-based permissions for {{ data?.entity?.Name }}\n      </p>\n    </div>\n  </kendo-window-titlebar>\n\n  <div class=\"dialog-content\">\n    <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n      \n      @if (error) {\n        <div class=\"content-section\">\n          <div class=\"alert alert-error\">\n            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n            <div>{{ error }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Entity Information Section -->\n      <div class=\"content-section\">\n        <div class=\"form-section\">\n          <div class=\"section-header\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-database\"></i>\n              Entity Information\n            </h3>\n            <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n          </div>\n          \n          <div class=\"entity-info-card\">\n            <div class=\"entity-meta\">\n              <div class=\"meta-item\">\n                <i class=\"fa-solid fa-table\"></i>\n                <span class=\"meta-label\">Entity:</span>\n                <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n              </div>\n              <div class=\"meta-item\">\n                <i class=\"fa-solid fa-key\"></i>\n                <span class=\"meta-label\">Total Permissions:</span>\n                <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n              </div>\n              <div class=\"meta-item\">\n                <i class=\"fa-solid fa-clock\"></i>\n                <span class=\"meta-label\">Last Updated:</span>\n                <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Permissions Configuration Section -->\n      <div class=\"content-section\">\n        <div class=\"form-section\">\n          <div class=\"section-header\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-users-cog\"></i>\n              Role Permissions\n            </h3>\n            <p class=\"section-description\">Configure CRUD permissions for each role</p>\n          </div>\n          \n          <div class=\"permissions-table-container\">\n            <table class=\"permissions-table\">\n              <thead>\n                <tr>\n                  <th class=\"role-column\">Role</th>\n                  <th class=\"permission-column\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Create\n                  </th>\n                  <th class=\"permission-column\">\n                    <i class=\"fa-solid fa-eye\"></i>\n                    Read\n                  </th>\n                  <th class=\"permission-column\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                    Update\n                  </th>\n                  <th class=\"permission-column\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                    Delete\n                  </th>\n                  <th class=\"actions-column\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                  <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                    <td class=\"role-name\">\n                      <div class=\"role-info\">\n                        <i class=\"fa-solid fa-shield-halved\"></i>\n                        <span>{{ rolePermission.roleName }}</span>\n                        @if (rolePermission.isNew) {\n                          <span class=\"new-badge\">New</span>\n                        }\n                        @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                          <span class=\"changed-badge\">Modified</span>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"permission-cell\">\n                      <div class=\"permission-toggle\">\n                        <input \n                          type=\"checkbox\" \n                          [id]=\"'create-' + rolePermission.roleId\"\n                          [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          class=\"permission-checkbox\"\n                        />\n                        <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                    </td>\n                    <td class=\"permission-cell\">\n                      <div class=\"permission-toggle\">\n                        <input \n                          type=\"checkbox\" \n                          [id]=\"'read-' + rolePermission.roleId\"\n                          [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          class=\"permission-checkbox\"\n                        />\n                        <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                    </td>\n                    <td class=\"permission-cell\">\n                      <div class=\"permission-toggle\">\n                        <input \n                          type=\"checkbox\" \n                          [id]=\"'update-' + rolePermission.roleId\"\n                          [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          class=\"permission-checkbox\"\n                        />\n                        <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                    </td>\n                    <td class=\"permission-cell\">\n                      <div class=\"permission-toggle\">\n                        <input \n                          type=\"checkbox\" \n                          [id]=\"'delete-' + rolePermission.roleId\"\n                          [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          class=\"permission-checkbox\"\n                        />\n                        <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                    </td>\n                    <td class=\"actions-cell\">\n                      <button \n                        type=\"button\" \n                        class=\"btn-icon btn-danger\"\n                        (click)=\"removeRolePermission(rolePermission)\"\n                        title=\"Remove permissions for this role\"\n                      >\n                        <i class=\"fa-solid fa-times\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            \n            @if (rolePermissions.length === 0) {\n              <div class=\"empty-permissions\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                <p>No role permissions configured</p>\n                <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n              </div>\n            }\n          </div>\n          \n          <!-- Add Role Permissions -->\n          <div class=\"add-role-section\">\n            <div class=\"add-role-header\">\n              <h4>Add Role Permissions</h4>\n              <p>Select roles to configure permissions for this entity</p>\n            </div>\n            <div class=\"available-roles\">\n              @for (role of availableRoles; track role.ID) {\n                <button \n                  type=\"button\" \n                  class=\"role-chip\"\n                  (click)=\"addRolePermission(role)\"\n                  title=\"Add permissions for {{ role.Name }}\"\n                >\n                  <i class=\"fa-solid fa-plus\"></i>\n                  {{ role.Name }}\n                </button>\n              }\n              @if (availableRoles.length === 0) {\n                <p class=\"no-available-roles\">All roles have been configured</p>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"dialog-footer\">\n        <div class=\"footer-info\">\n          @if (hasChanges) {\n            <span class=\"changes-indicator\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              You have unsaved changes\n            </span>\n          }\n        </div>\n        <div class=\"footer-actions\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n            <i class=\"fa-solid fa-times\"></i>\n            Cancel\n          </button>\n          <button \n            type=\"submit\" \n            class=\"btn btn-primary\" \n            [disabled]=\"!hasChanges || isLoading\"\n          >\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              Saving...\n            } @else {\n              <i class=\"fa-solid fa-save\"></i>\n              Save Permissions\n            }\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</kendo-window>", styles: ["/* Modern Dialog Styling - Matching Dashboard Design */\n:host ::ng-deep .k-window {\n  border: none;\n  border-radius: 12px;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: #ffffff;\n  overflow: hidden;\n}\n\n:host ::ng-deep .k-window-titlebar {\n  background: linear-gradient(135deg, #ffc107 0%, #e6a704 100%);\n  border: none;\n  padding: 24px 32px;\n  min-height: 70px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-title {\n  display: none; /* Hide default title */\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: #ffffff;\n  border-radius: 6px;\n  width: 32px;\n  height: 32px;\n  min-width: auto;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n:host ::ng-deep .k-window-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n/* Custom Title Bar */\n.dialog-header {\n  position: relative;\n  color: #ffffff;\n}\n\n.dialog-header .dialog-title {\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 0;\n}\n\n.dialog-header .dialog-title i {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  opacity: 0.85;\n  font-weight: 400;\n}\n\n/* Modal Content Areas */\n.dialog-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n.dialog-content .content-section {\n  padding: 32px;\n}\n\n.dialog-content .content-section:not(:last-child) {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-footer {\n  padding: 24px 32px;\n  background: #fafafa;\n  border-top: 1px solid #e0e0e0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.dialog-footer .footer-info .changes-indicator {\n  color: #ffc107;\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialog-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.dialog-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: #ffc107;\n  font-size: 14px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n/* Entity Info Card */\n.entity-info-card {\n  background: #fafafa;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 24px;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: #ffc107;\n  width: 16px;\n  font-size: 14px;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: #666666;\n  font-weight: 500;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: #fafafa;\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: #212121;\n  border-bottom: 1px solid #e0e0e0;\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: #ffc107;\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.15s ease;\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: rgba(255, 193, 7, 0.05);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: rgba(0, 188, 212, 0.05);\n  border-left: 3px solid #00bcd4;\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: rgba(76, 175, 80, 0.05);\n  border-left: 3px solid #4caf50;\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid #fafafa;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: #ffc107;\n  width: 16px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  font-size: 11px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: rgba(76, 175, 80, 0.1);\n  color: #4caf50;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: rgba(0, 188, 212, 0.1);\n  color: #00bcd4;\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: #ffc107;\n  border-color: #ffc107;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #bdbdbd;\n  border-radius: 4px;\n  background: #ffffff;\n  position: relative;\n  transition: all 0.15s ease;\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid #ffffff;\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.15s ease;\n}\n\n/* Action Buttons */\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: rgba(244, 67, 54, 0.1);\n  color: #f44336;\n}\n\n.btn-icon.btn-danger:hover {\n  background: rgba(244, 67, 54, 0.2);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: #666666;\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: #bdbdbd;\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: #9e9e9e;\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n  background: #ffffff;\n  color: #212121;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: #ffc107;\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: #ffc107;\n  background: rgba(255, 193, 7, 0.05);\n  transform: translateY(-1px);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: #9e9e9e;\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: 8px;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: rgba(244, 67, 54, 0.1);\n  border: 1px solid rgba(244, 67, 54, 0.2);\n  color: #c62828;\n}\n\n.alert.alert-error i {\n  color: #f44336;\n}\n\n/* Button Styles */\n.dialog-footer .btn {\n  padding: 8px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 36px;\n}\n\n.dialog-footer .btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.dialog-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n.dialog-footer .btn.btn-secondary {\n  background: #ffffff;\n  color: #666666;\n  border-color: #bdbdbd;\n}\n\n.dialog-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #757575;\n  color: #212121;\n}\n\n.dialog-footer .btn.btn-primary {\n  background: #ffc107;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #ffb300;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host ::ng-deep .k-window {\n    margin: 16px;\n    max-width: none;\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 24px) !important;\n  }\n  \n  :host ::ng-deep .k-window-titlebar {\n    padding: 16px 24px;\n    min-height: 60px;\n  }\n  \n  .dialog-content .content-section {\n    padding: 24px 16px;\n  }\n  \n  .dialog-footer {\n    padding: 16px 24px;\n    flex-direction: column;\n  }\n  \n  .dialog-footer .footer-info,\n  .dialog-footer .footer-actions {\n    width: 100%;\n  }\n  \n  .dialog-footer .footer-actions {\n    display: flex;\n    gap: 16px;\n  }\n  \n  .dialog-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n  \n  .permissions-table-container {\n    overflow-x: auto;\n  }\n  \n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n  \n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}"] }]
+        args: [{ selector: 'mj-permission-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n<div class=\"modal-backdrop\" *ngIf=\"visible\" (click)=\"onCancel()\">\n  <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Modal Header -->\n    <div class=\"modal-header\">\n      <div class=\"dialog-header\">\n        <h2 class=\"dialog-title\">\n          <i class=\"fa-solid fa-key\"></i>\n          Edit Entity Permissions\n        </h2>\n        <p class=\"dialog-subtitle\">\n          Configure role-based permissions for {{ data?.entity?.Name }}\n        </p>\n      </div>\n      <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Modal Body -->\n    <div class=\"modal-body\">\n      <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n\n        @if (error) {\n          <div class=\"content-section\">\n            <div class=\"alert alert-error\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              <div>{{ error }}</div>\n            </div>\n          </div>\n        }\n\n        <!-- Entity Information Section -->\n        <div class=\"content-section\">\n          <div class=\"form-section\">\n            <div class=\"section-header\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-database\"></i>\n                Entity Information\n              </h3>\n              <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n            </div>\n\n            <div class=\"entity-info-card\">\n              <div class=\"entity-meta\">\n                <div class=\"meta-item\">\n                  <i class=\"fa-solid fa-table\"></i>\n                  <span class=\"meta-label\">Entity:</span>\n                  <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <i class=\"fa-solid fa-shield-halved\"></i>\n                  <span class=\"meta-label\">Schema Name:</span>\n                  <span class=\"meta-value\">{{ data?.entity?.SchemaName || 'N/A' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <i class=\"fa-solid fa-key\"></i>\n                  <span class=\"meta-label\">Total Permissions:</span>\n                  <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                  <span class=\"meta-label\">Last Updated:</span>\n                  <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Permissions Configuration Section -->\n        <div class=\"content-section\">\n          <div class=\"form-section\">\n            <div class=\"section-header\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-users-cog\"></i>\n                Role Permissions\n              </h3>\n              <p class=\"section-description\">Configure CRUD permissions for each role</p>\n            </div>\n\n            <div class=\"permissions-table-container\">\n              <table class=\"permissions-table\">\n                <thead>\n                  <tr>\n                    <th class=\"role-column\">Role</th>\n                    <th class=\"permission-column\">\n                      <i class=\"fa-solid fa-plus\"></i>\n                      Create\n                    </th>\n                    <th class=\"permission-column\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      Read\n                    </th>\n                    <th class=\"permission-column\">\n                      <i class=\"fa-solid fa-edit\"></i>\n                      Update\n                    </th>\n                    <th class=\"permission-column\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                      Delete\n                    </th>\n                    <th class=\"actions-column\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                    <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                      <td class=\"role-name\">\n                        <div class=\"role-info\">\n                          <i class=\"fa-solid fa-shield-halved\"></i>\n                          <span>{{ rolePermission.roleName }}</span>\n                          @if (rolePermission.isNew) {\n                            <span class=\"new-badge\">New</span>\n                          }\n                          @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                            <span class=\"changed-badge\">Modified</span>\n                          }\n                        </div>\n                      </td>\n                      <td class=\"permission-cell\">\n                        <div class=\"permission-toggle\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"'create-' + rolePermission.roleId\"\n                            [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            class=\"permission-checkbox\"\n                          />\n                          <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                            <div class=\"checkbox-indicator\"></div>\n                          </label>\n                        </div>\n                      </td>\n                      <td class=\"permission-cell\">\n                        <div class=\"permission-toggle\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"'read-' + rolePermission.roleId\"\n                            [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            class=\"permission-checkbox\"\n                          />\n                          <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                            <div class=\"checkbox-indicator\"></div>\n                          </label>\n                        </div>\n                      </td>\n                      <td class=\"permission-cell\">\n                        <div class=\"permission-toggle\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"'update-' + rolePermission.roleId\"\n                            [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            class=\"permission-checkbox\"\n                          />\n                          <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                            <div class=\"checkbox-indicator\"></div>\n                          </label>\n                        </div>\n                      </td>\n                      <td class=\"permission-cell\">\n                        <div class=\"permission-toggle\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"'delete-' + rolePermission.roleId\"\n                            [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            class=\"permission-checkbox\"\n                          />\n                          <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                            <div class=\"checkbox-indicator\"></div>\n                          </label>\n                        </div>\n                      </td>\n                      <td class=\"actions-cell\">\n                        <button\n                          type=\"button\"\n                          class=\"btn-icon btn-danger\"\n                          (click)=\"removeRolePermission(rolePermission)\"\n                          title=\"Remove permissions for this role\"\n                          attr.aria-label=\"Remove permissions for {{ rolePermission.roleName }}\"\n                        >\n                          <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n\n              @if (rolePermissions.length === 0) {\n                <div class=\"empty-permissions\">\n                  <i class=\"fa-solid fa-shield-halved\"></i>\n                  <p>No role permissions configured</p>\n                  <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n                </div>\n              }\n            </div>\n\n            <!-- Add Role Permissions -->\n            <div class=\"add-role-section\">\n              <div class=\"add-role-header\">\n                <h4>Add Role Permissions</h4>\n                <p>Select roles to configure permissions for this entity</p>\n              </div>\n              <div class=\"available-roles\">\n                @for (role of availableRoles; track role.ID) {\n                  <button\n                    type=\"button\"\n                    class=\"role-chip\"\n                    (click)=\"addRolePermission(role)\"\n                    title=\"Add permissions for {{ role.Name }}\"\n                    attr.aria-label=\"Add permissions for {{ role.Name }}\"\n                  >\n                    <i class=\"fa-solid fa-plus\"></i>\n                    {{ role.Name }}\n                  </button>\n                }\n                @if (availableRoles.length === 0) {\n                  <p class=\"no-available-roles\">All roles have been configured</p>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"modal-footer\">\n          <div class=\"footer-info\">\n            @if (hasChanges) {\n              <span class=\"changes-indicator\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                You have unsaved changes\n              </span>\n            }\n          </div>\n          <div class=\"footer-actions\">\n            <button\n              type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!hasChanges || isLoading\"\n            >\n              @if (isLoading) {\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                Saving...\n              } @else {\n                <i class=\"fa-solid fa-save\"></i>\n                Save Permissions\n              }\n            </button>\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n              <i class=\"fa-solid fa-times\"></i>\n              Cancel\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n", styles: ["/* ==============================================\n   Permission Dialog - Material Design 3\n   Following MD3 Design System Guidelines\n   Pure MD3 Modal (No Kendo UI)\n   ============================================== */\n\n/* MD3 Design Tokens */\n:root {\n  /* Primary - Deep Blue */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  /* Secondary - Light Orange */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  /* Tertiary - Light Green */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  /* Error - Red */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  /* Surface Colors */\n  --md-surface: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  /* Elevation (Box Shadows) */\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* Corner Radii */\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\n}\n\n/* Modal Backdrop - MD3 Style */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--md-surface-container-lowest);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--md-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--md-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--md-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--md-corner-small);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--md-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--md-on-primary);\n  border-radius: var(--md-corner-small);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--md-surface-container-lowest);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--md-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--md-surface-container-low);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--md-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--md-on-surface);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  overflow: hidden;\n  background: var(--md-surface-container-lowest);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--md-surface-container-low);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  border-bottom: 1px solid var(--md-outline-variant);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--md-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: rgba(0, 118, 182, 0.05);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--md-primary-container);\n  border-left: 3px solid var(--md-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--md-tertiary-container);\n  border-left: 3px solid var(--md-tertiary);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--md-surface-container-low);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--md-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--md-corner-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--md-tertiary-container);\n  color: #1B5E20;\n  border: 1px solid var(--md-tertiary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--md-secondary-container);\n  color: #7A4D0C;\n  border: 1px solid var(--md-secondary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - MD3 Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--md-primary);\n  border-color: var(--md-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-extra-small);\n  background: var(--md-surface-container-lowest);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--md-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--md-corner-small);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--md-error-container);\n  color: var(--md-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: rgba(211, 47, 47, 0.2);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--md-on-surface-variant);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--md-outline-variant);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--md-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--md-primary);\n  background: rgba(0, 118, 182, 0.08);\n  transform: translateY(-1px);\n  box-shadow: var(--md-elevation-1);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--md-on-surface-variant);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: var(--md-corner-small);\n  margin-bottom: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: var(--md-error-container);\n  border: 1px solid var(--md-error);\n  color: var(--md-on-error-container);\n}\n\n.alert.alert-error i {\n  color: var(--md-error);\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--md-surface-container-low);\n  border-top: 1px solid var(--md-outline-variant);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--md-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles - MD3 Patterns */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--md-corner-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--md-surface);\n  color: var(--md-primary);\n  border-color: var(--md-outline);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], () => [], { data: [{
             type: Input
         }], visible: [{
@@ -458,5 +475,5 @@ export class PermissionDialogComponent {
             type: HostListener,
             args: ['document:keydown.escape', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PermissionDialogComponent, { className: "PermissionDialogComponent", filePath: "src/lib/entity-permissions/permission-dialog/permission-dialog.component.ts", lineNumber: 32 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PermissionDialogComponent, { className: "PermissionDialogComponent", filePath: "src/lib/entity-permissions/permission-dialog/permission-dialog.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=permission-dialog.component.js.map