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

@memberjunction/ng-explorer-settings 3.4.0 → 4.0.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

@@ -2,10 +2,9 @@ import { Component, Input, Output, EventEmitter, inject, HostListener, ViewEncap
 import { FormBuilder, Validators } from '@angular/forms';
 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 i1 from "@angular/forms";
 const _forTrack0 = ($index, $item) => $item.ID;
-function UserDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_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");
@@ -16,16 +15,17 @@ function UserDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function UserDialogComponent_div_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Username/Email is required ");
 } }
-function UserDialogComponent_div_0_Conditional_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Please enter a valid email address ");
 } }
-function UserDialogComponent_div_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_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.ɵɵconditionalCreate(2, UserDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, UserDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -36,16 +36,17 @@ function UserDialogComponent_div_0_Conditional_27_Template(rf, ctx) { if (rf & 1
     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_div_0_Conditional_41_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_41_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Email address is required ");
 } }
-function UserDialogComponent_div_0_Conditional_41_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_41_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Please enter a valid email address ");
 } }
-function UserDialogComponent_div_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_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.ɵɵconditionalCreate(2, UserDialogComponent_Conditional_0_Conditional_41_Conditional_2_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, UserDialogComponent_Conditional_0_Conditional_41_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -56,7 +57,7 @@ function UserDialogComponent_div_0_Conditional_41_Template(rf, ctx) { if (rf & 1
     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_div_0_For_84_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_For_84_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 57);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -65,12 +66,12 @@ function UserDialogComponent_div_0_For_84_Conditional_9_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(role_r4.Description);
 } }
-function UserDialogComponent_div_0_For_84_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_For_84_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     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.ɵɵlistener("click", function UserDialogComponent_Conditional_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.ɵɵlistener("change", function UserDialogComponent_Conditional_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", 54);
     i0.ɵɵelement(5, "div", 40);
@@ -78,7 +79,7 @@ function UserDialogComponent_div_0_For_84_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(6, "div", 55)(7, "h4", 56);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, UserDialogComponent_div_0_For_84_Conditional_9_Template, 2, 1, "p", 57);
+    i0.ɵɵconditionalCreate(9, UserDialogComponent_Conditional_0_For_84_Conditional_9_Template, 2, 1, "p", 57);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const role_r4 = ctx.$implicit;
@@ -93,11 +94,11 @@ function UserDialogComponent_div_0_For_84_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(role_r4.Description ? 9 : -1);
 } }
-function UserDialogComponent_div_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 58);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function UserDialogComponent_div_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 59);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -105,12 +106,12 @@ function UserDialogComponent_div_0_Conditional_88_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update User" : "Create User", " ");
 } }
-function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function UserDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     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.ɵɵlistener("click", function UserDialogComponent_Conditional_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.ɵɵlistener("click", function UserDialogComponent_Conditional_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);
@@ -119,12 +120,12 @@ function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵlistener("click", function UserDialogComponent_Conditional_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.ɵɵlistener("ngSubmit", function UserDialogComponent_Conditional_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
+    i0.ɵɵconditionalCreate(13, UserDialogComponent_Conditional_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 ");
@@ -136,7 +137,7 @@ function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(25, "Username/Email");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(26, "input", 21);
-    i0.ɵɵtemplate(27, UserDialogComponent_div_0_Conditional_27_Template, 4, 2, "div", 22);
+    i0.ɵɵconditionalCreate(27, UserDialogComponent_Conditional_0_Conditional_27_Template, 4, 2, "div", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(28, "div", 23)(29, "div", 19)(30, "label", 24);
     i0.ɵɵtext(31, "First Name");
@@ -152,7 +153,7 @@ function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(39, "Email Address");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(40, "input", 29);
-    i0.ɵɵtemplate(41, UserDialogComponent_div_0_Conditional_41_Template, 4, 2, "div", 22);
+    i0.ɵɵconditionalCreate(41, UserDialogComponent_Conditional_0_Conditional_41_Template, 4, 2, "div", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(42, "div", 19)(43, "label", 30);
     i0.ɵɵtext(44, "Job Title");
@@ -193,13 +194,13 @@ function UserDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(81, "Select the roles to assign to this user");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(82, "div", 43);
-    i0.ɵɵrepeaterCreate(83, UserDialogComponent_div_0_For_84_Template, 10, 7, "div", 44, _forTrack0);
+    i0.ɵɵrepeaterCreate(83, UserDialogComponent_Conditional_0_For_84_Template, 10, 7, "div", 44, _forTrack0);
     i0.ɵɵelementEnd()()();
     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.ɵɵconditionalCreate(87, UserDialogComponent_Conditional_0_Conditional_87_Template, 2, 0)(88, UserDialogComponent_Conditional_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.ɵɵlistener("click", function UserDialogComponent_Conditional_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()()()()()();
@@ -448,16 +449,16 @@ 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: [["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);
+            i0.ɵɵlistener("keydown.escape", function UserDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [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.ɵɵconditionalCreate(0, UserDialogComponent_Conditional_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], 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 });
+            i0.ɵɵconditional(ctx.visible ? 0 : -1);
+        } }, dependencies: [i1.ɵNgNoValidate, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.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: "<!-- 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"] }]
+        args: [{ standalone: false, selector: 'mj-user-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\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      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"userForm\" (ngSubmit)=\"onSubmit()\">\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          <!-- 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              <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                <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                  <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                <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                <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          <!-- 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              <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                  <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          <!-- 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              <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          <!-- 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}\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: [{
@@ -468,5 +469,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: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserDialogComponent, { className: "UserDialogComponent", filePath: "src/lib/user-management/user-dialog/user-dialog.component.ts", lineNumber: 25 }); })();
 //# sourceMappingURL=user-dialog.component.js.map

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

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

package/dist/lib/user-management/user-management.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-management.component.d.ts","sourceRoot":"","sources":["../../../src/lib/user-management/user-management.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAkB,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;;AAEvF,UAAU,SAAS;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,~~qBAMa~~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"}
1	+ {"version":3,"file":"user-management.component.d.ts","sourceRoot":"","sources":["../../../src/lib/user-management/user-management.component.ts"],"names":[],"mappings":"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"}