npm - @memberjunction/ng-explorer-settings - Versions diffs - 5.42.0 → 5.44.0 - Mend

@memberjunction/ng-explorer-settings 5.42.0 → 5.44.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 (55) hide show

package/dist/lib/user-app-config/user-app-config.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-app-config.component.js","sourceRoot":"","sources":["../../../src/lib/user-app-config/user-app-config.component.ts","../../../src/lib/user-app-config/user-app-config.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, inject } from '@angular/core';\nimport { Metadata, LogError, LogStatus, IMetadataProvider, LogStatusEx } from '@memberjunction/core';\nimport { MJUserApplicationEntity, UserInfoEngine } from '@memberjunction/core-entities';\nimport { ApplicationManager, BaseApplication } from '@memberjunction/ng-base-application';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n/*\n Represents an app item in the configuration UI\n /\ninterface AppConfigItem {\n app: BaseApplication;\n userAppId: string \| null;\n sequence: number;\n isActive: boolean;\n isDirty: boolean;\n}\n\n/\n Full-screen modal dialog for configuring user's application visibility and order.\n * Allows users to:\n * - Select which applications to show in the app switcher\n * - Reorder applications via drag-and-drop (desktop)\n * - Toggle apps on/off in a single list (mobile)\n /\n@Component({\n standalone: false,\n selector: 'mj-user-app-config',\n templateUrl: './user-app-config.component.html',\n styleUrls: ['./user-app-config.component.css']\n})\nexport class UserAppConfigComponent extends BaseAngularComponent {\n private appManager = inject(ApplicationManager);\n private sharedService = inject(SharedService);\n private cdr = inject(ChangeDetectorRef);\n private ngZone = inject(NgZone);\n private el = inject(ElementRef);\n\n private _showDialog = false;\n\n @Input()\n set ShowDialog(value: boolean) {\n if (value !== this._showDialog) {\n this._showDialog = value;\n }\n }\n get ShowDialog(): boolean {\n return this._showDialog;\n }\n\n @Output() ShowDialogChange = new EventEmitter<boolean>();\n @Output() ConfigSaved = new EventEmitter<void>();\n\n AllApps: AppConfigItem[] = [];\n ActiveApps: AppConfigItem[] = [];\n AvailableApps: AppConfigItem[] = [];\n\n IsLoading = false;\n IsSaving = false;\n ErrorMessage = '';\n\n AvailablePanelCollapsed = false;\n SelectedPanelCollapsed = false;\n\n DraggedItem: AppConfigItem \| null = null;\n DraggedIndex = -1;\n DropTargetIndex = -1;\n\n /\n Opens the dialog and loads user's app configuration\n /\n async Open(): Promise<void> {\n this._showDialog = true;\n this.ShowDialogChange.emit(true);\n this.ErrorMessage = '';\n await this.loadConfiguration();\n }\n\n /\n Closes the dialog without saving\n /\n Close(): void {\n this._showDialog = false;\n this.ShowDialogChange.emit(false);\n }\n\n /\n Adds an app to the user's active list\n /\n AddApp(item: AppConfigItem): void {\n item.isActive = true;\n item.sequence = this.ActiveApps.length;\n item.isDirty = true;\n this.refreshAppLists();\n }\n\n /\n Removes an app from the user's active list\n /\n RemoveApp(item: AppConfigItem): void {\n item.isActive = false;\n item.sequence = 999;\n item.isDirty = true;\n this.refreshAppLists();\n\n this.resequenceActiveApps();\n }\n\n /\n Toggles an app between active and inactive\n /\n ToggleApp(item: AppConfigItem): void {\n if (item.isActive) {\n this.RemoveApp(item);\n } else {\n this.AddApp(item);\n }\n }\n\n /\n Moves an app up in the order\n /\n MoveUp(item: AppConfigItem): void {\n const index = this.ActiveApps.indexOf(item);\n if (index > 0) {\n this.swapSequences(item, this.ActiveApps[index - 1]);\n this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);\n }\n }\n\n /\n Moves an app down in the order\n /\n MoveDown(item: AppConfigItem): void {\n const index = this.ActiveApps.indexOf(item);\n if (index < this.ActiveApps.length - 1) {\n this.swapSequences(item, this.ActiveApps[index + 1]);\n this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);\n }\n }\n\n /\n Checks if there are any unsaved changes\n /\n HasChanges(): boolean {\n return this.AllApps.some(item => item.isDirty);\n }\n\n /\n Saves the user's app configuration\n /\n async Save(): Promise<void> {\n if (!this.HasChanges()) {\n this.Close();\n return;\n }\n\n this.IsSaving = true;\n this.ErrorMessage = '';\n\n try {\n const md = this.ProviderToUse;\n\n for (const item of this.AllApps) {\n if (!item.isDirty) continue;\n\n if (item.userAppId) {\n await this.updateUserApplication(md, item);\n } else if (item.isActive) {\n await this.createUserApplication(md, item);\n }\n }\n\n // Each userApp.Save() above fires a BaseEntity 'save' event, which UserInfoEngine\n // catches via HandleIndividualBaseEntityEvent → debounced refresh → NotifyDataChange.\n // ApplicationManager.subscribeToEngineChanges then propagates to the shell app\n // switcher. No explicit reload needed here — and avoiding it sidesteps NG0100\n // from observable emissions interleaving with this method's save loop.\n LogStatusEx({\n message: 'User app configuration saved',\n verboseOnly: true \n });\n\n this.sharedService.CreateSimpleNotification('App configuration saved successfully!', 'success', 3000);\n this.ConfigSaved.emit();\n this.Close();\n\n } catch (error) {\n this.ErrorMessage = 'Failed to save configuration. Please try again.';\n LogError('Error saving app configuration:', undefined, error instanceof Error ? error.message : String(error));\n } finally {\n this.ngZone.run(() => {\n this.IsSaving = false;\n this.cdr.detectChanges();\n });\n }\n }\n\n /\n Resets all changes and reloads the configuration\n */\n async Reset(): Promise<void> {\n await this.loadConfiguration();\n }\n\n // ---------------------------------------------------------------------------\n // Drag-and-drop handlers (desktop only)\n // ---------------------------------------------------------------------------\n\n OnDragStart(event: DragEvent, item: AppConfigItem, index: number): void {\n this.DraggedItem = item;\n this.DraggedIndex = index;\n\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', index.toString());\n }\n }\n\n OnDragOver(event: DragEvent): void {\n event.preventDefault();\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = 'move';\n }\n }\n\n OnDragEnter(event: DragEvent, index: number): void {\n event.preventDefault();\n this.DropTargetIndex = index;\n }\n\n OnDragEnd(): void {\n this.DraggedItem = null;\n this.DraggedIndex = -1;\n this.DropTargetIndex = -1;\n }\n\n OnDrop(event: DragEvent): void {\n event.preventDefault();\n\n if (this.DraggedIndex >= 0 && this.DropTargetIndex >= 0 && this.DraggedIndex !== this.DropTargetIndex) {\n const [movedItem] = this.ActiveApps.splice(this.DraggedIndex, 1);\n this.ActiveApps.splice(this.DropTargetIndex, 0, movedItem);\n this.resequenceActiveApps();\n this.cdr.detectChanges();\n }\n\n this.OnDragEnd();\n }\n\n // ---------------------------------------------------------------------------\n // Touch drag-and-drop handlers (mobile)\n // ---------------------------------------------------------------------------\n\n TouchDragIndex = -1;\n TouchDropIndex = -1;\n TouchDragActive = false;\n\n private touchStartY = 0;\n private touchCurrentY = 0;\n private touchRowHeight = 0;\n private touchDragElement: HTMLElement \| null = null;\n private touchScrollContainer: HTMLElement \| null = null;\n\n OnTouchDragStart(event: TouchEvent, index: number): void {\n const touch = event.touches[0];\n const row = (event.target as HTMLElement).closest('.mobile-app-row') as HTMLElement \| null;\n if (!row) return;\n\n event.preventDefault();\n this.TouchDragIndex = index;\n this.TouchDropIndex = index;\n this.TouchDragActive = true;\n this.touchStartY = touch.clientY;\n this.touchCurrentY = touch.clientY;\n this.touchDragElement = row;\n this.touchRowHeight = row.offsetHeight;\n this.touchScrollContainer = this.el.nativeElement.querySelector('.mobile-list');\n\n row.classList.add('touch-dragging');\n }\n\n OnTouchDragMove(event: TouchEvent): void {\n if (!this.TouchDragActive \|\| !this.touchDragElement) return;\n\n event.preventDefault();\n const touch = event.touches[0];\n this.touchCurrentY = touch.clientY;\n const deltaY = this.touchCurrentY - this.touchStartY;\n\n this.touchDragElement.style.transform = `translateY(${deltaY}px)`;\n this.touchDragElement.style.zIndex = '100';\n\n this.updateTouchDropTarget(deltaY);\n this.autoScrollIfNeeded();\n }\n\n OnTouchDragEnd(): void {\n if (!this.TouchDragActive) return;\n\n if (this.touchDragElement) {\n this.touchDragElement.style.transform = '';\n this.touchDragElement.style.zIndex = '';\n this.touchDragElement.classList.remove('touch-dragging');\n }\n\n if (this.TouchDragIndex >= 0 && this.TouchDropIndex >= 0 && this.TouchDragIndex !== this.TouchDropIndex) {\n const [movedItem] = this.ActiveApps.splice(this.TouchDragIndex, 1);\n this.ActiveApps.splice(this.TouchDropIndex, 0, movedItem);\n this.resequenceActiveApps();\n }\n\n this.resetTouchDragState();\n this.cdr.detectChanges();\n }\n\n private updateTouchDropTarget(deltaY: number): void {\n const rowsToMove = Math.round(deltaY / this.touchRowHeight);\n const newIndex = Math.max(0, Math.min(this.ActiveApps.length - 1, this.TouchDragIndex + rowsToMove));\n this.TouchDropIndex = newIndex;\n }\n\n private autoScrollIfNeeded(): void {\n if (!this.touchScrollContainer) return;\n\n const rect = this.touchScrollContainer.getBoundingClientRect();\n const edgeZone = 40;\n\n if (this.touchCurrentY < rect.top + edgeZone) {\n this.touchScrollContainer.scrollTop -= 8;\n } else if (this.touchCurrentY > rect.bottom - edgeZone) {\n this.touchScrollContainer.scrollTop += 8;\n }\n }\n\n private resetTouchDragState(): void {\n this.TouchDragIndex = -1;\n this.TouchDropIndex = -1;\n this.TouchDragActive = false;\n this.touchDragElement = null;\n this.touchScrollContainer = null;\n }\n\n // ---------------------------------------------------------------------------\n // Private helpers\n // ---------------------------------------------------------------------------\n\n private async loadConfiguration(): Promise<void> {\n this.IsLoading = true;\n this.ErrorMessage = '';\n\n try {\n // Read directly from UserInfoEngine's cache. The engine already loaded\n // and maintains MJ: User Applications via its event-driven refresh — no\n // need to re-query the DB on every dialog open. EnsureLoaded is idempotent\n // and instant when the engine is already loaded (the typical case here,\n // since UserInfoEngine fires at startup).\n await UserInfoEngine.Instance.EnsureLoaded();\n const systemApps = this.appManager.GetAuthorizedSystemApps();\n const userApps = UserInfoEngine.Instance.UserApplications;\n this.AllApps = this.buildAppConfigItems(systemApps, userApps);\n this.refreshAppLists();\n\n } catch (error) {\n this.ErrorMessage = 'Failed to load app configuration. Please try again.';\n LogError('Error loading app configuration:', undefined, error instanceof Error ? error.message : String(error));\n } finally {\n this.ngZone.run(() => {\n this.IsLoading = false;\n this.cdr.detectChanges();\n });\n }\n }\n\n private buildAppConfigItems(systemApps: BaseApplication[], userApps: MJUserApplicationEntity[]): AppConfigItem[] {\n return systemApps.map(app => {\n const userApp = userApps.find(ua => UUIDsEqual(ua.ApplicationID, app.ID));\n return {\n app,\n userAppId: userApp?.ID ?? null,\n sequence: userApp?.Sequence ?? 999,\n isActive: userApp?.IsActive ?? false,\n isDirty: false\n };\n });\n }\n\n private refreshAppLists(): void {\n this.ActiveApps = this.AllApps\n .filter(item => item.isActive)\n .sort((a, b) => a.sequence - b.sequence);\n\n this.AvailableApps = this.AllApps\n .filter(item => !item.isActive)\n .sort((a, b) => a.app.Name.localeCompare(b.app.Name));\n }\n\n private resequenceActiveApps(): void {\n this.ActiveApps.forEach((item, index) => {\n if (item.sequence !== index) {\n item.sequence = index;\n item.isDirty = true;\n }\n });\n }\n\n private swapSequences(a: AppConfigItem, b: AppConfigItem): void {\n const tempSeq = a.sequence;\n a.sequence = b.sequence;\n b.sequence = tempSeq;\n a.isDirty = true;\n b.isDirty = true;\n }\n\n private async updateUserApplication(md: IMetadataProvider, item: AppConfigItem): Promise<void> {\n const userApp = await md.GetEntityObject<MJUserApplicationEntity>('MJ: User Applications');\n await userApp.Load(item.userAppId!);\n\n userApp.Sequence = item.sequence;\n userApp.IsActive = item.isActive;\n\n const saved = await userApp.Save();\n if (!saved) {\n throw new Error(`Failed to update UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);\n }\n\n item.isDirty = false;\n LogStatus(`Updated UserApplication for ${item.app.Name}: sequence=${item.sequence}, isActive=${item.isActive}`);\n }\n\n private async createUserApplication(md: IMetadataProvider, item: AppConfigItem): Promise<void> {\n const userApp = await md.GetEntityObject<MJUserApplicationEntity>('MJ: User Applications');\n userApp.NewRecord();\n\n userApp.UserID = md.CurrentUser.ID;\n userApp.ApplicationID = item.app.ID;\n userApp.Sequence = item.sequence;\n userApp.IsActive = item.isActive;\n\n const saved = await userApp.Save();\n if (!saved) {\n throw new Error(`Failed to create UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);\n }\n\n item.userAppId = userApp.ID;\n item.isDirty = false;\n LogStatus(`Created UserApplication for ${item.app.Name}: sequence=${item.sequence}`);\n }\n}\n","<!-- Modal Backdrop -->\n@if (ShowDialog) {\n <div class=\"modal-backdrop\" (click)=\"Close()\" role=\"presentation\"></div>\n <div\n class=\"modal-dialog full-screen-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"app-config-title\"\n >\n <!-- Dialog Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" id=\"app-config-title\">\n <i class=\"fa-solid fa-grid-2\" aria-hidden=\"true\"></i>\n Configure Apps\n </h2>\n <button\n class=\"modal-close\"\n (click)=\"Close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n <div class=\"app-config-container\">\n <!-- Loading State -->\n @if (IsLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading your app configuration...\" size=\"medium\"></mj-loading>\n </div>\n }\n\n <!-- Error Message -->\n @if (ErrorMessage) {\n <div class=\"error-message\" role=\"alert\">\n <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>\n <span>{{ ErrorMessage }}</span>\n </div>\n }\n\n <!-- Main Content -->\n @if (!IsLoading) {\n <div class=\"config-content\">\n <p class=\"config-description\">\n Select which applications appear in your app switcher and arrange them in your preferred order.\n Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n </p>\n\n <!-- Desktop: two-panel layout with drag-and-drop -->\n <div class=\"panels-container desktop-only\">\n <!-- Available Apps Panel -->\n <div class=\"panel available-apps-panel\" [class.collapsed]=\"AvailablePanelCollapsed\">\n <div class=\"panel-header\" (click)=\"AvailablePanelCollapsed = !AvailablePanelCollapsed\">\n <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n <h3>Available Applications</h3>\n <span class=\"badge\">{{ AvailableApps.length }}</span>\n <i\n class=\"collapse-toggle fa-solid\"\n [class.fa-chevron-down]=\"AvailablePanelCollapsed\"\n [class.fa-chevron-up]=\"!AvailablePanelCollapsed\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"panel-content\">\n @if (AvailableApps.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n <p>All applications added!</p>\n </div>\n }\n\n @for (item of AvailableApps; track item.app.ID) {\n <div class=\"available-app-item\" (dblclick)=\"AddApp(item)\">\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-info\">\n <span class=\"app-name\">{{ item.app.Name }}</span>\n @if (item.app.Description) {\n <span class=\"app-description\">{{ item.app.Description }}</span>\n }\n </div>\n\n <button\n mjButton variant=\"outline\" size=\"sm\"\n (click)=\"AddApp(item)\"\n title=\"Add to your apps\"\n [attr.aria-label]=\"'Add ' + item.app.Name\"\n >\n <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n Add\n </button>\n </div>\n }\n </div>\n </div>\n\n <!-- Selected Apps Panel -->\n <div class=\"panel selected-apps-panel\" [class.collapsed]=\"SelectedPanelCollapsed\">\n <div class=\"panel-header\" (click)=\"SelectedPanelCollapsed = !SelectedPanelCollapsed\">\n <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n <h3>Your Applications</h3>\n <span class=\"badge\">{{ ActiveApps.length }}</span>\n <i\n class=\"collapse-toggle fa-solid\"\n [class.fa-chevron-down]=\"SelectedPanelCollapsed\"\n [class.fa-chevron-up]=\"!SelectedPanelCollapsed\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"panel-content\">\n @if (ActiveApps.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox\" aria-hidden=\"true\"></i>\n <p>No applications selected</p>\n <p class=\"hint\">Add apps from the available list</p>\n </div>\n }\n\n @if (ActiveApps.length > 0) {\n <div\n class=\"sortable-list\"\n (dragover)=\"OnDragOver($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @for (item of ActiveApps; track item.app.ID; let i = $index) {\n <div\n class=\"app-item\"\n [class.dragging]=\"DraggedItem === item\"\n draggable=\"true\"\n (dragstart)=\"OnDragStart($event, item, i)\"\n (dragend)=\"OnDragEnd()\"\n (dragenter)=\"OnDragEnter($event, i)\"\n (dblclick)=\"RemoveApp(item); $event.stopPropagation()\"\n >\n <div class=\"app-item-content\" [style.border-left-color]=\"item.app.GetColor()\">\n <div class=\"drag-handle\">\n <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-info\">\n <span class=\"app-name\">{{ item.app.Name }}</span>\n @if (item.app.Description) {\n <span class=\"app-description\">{{ item.app.Description }}</span>\n }\n </div>\n\n <div class=\"app-actions\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n [disabled]=\"i === 0\"\n (click)=\"MoveUp(item); $event.stopPropagation()\"\n title=\"Move up\"\n [attr.aria-label]=\"'Move ' + item.app.Name + ' up'\"\n >\n <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n </button>\n <button\n mjButton variant=\"flat\" size=\"sm\"\n [disabled]=\"i === ActiveApps.length - 1\"\n (click)=\"MoveDown(item); $event.stopPropagation()\"\n title=\"Move down\"\n [attr.aria-label]=\"'Move ' + item.app.Name + ' down'\"\n >\n <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"RemoveApp(item); $event.stopPropagation()\"\n title=\"Remove from your apps\"\n [attr.aria-label]=\"'Remove ' + item.app.Name\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Mobile: single list with toggles + touch drag reorder -->\n <div\n class=\"mobile-view\"\n (touchmove)=\"OnTouchDragMove($event)\"\n (touchend)=\"OnTouchDragEnd()\"\n (touchcancel)=\"OnTouchDragEnd()\"\n >\n <div class=\"mobile-list\">\n @if (ActiveApps.length > 0) {\n <div class=\"mobile-section-label\">Your Apps</div>\n @for (item of ActiveApps; track item.app.ID; let i = $index) {\n @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex > i) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n <div\n class=\"mobile-app-row\"\n [class.touch-ghost]=\"TouchDragActive && TouchDragIndex === i\"\n >\n <div\n class=\"mobile-drag-handle\"\n (touchstart)=\"OnTouchDragStart($event, i)\"\n aria-label=\"Drag to reorder\"\n >\n <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n <button\n class=\"mobile-toggle on\"\n (click)=\"ToggleApp(item)\"\n aria-label=\"Remove {{ item.app.Name }}\"\n >\n <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n </button>\n </div>\n @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex < i) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n }\n @if (TouchDragActive && TouchDropIndex === ActiveApps.length - 1 && TouchDragIndex < TouchDropIndex) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n }\n\n @if (AvailableApps.length > 0) {\n <div class=\"mobile-section-label\">Available</div>\n @for (item of AvailableApps; track item.app.ID) {\n <div class=\"mobile-app-row inactive\">\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n <button\n class=\"mobile-toggle off\"\n (click)=\"ToggleApp(item)\"\n aria-label=\"Add {{ item.app.Name }}\"\n >\n <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n </button>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Footer Actions -->\n <div class=\"dialog-footer\">\n <div class=\"footer-left\">\n @if (HasChanges()) {\n <button\n mjButton\n (click)=\"Reset()\"\n [disabled]=\"IsLoading \|\| IsSaving\"\n >\n <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n Reset Changes\n </button>\n }\n </div>\n <div class=\"footer-right\">\n <button\n mjButton variant=\"primary\"\n (click)=\"Save()\"\n [disabled]=\"IsLoading \|\| IsSaving \|\| !HasChanges()\"\n >\n @if (IsSaving) {\n <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n <span>Saving...</span>\n } @else {\n <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n <span>Save Changes</span>\n }\n </button>\n <button\n mjButton\n (click)=\"Close()\"\n [disabled]=\"IsSaving\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n}\n"]}
1	+ {"version":3,"file":"user-app-config.component.js","sourceRoot":"","sources":["../../../src/lib/user-app-config/user-app-config.component.ts","../../../src/lib/user-app-config/user-app-config.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, inject } from '@angular/core';\nimport { Metadata, LogError, LogStatus, IMetadataProvider, LogStatusEx } from '@memberjunction/core';\nimport { MJUserApplicationEntity, UserInfoEngine } from '@memberjunction/core-entities';\nimport { ApplicationManager, BaseApplication } from '@memberjunction/ng-base-application';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n/*\n Represents an app item in the configuration UI\n /\ninterface AppConfigItem {\n app: BaseApplication;\n userAppId: string \| null;\n sequence: number;\n isActive: boolean;\n isDirty: boolean;\n}\n\n/\n Full-screen modal dialog for configuring user's application visibility and order.\n * Allows users to:\n * - Select which applications to show in the app switcher\n * - Reorder applications via drag-and-drop (desktop)\n * - Toggle apps on/off in a single list (mobile)\n /\n@Component({\n standalone: false,\n selector: 'mj-user-app-config',\n templateUrl: './user-app-config.component.html',\n styleUrls: ['./user-app-config.component.css']\n})\nexport class UserAppConfigComponent extends BaseAngularComponent {\n private appManager = inject(ApplicationManager);\n private sharedService = inject(SharedService);\n private cdr = inject(ChangeDetectorRef);\n private ngZone = inject(NgZone);\n private el = inject(ElementRef);\n\n private _showDialog = false;\n\n @Input()\n set ShowDialog(value: boolean) {\n if (value !== this._showDialog) {\n this._showDialog = value;\n }\n }\n get ShowDialog(): boolean {\n return this._showDialog;\n }\n\n @Output() ShowDialogChange = new EventEmitter<boolean>();\n @Output() ConfigSaved = new EventEmitter<void>();\n\n AllApps: AppConfigItem[] = [];\n ActiveApps: AppConfigItem[] = [];\n AvailableApps: AppConfigItem[] = [];\n\n IsLoading = false;\n IsSaving = false;\n ErrorMessage = '';\n\n AvailablePanelCollapsed = false;\n SelectedPanelCollapsed = false;\n\n DraggedItem: AppConfigItem \| null = null;\n DraggedIndex = -1;\n DropTargetIndex = -1;\n\n /\n Opens the dialog and loads user's app configuration\n /\n async Open(): Promise<void> {\n this._showDialog = true;\n this.ShowDialogChange.emit(true);\n this.ErrorMessage = '';\n await this.loadConfiguration();\n }\n\n /\n Closes the dialog without saving\n /\n Close(): void {\n this._showDialog = false;\n this.ShowDialogChange.emit(false);\n }\n\n /\n Adds an app to the user's active list\n /\n AddApp(item: AppConfigItem): void {\n item.isActive = true;\n item.sequence = this.ActiveApps.length;\n item.isDirty = true;\n this.refreshAppLists();\n }\n\n /\n Removes an app from the user's active list\n /\n RemoveApp(item: AppConfigItem): void {\n item.isActive = false;\n item.sequence = 999;\n item.isDirty = true;\n this.refreshAppLists();\n\n this.resequenceActiveApps();\n }\n\n /\n Toggles an app between active and inactive\n /\n ToggleApp(item: AppConfigItem): void {\n if (item.isActive) {\n this.RemoveApp(item);\n } else {\n this.AddApp(item);\n }\n }\n\n /\n Moves an app up in the order\n /\n MoveUp(item: AppConfigItem): void {\n const index = this.ActiveApps.indexOf(item);\n if (index > 0) {\n this.swapSequences(item, this.ActiveApps[index - 1]);\n this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);\n }\n }\n\n /\n Moves an app down in the order\n /\n MoveDown(item: AppConfigItem): void {\n const index = this.ActiveApps.indexOf(item);\n if (index < this.ActiveApps.length - 1) {\n this.swapSequences(item, this.ActiveApps[index + 1]);\n this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);\n }\n }\n\n /\n Checks if there are any unsaved changes\n /\n HasChanges(): boolean {\n return this.AllApps.some(item => item.isDirty);\n }\n\n /\n Saves the user's app configuration\n /\n async Save(): Promise<void> {\n if (!this.HasChanges()) {\n this.Close();\n return;\n }\n\n this.IsSaving = true;\n this.ErrorMessage = '';\n\n try {\n const md = this.ProviderToUse;\n\n for (const item of this.AllApps) {\n if (!item.isDirty) continue;\n\n if (item.userAppId) {\n await this.updateUserApplication(md, item);\n } else if (item.isActive) {\n await this.createUserApplication(md, item);\n }\n }\n\n // Each userApp.Save() above fires a BaseEntity 'save' event, which UserInfoEngine\n // catches via HandleIndividualBaseEntityEvent → debounced refresh → NotifyDataChange.\n // ApplicationManager.subscribeToEngineChanges then propagates to the shell app\n // switcher. No explicit reload needed here — and avoiding it sidesteps NG0100\n // from observable emissions interleaving with this method's save loop.\n LogStatusEx({\n message: 'User app configuration saved',\n verboseOnly: true \n });\n\n this.sharedService.CreateSimpleNotification('App configuration saved successfully!', 'success', 3000);\n this.ConfigSaved.emit();\n this.Close();\n\n } catch (error) {\n this.ErrorMessage = 'Failed to save configuration. Please try again.';\n LogError('Error saving app configuration:', undefined, error instanceof Error ? error.message : String(error));\n } finally {\n this.ngZone.run(() => {\n this.IsSaving = false;\n this.cdr.detectChanges();\n });\n }\n }\n\n /\n Resets all changes and reloads the configuration\n */\n async Reset(): Promise<void> {\n await this.loadConfiguration();\n }\n\n // ---------------------------------------------------------------------------\n // Drag-and-drop handlers (desktop only)\n // ---------------------------------------------------------------------------\n\n OnDragStart(event: DragEvent, item: AppConfigItem, index: number): void {\n this.DraggedItem = item;\n this.DraggedIndex = index;\n\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', index.toString());\n }\n }\n\n OnDragOver(event: DragEvent): void {\n event.preventDefault();\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = 'move';\n }\n }\n\n OnDragEnter(event: DragEvent, index: number): void {\n event.preventDefault();\n this.DropTargetIndex = index;\n }\n\n OnDragEnd(): void {\n this.DraggedItem = null;\n this.DraggedIndex = -1;\n this.DropTargetIndex = -1;\n }\n\n OnDrop(event: DragEvent): void {\n event.preventDefault();\n\n if (this.DraggedIndex >= 0 && this.DropTargetIndex >= 0 && this.DraggedIndex !== this.DropTargetIndex) {\n const [movedItem] = this.ActiveApps.splice(this.DraggedIndex, 1);\n this.ActiveApps.splice(this.DropTargetIndex, 0, movedItem);\n this.resequenceActiveApps();\n this.cdr.detectChanges();\n }\n\n this.OnDragEnd();\n }\n\n // ---------------------------------------------------------------------------\n // Touch drag-and-drop handlers (mobile)\n // ---------------------------------------------------------------------------\n\n TouchDragIndex = -1;\n TouchDropIndex = -1;\n TouchDragActive = false;\n\n private touchStartY = 0;\n private touchCurrentY = 0;\n private touchRowHeight = 0;\n private touchDragElement: HTMLElement \| null = null;\n private touchScrollContainer: HTMLElement \| null = null;\n\n OnTouchDragStart(event: TouchEvent, index: number): void {\n const touch = event.touches[0];\n const row = (event.target as HTMLElement).closest('.mobile-app-row') as HTMLElement \| null;\n if (!row) return;\n\n event.preventDefault();\n this.TouchDragIndex = index;\n this.TouchDropIndex = index;\n this.TouchDragActive = true;\n this.touchStartY = touch.clientY;\n this.touchCurrentY = touch.clientY;\n this.touchDragElement = row;\n this.touchRowHeight = row.offsetHeight;\n this.touchScrollContainer = this.el.nativeElement.querySelector('.mobile-list');\n\n row.classList.add('touch-dragging');\n }\n\n OnTouchDragMove(event: TouchEvent): void {\n if (!this.TouchDragActive \|\| !this.touchDragElement) return;\n\n event.preventDefault();\n const touch = event.touches[0];\n this.touchCurrentY = touch.clientY;\n const deltaY = this.touchCurrentY - this.touchStartY;\n\n this.touchDragElement.style.transform = `translateY(${deltaY}px)`;\n this.touchDragElement.style.zIndex = '100';\n\n this.updateTouchDropTarget(deltaY);\n this.autoScrollIfNeeded();\n }\n\n OnTouchDragEnd(): void {\n if (!this.TouchDragActive) return;\n\n if (this.touchDragElement) {\n this.touchDragElement.style.transform = '';\n this.touchDragElement.style.zIndex = '';\n this.touchDragElement.classList.remove('touch-dragging');\n }\n\n if (this.TouchDragIndex >= 0 && this.TouchDropIndex >= 0 && this.TouchDragIndex !== this.TouchDropIndex) {\n const [movedItem] = this.ActiveApps.splice(this.TouchDragIndex, 1);\n this.ActiveApps.splice(this.TouchDropIndex, 0, movedItem);\n this.resequenceActiveApps();\n }\n\n this.resetTouchDragState();\n this.cdr.detectChanges();\n }\n\n private updateTouchDropTarget(deltaY: number): void {\n const rowsToMove = Math.round(deltaY / this.touchRowHeight);\n const newIndex = Math.max(0, Math.min(this.ActiveApps.length - 1, this.TouchDragIndex + rowsToMove));\n this.TouchDropIndex = newIndex;\n }\n\n private autoScrollIfNeeded(): void {\n if (!this.touchScrollContainer) return;\n\n const rect = this.touchScrollContainer.getBoundingClientRect();\n const edgeZone = 40;\n\n if (this.touchCurrentY < rect.top + edgeZone) {\n this.touchScrollContainer.scrollTop -= 8;\n } else if (this.touchCurrentY > rect.bottom - edgeZone) {\n this.touchScrollContainer.scrollTop += 8;\n }\n }\n\n private resetTouchDragState(): void {\n this.TouchDragIndex = -1;\n this.TouchDropIndex = -1;\n this.TouchDragActive = false;\n this.touchDragElement = null;\n this.touchScrollContainer = null;\n }\n\n // ---------------------------------------------------------------------------\n // Private helpers\n // ---------------------------------------------------------------------------\n\n private async loadConfiguration(): Promise<void> {\n this.IsLoading = true;\n this.ErrorMessage = '';\n\n try {\n // Read directly from UserInfoEngine's cache. The engine already loaded\n // and maintains MJ: User Applications via its event-driven refresh — no\n // need to re-query the DB on every dialog open. EnsureLoaded is idempotent\n // and instant when the engine is already loaded (the typical case here,\n // since UserInfoEngine fires at startup).\n await UserInfoEngine.Instance.EnsureLoaded();\n const systemApps = this.appManager.GetAuthorizedSystemApps();\n const userApps = UserInfoEngine.Instance.UserApplications;\n this.AllApps = this.buildAppConfigItems(systemApps, userApps);\n this.refreshAppLists();\n\n } catch (error) {\n this.ErrorMessage = 'Failed to load app configuration. Please try again.';\n LogError('Error loading app configuration:', undefined, error instanceof Error ? error.message : String(error));\n } finally {\n this.ngZone.run(() => {\n this.IsLoading = false;\n this.cdr.detectChanges();\n });\n }\n }\n\n private buildAppConfigItems(systemApps: BaseApplication[], userApps: MJUserApplicationEntity[]): AppConfigItem[] {\n return systemApps.map(app => {\n const userApp = userApps.find(ua => UUIDsEqual(ua.ApplicationID, app.ID));\n return {\n app,\n userAppId: userApp?.ID ?? null,\n sequence: userApp?.Sequence ?? 999,\n isActive: userApp?.IsActive ?? false,\n isDirty: false\n };\n });\n }\n\n private refreshAppLists(): void {\n this.ActiveApps = this.AllApps\n .filter(item => item.isActive)\n .sort((a, b) => a.sequence - b.sequence);\n\n this.AvailableApps = this.AllApps\n .filter(item => !item.isActive)\n .sort((a, b) => a.app.Name.localeCompare(b.app.Name));\n }\n\n private resequenceActiveApps(): void {\n this.ActiveApps.forEach((item, index) => {\n if (item.sequence !== index) {\n item.sequence = index;\n item.isDirty = true;\n }\n });\n }\n\n private swapSequences(a: AppConfigItem, b: AppConfigItem): void {\n const tempSeq = a.sequence;\n a.sequence = b.sequence;\n b.sequence = tempSeq;\n a.isDirty = true;\n b.isDirty = true;\n }\n\n private async updateUserApplication(md: IMetadataProvider, item: AppConfigItem): Promise<void> {\n const userApp = await md.GetEntityObject<MJUserApplicationEntity>('MJ: User Applications');\n await userApp.Load(item.userAppId!);\n\n userApp.Sequence = item.sequence;\n userApp.IsActive = item.isActive;\n\n const saved = await userApp.Save();\n if (!saved) {\n throw new Error(`Failed to update UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);\n }\n\n item.isDirty = false;\n LogStatus(`Updated UserApplication for ${item.app.Name}: sequence=${item.sequence}, isActive=${item.isActive}`);\n }\n\n private async createUserApplication(md: IMetadataProvider, item: AppConfigItem): Promise<void> {\n const userApp = await md.GetEntityObject<MJUserApplicationEntity>('MJ: User Applications');\n userApp.NewRecord();\n\n userApp.UserID = md.CurrentUser.ID;\n userApp.ApplicationID = item.app.ID;\n userApp.Sequence = item.sequence;\n userApp.IsActive = item.isActive;\n\n const saved = await userApp.Save();\n if (!saved) {\n throw new Error(`Failed to create UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);\n }\n\n item.userAppId = userApp.ID;\n item.isDirty = false;\n LogStatus(`Created UserApplication for ${item.app.Name}: sequence=${item.sequence}`);\n }\n}\n","<!-- Modal Backdrop -->\n@if (ShowDialog) {\n <div class=\"modal-backdrop\" (click)=\"Close()\" role=\"presentation\"></div>\n <div\n class=\"modal-dialog full-screen-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"app-config-title\"\n >\n <!-- Dialog Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" id=\"app-config-title\">\n <i class=\"fa-solid fa-grid-2\" aria-hidden=\"true\"></i>\n Configure Apps\n </h2>\n <button\n class=\"modal-close\"\n (click)=\"Close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n <div class=\"app-config-container\">\n <!-- Loading State -->\n @if (IsLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading your app configuration...\" size=\"medium\"></mj-loading>\n </div>\n }\n\n <!-- Error Message -->\n @if (ErrorMessage) {\n <mj-alert Variant=\"error\">{{ ErrorMessage }}</mj-alert>\n }\n\n <!-- Main Content -->\n @if (!IsLoading) {\n <div class=\"config-content\">\n <p class=\"config-description\">\n Select which applications appear in your app switcher and arrange them in your preferred order.\n Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n </p>\n\n <!-- Desktop: two-panel layout with drag-and-drop -->\n <div class=\"panels-container desktop-only\">\n <!-- Available Apps Panel -->\n <div class=\"panel available-apps-panel\" [class.collapsed]=\"AvailablePanelCollapsed\">\n <div class=\"panel-header\" (click)=\"AvailablePanelCollapsed = !AvailablePanelCollapsed\">\n <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n <h3>Available Applications</h3>\n <span class=\"badge\">{{ AvailableApps.length }}</span>\n <i\n class=\"collapse-toggle fa-solid\"\n [class.fa-chevron-down]=\"AvailablePanelCollapsed\"\n [class.fa-chevron-up]=\"!AvailablePanelCollapsed\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"panel-content\">\n @if (AvailableApps.length === 0) {\n <mj-empty-state\n Size=\"compact\"\n Icon=\"fa-solid fa-check-double\"\n Title=\"All applications added!\" />\n }\n\n @for (item of AvailableApps; track item.app.ID) {\n <div class=\"available-app-item\" (dblclick)=\"AddApp(item)\">\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-info\">\n <span class=\"app-name\">{{ item.app.Name }}</span>\n @if (item.app.Description) {\n <span class=\"app-description\">{{ item.app.Description }}</span>\n }\n </div>\n\n <button\n mjButton variant=\"outline\" size=\"sm\"\n (click)=\"AddApp(item)\"\n title=\"Add to your apps\"\n [attr.aria-label]=\"'Add ' + item.app.Name\"\n >\n <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n Add\n </button>\n </div>\n }\n </div>\n </div>\n\n <!-- Selected Apps Panel -->\n <div class=\"panel selected-apps-panel\" [class.collapsed]=\"SelectedPanelCollapsed\">\n <div class=\"panel-header\" (click)=\"SelectedPanelCollapsed = !SelectedPanelCollapsed\">\n <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n <h3>Your Applications</h3>\n <span class=\"badge\">{{ ActiveApps.length }}</span>\n <i\n class=\"collapse-toggle fa-solid\"\n [class.fa-chevron-down]=\"SelectedPanelCollapsed\"\n [class.fa-chevron-up]=\"!SelectedPanelCollapsed\"\n aria-hidden=\"true\"\n ></i>\n </div>\n\n <div class=\"panel-content\">\n @if (ActiveApps.length === 0) {\n <mj-empty-state\n Size=\"compact\"\n Icon=\"fa-solid fa-inbox\"\n Title=\"No applications selected\"\n Message=\"Add apps from the available list\" />\n }\n\n @if (ActiveApps.length > 0) {\n <div\n class=\"sortable-list\"\n (dragover)=\"OnDragOver($event)\"\n (drop)=\"OnDrop($event)\"\n >\n @for (item of ActiveApps; track item.app.ID; let i = $index) {\n <div\n class=\"app-item\"\n [class.dragging]=\"DraggedItem === item\"\n draggable=\"true\"\n (dragstart)=\"OnDragStart($event, item, i)\"\n (dragend)=\"OnDragEnd()\"\n (dragenter)=\"OnDragEnter($event, i)\"\n (dblclick)=\"RemoveApp(item); $event.stopPropagation()\"\n >\n <div class=\"app-item-content\" [style.border-left-color]=\"item.app.GetColor()\">\n <div class=\"drag-handle\">\n <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"app-info\">\n <span class=\"app-name\">{{ item.app.Name }}</span>\n @if (item.app.Description) {\n <span class=\"app-description\">{{ item.app.Description }}</span>\n }\n </div>\n\n <div class=\"app-actions\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n [disabled]=\"i === 0\"\n (click)=\"MoveUp(item); $event.stopPropagation()\"\n title=\"Move up\"\n [attr.aria-label]=\"'Move ' + item.app.Name + ' up'\"\n >\n <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n </button>\n <button\n mjButton variant=\"flat\" size=\"sm\"\n [disabled]=\"i === ActiveApps.length - 1\"\n (click)=\"MoveDown(item); $event.stopPropagation()\"\n title=\"Move down\"\n [attr.aria-label]=\"'Move ' + item.app.Name + ' down'\"\n >\n <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"RemoveApp(item); $event.stopPropagation()\"\n title=\"Remove from your apps\"\n [attr.aria-label]=\"'Remove ' + item.app.Name\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Mobile: single list with toggles + touch drag reorder -->\n <div\n class=\"mobile-view\"\n (touchmove)=\"OnTouchDragMove($event)\"\n (touchend)=\"OnTouchDragEnd()\"\n (touchcancel)=\"OnTouchDragEnd()\"\n >\n <div class=\"mobile-list\">\n @if (ActiveApps.length > 0) {\n <div class=\"mobile-section-label\">Your Apps</div>\n @for (item of ActiveApps; track item.app.ID; let i = $index) {\n @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex > i) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n <div\n class=\"mobile-app-row\"\n [class.touch-ghost]=\"TouchDragActive && TouchDragIndex === i\"\n >\n <div\n class=\"mobile-drag-handle\"\n (touchstart)=\"OnTouchDragStart($event, i)\"\n aria-label=\"Drag to reorder\"\n >\n <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n <button\n class=\"mobile-toggle on\"\n (click)=\"ToggleApp(item)\"\n aria-label=\"Remove {{ item.app.Name }}\"\n >\n <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n </button>\n </div>\n @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex < i) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n }\n @if (TouchDragActive && TouchDropIndex === ActiveApps.length - 1 && TouchDragIndex < TouchDropIndex) {\n <div class=\"mobile-drop-indicator\"></div>\n }\n }\n\n @if (AvailableApps.length > 0) {\n <div class=\"mobile-section-label\">Available</div>\n @for (item of AvailableApps; track item.app.ID) {\n <div class=\"mobile-app-row inactive\">\n <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n <i [class]=\"item.app.Icon \|\| 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n </div>\n <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n <button\n class=\"mobile-toggle off\"\n (click)=\"ToggleApp(item)\"\n aria-label=\"Add {{ item.app.Name }}\"\n >\n <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n </button>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Footer Actions -->\n <div class=\"dialog-footer\">\n <div class=\"footer-left\">\n @if (HasChanges()) {\n <button\n mjButton\n (click)=\"Reset()\"\n [disabled]=\"IsLoading \|\| IsSaving\"\n >\n <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n Reset Changes\n </button>\n }\n </div>\n <div class=\"footer-right\">\n <button\n mjButton variant=\"primary\"\n (click)=\"Save()\"\n [disabled]=\"IsLoading \|\| IsSaving \|\| !HasChanges()\"\n >\n @if (IsSaving) {\n <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n <span>Saving...</span>\n } @else {\n <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n <span>Save Changes</span>\n }\n </button>\n <button\n mjButton\n (click)=\"Close()\"\n [disabled]=\"IsSaving\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n}\n"]}

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

@@ -4,17 +4,16 @@ import { RunView } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.ID;
 function UserDialogComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 48);
-    i0.ɵɵelement(2, "i", 49);
-    i0.ɵɵelementStart(3, "div");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "mj-alert", 48);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.error);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Message", ctx_r1.error);
 } }
 function UserDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Username/Email is required ");
@@ -24,7 +23,7 @@ function UserDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template
 } }
 function UserDialogComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵconditionalCreate(2, UserDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template, 1, 0);
     i0.ɵɵconditionalCreate(3, UserDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
@@ -45,7 +44,7 @@ function UserDialogComponent_Conditional_0_Conditional_41_Conditional_3_Template
 } }
 function UserDialogComponent_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵconditionalCreate(2, UserDialogComponent_Conditional_0_Conditional_41_Conditional_2_Template, 1, 0);
     i0.ɵɵconditionalCreate(3, UserDialogComponent_Conditional_0_Conditional_41_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
@@ -59,7 +58,7 @@ function UserDialogComponent_Conditional_0_Conditional_41_Template(rf, ctx) { if
     i0.ɵɵconditional(((tmp_3_0 = ctx_r1.userForm.get("email")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["email"]) ? 3 : -1);
 } }
 function UserDialogComponent_Conditional_0_For_84_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 57);
+    i0.ɵɵelementStart(0, "p", 56);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -69,18 +68,18 @@ function UserDialogComponent_Conditional_0_For_84_Conditional_9_Template(rf, ctx
 } }
 function UserDialogComponent_Conditional_0_For_84_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelementStart(0, "div", 50);
     i0.ɵɵlistener("click", function UserDialogComponent_Conditional_0_For_84_Template_div_click_0_listener() { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleRole(role_r4.ID)); });
-    i0.ɵɵelementStart(1, "div", 52)(2, "div", 37)(3, "input", 53);
+    i0.ɵɵelementStart(1, "div", 51)(2, "div", 37)(3, "input", 52);
     i0.ɵɵlistener("change", function UserDialogComponent_Conditional_0_For_84_Template_input_change_3_listener($event) { const role_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRoleToggle(role_r4.ID, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "label", 54);
+    i0.ɵɵelementStart(4, "label", 53);
     i0.ɵɵelement(5, "div", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 55)(7, "h4", 56);
+    i0.ɵɵelementStart(6, "div", 54)(7, "h4", 55);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, UserDialogComponent_Conditional_0_For_84_Conditional_9_Template, 2, 1, "p", 57);
+    i0.ɵɵconditionalCreate(9, UserDialogComponent_Conditional_0_For_84_Conditional_9_Template, 2, 1, "p", 56);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const role_r4 = ctx.$implicit;
@@ -96,11 +95,11 @@ function UserDialogComponent_Conditional_0_For_84_Template(rf, ctx) { if (rf & 1
     i0.ɵɵconditional(role_r4.Description ? 9 : -1);
 } }
 function UserDialogComponent_Conditional_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+    i0.ɵɵelement(0, "i", 57);
     i0.ɵɵtext(1, " Saving... ");
 } }
 function UserDialogComponent_Conditional_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 59);
+    i0.ɵɵelement(0, "i", 58);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -126,7 +125,7 @@ function UserDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(11, "div", 10)(12, "form", 11);
     i0.ɵɵlistener("ngSubmit", function UserDialogComponent_Conditional_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
-    i0.ɵɵconditionalCreate(13, UserDialogComponent_Conditional_0_Conditional_13_Template, 5, 1, "div", 12);
+    i0.ɵɵconditionalCreate(13, UserDialogComponent_Conditional_0_Conditional_13_Template, 2, 1, "div", 12);
     i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "h3", 15);
     i0.ɵɵelement(18, "i", 16);
     i0.ɵɵtext(19, " Basic Information ");
@@ -455,15 +454,15 @@ export class UserDialogComponent extends BaseAngularComponent {
     static ɵfac = function UserDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDialogComponent, selectors: [["mj-user-dialog"]], hostBindings: function UserDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function UserDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-user"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-id-card"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "email", "formControlName", "name", "placeholder", "john@company.com", 1, "field-input"], [1, "field-error"], [1, "form-row"], ["for", "firstName", 1, "field-label"], ["id", "firstName", "type", "text", "formControlName", "firstName", "placeholder", "John", 1, "field-input"], ["for", "lastName", 1, "field-label"], ["id", "lastName", "type", "text", "formControlName", "lastName", "placeholder", "Doe", 1, "field-input"], ["for", "email", 1, "field-label", "required"], ["id", "email", "type", "email", "formControlName", "email", "placeholder", "john@company.com", 1, "field-input"], ["for", "title", 1, "field-label"], ["id", "title", "type", "text", "formControlName", "title", "placeholder", "Software Engineer", 1, "field-input"], [1, "fa-solid", "fa-cog"], ["for", "type", 1, "field-label"], ["id", "type", "formControlName", "type", 1, "field-select"], ["value", "User"], ["value", "Owner"], [1, "checkbox-field"], ["id", "isActive", "type", "checkbox", "formControlName", "isActive", 1, "checkbox-input"], ["for", "isActive", 1, "checkbox-label"], [1, "checkbox-indicator"], [2, "font-size", "12px", "color", "var(--md-on-surface-variant)", "margin-top", "2px"], [1, "fa-solid", "fa-user-tag"], [1, "roles-grid"], [1, "role-card", 3, "selected"], [1, "modal-footer"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-exclamation-circle"], [1, "role-card", 3, "click"], [1, "role-content"], ["type", "checkbox", 1, "checkbox-input", 3, "change", "id", "checked"], [1, "checkbox-label", 3, "for"], [1, "role-info"], [1, "role-name"], [1, "role-description"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function UserDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-user"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-id-card"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "email", "formControlName", "name", "placeholder", "john@company.com", 1, "field-input"], [1, "field-error"], [1, "form-row"], ["for", "firstName", 1, "field-label"], ["id", "firstName", "type", "text", "formControlName", "firstName", "placeholder", "John", 1, "field-input"], ["for", "lastName", 1, "field-label"], ["id", "lastName", "type", "text", "formControlName", "lastName", "placeholder", "Doe", 1, "field-input"], ["for", "email", 1, "field-label", "required"], ["id", "email", "type", "email", "formControlName", "email", "placeholder", "john@company.com", 1, "field-input"], ["for", "title", 1, "field-label"], ["id", "title", "type", "text", "formControlName", "title", "placeholder", "Software Engineer", 1, "field-input"], [1, "fa-solid", "fa-cog"], ["for", "type", 1, "field-label"], ["id", "type", "formControlName", "type", 1, "field-select"], ["value", "User"], ["value", "Owner"], [1, "checkbox-field"], ["id", "isActive", "type", "checkbox", "formControlName", "isActive", 1, "checkbox-input"], ["for", "isActive", 1, "checkbox-label"], [1, "checkbox-indicator"], [2, "font-size", "12px", "color", "var(--md-on-surface-variant)", "margin-top", "2px"], [1, "fa-solid", "fa-user-tag"], [1, "roles-grid"], [1, "role-card", 3, "selected"], [1, "modal-footer"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], ["Variant", "error", 3, "Message"], [1, "fa-solid", "fa-exclamation-circle"], [1, "role-card", 3, "click"], [1, "role-content"], ["type", "checkbox", 1, "checkbox-input", 3, "change", "id", "checked"], [1, "checkbox-label", 3, "for"], [1, "role-info"], [1, "role-name"], [1, "role-description"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function UserDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, UserDialogComponent_Conditional_0_Template, 92, 12, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible ? 0 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName], styles: ["/* ============================================\n   User 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: 900px;\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--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.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields\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-select {\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-select:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-select: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-select: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-select.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: 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   Checkboxes\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   Alert Messages\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/* Error Alert (Red) */\n.alert-error {\n  background: var(--mj-color-error-100);\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* ============================================\n   Modal Footer (Buttons)\n   ============================================ */\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  background: var(--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  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 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-select {\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-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"], encapsulation: 2 });
+        } }, dependencies: [i1.ɵNgNoValidate, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.MJAlertComponent], styles: ["/* ============================================\n   User 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: 900px;\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--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.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields\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-select {\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-select:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.field-input:disabled,\n.field-select: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-select.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  --mj-ring-color: var(--mj-status-error);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: 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   Checkboxes\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: var(--mj-focus-ring);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   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  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 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-select {\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-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-user-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header with MJ Blue -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-user\"></i>\n            {{ isEditMode ? 'Edit User' : 'Create New User' }}\n          </h2>\n          <p class=\"dialog-subtitle\">\n            {{ isEditMode ? 'Update user information and role assignments' : 'Add a new user to the system' }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"userForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <div class=\"alert alert-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                <div>{{ error }}</div>\n              </div>\n            </div>\n          }\n          <!-- Basic Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-id-card\"></i>\n                  Basic Information\n                </h3>\n                <p class=\"section-description\">Enter the user's personal and contact details</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"name\">Username/Email</label>\n                  <input\n                    id=\"name\"\n                    type=\"email\"\n                    class=\"field-input\"\n                    formControlName=\"name\"\n                    placeholder=\"john@company.com\"\n                    [class.error]=\"userForm.get('name')?.invalid && userForm.get('name')?.touched\"\n                    />\n                  @if (userForm.get('name')?.invalid && userForm.get('name')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (userForm.get('name')?.errors?.['required']) {\n                        Username/Email is required\n                      }\n                      @if (userForm.get('name')?.errors?.['email']) {\n                        Please enter a valid email address\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-row\">\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"firstName\">First Name</label>\n                    <input\n                      id=\"firstName\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"firstName\"\n                      placeholder=\"John\"\n                      />\n                  </div>\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"lastName\">Last Name</label>\n                    <input\n                      id=\"lastName\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"lastName\"\n                      placeholder=\"Doe\"\n                      />\n                  </div>\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"email\">Email Address</label>\n                  <input\n                    id=\"email\"\n                    type=\"email\"\n                    class=\"field-input\"\n                    formControlName=\"email\"\n                    placeholder=\"john@company.com\"\n                    [class.error]=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\"\n                    />\n                  @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (userForm.get('email')?.errors?.['required']) {\n                        Email address is required\n                      }\n                      @if (userForm.get('email')?.errors?.['email']) {\n                        Please enter a valid email address\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"title\">Job Title</label>\n                  <input\n                    id=\"title\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"title\"\n                    placeholder=\"Software Engineer\"\n                    />\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- User Settings Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-cog\"></i>\n                  User Settings\n                </h3>\n                <p class=\"section-description\">Configure user type and account status</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-row\">\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"type\">User Type</label>\n                    <select id=\"type\" class=\"field-select\" formControlName=\"type\">\n                      <option value=\"User\">Standard User</option>\n                      <option value=\"Owner\">System Owner</option>\n                    </select>\n                  </div>\n                  <div class=\"form-field\">\n                    <div class=\"checkbox-field\">\n                      <input\n                        id=\"isActive\"\n                        type=\"checkbox\"\n                        class=\"checkbox-input\"\n                        formControlName=\"isActive\"\n                        />\n                      <label class=\"checkbox-label\" for=\"isActive\">\n                        <div class=\"checkbox-indicator\"></div>\n                        <div>\n                          <strong>Active Account</strong>\n                          <div style=\"font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px;\">\n                            User can log in and access the system\n                          </div>\n                        </div>\n                      </label>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Role Assignment Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-user-tag\"></i>\n                  Role Assignment\n                </h3>\n                <p class=\"section-description\">Select the roles to assign to this user</p>\n              </div>\n              <div class=\"roles-grid\">\n                @for (role of data?.availableRoles; track role.ID) {\n                  <div class=\"role-card\"\n                    [class.selected]=\"selectedRoleIds.has(role.ID)\"\n                    (click)=\"toggleRole(role.ID)\">\n                    <div class=\"role-content\">\n                      <div class=\"checkbox-field\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"checkbox-input\"\n                          [id]=\"'role-' + role.ID\"\n                          [checked]=\"selectedRoleIds.has(role.ID)\"\n                          (change)=\"onRoleToggle(role.ID, $event)\"\n                          />\n                        <label class=\"checkbox-label\" [for]=\"'role-' + role.ID\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                      <div class=\"role-info\">\n                        <h4 class=\"role-name\">{{ role.Name }}</h4>\n                        @if (role.Description) {\n                          <p class=\"role-description\">{{ role.Description }}</p>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <button\n              type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"userForm.invalid || isLoading\"\n              >\n              @if (isLoading) {\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                Saving...\n              } @else {\n                <i class=\"fa-solid fa-save\"></i>\n                {{ isEditMode ? 'Update User' : 'Create User' }}\n              }\n            </button>\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n              <i class=\"fa-solid fa-times\"></i>\n              Cancel\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ============================================\n   User 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: 900px;\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--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.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields\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-select {\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-select:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-select: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-select: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-select.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: 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   Checkboxes\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   Alert Messages\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/* Error Alert (Red) */\n.alert-error {\n  background: var(--mj-color-error-100);\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* ============================================\n   Modal Footer (Buttons)\n   ============================================ */\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  background: var(--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  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 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-select {\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-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-user-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header with MJ Blue -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-user\"></i>\n            {{ isEditMode ? 'Edit User' : 'Create New User' }}\n          </h2>\n          <p class=\"dialog-subtitle\">\n            {{ isEditMode ? 'Update user information and role assignments' : 'Add a new user to the system' }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"userForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <mj-alert Variant=\"error\" [Message]=\"error\" />\n            </div>\n          }\n          <!-- Basic Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-id-card\"></i>\n                  Basic Information\n                </h3>\n                <p class=\"section-description\">Enter the user's personal and contact details</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"name\">Username/Email</label>\n                  <input\n                    id=\"name\"\n                    type=\"email\"\n                    class=\"field-input\"\n                    formControlName=\"name\"\n                    placeholder=\"john@company.com\"\n                    [class.error]=\"userForm.get('name')?.invalid && userForm.get('name')?.touched\"\n                    />\n                  @if (userForm.get('name')?.invalid && userForm.get('name')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (userForm.get('name')?.errors?.['required']) {\n                        Username/Email is required\n                      }\n                      @if (userForm.get('name')?.errors?.['email']) {\n                        Please enter a valid email address\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-row\">\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"firstName\">First Name</label>\n                    <input\n                      id=\"firstName\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"firstName\"\n                      placeholder=\"John\"\n                      />\n                  </div>\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"lastName\">Last Name</label>\n                    <input\n                      id=\"lastName\"\n                      type=\"text\"\n                      class=\"field-input\"\n                      formControlName=\"lastName\"\n                      placeholder=\"Doe\"\n                      />\n                  </div>\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label required\" for=\"email\">Email Address</label>\n                  <input\n                    id=\"email\"\n                    type=\"email\"\n                    class=\"field-input\"\n                    formControlName=\"email\"\n                    placeholder=\"john@company.com\"\n                    [class.error]=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\"\n                    />\n                  @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) {\n                    <div class=\"field-error\">\n                      <i class=\"fa-solid fa-exclamation-circle\"></i>\n                      @if (userForm.get('email')?.errors?.['required']) {\n                        Email address is required\n                      }\n                      @if (userForm.get('email')?.errors?.['email']) {\n                        Please enter a valid email address\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"form-field\">\n                  <label class=\"field-label\" for=\"title\">Job Title</label>\n                  <input\n                    id=\"title\"\n                    type=\"text\"\n                    class=\"field-input\"\n                    formControlName=\"title\"\n                    placeholder=\"Software Engineer\"\n                    />\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- User Settings Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-cog\"></i>\n                  User Settings\n                </h3>\n                <p class=\"section-description\">Configure user type and account status</p>\n              </div>\n              <div class=\"form-grid\">\n                <div class=\"form-row\">\n                  <div class=\"form-field\">\n                    <label class=\"field-label\" for=\"type\">User Type</label>\n                    <select id=\"type\" class=\"field-select\" formControlName=\"type\">\n                      <option value=\"User\">Standard User</option>\n                      <option value=\"Owner\">System Owner</option>\n                    </select>\n                  </div>\n                  <div class=\"form-field\">\n                    <div class=\"checkbox-field\">\n                      <input\n                        id=\"isActive\"\n                        type=\"checkbox\"\n                        class=\"checkbox-input\"\n                        formControlName=\"isActive\"\n                        />\n                      <label class=\"checkbox-label\" for=\"isActive\">\n                        <div class=\"checkbox-indicator\"></div>\n                        <div>\n                          <strong>Active Account</strong>\n                          <div style=\"font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px;\">\n                            User can log in and access the system\n                          </div>\n                        </div>\n                      </label>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Role Assignment Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-user-tag\"></i>\n                  Role Assignment\n                </h3>\n                <p class=\"section-description\">Select the roles to assign to this user</p>\n              </div>\n              <div class=\"roles-grid\">\n                @for (role of data?.availableRoles; track role.ID) {\n                  <div class=\"role-card\"\n                    [class.selected]=\"selectedRoleIds.has(role.ID)\"\n                    (click)=\"toggleRole(role.ID)\">\n                    <div class=\"role-content\">\n                      <div class=\"checkbox-field\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"checkbox-input\"\n                          [id]=\"'role-' + role.ID\"\n                          [checked]=\"selectedRoleIds.has(role.ID)\"\n                          (change)=\"onRoleToggle(role.ID, $event)\"\n                          />\n                        <label class=\"checkbox-label\" [for]=\"'role-' + role.ID\">\n                          <div class=\"checkbox-indicator\"></div>\n                        </label>\n                      </div>\n                      <div class=\"role-info\">\n                        <h4 class=\"role-name\">{{ role.Name }}</h4>\n                        @if (role.Description) {\n                          <p class=\"role-description\">{{ role.Description }}</p>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <button\n              type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"userForm.invalid || isLoading\"\n              >\n              @if (isLoading) {\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                Saving...\n              } @else {\n                <i class=\"fa-solid fa-save\"></i>\n                {{ isEditMode ? 'Update User' : 'Create User' }}\n              }\n            </button>\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n              <i class=\"fa-solid fa-times\"></i>\n              Cancel\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ============================================\n   User 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: 900px;\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Modal Header (MJ Blue)\n   ============================================ */\n\n.modal-header {\n  background: var(--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.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n}\n\n/* ============================================\n   Form Fields\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-select {\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-select:hover:not(:disabled) {\n  border-color: var(--mj-color-neutral-400);\n}\n\n.field-input:focus,\n.field-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.field-input:disabled,\n.field-select: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-select.error {\n  border-color: var(--mj-status-error);\n}\n\n.field-input.error:focus,\n.field-select.error:focus {\n  --mj-ring-color: var(--mj-status-error);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.field-input::placeholder,\n.field-select::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n/* Select Dropdown Styling */\n.field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 32px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.field-error {\n  font-size: 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   Checkboxes\n   ============================================ */\n\n.checkbox-field {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  margin-bottom: 0;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  margin: 0;\n  flex: 1;\n}\n\n.checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-top: 2px;\n}\n\n.checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.checkbox-input:checked + .checkbox-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.checkbox-input:focus + .checkbox-label .checkbox-indicator {\n  box-shadow: var(--mj-focus-ring);\n}\n\n.checkbox-label strong {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================\n   Role Cards\n   ============================================ */\n\n.roles-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1rem;\n}\n\n@media (max-width: 640px) {\n  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.role-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 1.25rem;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.role-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.role-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.role-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.role-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  line-height: 1.3;\n}\n\n.role-description {\n  font-size: 0.75rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ============================================\n   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  .roles-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 480px) {\n  .modal-header {\n    padding: 16px 12px;\n  }\n\n  .dialog-title {\n    font-size: 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-select {\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-select {\n    border-width: 3px;\n  }\n\n  .role-card {\n    border-width: 2px;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n\n@media print {\n  .modal-backdrop {\n    display: none;\n  }\n}\n"] }]
     }], () => [], { data: [{
             type: Input
         }], visible: [{