npm - @memberjunction/ng-explorer-settings - Versions diffs - 3.2.0 → 3.4.0 - Mend

@memberjunction/ng-explorer-settings 3.2.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/dist/lib/user-management/user-dialog/user-dialog.component.js CHANGED Viewed

@@ -4,11 +4,10 @@ import { Metadata, RunView } 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.ID;
-function UserDialogComponent_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 UserDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 48);
+    i0.ɵɵelement(2, "i", 49);
     i0.ɵɵelementStart(3, "div");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
@@ -17,16 +16,16 @@ function UserDialogComponent_kendo_window_0_Conditional_10_Template(rf, ctx) { i
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function UserDialogComponent_kendo_window_0_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Username/Email is required ");
 } }
-function UserDialogComponent_kendo_window_0_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_Conditional_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Please enter a valid email address ");
 } }
-function UserDialogComponent_kendo_window_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵtemplate(2, UserDialogComponent_kendo_window_0_Conditional_24_Conditional_2_Template, 1, 0)(3, UserDialogComponent_kendo_window_0_Conditional_24_Conditional_3_Template, 1, 0);
+function UserDialogComponent_div_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵtemplate(2, UserDialogComponent_div_0_Conditional_27_Conditional_2_Template, 1, 0)(3, UserDialogComponent_div_0_Conditional_27_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -37,16 +36,16 @@ function UserDialogComponent_kendo_window_0_Conditional_24_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵconditional(((tmp_3_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["email"]) ? 3 : -1);
 } }
-function UserDialogComponent_kendo_window_0_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_Conditional_41_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Email address is required ");
 } }
-function UserDialogComponent_kendo_window_0_Conditional_38_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_Conditional_41_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Please enter a valid email address ");
 } }
-function UserDialogComponent_kendo_window_0_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵtemplate(2, UserDialogComponent_kendo_window_0_Conditional_38_Conditional_2_Template, 1, 0)(3, UserDialogComponent_kendo_window_0_Conditional_38_Conditional_3_Template, 1, 0);
+function UserDialogComponent_div_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵtemplate(2, UserDialogComponent_div_0_Conditional_41_Conditional_2_Template, 1, 0)(3, UserDialogComponent_div_0_Conditional_41_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -57,8 +56,8 @@ function UserDialogComponent_kendo_window_0_Conditional_38_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵconditional(((tmp_3_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["email"]) ? 3 : -1);
 } }
-function UserDialogComponent_kendo_window_0_For_81_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 54);
+function UserDialogComponent_div_0_For_84_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 57);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -66,20 +65,20 @@ function UserDialogComponent_kendo_window_0_For_81_Conditional_9_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(role_r4.Description);
 } }
-function UserDialogComponent_kendo_window_0_For_81_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_For_84_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵlistener("click", function UserDialogComponent_kendo_window_0_For_81_Template_div_click_0_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleRole(role_r4.ID)); });
-    i0.ɵɵelementStart(1, "div", 49)(2, "div", 33)(3, "input", 50);
-    i0.ɵɵlistener("change", function UserDialogComponent_kendo_window_0_For_81_Template_input_change_3_listener($event) { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRoleToggle(role_r4.ID, $event)); });
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵlistener("click", function UserDialogComponent_div_0_For_84_Template_div_click_0_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleRole(role_r4.ID)); });
+    i0.ɵɵelementStart(1, "div", 52)(2, "div", 37)(3, "input", 53);
+    i0.ɵɵlistener("change", function UserDialogComponent_div_0_For_84_Template_input_change_3_listener($event) { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRoleToggle(role_r4.ID, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "label", 51);
-    i0.ɵɵelement(5, "div", 36);
+    i0.ɵɵelementStart(4, "label", 54);
+    i0.ɵɵelement(5, "div", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 52)(7, "h4", 53);
+    i0.ɵɵelementStart(6, "div", 55)(7, "h4", 56);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, UserDialogComponent_kendo_window_0_For_81_Conditional_9_Template, 2, 1, "p", 54);
+    i0.ɵɵtemplate(9, UserDialogComponent_div_0_For_84_Conditional_9_Template, 2, 1, "p", 57);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const role_r4 = ctx.$implicit;
@@ -94,136 +93,141 @@ function UserDialogComponent_kendo_window_0_For_81_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(role_r4.Description ? 9 : -1);
 } }
-function UserDialogComponent_kendo_window_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+function UserDialogComponent_div_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function UserDialogComponent_kendo_window_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 56);
+function UserDialogComponent_div_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 59);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update User" : "Create User", " ");
 } }
-function UserDialogComponent_kendo_window_0_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 1);
-    i0.ɵɵlistener("close", function UserDialogComponent_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);
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function UserDialogComponent_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 UserDialogComponent_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);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 5);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 6)(9, "form", 7);
-    i0.ɵɵlistener("ngSubmit", function UserDialogComponent_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, UserDialogComponent_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, " Basic Information ");
+    i0.ɵɵelementStart(7, "p", 7);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "button", 8);
+    i0.ɵɵlistener("click", function UserDialogComponent_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 UserDialogComponent_div_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
+    i0.ɵɵtemplate(13, UserDialogComponent_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, " Basic Information ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "p", 13);
-    i0.ɵɵtext(18, "Enter the user's personal and contact details");
+    i0.ɵɵelementStart(20, "p", 17);
+    i0.ɵɵtext(21, "Enter the user's personal and contact details");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 14)(20, "div", 15)(21, "label", 16);
-    i0.ɵɵtext(22, "Username/Email");
+    i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "label", 20);
+    i0.ɵɵtext(25, "Username/Email");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "input", 17);
-    i0.ɵɵtemplate(24, UserDialogComponent_kendo_window_0_Conditional_24_Template, 4, 2, "div", 18);
+    i0.ɵɵelement(26, "input", 21);
+    i0.ɵɵtemplate(27, UserDialogComponent_div_0_Conditional_27_Template, 4, 2, "div", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 19)(26, "div", 15)(27, "label", 20);
-    i0.ɵɵtext(28, "First Name");
+    i0.ɵɵelementStart(28, "div", 23)(29, "div", 19)(30, "label", 24);
+    i0.ɵɵtext(31, "First Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "input", 21);
+    i0.ɵɵelement(32, "input", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "div", 15)(31, "label", 22);
-    i0.ɵɵtext(32, "Last Name");
+    i0.ɵɵelementStart(33, "div", 19)(34, "label", 26);
+    i0.ɵɵtext(35, "Last Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(33, "input", 23);
+    i0.ɵɵelement(36, "input", 27);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 15)(35, "label", 24);
-    i0.ɵɵtext(36, "Email Address");
+    i0.ɵɵelementStart(37, "div", 19)(38, "label", 28);
+    i0.ɵɵtext(39, "Email Address");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(37, "input", 25);
-    i0.ɵɵtemplate(38, UserDialogComponent_kendo_window_0_Conditional_38_Template, 4, 2, "div", 18);
+    i0.ɵɵelement(40, "input", 29);
+    i0.ɵɵtemplate(41, UserDialogComponent_div_0_Conditional_41_Template, 4, 2, "div", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 15)(40, "label", 26);
-    i0.ɵɵtext(41, "Job Title");
+    i0.ɵɵelementStart(42, "div", 19)(43, "label", 30);
+    i0.ɵɵtext(44, "Job Title");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(42, "input", 27);
+    i0.ɵɵelement(45, "input", 31);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(43, "div", 8)(44, "div", 9)(45, "div", 10)(46, "h3", 11);
-    i0.ɵɵelement(47, "i", 28);
-    i0.ɵɵtext(48, " User Settings ");
+    i0.ɵɵelementStart(46, "div", 12)(47, "div", 13)(48, "div", 14)(49, "h3", 15);
+    i0.ɵɵelement(50, "i", 32);
+    i0.ɵɵtext(51, " User Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "p", 13);
-    i0.ɵɵtext(50, "Configure user type and account status");
+    i0.ɵɵelementStart(52, "p", 17);
+    i0.ɵɵtext(53, "Configure user type and account status");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(51, "div", 14)(52, "div", 19)(53, "div", 15)(54, "label", 29);
-    i0.ɵɵtext(55, "User Type");
+    i0.ɵɵelementStart(54, "div", 18)(55, "div", 23)(56, "div", 19)(57, "label", 33);
+    i0.ɵɵtext(58, "User Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "select", 30)(57, "option", 31);
-    i0.ɵɵtext(58, "Standard User");
+    i0.ɵɵelementStart(59, "select", 34)(60, "option", 35);
+    i0.ɵɵtext(61, "Standard User");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(59, "option", 32);
-    i0.ɵɵtext(60, "System Owner");
+    i0.ɵɵelementStart(62, "option", 36);
+    i0.ɵɵtext(63, "System Owner");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(61, "div", 15)(62, "div", 33);
-    i0.ɵɵelement(63, "input", 34);
-    i0.ɵɵelementStart(64, "label", 35);
-    i0.ɵɵelement(65, "div", 36);
-    i0.ɵɵelementStart(66, "div")(67, "strong");
-    i0.ɵɵtext(68, "Active Account");
+    i0.ɵɵelementStart(64, "div", 19)(65, "div", 37);
+    i0.ɵɵelement(66, "input", 38);
+    i0.ɵɵelementStart(67, "label", 39);
+    i0.ɵɵelement(68, "div", 40);
+    i0.ɵɵelementStart(69, "div")(70, "strong");
+    i0.ɵɵtext(71, "Active Account");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(69, "div", 37);
-    i0.ɵɵtext(70, " User can log in and access the system ");
+    i0.ɵɵelementStart(72, "div", 41);
+    i0.ɵɵtext(73, " User can log in and access the system ");
     i0.ɵɵelementEnd()()()()()()()()();
-    i0.ɵɵelementStart(71, "div", 8)(72, "div", 9)(73, "div", 10)(74, "h3", 11);
-    i0.ɵɵelement(75, "i", 38);
-    i0.ɵɵtext(76, " Role Assignment ");
+    i0.ɵɵelementStart(74, "div", 12)(75, "div", 13)(76, "div", 14)(77, "h3", 15);
+    i0.ɵɵelement(78, "i", 42);
+    i0.ɵɵtext(79, " Role Assignment ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(77, "p", 13);
-    i0.ɵɵtext(78, "Select the roles to assign to this user");
+    i0.ɵɵelementStart(80, "p", 17);
+    i0.ɵɵtext(81, "Select the roles to assign to this user");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(79, "div", 39);
-    i0.ɵɵrepeaterCreate(80, UserDialogComponent_kendo_window_0_For_81_Template, 10, 7, "div", 40, _forTrack0);
+    i0.ɵɵelementStart(82, "div", 43);
+    i0.ɵɵrepeaterCreate(83, UserDialogComponent_div_0_For_84_Template, 10, 7, "div", 44, _forTrack0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(82, "div", 41)(83, "button", 42);
-    i0.ɵɵlistener("click", function UserDialogComponent_kendo_window_0_Template_button_click_83_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelement(84, "i", 43);
-    i0.ɵɵtext(85, " Cancel ");
+    i0.ɵɵelementStart(85, "div", 45)(86, "button", 46);
+    i0.ɵɵtemplate(87, UserDialogComponent_div_0_Conditional_87_Template, 2, 0)(88, UserDialogComponent_div_0_Conditional_88_Template, 2, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(86, "button", 44);
-    i0.ɵɵtemplate(87, UserDialogComponent_kendo_window_0_Conditional_87_Template, 2, 0)(88, UserDialogComponent_kendo_window_0_Conditional_88_Template, 2, 1);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(89, "button", 47);
+    i0.ɵɵlistener("click", function UserDialogComponent_div_0_Template_button_click_89_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelement(90, "i", 9);
+    i0.ɵɵtext(91, " Cancel ");
+    i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
-    let tmp_10_0;
-    let tmp_11_0;
-    let tmp_12_0;
-    let tmp_13_0;
+    let tmp_5_0;
+    let tmp_6_0;
+    let tmp_7_0;
+    let tmp_8_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("width", 850)("height", 700)("resizable", false)("draggable", true)("keepContent", true);
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Edit User" : "Create New User", " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update user information and role assignments" : "Add a new user to the system", " ");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("formGroup", ctx_r1.userForm);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.error ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.error ? 13 : -1);
     i0.ɵɵadvance(13);
-    i0.ɵɵclassProp("error", ((tmp_10_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_10_0.invalid) && ((tmp_10_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_10_0.touched));
+    i0.ɵɵclassProp("error", ((tmp_5_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_5_0.invalid) && ((tmp_5_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_5_0.touched));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_11_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_11_0.invalid) && ((tmp_11_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_11_0.touched) ? 24 : -1);
+    i0.ɵɵconditional(((tmp_6_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_6_0.invalid) && ((tmp_6_0 = ctx_r1.userForm.get("name")) == null ? null : tmp_6_0.touched) ? 27 : -1);
     i0.ɵɵadvance(13);
-    i0.ɵɵclassProp("error", ((tmp_12_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_12_0.invalid) && ((tmp_12_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_12_0.touched));
+    i0.ɵɵclassProp("error", ((tmp_7_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_7_0.invalid) && ((tmp_7_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_7_0.touched));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_13_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_13_0.invalid) && ((tmp_13_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_13_0.touched) ? 38 : -1);
+    i0.ɵɵconditional(((tmp_8_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_8_0.invalid) && ((tmp_8_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_8_0.touched) ? 41 : -1);
     i0.ɵɵadvance(42);
     i0.ɵɵrepeater(ctx_r1.data == null ? null : ctx_r1.data.availableRoles);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", ctx_r1.userForm.invalid || ctx_r1.isLoading);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isLoading ? 87 : 88);
@@ -445,15 +449,15 @@ export class UserDialogComponent {
     static ɵfac = function UserDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDialogComponent, selectors: [["mj-user-dialog"]], hostBindings: function UserDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function UserDialogComponent_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-user"], [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-id-card"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "email", "formControlName", "name", "placeholder", "john@company.com", 1, "field-input"], [1, "field-error"], [1, "form-row"], ["for", "firstName", 1, "field-label"], ["id", "firstName", "type", "text", "formControlName", "firstName", "placeholder", "John", 1, "field-input"], ["for", "lastName", 1, "field-label"], ["id", "lastName", "type", "text", "formControlName", "lastName", "placeholder", "Doe", 1, "field-input"], ["for", "email", 1, "field-label", "required"], ["id", "email", "type", "email", "formControlName", "email", "placeholder", "john@company.com", 1, "field-input"], ["for", "title", 1, "field-label"], ["id", "title", "type", "text", "formControlName", "title", "placeholder", "Software Engineer", 1, "field-input"], [1, "fa-solid", "fa-cog"], ["for", "type", 1, "field-label"], ["id", "type", "formControlName", "type", 1, "field-select"], ["value", "User"], ["value", "Owner"], [1, "checkbox-field"], ["id", "isActive", "type", "checkbox", "formControlName", "isActive", 1, "checkbox-input"], ["for", "isActive", 1, "checkbox-label"], [1, "checkbox-indicator"], [2, "font-size", "12px", "color", "#666", "margin-top", "2px"], [1, "fa-solid", "fa-user-tag"], [1, "roles-grid"], [1, "role-card", 3, "selected"], [1, "dialog-footer"], ["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, "fa-solid", "fa-exclamation-circle"], [1, "role-card", 3, "click"], [1, "role-content"], ["type", "checkbox", 1, "checkbox-input", 3, "change", "id", "checked"], [1, "checkbox-label", 3, "for"], [1, "role-info"], [1, "role-name"], [1, "role-description"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function UserDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, UserDialogComponent_kendo_window_0_Template, 89, 17, "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-user"], [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-id-card"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "email", "formControlName", "name", "placeholder", "john@company.com", 1, "field-input"], [1, "field-error"], [1, "form-row"], ["for", "firstName", 1, "field-label"], ["id", "firstName", "type", "text", "formControlName", "firstName", "placeholder", "John", 1, "field-input"], ["for", "lastName", 1, "field-label"], ["id", "lastName", "type", "text", "formControlName", "lastName", "placeholder", "Doe", 1, "field-input"], ["for", "email", 1, "field-label", "required"], ["id", "email", "type", "email", "formControlName", "email", "placeholder", "john@company.com", 1, "field-input"], ["for", "title", 1, "field-label"], ["id", "title", "type", "text", "formControlName", "title", "placeholder", "Software Engineer", 1, "field-input"], [1, "fa-solid", "fa-cog"], ["for", "type", 1, "field-label"], ["id", "type", "formControlName", "type", 1, "field-select"], ["value", "User"], ["value", "Owner"], [1, "checkbox-field"], ["id", "isActive", "type", "checkbox", "formControlName", "isActive", 1, "checkbox-input"], ["for", "isActive", 1, "checkbox-label"], [1, "checkbox-indicator"], [2, "font-size", "12px", "color", "var(--md-on-surface-variant)", "margin-top", "2px"], [1, "fa-solid", "fa-user-tag"], [1, "roles-grid"], [1, "role-card", 3, "selected"], [1, "modal-footer"], ["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, "fa-solid", "fa-exclamation-circle"], [1, "role-card", 3, "click"], [1, "role-content"], ["type", "checkbox", 1, "checkbox-input", 3, "change", "id", "checked"], [1, "checkbox-label", 3, "for"], [1, "role-info"], [1, "role-name"], [1, "role-description"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function UserDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, UserDialogComponent_div_0_Template, 92, 12, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visible);
-        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i3.WindowComponent, i3.WindowTitleBarComponent, i3.WindowContainerDirective], 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, #2196f3 0%, #1976d2 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: flex-end;\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: #2196f3;\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.form-grid {\n  display: grid;\n  gap: 24px;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n}\n\n/* Modern Form Fields */\n.form-field {\n  margin-bottom: 24px;\n}\n\n.form-field:last-child {\n  margin-bottom: 0;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 8px;\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: #f44336;\n}\n\n.form-field .field-input,\n.form-field .field-select {\n  width: 100%;\n  height: 36px;\n  padding: 0 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 6px;\n  font-size: 14px;\n  background: #ffffff;\n  transition: all 0.15s ease;\n}\n\n.form-field .field-input:focus,\n.form-field .field-select:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.form-field .field-input.error,\n.form-field .field-select.error {\n  border-color: #f44336;\n}\n\n.form-field .field-input.error:focus,\n.form-field .field-select.error:focus {\n  border-color: #f44336;\n  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);\n}\n\n.form-field .field-input::placeholder,\n.form-field .field-select::placeholder {\n  color: #9e9e9e;\n}\n\n.form-field .field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 24px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.form-field .field-error {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #f44336;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.form-field .field-error i {\n  font-size: 10px;\n}\n\n/* Modern Checkbox Fields */\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  margin-bottom: 24px;\n  cursor: pointer;\n}\n\n.checkbox-field .checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-field .checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: #2196f3;\n  border-color: #2196f3;\n}\n\n.checkbox-field .checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-field .checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.checkbox-field .checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: #212121;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.checkbox-field .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #bdbdbd;\n  border-radius: 4px;\n  background: #ffffff;\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.15s ease;\n  margin-top: 1px;\n}\n\n.checkbox-field .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/* Role Assignment Section */\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  padding: 24px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  background: #fafafa;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n.role-card:hover {\n  border-color: rgba(33, 150, 243, 0.2);\n  background: #ffffff;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n.role-card.selected {\n  border-color: #2196f3;\n  background: #e3f2fd;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.role-card .role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.role-card .role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-card .role-info .role-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #212121;\n  margin: 0 0 4px 0;\n  line-height: 1.2;\n}\n\n.role-card .role-info .role-description {\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\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: #2196f3;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #1976d2;\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-reverse;\n  }\n  \n  .dialog-footer .btn {\n    width: 100%;\n    justify-content: center;\n  }\n  \n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}"], encapsulation: 2 });
+        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName], styles: ["/* ============================================\n   Material Design 3 - User Dialog Component\n   ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n  /* Primary Colors (MJ Blue) */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #C2E7FF;\n  --md-on-primary-container: #001E2F;\n\n  /* Secondary Colors (Orange) */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFE5B4;\n  --md-on-secondary-container: #7A4D0C;\n\n  /* Tertiary Colors (Green) */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #1B5E20;\n\n  /* Error Colors */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFEBEE;\n  --md-on-error-container: #5F1313;\n\n  /* Surface Colors */\n  --md-surface: #FAFAFA;\n  --md-on-surface: #1C1B1F;\n  --md-surface-variant: #E7E0EC;\n  --md-on-surface-variant: #49454F;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F5F5F5;\n  --md-surface-container: #EEEEEE;\n  --md-surface-container-high: #E0E0E0;\n\n  /* Outline Colors */\n  --md-outline: #79747E;\n  --md-outline-variant: #CAC4D0;\n\n  /* MD3 Elevation System */\n  --md-elevation-0: none;\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\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.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* MD3 Corner Radii */\n  --md-corner-none: 0px;\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  /* Typography Scale */\n  --md-display-large: 57px;\n  --md-display-medium: 45px;\n  --md-display-small: 36px;\n  --md-headline-large: 32px;\n  --md-headline-medium: 28px;\n  --md-headline-small: 24px;\n  --md-title-large: 22px;\n  --md-title-medium: 16px;\n  --md-title-small: 14px;\n  --md-body-large: 16px;\n  --md-body-medium: 14px;\n  --md-body-small: 12px;\n  --md-label-large: 14px;\n  --md-label-medium: 12px;\n  --md-label-small: 11px;\n}\n\n/* ============================================\n   Modal Backdrop & Container\n   ============================================ */\n\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\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 {\n  background: var(--md-surface-container-lowest);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  width: 100%;\n  max-width: 900px;\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/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  padding: 24px 32px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  min-width: 0;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: var(--md-headline-small);\n  font-weight: 600;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  color: var(--md-on-primary);\n}\n\n.dialog-title i {\n  font-size: 1.25rem;\n  opacity: 0.95;\n}\n\n.dialog-subtitle {\n  margin: 0.5rem 0 0 0;\n  font-size: var(--md-body-medium);\n  opacity: 0.9;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n.modal-close {\n  background: transparent;\n  border: none;\n  color: var(--md-on-primary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--md-corner-full);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(0.95);\n}\n\n.modal-close i {\n  font-size: 1.25rem;\n}\n\n/* ============================================\n   Modal Body\n   ============================================ */\n\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0;\n  background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n  width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n  background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n  background: var(--md-outline-variant);\n  border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n  background: var(--md-outline);\n}\n\n/* ============================================\n   Form Structure\n   ============================================ */\n\n.content-section {\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n  border-bottom: none;\n}\n\n.form-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.section-header {\n  margin-bottom: 1rem;\n}\n\n.section-title {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--md-title-large);\n  font-weight: 600;\n  color: var(--md-on-surface);\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.section-title i {\n  font-size: 1.25rem;\n  color: var(--md-primary);\n}\n\n.section-description {\n  margin: 0;\n  font-size: var(--md-body-medium);\n  color: var(--md-on-surface-variant);\n  line-height: 1.5;\n}\n\n/* ============================================\n   Form Grid Layout\n   ============================================ */\n\n.form-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields (MD3 Input Pattern)\n   ============================================ */\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.field-label {\n  font-size: var(--md-label-large);\n  font-weight: 500;\n  color: var(--md-on-surface);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--md-error);\n  margin-left: 0.25rem;\n}\n\n.field-input,\n.field-select {\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  padding: 0.875rem 1rem;\n  font-size: var(--md-body-large);\n  font-family: inherit;\n  color: var(--md-on-surface);\n  background: var(--md-surface-container-lowest);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-select:hover:not(:disabled) {\n  border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-select:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-select:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.field-input.error,\n.field-select.error {\n  border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: var(--md-body-small);\n  color: var(--md-error);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n.field-error i {\n  font-size: 0.875rem;\n}\n\n/* ============================================\n   Checkboxes (MD3 Pattern)\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: var(--md-body-medium);\n  color: var(--md-on-surface);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-outline);\n  border-radius: var(--md-corner-extra-small);\n  background: var(--md-surface-container-lowest);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.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.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--md-primary);\n  border-color: var(--md-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards (MD3 Interactive Card Pattern)\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--md-surface);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: var(--md-body-large);\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: var(--md-body-small);\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   Alert Messages (MD3 Containers)\n   ============================================ */\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1rem 1.25rem;\n  border-radius: var(--md-corner-small);\n  border: 1px solid;\n  font-size: var(--md-body-medium);\n  line-height: 1.5;\n}\n\n.alert i {\n  font-size: 1.25rem;\n  flex-shrink: 0;\n  margin-top: 0.125rem;\n}\n\n.alert > div {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n  background: var(--md-error-container);\n  border-color: var(--md-error);\n  color: var(--md-on-error-container);\n}\n\n.alert-error i {\n  color: var(--md-error);\n}\n\n/* ============================================\n   Modal Footer (Buttons)\n   ============================================ */\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  background: var(--md-surface-container-lowest);\n  border-top: 1px solid var(--md-outline-variant);\n  flex-shrink: 0;\n}\n\n/* ============================================\n   Buttons (MD3 Patterns)\n   ============================================ */\n\n.btn {\n  padding: 0.75rem 1.5rem;\n  font-size: var(--md-label-large);\n  font-weight: 500;\n  border-radius: var(--md-corner-full);\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n  text-transform: none;\n  letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.btn i {\n  font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n  box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  box-shadow: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n  background: var(--md-surface-container-lowest);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n  box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  border-color: var(--md-outline-variant);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ============================================\n   Responsive Design\n   ============================================ */\n\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    max-height: 100vh;\n    border-radius: 0;\n    animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes slideInMobile {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .modal-header {\n    padding: 20px 16px;\n    border-radius: 0;\n  }\n\n  .dialog-title {\n    font-size: 20px;\n  }\n\n  .dialog-subtitle {\n    font-size: 13px;\n  }\n\n  .content-section {\n    padding: 1.25rem 1rem;\n  }\n\n  .section-title {\n    font-size: 18px;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 18px;\n    gap: 0.5rem;\n  }\n\n  .dialog-title i {\n    font-size: 1rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 12px;\n    margin-top: 0.25rem;\n  }\n\n  .content-section {\n    padding: 1rem 0.75rem;\n  }\n\n  .section-title {\n    font-size: 16px;\n    gap: 0.5rem;\n  }\n\n  .field-input,\n  .field-select {\n    padding: 0.75rem;\n    font-size: 14px;\n  }\n\n  .modal-footer {\n    padding: 0.75rem;\n  }\n\n  .btn {\n    padding: 0.625rem 1.25rem;\n    font-size: 13px;\n  }\n}\n\n/* ============================================\n   Accessibility\n   ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n  .modal-dialog {\n    border: 2px solid var(--md-outline);\n  }\n\n  .btn {\n    border: 2px solid currentColor;\n  }\n\n  .field-input,\n  .field-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserDialogComponent, [{
         type: Component,
-        args: [{ selector: 'mj-user-dialog', encapsulation: ViewEncapsulation.None, template: "<kendo-window\n  *ngIf=\"visible\"\n  [width]=\"850\"\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-user\"></i>\n        {{ isEditMode ? 'Edit User' : 'Create New User' }}\n      </h2>\n      <p class=\"dialog-subtitle\">\n        {{ isEditMode ? 'Update user information and role assignments' : 'Add a new user to the system' }}\n      </p>\n    </div>\n  </kendo-window-titlebar>\n\n  <div class=\"dialog-content\">\n    <form [formGroup]=\"userForm\" (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      <!-- Basic 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-id-card\"></i>\n              Basic Information\n            </h3>\n            <p class=\"section-description\">Enter the user's personal and contact details</p>\n          </div>\n          \n          <div class=\"form-grid\">\n            <div class=\"form-field\">\n              <label class=\"field-label required\" for=\"name\">Username/Email</label>\n              <input \n                id=\"name\"\n                type=\"email\" \n                class=\"field-input\" \n                formControlName=\"name\"\n                placeholder=\"john@company.com\"\n                [class.error]=\"userForm.get('name')?.invalid && userForm.get('name')?.touched\"\n              />\n              @if (userForm.get('name')?.invalid && userForm.get('name')?.touched) {\n                <div class=\"field-error\">\n                  <i class=\"fa-solid fa-exclamation-circle\"></i>\n                  @if (userForm.get('name')?.errors?.['required']) {\n                    Username/Email is required\n                  }\n                  @if (userForm.get('name')?.errors?.['email']) {\n                    Please enter a valid email address\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"field-label\" for=\"firstName\">First Name</label>\n                <input \n                  id=\"firstName\"\n                  type=\"text\" \n                  class=\"field-input\" \n                  formControlName=\"firstName\"\n                  placeholder=\"John\"\n                />\n              </div>\n              \n              <div class=\"form-field\">\n                <label class=\"field-label\" for=\"lastName\">Last Name</label>\n                <input \n                  id=\"lastName\"\n                  type=\"text\" \n                  class=\"field-input\" \n                  formControlName=\"lastName\"\n                  placeholder=\"Doe\"\n                />\n              </div>\n            </div>\n\n            <div class=\"form-field\">\n              <label class=\"field-label required\" for=\"email\">Email Address</label>\n              <input \n                id=\"email\"\n                type=\"email\" \n                class=\"field-input\" \n                formControlName=\"email\"\n                placeholder=\"john@company.com\"\n                [class.error]=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\"\n              />\n              @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) {\n                <div class=\"field-error\">\n                  <i class=\"fa-solid fa-exclamation-circle\"></i>\n                  @if (userForm.get('email')?.errors?.['required']) {\n                    Email address is required\n                  }\n                  @if (userForm.get('email')?.errors?.['email']) {\n                    Please enter a valid email address\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label class=\"field-label\" for=\"title\">Job Title</label>\n              <input \n                id=\"title\"\n                type=\"text\" \n                class=\"field-input\" \n                formControlName=\"title\"\n                placeholder=\"Software Engineer\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- User Settings 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-cog\"></i>\n              User Settings\n            </h3>\n            <p class=\"section-description\">Configure user type and account status</p>\n          </div>\n          \n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"field-label\" for=\"type\">User Type</label>\n                <select id=\"type\" class=\"field-select\" formControlName=\"type\">\n                  <option value=\"User\">Standard User</option>\n                  <option value=\"Owner\">System Owner</option>\n                </select>\n              </div>\n              \n              <div class=\"form-field\">\n                <div class=\"checkbox-field\">\n                  <input \n                    id=\"isActive\"\n                    type=\"checkbox\" \n                    class=\"checkbox-input\" \n                    formControlName=\"isActive\"\n                  />\n                  <label class=\"checkbox-label\" for=\"isActive\">\n                    <div class=\"checkbox-indicator\"></div>\n                    <div>\n                      <strong>Active Account</strong>\n                      <div style=\"font-size: 12px; color: #666; margin-top: 2px;\">\n                        User can log in and access the system\n                      </div>\n                    </div>\n                  </label>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Role Assignment 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-user-tag\"></i>\n              Role Assignment\n            </h3>\n            <p class=\"section-description\">Select the roles to assign to this user</p>\n          </div>\n          \n          <div class=\"roles-grid\">\n            @for (role of data?.availableRoles; track role.ID) {\n              <div class=\"role-card\" \n                   [class.selected]=\"selectedRoleIds.has(role.ID)\"\n                   (click)=\"toggleRole(role.ID)\">\n                <div class=\"role-content\">\n                  <div class=\"checkbox-field\">\n                    <input \n                      type=\"checkbox\" \n                      class=\"checkbox-input\" \n                      [id]=\"'role-' + role.ID\"\n                      [checked]=\"selectedRoleIds.has(role.ID)\"\n                      (change)=\"onRoleToggle(role.ID, $event)\"\n                    />\n                    <label class=\"checkbox-label\" [for]=\"'role-' + role.ID\">\n                      <div class=\"checkbox-indicator\"></div>\n                    </label>\n                  </div>\n                  <div class=\"role-info\">\n                    <h4 class=\"role-name\">{{ role.Name }}</h4>\n                    @if (role.Description) {\n                      <p class=\"role-description\">{{ role.Description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"dialog-footer\">\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]=\"userForm.invalid || 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            {{ isEditMode ? 'Update User' : 'Create User' }}\n          }\n        </button>\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, #2196f3 0%, #1976d2 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: flex-end;\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: #2196f3;\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.form-grid {\n  display: grid;\n  gap: 24px;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n}\n\n/* Modern Form Fields */\n.form-field {\n  margin-bottom: 24px;\n}\n\n.form-field:last-child {\n  margin-bottom: 0;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 8px;\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: #f44336;\n}\n\n.form-field .field-input,\n.form-field .field-select {\n  width: 100%;\n  height: 36px;\n  padding: 0 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 6px;\n  font-size: 14px;\n  background: #ffffff;\n  transition: all 0.15s ease;\n}\n\n.form-field .field-input:focus,\n.form-field .field-select:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.form-field .field-input.error,\n.form-field .field-select.error {\n  border-color: #f44336;\n}\n\n.form-field .field-input.error:focus,\n.form-field .field-select.error:focus {\n  border-color: #f44336;\n  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);\n}\n\n.form-field .field-input::placeholder,\n.form-field .field-select::placeholder {\n  color: #9e9e9e;\n}\n\n.form-field .field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 24px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.form-field .field-error {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #f44336;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.form-field .field-error i {\n  font-size: 10px;\n}\n\n/* Modern Checkbox Fields */\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  margin-bottom: 24px;\n  cursor: pointer;\n}\n\n.checkbox-field .checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-field .checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: #2196f3;\n  border-color: #2196f3;\n}\n\n.checkbox-field .checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-field .checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.checkbox-field .checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: #212121;\n  line-height: 1.4;\n  margin: 0;\n}\n\n.checkbox-field .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #bdbdbd;\n  border-radius: 4px;\n  background: #ffffff;\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.15s ease;\n  margin-top: 1px;\n}\n\n.checkbox-field .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/* Role Assignment Section */\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  padding: 24px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  background: #fafafa;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n.role-card:hover {\n  border-color: rgba(33, 150, 243, 0.2);\n  background: #ffffff;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n.role-card.selected {\n  border-color: #2196f3;\n  background: #e3f2fd;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.role-card .role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.role-card .role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-card .role-info .role-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #212121;\n  margin: 0 0 4px 0;\n  line-height: 1.2;\n}\n\n.role-card .role-info .role-description {\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\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: #2196f3;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #1976d2;\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-reverse;\n  }\n  \n  .dialog-footer .btn {\n    width: 100%;\n    justify-content: center;\n  }\n  \n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}"] }]
+        args: [{ selector: 'mj-user-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 with MJ Blue -->\n    <div class=\"modal-header\">\n      <div class=\"dialog-header\">\n        <h2 class=\"dialog-title\">\n          <i class=\"fa-solid fa-user\"></i>\n          {{ isEditMode ? 'Edit User' : 'Create New User' }}\n        </h2>\n        <p class=\"dialog-subtitle\">\n          {{ isEditMode ? 'Update user information and role assignments' : 'Add a new user to the system' }}\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]=\"userForm\" (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        <!-- Basic 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-id-card\"></i>\n                Basic Information\n              </h3>\n              <p class=\"section-description\">Enter the user's personal and contact details</p>\n            </div>\n\n            <div class=\"form-grid\">\n              <div class=\"form-field\">\n                <label class=\"field-label required\" for=\"name\">Username/Email</label>\n                <input\n                  id=\"name\"\n                  type=\"email\"\n                  class=\"field-input\"\n                  formControlName=\"name\"\n                  placeholder=\"john@company.com\"\n                  [class.error]=\"userForm.get('name')?.invalid && userForm.get('name')?.touched\"\n                />\n                @if (userForm.get('name')?.invalid && userForm.get('name')?.touched) {\n                  <div class=\"field-error\">\n                    <i class=\"fa-solid fa-exclamation-circle\"></i>\n                    @if (userForm.get('name')?.errors?.['required']) {\n                      Username/Email is required\n                    }\n                    @if (userForm.get('name')?.errors?.['email']) {\n                      Please enter a valid email address\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"form-row\">\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"firstName\">First Name</label>\n                  <input\n                    id=\"firstName\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"firstName\"\n                    placeholder=\"John\"\n                  />\n                </div>\n\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"lastName\">Last Name</label>\n                  <input\n                    id=\"lastName\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"lastName\"\n                    placeholder=\"Doe\"\n                  />\n                </div>\n              </div>\n\n              <div class=\"form-field\">\n                <label class=\"field-label required\" for=\"email\">Email Address</label>\n                <input\n                  id=\"email\"\n                  type=\"email\"\n                  class=\"field-input\"\n                  formControlName=\"email\"\n                  placeholder=\"john@company.com\"\n                  [class.error]=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\"\n                />\n                @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) {\n                  <div class=\"field-error\">\n                    <i class=\"fa-solid fa-exclamation-circle\"></i>\n                    @if (userForm.get('email')?.errors?.['required']) {\n                      Email address is required\n                    }\n                    @if (userForm.get('email')?.errors?.['email']) {\n                      Please enter a valid email address\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"form-field\">\n                <label class=\"field-label\" for=\"title\">Job Title</label>\n                <input\n                  id=\"title\"\n                  type=\"text\"\n                  class=\"field-input\"\n                  formControlName=\"title\"\n                  placeholder=\"Software Engineer\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- User Settings 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-cog\"></i>\n                User Settings\n              </h3>\n              <p class=\"section-description\">Configure user type and account status</p>\n            </div>\n\n            <div class=\"form-grid\">\n              <div class=\"form-row\">\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"type\">User Type</label>\n                  <select id=\"type\" class=\"field-select\" formControlName=\"type\">\n                    <option value=\"User\">Standard User</option>\n                    <option value=\"Owner\">System Owner</option>\n                  </select>\n                </div>\n\n                <div class=\"form-field\">\n                  <div class=\"checkbox-field\">\n                    <input\n                      id=\"isActive\"\n                      type=\"checkbox\"\n                      class=\"checkbox-input\"\n                      formControlName=\"isActive\"\n                    />\n                    <label class=\"checkbox-label\" for=\"isActive\">\n                      <div class=\"checkbox-indicator\"></div>\n                      <div>\n                        <strong>Active Account</strong>\n                        <div style=\"font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px;\">\n                          User can log in and access the system\n                        </div>\n                      </div>\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Role Assignment 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-user-tag\"></i>\n                Role Assignment\n              </h3>\n              <p class=\"section-description\">Select the roles to assign to this user</p>\n            </div>\n\n            <div class=\"roles-grid\">\n              @for (role of data?.availableRoles; track role.ID) {\n                <div class=\"role-card\"\n                     [class.selected]=\"selectedRoleIds.has(role.ID)\"\n                     (click)=\"toggleRole(role.ID)\">\n                  <div class=\"role-content\">\n                    <div class=\"checkbox-field\">\n                      <input\n                        type=\"checkbox\"\n                        class=\"checkbox-input\"\n                        [id]=\"'role-' + role.ID\"\n                        [checked]=\"selectedRoleIds.has(role.ID)\"\n                        (change)=\"onRoleToggle(role.ID, $event)\"\n                      />\n                      <label class=\"checkbox-label\" [for]=\"'role-' + role.ID\">\n                        <div class=\"checkbox-indicator\"></div>\n                      </label>\n                    </div>\n                    <div class=\"role-info\">\n                      <h4 class=\"role-name\">{{ role.Name }}</h4>\n                      @if (role.Description) {\n                        <p class=\"role-description\">{{ role.Description }}</p>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"modal-footer\">\n          <button\n            type=\"submit\"\n            class=\"btn btn-primary\"\n            [disabled]=\"userForm.invalid || 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              {{ isEditMode ? 'Update User' : 'Create User' }}\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      </form>\n    </div>\n  </div>\n</div>\n", styles: ["/* ============================================\n   Material Design 3 - User Dialog Component\n   ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n  /* Primary Colors (MJ Blue) */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #C2E7FF;\n  --md-on-primary-container: #001E2F;\n\n  /* Secondary Colors (Orange) */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFE5B4;\n  --md-on-secondary-container: #7A4D0C;\n\n  /* Tertiary Colors (Green) */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #1B5E20;\n\n  /* Error Colors */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFEBEE;\n  --md-on-error-container: #5F1313;\n\n  /* Surface Colors */\n  --md-surface: #FAFAFA;\n  --md-on-surface: #1C1B1F;\n  --md-surface-variant: #E7E0EC;\n  --md-on-surface-variant: #49454F;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F5F5F5;\n  --md-surface-container: #EEEEEE;\n  --md-surface-container-high: #E0E0E0;\n\n  /* Outline Colors */\n  --md-outline: #79747E;\n  --md-outline-variant: #CAC4D0;\n\n  /* MD3 Elevation System */\n  --md-elevation-0: none;\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\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.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* MD3 Corner Radii */\n  --md-corner-none: 0px;\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  /* Typography Scale */\n  --md-display-large: 57px;\n  --md-display-medium: 45px;\n  --md-display-small: 36px;\n  --md-headline-large: 32px;\n  --md-headline-medium: 28px;\n  --md-headline-small: 24px;\n  --md-title-large: 22px;\n  --md-title-medium: 16px;\n  --md-title-small: 14px;\n  --md-body-large: 16px;\n  --md-body-medium: 14px;\n  --md-body-small: 12px;\n  --md-label-large: 14px;\n  --md-label-medium: 12px;\n  --md-label-small: 11px;\n}\n\n/* ============================================\n   Modal Backdrop & Container\n   ============================================ */\n\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\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 {\n  background: var(--md-surface-container-lowest);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  width: 100%;\n  max-width: 900px;\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/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  padding: 24px 32px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  min-width: 0;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: var(--md-headline-small);\n  font-weight: 600;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  color: var(--md-on-primary);\n}\n\n.dialog-title i {\n  font-size: 1.25rem;\n  opacity: 0.95;\n}\n\n.dialog-subtitle {\n  margin: 0.5rem 0 0 0;\n  font-size: var(--md-body-medium);\n  opacity: 0.9;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n.modal-close {\n  background: transparent;\n  border: none;\n  color: var(--md-on-primary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--md-corner-full);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  width: 40px;\n  height: 40px;\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(0.95);\n}\n\n.modal-close i {\n  font-size: 1.25rem;\n}\n\n/* ============================================\n   Modal Body\n   ============================================ */\n\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0;\n  background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n  width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n  background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n  background: var(--md-outline-variant);\n  border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n  background: var(--md-outline);\n}\n\n/* ============================================\n   Form Structure\n   ============================================ */\n\n.content-section {\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n  border-bottom: none;\n}\n\n.form-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.section-header {\n  margin-bottom: 1rem;\n}\n\n.section-title {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--md-title-large);\n  font-weight: 600;\n  color: var(--md-on-surface);\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.section-title i {\n  font-size: 1.25rem;\n  color: var(--md-primary);\n}\n\n.section-description {\n  margin: 0;\n  font-size: var(--md-body-medium);\n  color: var(--md-on-surface-variant);\n  line-height: 1.5;\n}\n\n/* ============================================\n   Form Grid Layout\n   ============================================ */\n\n.form-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields (MD3 Input Pattern)\n   ============================================ */\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.field-label {\n  font-size: var(--md-label-large);\n  font-weight: 500;\n  color: var(--md-on-surface);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--md-error);\n  margin-left: 0.25rem;\n}\n\n.field-input,\n.field-select {\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  padding: 0.875rem 1rem;\n  font-size: var(--md-body-large);\n  font-family: inherit;\n  color: var(--md-on-surface);\n  background: var(--md-surface-container-lowest);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-select:hover:not(:disabled) {\n  border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-select:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-select:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.field-input.error,\n.field-select.error {\n  border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: var(--md-body-small);\n  color: var(--md-error);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n.field-error i {\n  font-size: 0.875rem;\n}\n\n/* ============================================\n   Checkboxes (MD3 Pattern)\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: var(--md-body-medium);\n  color: var(--md-on-surface);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-outline);\n  border-radius: var(--md-corner-extra-small);\n  background: var(--md-surface-container-lowest);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.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.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--md-primary);\n  border-color: var(--md-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards (MD3 Interactive Card Pattern)\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--md-surface);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: var(--md-body-large);\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: var(--md-body-small);\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   Alert Messages (MD3 Containers)\n   ============================================ */\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1rem 1.25rem;\n  border-radius: var(--md-corner-small);\n  border: 1px solid;\n  font-size: var(--md-body-medium);\n  line-height: 1.5;\n}\n\n.alert i {\n  font-size: 1.25rem;\n  flex-shrink: 0;\n  margin-top: 0.125rem;\n}\n\n.alert > div {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n  background: var(--md-error-container);\n  border-color: var(--md-error);\n  color: var(--md-on-error-container);\n}\n\n.alert-error i {\n  color: var(--md-error);\n}\n\n/* ============================================\n   Modal Footer (Buttons)\n   ============================================ */\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  background: var(--md-surface-container-lowest);\n  border-top: 1px solid var(--md-outline-variant);\n  flex-shrink: 0;\n}\n\n/* ============================================\n   Buttons (MD3 Patterns)\n   ============================================ */\n\n.btn {\n  padding: 0.75rem 1.5rem;\n  font-size: var(--md-label-large);\n  font-weight: 500;\n  border-radius: var(--md-corner-full);\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n  text-transform: none;\n  letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.btn i {\n  font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n  box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  box-shadow: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n  background: var(--md-surface-container-lowest);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n  box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n  border-color: var(--md-outline-variant);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ============================================\n   Responsive Design\n   ============================================ */\n\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    max-height: 100vh;\n    border-radius: 0;\n    animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes slideInMobile {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .modal-header {\n    padding: 20px 16px;\n    border-radius: 0;\n  }\n\n  .dialog-title {\n    font-size: 20px;\n  }\n\n  .dialog-subtitle {\n    font-size: 13px;\n  }\n\n  .content-section {\n    padding: 1.25rem 1rem;\n  }\n\n  .section-title {\n    font-size: 18px;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 18px;\n    gap: 0.5rem;\n  }\n\n  .dialog-title i {\n    font-size: 1rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 12px;\n    margin-top: 0.25rem;\n  }\n\n  .content-section {\n    padding: 1rem 0.75rem;\n  }\n\n  .section-title {\n    font-size: 16px;\n    gap: 0.5rem;\n  }\n\n  .field-input,\n  .field-select {\n    padding: 0.75rem;\n    font-size: 14px;\n  }\n\n  .modal-footer {\n    padding: 0.75rem;\n  }\n\n  .btn {\n    padding: 0.625rem 1.25rem;\n    font-size: 13px;\n  }\n}\n\n/* ============================================\n   Accessibility\n   ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n  .modal-dialog {\n    border: 2px solid var(--md-outline);\n  }\n\n  .btn {\n    border: 2px solid currentColor;\n  }\n\n  .field-input,\n  .field-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"] }]
     }], () => [], { data: [{
             type: Input
         }], visible: [{
@@ -464,5 +468,5 @@ export class UserDialogComponent {
             type: HostListener,
             args: ['document:keydown.escape', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserDialogComponent, { className: "UserDialogComponent", filePath: "src/lib/user-management/user-dialog/user-dialog.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserDialogComponent, { className: "UserDialogComponent", filePath: "src/lib/user-management/user-dialog/user-dialog.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=user-dialog.component.js.map