npm - @memberjunction/ng-explorer-settings - Versions diffs - 5.3.1 → 5.4.0 - Mend

@memberjunction/ng-explorer-settings 5.3.1 → 5.4.0

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

Files changed (35) hide show

package/dist/lib/notification-preferences/notification-preferences.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notification-preferences.component.js","sourceRoot":"","sources":["../../../src/lib/notification-preferences/notification-preferences.component.ts","../../../src/lib/notification-preferences/notification-preferences.component.html"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"notification-preferences.component.js","sourceRoot":"","sources":["../../../src/lib/notification-preferences/notification-preferences.component.ts","../../../src/lib/notification-preferences/notification-preferences.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit } from '@angular/core';\nimport { Metadata } from '@memberjunction/core';\nimport { MJUserNotificationTypeEntity, MJUserNotificationPreferenceEntity, UserInfoEngine } from '@memberjunction/core-entities';\nimport { SharedService } from '@memberjunction/ng-shared';\n\n/*\n View model for managing notification preferences in the UI.\n * Combines notification type definition with user's current preferences and change tracking.\n /\ninterface NotificationPreferenceViewModel {\n /* The notification type definition (read-only) /\n type: MJUserNotificationTypeEntity;\n /* User's existing preference record, or null if not yet set /\n preference: MJUserNotificationPreferenceEntity \| null;\n /* Current state: In-app notifications enabled /\n inAppEnabled: boolean;\n /* Current state: Email notifications enabled /\n emailEnabled: boolean;\n /* Current state: SMS notifications enabled /\n smsEnabled: boolean;\n /* Whether this preference has been modified by the user /\n changed: boolean;\n /* Original value for rollback: In-app enabled state /\n originalInAppEnabled: boolean;\n /* Original value for rollback: Email enabled state /\n originalEmailEnabled: boolean;\n /* Original value for rollback: SMS enabled state /\n originalSmsEnabled: boolean;\n}\n\n/\n Component for managing user notification preferences.\n \n Displays notification types with configurable delivery channels (in-app, email, SMS).\n * Users can customize which channels they want to receive notifications through,\n * unless the notification type restricts user customization.\n \n Uses Material Design 3 (MD3) styling principles for consistent, accessible UI.\n \n Data flow:\n * - Loads notification types from UserInfoEngine (global cache)\n * - Loads user preferences from UserInfoEngine (per-user cache)\n * - Saves preferences using transaction groups for batch updates\n /\n@Component({\n standalone: false,\n selector: 'mj-notification-preferences',\n templateUrl: './notification-preferences.component.html',\n styleUrls: ['./notification-preferences.component.css'],\n})\nexport class NotificationPreferencesComponent implements OnInit {\n loading = true;\n saving = false;\n viewModels: NotificationPreferenceViewModel[] = [];\n hasChanges = false;\n\n constructor(private sharedService: SharedService) {}\n\n /\n Angular lifecycle hook - initializes the component by loading notification preferences.\n /\n async ngOnInit(): Promise<void> {\n await this.loadData();\n }\n\n /\n Loads notification types and user preferences from UserInfoEngine.\n * Builds view models by merging type defaults with user preferences.\n * Sorts types by Priority (ascending), then Name (alphabetical).\n * @private\n /\n private async loadData(): Promise<void> {\n try {\n this.loading = true;\n\n // UserInfoEngine is auto-configured via @RegisterForStartup()\n // NotificationEngine (server-side) loads notification types into global cache\n // UserInfoEngine provides a getter to access them from both client and server\n\n // Get notification types from UserInfoEngine, sorted client-side\n const types = [...UserInfoEngine.Instance.NotificationTypes].sort((a, b) => {\n const priorityA = a.Priority ?? 999;\n const priorityB = b.Priority ?? 999;\n if (priorityA !== priorityB) {\n return priorityA - priorityB;\n }\n return a.Name.localeCompare(b.Name);\n });\n\n // Get preferences from UserInfoEngine (entity objects - can be mutated)\n const prefs = UserInfoEngine.Instance.NotificationPreferences;\n\n // Build view models from cached data\n this.viewModels = types.map((type) => {\n const existingPref = prefs.find((p) => p.NotificationTypeID === type.ID);\n\n // Get channel values: user preference > type default\n const inAppEnabled = existingPref?.InAppEnabled ?? type.DefaultInApp ?? true;\n const emailEnabled = existingPref?.EmailEnabled ?? type.DefaultEmail ?? false;\n const smsEnabled = existingPref?.SMSEnabled ?? type.DefaultSMS ?? false;\n\n return {\n type,\n preference: existingPref \|\| null,\n inAppEnabled,\n emailEnabled,\n smsEnabled,\n changed: false,\n originalInAppEnabled: inAppEnabled,\n originalEmailEnabled: emailEnabled,\n originalSmsEnabled: smsEnabled,\n };\n });\n\n this.loading = false;\n } catch (error: unknown) {\n this.loading = false;\n const message = error instanceof Error ? error.message : 'Unknown error';\n this.sharedService.CreateSimpleNotification(`Failed to load notification preferences: ${message}`, 'error', 3000);\n }\n }\n\n /\n Called when a user toggles any delivery channel checkbox.\n * Updates the view model's changed flag by comparing current state to original values.\n * Sets the global hasChanges flag to show/hide the save/cancel buttons.\n * @param vm The view model for the notification type being modified\n /\n onChannelChange(vm: NotificationPreferenceViewModel): void {\n vm.changed = vm.inAppEnabled !== vm.originalInAppEnabled \|\| vm.emailEnabled !== vm.originalEmailEnabled \|\| vm.smsEnabled !== vm.originalSmsEnabled;\n this.hasChanges = this.viewModels.some((v) => v.changed);\n }\n\n /\n Saves all changed notification preferences using a transaction group for batch updates.\n * Creates new preference records for types that don't have existing preferences.\n * Updates the Enabled field based on whether any channel is enabled.\n * Shows success/error notification on completion.\n * @returns Promise that resolves when save is complete\n /\n async save(): Promise<void> {\n try {\n this.saving = true;\n const md = new Metadata();\n const currentUser = md.CurrentUser;\n const transGroup = await md.CreateTransactionGroup();\n\n // Queue all saves in transaction group - no need to await individual saves\n // Transaction group queues them and submits all in one batch\n for (const vm of this.viewModels.filter((v) => v.changed)) {\n let pref = vm.preference;\n\n if (!pref) {\n // Create new preference record\n pref = await md.GetEntityObject<MJUserNotificationPreferenceEntity>('MJ: User Notification Preferences');\n pref.UserID = currentUser.ID;\n pref.NotificationTypeID = vm.type.ID;\n vm.preference = pref;\n }\n\n // Set Enabled based on whether any channel is enabled\n pref.Enabled = vm.inAppEnabled \|\| vm.emailEnabled \|\| vm.smsEnabled;\n\n // Set the boolean channel fields\n pref.InAppEnabled = vm.inAppEnabled;\n pref.EmailEnabled = vm.emailEnabled;\n pref.SMSEnabled = vm.smsEnabled;\n pref.TransactionGroup = transGroup;\n // Don't await - Save() with transaction group queues immediately\n pref.Save();\n }\n\n // Submit transaction group - this is where the actual network call happens\n const success = await transGroup.Submit();\n\n if (success) {\n // Cache refresh happens automatically in MJUserNotificationPreferenceEntityExtended.Save()\n\n // Update original values\n this.viewModels.forEach((vm) => {\n vm.originalInAppEnabled = vm.inAppEnabled;\n vm.originalEmailEnabled = vm.emailEnabled;\n vm.originalSmsEnabled = vm.smsEnabled;\n vm.changed = false;\n });\n\n this.hasChanges = false;\n this.sharedService.CreateSimpleNotification('Notification preferences saved successfully', 'success', 2500);\n } else {\n throw new Error('Failed to save preferences');\n }\n\n this.saving = false;\n } catch (error: unknown) {\n this.saving = false;\n const message = error instanceof Error ? error.message : 'Unknown error';\n this.sharedService.CreateSimpleNotification(`Failed to save preferences: ${message}`, 'error', 3000);\n }\n }\n\n /\n Cancels all unsaved changes and reverts to original values.\n * Resets the changed flag on all view models and hides the action buttons.\n /\n cancel(): void {\n // Revert changes\n this.viewModels.forEach((vm) => {\n vm.inAppEnabled = vm.originalInAppEnabled;\n vm.emailEnabled = vm.originalEmailEnabled;\n vm.smsEnabled = vm.originalSmsEnabled;\n vm.changed = false;\n });\n this.hasChanges = false;\n }\n\n /\n Gets the Font Awesome icon class for a notification type.\n * Used for MD3 dynamic icon styling in the card header.\n * @param type The notification type entity\n * @returns Font Awesome icon class (e.g., 'fa-bell'), defaults to 'fa-bell' if not specified\n /\n getTypeIcon(type: MJUserNotificationTypeEntity): string {\n return type.Icon \|\| 'fa-bell';\n }\n\n /\n Gets the color hex code for a notification type.\n * Used for MD3 dynamic color styling (icon background, border accent).\n * @param type The notification type entity\n * @returns Hex color code (e.g., '#0076B6'), defaults to '#999' if not specified\n /\n getTypeColor(type: MJUserNotificationTypeEntity): string {\n return type.Color \|\| '#999';\n }\n\n /\n Gets the auto-expire duration in days for a notification type.\n * Displayed in the metadata row to inform users about automatic read marking.\n * @param type The notification type entity\n * @returns Number of days until auto-expire, or null if not configured\n /\n getTypeAutoExpireDays(type: MJUserNotificationTypeEntity): number \| null {\n return type.AutoExpireDays \|\| null;\n }\n\n /\n Checks if users are allowed to customize preferences for this notification type.\n * When false, the delivery channel checkboxes are disabled and an info message is shown.\n * @param type The notification type entity\n * @returns True if user customization is allowed (default), false otherwise\n */\n getAllowUserPreference(type: MJUserNotificationTypeEntity): boolean {\n return type.AllowUserPreference !== false;\n }\n}\n","<div class=\"notification-preferences-container\">\n @if (loading) {\n <mj-loading text=\"Loading notification preferences...\"></mj-loading>\n } @else {\n <div class=\"content\">\n @if (viewModels.length === 0) {\n <!-- Empty state -->\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bell-slash\"></i>\n <p>No notification types configured yet.</p>\n </div>\n } @else {\n <!-- Notification type cards -->\n <div class=\"notification-types-grid\">\n @for (vm of viewModels; track vm.type.ID) {\n <article class=\"notification-type-card\"\n [class.changed]=\"vm.changed\"\n role=\"region\"\n [attr.aria-label]=\"'Notification settings for ' + vm.type.Name\">\n\n <div class=\"card-header\" [style.border-left-color]=\"getTypeColor(vm.type)\">\n <div class=\"icon-wrapper\" [style.background-color]=\"getTypeColor(vm.type) + '20'\">\n <i [class]=\"'fa-solid ' + getTypeIcon(vm.type)\" [style.color]=\"getTypeColor(vm.type)\" [attr.aria-hidden]=\"true\"></i>\n </div>\n <div class=\"header-text\">\n <h4>{{ vm.type.Name }}</h4>\n <p class=\"type-description\">{{ vm.type.Description }}</p>\n </div>\n </div>\n\n <div class=\"card-body\">\n <!-- Delivery channel checkboxes -->\n <div class=\"preference-row\">\n <label class=\"delivery-label\" [attr.id]=\"'delivery-label-' + vm.type.ID\">Delivery Channels</label>\n\n <div class=\"delivery-checkboxes\" role=\"group\" [attr.aria-labelledby]=\"'delivery-label-' + vm.type.ID\">\n <label class=\"channel-checkbox\">\n <input type=\"checkbox\"\n [(ngModel)]=\"vm.inAppEnabled\"\n (change)=\"onChannelChange(vm)\"\n [disabled]=\"!getAllowUserPreference(vm.type)\"\n [attr.aria-label]=\"'Enable in-app notifications for ' + vm.type.Name\">\n <i class=\"fa-solid fa-bell\" aria-hidden=\"true\"></i>\n <span>In-App</span>\n </label>\n\n <label class=\"channel-checkbox\">\n <input type=\"checkbox\"\n [(ngModel)]=\"vm.emailEnabled\"\n (change)=\"onChannelChange(vm)\"\n [disabled]=\"!getAllowUserPreference(vm.type)\"\n [attr.aria-label]=\"'Enable email notifications for ' + vm.type.Name\">\n <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n <span>Email</span>\n </label>\n\n <label class=\"channel-checkbox\">\n <input type=\"checkbox\"\n [(ngModel)]=\"vm.smsEnabled\"\n (change)=\"onChannelChange(vm)\"\n [disabled]=\"!getAllowUserPreference(vm.type)\"\n [attr.aria-label]=\"'Enable SMS notifications for ' + vm.type.Name\">\n <i class=\"fa-solid fa-mobile\" aria-hidden=\"true\"></i>\n <span>SMS</span>\n </label>\n </div>\n\n @if (!getAllowUserPreference(vm.type)) {\n <div class=\"info-message\" role=\"alert\" aria-live=\"polite\">\n <i class=\"fa-solid fa-info-circle\" aria-hidden=\"true\"></i>\n <span>This notification type's delivery channels cannot be customized.</span>\n </div>\n }\n </div>\n\n <!-- Auto-expire info -->\n @if (getTypeAutoExpireDays(vm.type)) {\n <div class=\"metadata-row\">\n <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n <span class=\"metadata-text\">\n Auto-marks as read after {{ getTypeAutoExpireDays(vm.type) }} day(s)\n </span>\n </div>\n }\n </div>\n </article>\n }\n </div>\n }\n\n <!-- Action buttons -->\n @if (hasChanges) {\n <div class=\"actions\" role=\"group\" aria-label=\"Save or cancel changes\">\n <button class=\"btn btn-secondary\"\n type=\"button\"\n (click)=\"cancel()\"\n [disabled]=\"saving\"\n [attr.aria-busy]=\"saving\">\n Cancel\n </button>\n <button class=\"btn btn-primary\"\n type=\"button\"\n (click)=\"save()\"\n [disabled]=\"saving\"\n [attr.aria-busy]=\"saving\">\n @if (saving) {\n <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n } @else {\n <i class=\"fa-solid fa-save\" aria-hidden=\"true\"></i>\n }\n <span>{{ saving ? 'Saving...' : 'Save Preferences' }}</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n"]}

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

@@ -320,11 +320,11 @@ export class RoleDialogComponent {
             i0.ɵɵconditionalCreate(0, RoleDialogComponent_Conditional_0_Template, 54, 12, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible ? 0 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName], styles: ["/* ============================================\n   Material Design 3 - Role 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: 850px;\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/* ============================================\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-textarea {\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-textarea:hover:not(:disabled) {\n  border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea: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-textarea: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-textarea.error {\n  border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n  resize: vertical;\n  min-height: 100px;\n  line-height: 1.5;\n}\n\n.field-hint {\n  font-size: var(--md-body-small);\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n  margin-top: 0.25rem;\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   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.alert strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n.alert p {\n  margin: 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/* Warning Alert (Orange) */\n.alert-warning {\n  background: var(--md-secondary-container);\n  border-color: var(--md-secondary);\n  color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n  color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n  color: var(--md-primary);\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\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-textarea {\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-textarea {\n    border-width: 3px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"], encapsulation: 2 });
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName], styles: ["/* ============================================\n   Role Dialog Component\n   Uses MJ Design Tokens (--mj-*)\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(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-width: 850px;\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(--mj-brand-primary);\n  color: var(--mj-brand-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(--mj-radius-2xl) var(--mj-radius-2xl) 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: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  color: var(--mj-brand-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: 0.875rem;\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(--mj-brand-on-primary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-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(--mj-bg-page);\n}\n\n.modal-body::-webkit-scrollbar {\n  width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-color-neutral-400);\n}\n\n/* ============================================\n   Form Structure\n   ============================================ */\n\n.content-section {\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid var(--mj-border-default);\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: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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(--mj-brand-primary);\n}\n\n.section-description {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\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/* ============================================\n   Form Fields\n   ============================================ */\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.field-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\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-textarea:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n  resize: vertical;\n  min-height: 100px;\n  line-height: 1.5;\n}\n\n.field-hint {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin-top: 0.25rem;\n}\n\n.field-error {\n  font-size: 0.75rem;\n  color: var(--mj-status-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   Alert Messages\n   ============================================ */\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1rem 1.25rem;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid;\n  font-size: 0.875rem;\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.alert strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n.alert p {\n  margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n  background: var(--mj-color-error-100);\n  border-color: var(--mj-status-error);\n  color: var(--mj-color-error-700);\n}\n\n.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n  background: var(--mj-color-warning-50);\n  border-color: var(--mj-color-warning-500);\n  color: var(--mj-color-warning-800);\n}\n\n.alert-warning i {\n  color: var(--mj-color-warning-500);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-primary);\n}\n\n.alert-info i {\n  color: var(--mj-brand-primary);\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(--mj-bg-surface-sunken);\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* ============================================\n   Buttons\n   ============================================ */\n\n.btn {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.btn-primary:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\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(--mj-bg-page);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-color-neutral-400);\n  box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-secondary:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\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: 1.25rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 0.8125rem;\n  }\n\n  .content-section {\n    padding: 1.25rem 1rem;\n  }\n\n  .section-title {\n    font-size: 1.125rem;\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\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 1.125rem;\n    gap: 0.5rem;\n  }\n\n  .dialog-title i {\n    font-size: 1rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 0.75rem;\n    margin-top: 0.25rem;\n  }\n\n  .content-section {\n    padding: 1rem 0.75rem;\n  }\n\n  .section-title {\n    font-size: 1rem;\n    gap: 0.5rem;\n  }\n\n  .field-input,\n  .field-textarea {\n    padding: 0.75rem;\n    font-size: 0.875rem;\n  }\n\n  .modal-footer {\n    padding: 0.75rem;\n  }\n\n  .btn {\n    padding: 0.625rem 1.25rem;\n    font-size: 0.8125rem;\n  }\n}\n\n/* ============================================\n   Accessibility\n   ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n  outline: 2px solid var(--mj-brand-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(--mj-border-default);\n  }\n\n  .btn {\n    border: 2px solid currentColor;\n  }\n\n  .field-input,\n  .field-textarea {\n    border-width: 3px;\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(RoleDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-role-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-shield-halved\"></i>\n            {{ isEditMode ? 'Edit Role' : 'Create New Role' }}\n          </h2>\n          <p class=\"dialog-subtitle\">\n            {{ isEditMode ? 'Update role information and permissions' : 'Add a new role 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]=\"roleForm\" (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-shield-halved\"></i>\n                  Role Information\n                </h3>\n                <p class=\"section-description\">Define the role's basic properties and purpose</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"name\">Role Name</label>\n                  <input\n                    id=\"name\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"name\"\n                    placeholder=\"Sales Manager\"\n                    [class.error]=\"roleForm.get('name')?.invalid && roleForm.get('name')?.touched\"\n                    />\n                  @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (roleForm.get('name')?.errors?.['required']) {\n                        Role name is required\n                      }\n                      @if (roleForm.get('name')?.errors?.['maxlength']) {\n                        Role name cannot exceed 50 characters\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"description\">Description</label>\n                  <textarea\n                    id=\"description\"\n                    class=\"field-textarea\"\n                    formControlName=\"description\"\n                    placeholder=\"Describe the role's purpose and responsibilities...\"\n                    rows=\"4\"\n                  ></textarea>\n                  <div class=\"field-hint\">\n                    Provide a clear description of what this role is for and what permissions it should have.\n                  </div>\n                </div>\n                @if (isEditMode) {\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"directoryId\">Directory ID</label>\n                    <input\n                      id=\"directoryId\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"directoryId\"\n                      placeholder=\"External directory identifier\"\n                      />\n                    <div class=\"field-hint\">\n                      External directory identifier for syncing with Active Directory or other systems.\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Role Type 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                  Role Type\n                </h3>\n                <p class=\"section-description\">System or custom role classification</p>\n              </div>\n              <div class=\"form-grid\">\n                @if (isSystemRole) {\n                  <div class=\"alert alert-warning\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <div>\n                      <strong>System Role</strong>\n                      <p>This is a system-defined role. Some properties may be limited for editing to maintain system integrity.</p>\n                    </div>\n                  </div>\n                } @else {\n                  <div class=\"alert alert-info\">\n                    <i class=\"fa-solid fa-user-tag\"></i>\n                    <div>\n                      <strong>Custom Role</strong>\n                      <p>This is a custom role that can be fully configured and modified.</p>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Preview Section -->\n          @if (isEditMode) {\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-key\"></i>\n                    Permissions\n                  </h3>\n                  <p class=\"section-description\">Manage role permissions and access rights</p>\n                </div>\n                <div class=\"form-grid\">\n                  <div class=\"alert alert-info\">\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    <div>\n                      <strong>Permission Management</strong>\n                      <p>Role permissions can be managed in the <strong>Permissions</strong> tab of the settings dashboard. Use that interface to configure specific access rights for this role.</p>\n                    </div>\n                  </div>\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]=\"roleForm.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 Role' : 'Create Role' }}\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 - Role 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: 850px;\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/* ============================================\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-textarea {\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-textarea:hover:not(:disabled) {\n  border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea: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-textarea: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-textarea.error {\n  border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n  resize: vertical;\n  min-height: 100px;\n  line-height: 1.5;\n}\n\n.field-hint {\n  font-size: var(--md-body-small);\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n  margin-top: 0.25rem;\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   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.alert strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n.alert p {\n  margin: 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/* Warning Alert (Orange) */\n.alert-warning {\n  background: var(--md-secondary-container);\n  border-color: var(--md-secondary);\n  color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n  color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n  color: var(--md-primary);\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\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-textarea {\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-textarea {\n    border-width: 3px;\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-role-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-shield-halved\"></i>\n            {{ isEditMode ? 'Edit Role' : 'Create New Role' }}\n          </h2>\n          <p class=\"dialog-subtitle\">\n            {{ isEditMode ? 'Update role information and permissions' : 'Add a new role 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]=\"roleForm\" (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-shield-halved\"></i>\n                  Role Information\n                </h3>\n                <p class=\"section-description\">Define the role's basic properties and purpose</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"name\">Role Name</label>\n                  <input\n                    id=\"name\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"name\"\n                    placeholder=\"Sales Manager\"\n                    [class.error]=\"roleForm.get('name')?.invalid && roleForm.get('name')?.touched\"\n                    />\n                  @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (roleForm.get('name')?.errors?.['required']) {\n                        Role name is required\n                      }\n                      @if (roleForm.get('name')?.errors?.['maxlength']) {\n                        Role name cannot exceed 50 characters\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"description\">Description</label>\n                  <textarea\n                    id=\"description\"\n                    class=\"field-textarea\"\n                    formControlName=\"description\"\n                    placeholder=\"Describe the role's purpose and responsibilities...\"\n                    rows=\"4\"\n                  ></textarea>\n                  <div class=\"field-hint\">\n                    Provide a clear description of what this role is for and what permissions it should have.\n                  </div>\n                </div>\n                @if (isEditMode) {\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"directoryId\">Directory ID</label>\n                    <input\n                      id=\"directoryId\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"directoryId\"\n                      placeholder=\"External directory identifier\"\n                      />\n                    <div class=\"field-hint\">\n                      External directory identifier for syncing with Active Directory or other systems.\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Role Type 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                  Role Type\n                </h3>\n                <p class=\"section-description\">System or custom role classification</p>\n              </div>\n              <div class=\"form-grid\">\n                @if (isSystemRole) {\n                  <div class=\"alert alert-warning\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <div>\n                      <strong>System Role</strong>\n                      <p>This is a system-defined role. Some properties may be limited for editing to maintain system integrity.</p>\n                    </div>\n                  </div>\n                } @else {\n                  <div class=\"alert alert-info\">\n                    <i class=\"fa-solid fa-user-tag\"></i>\n                    <div>\n                      <strong>Custom Role</strong>\n                      <p>This is a custom role that can be fully configured and modified.</p>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Preview Section -->\n          @if (isEditMode) {\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-key\"></i>\n                    Permissions\n                  </h3>\n                  <p class=\"section-description\">Manage role permissions and access rights</p>\n                </div>\n                <div class=\"form-grid\">\n                  <div class=\"alert alert-info\">\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    <div>\n                      <strong>Permission Management</strong>\n                      <p>Role permissions can be managed in the <strong>Permissions</strong> tab of the settings dashboard. Use that interface to configure specific access rights for this role.</p>\n                    </div>\n                  </div>\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]=\"roleForm.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 Role' : 'Create Role' }}\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   Role Dialog Component\n   Uses MJ Design Tokens (--mj-*)\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(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-width: 850px;\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(--mj-brand-primary);\n  color: var(--mj-brand-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(--mj-radius-2xl) var(--mj-radius-2xl) 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: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  color: var(--mj-brand-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: 0.875rem;\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(--mj-brand-on-primary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-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(--mj-bg-page);\n}\n\n.modal-body::-webkit-scrollbar {\n  width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-color-neutral-400);\n}\n\n/* ============================================\n   Form Structure\n   ============================================ */\n\n.content-section {\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid var(--mj-border-default);\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: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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(--mj-brand-primary);\n}\n\n.section-description {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\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/* ============================================\n   Form Fields\n   ============================================ */\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.field-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\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-textarea:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n  resize: vertical;\n  min-height: 100px;\n  line-height: 1.5;\n}\n\n.field-hint {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin-top: 0.25rem;\n}\n\n.field-error {\n  font-size: 0.75rem;\n  color: var(--mj-status-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   Alert Messages\n   ============================================ */\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1rem 1.25rem;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid;\n  font-size: 0.875rem;\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.alert strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n\n.alert p {\n  margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n  background: var(--mj-color-error-100);\n  border-color: var(--mj-status-error);\n  color: var(--mj-color-error-700);\n}\n\n.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n  background: var(--mj-color-warning-50);\n  border-color: var(--mj-color-warning-500);\n  color: var(--mj-color-warning-800);\n}\n\n.alert-warning i {\n  color: var(--mj-color-warning-500);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-primary);\n}\n\n.alert-info i {\n  color: var(--mj-brand-primary);\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(--mj-bg-surface-sunken);\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* ============================================\n   Buttons\n   ============================================ */\n\n.btn {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.btn-primary:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\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(--mj-bg-page);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-color-neutral-400);\n  box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-secondary:disabled {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\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: 1.25rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 0.8125rem;\n  }\n\n  .content-section {\n    padding: 1.25rem 1rem;\n  }\n\n  .section-title {\n    font-size: 1.125rem;\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\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 1.125rem;\n    gap: 0.5rem;\n  }\n\n  .dialog-title i {\n    font-size: 1rem;\n  }\n\n  .dialog-subtitle {\n    font-size: 0.75rem;\n    margin-top: 0.25rem;\n  }\n\n  .content-section {\n    padding: 1rem 0.75rem;\n  }\n\n  .section-title {\n    font-size: 1rem;\n    gap: 0.5rem;\n  }\n\n  .field-input,\n  .field-textarea {\n    padding: 0.75rem;\n    font-size: 0.875rem;\n  }\n\n  .modal-footer {\n    padding: 0.75rem;\n  }\n\n  .btn {\n    padding: 0.625rem 1.25rem;\n    font-size: 0.8125rem;\n  }\n}\n\n/* ============================================\n   Accessibility\n   ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n  outline: 2px solid var(--mj-brand-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(--mj-border-default);\n  }\n\n  .btn {\n    border: 2px solid currentColor;\n  }\n\n  .field-input,\n  .field-textarea {\n    border-width: 3px;\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: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"role-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts","../../../../src/lib/role-management/role-dialog/role-dialog.component.html"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"role-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts","../../../../src/lib/role-management/role-dialog/role-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, inject, HostListener, ViewEncapsulation, ChangeDetectorRef, NgZone } from '@angular/core';\n\nimport { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { Metadata } from '@memberjunction/core';\nimport { MJRoleEntity } from '@memberjunction/core-entities';\n\nexport interface RoleDialogData {\n role?: MJRoleEntity;\n mode: 'create' \| 'edit';\n}\n\nexport interface RoleDialogResult {\n action: 'save' \| 'cancel';\n role?: MJRoleEntity;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-role-dialog',\n encapsulation: ViewEncapsulation.None,\n templateUrl: './role-dialog.component.html',\n styleUrls: ['./role-dialog.component.css']\n})\nexport class RoleDialogComponent implements OnInit, OnDestroy, OnChanges {\n @Input() data: RoleDialogData \| null = null;\n @Input() visible = false;\n @Output() result = new EventEmitter<RoleDialogResult>();\n\n private fb = inject(FormBuilder);\n private cdr = inject(ChangeDetectorRef);\n private ngZone = inject(NgZone);\n private metadata = new Metadata();\n\n public roleForm: FormGroup;\n public isLoading = false;\n public error: string \| null = null;\n\n constructor() {\n this.roleForm = this.fb.group({\n name: ['', [Validators.required, Validators.maxLength(50)]],\n description: [''],\n directoryId: ['']\n });\n }\n\n ngOnInit(): void {\n // Initial setup\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] && this.data?.role && this.isEditMode) {\n this.loadRoleData();\n }\n \n // Reset form if switching to create mode or dialog becomes visible\n if (changes['visible'] && this.visible && !this.isEditMode) {\n this.resetForm();\n }\n }\n\n ngOnDestroy(): void {\n // Cleanup if needed\n }\n\n private resetForm(): void {\n this.roleForm.reset({\n name: '',\n description: '',\n directoryId: ''\n });\n this.error = null;\n }\n\n @HostListener('document:keydown.escape', ['$event'])\n onEscapeKey(event: Event): void {\n if (this.visible) {\n this.onCancel();\n }\n }\n\n public get windowTitle(): string {\n return this.isEditMode ? 'Edit Role' : 'Create New Role';\n }\n\n public get isEditMode(): boolean {\n return this.data?.mode === 'edit';\n }\n\n public get isSystemRole(): boolean {\n if (!this.data?.role) return false;\n const systemRoleNames = ['Administrator', 'User', 'Guest', 'Developer'];\n return systemRoleNames.includes(this.data.role.Name \|\| '');\n }\n\n private loadRoleData(): void {\n if (!this.data?.role) return;\n\n const role = this.data.role;\n this.roleForm.patchValue({\n name: role.Name,\n description: role.Description,\n directoryId: role.DirectoryID\n });\n\n // Disable name editing for system roles\n if (this.isSystemRole) {\n this.roleForm.get('name')?.disable();\n }\n }\n\n public async onSubmit(): Promise<void> {\n if (this.roleForm.invalid) {\n this.markFormGroupTouched(this.roleForm);\n return;\n }\n\n this.isLoading = true;\n this.error = null;\n\n try {\n let role: MJRoleEntity;\n\n if (this.isEditMode && this.data?.role) {\n // Edit existing role\n role = this.data.role;\n } else {\n // Create new role\n role = await this.metadata.GetEntityObject<MJRoleEntity>('MJ: Roles');\n role.NewRecord();\n }\n\n // Update role properties\n const formValue = this.roleForm.value;\n \n // Only update name if not a system role\n if (!this.isSystemRole) {\n role.Name = formValue.name;\n }\n \n role.Description = formValue.description;\n role.DirectoryID = formValue.directoryId \|\| null;\n\n // Save role\n const saveResult = await role.Save();\n if (!saveResult) {\n throw new Error(role.LatestResult?.Message \|\| 'Failed to save role');\n }\n\n this.result.emit({ action: 'save', role });\n\n } catch (error: unknown) {\n console.error('Error saving role:', error);\n this.ngZone.run(() => {\n this.error = error instanceof Error ? error.message : 'An unexpected error occurred';\n this.cdr.markForCheck();\n });\n } finally {\n this.ngZone.run(() => {\n this.isLoading = false;\n this.cdr.markForCheck();\n });\n }\n }\n\n public onCancel(): void {\n this.result.emit({ action: 'cancel' });\n }\n\n private markFormGroupTouched(formGroup: FormGroup): void {\n Object.keys(formGroup.controls).forEach(key => {\n const control = formGroup.get(key);\n control?.markAsTouched();\n });\n }\n}","<!-- 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-shield-halved\"></i>\n {{ isEditMode ? 'Edit Role' : 'Create New Role' }}\n </h2>\n <p class=\"dialog-subtitle\">\n {{ isEditMode ? 'Update role information and permissions' : 'Add a new role 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]=\"roleForm\" (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-shield-halved\"></i>\n Role Information\n </h3>\n <p class=\"section-description\">Define the role's basic properties and purpose</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label class=\"field-label required\" for=\"name\">Role Name</label>\n <input\n id=\"name\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"name\"\n placeholder=\"Sales Manager\"\n [class.error]=\"roleForm.get('name')?.invalid && roleForm.get('name')?.touched\"\n />\n @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n @if (roleForm.get('name')?.errors?.['required']) {\n Role name is required\n }\n @if (roleForm.get('name')?.errors?.['maxlength']) {\n Role name cannot exceed 50 characters\n }\n </div>\n }\n </div>\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"description\">Description</label>\n <textarea\n id=\"description\"\n class=\"field-textarea\"\n formControlName=\"description\"\n placeholder=\"Describe the role's purpose and responsibilities...\"\n rows=\"4\"\n ></textarea>\n <div class=\"field-hint\">\n Provide a clear description of what this role is for and what permissions it should have.\n </div>\n </div>\n @if (isEditMode) {\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"directoryId\">Directory ID</label>\n <input\n id=\"directoryId\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"directoryId\"\n placeholder=\"External directory identifier\"\n />\n <div class=\"field-hint\">\n External directory identifier for syncing with Active Directory or other systems.\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Role Type 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 Role Type\n </h3>\n <p class=\"section-description\">System or custom role classification</p>\n </div>\n <div class=\"form-grid\">\n @if (isSystemRole) {\n <div class=\"alert alert-warning\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n <div>\n <strong>System Role</strong>\n <p>This is a system-defined role. Some properties may be limited for editing to maintain system integrity.</p>\n </div>\n </div>\n } @else {\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-user-tag\"></i>\n <div>\n <strong>Custom Role</strong>\n <p>This is a custom role that can be fully configured and modified.</p>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Permissions Preview Section -->\n @if (isEditMode) {\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-key\"></i>\n Permissions\n </h3>\n <p class=\"section-description\">Manage role permissions and access rights</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <div>\n <strong>Permission Management</strong>\n <p>Role permissions can be managed in the <strong>Permissions</strong> tab of the settings dashboard. Use that interface to configure specific access rights for this role.</p>\n </div>\n </div>\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]=\"roleForm.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 Role' : 'Create Role' }}\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"]}