npm - @memberjunction/ng-explorer-core - Versions diffs - 5.11.0 → 5.13.0 - Mend

@memberjunction/ng-explorer-core 5.11.0 → 5.13.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 (39) hide show

package/dist/lib/shell/components/dialogs/app-access-dialog.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-access-dialog.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/dialogs/app-access-dialog.component.ts","../../../../../src/lib/shell/components/dialogs/app-access-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\n\n/*\n Type of app access issue\n /\nexport type AppAccessDialogType =\n \| 'not_installed' // User can install the app\n \| 'disabled' // User has disabled the app, can re-enable\n \| 'no_access' // User doesn't have permission\n \| 'not_found' // App doesn't exist\n \| 'inactive' // App is inactive/disabled by admin\n \| 'no_apps' // User has no apps configured at all\n \| 'layout_error'; // Golden Layout failed to initialize\n\n/\n Configuration for the app access dialog\n /\nexport interface AppAccessDialogConfig {\n type: AppAccessDialogType;\n appName?: string;\n appId?: string;\n}\n\n/\n Result from the dialog\n /\nexport interface AppAccessDialogResult {\n action: 'install' \| 'enable' \| 'redirect' \| 'dismissed';\n appId?: string;\n}\n\n/\n Dialog component for handling app access errors.\n * Shows appropriate messages and actions based on the type of access issue.\n * Features auto-dismiss with countdown timer for certain dialog types.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-access-dialog',\n templateUrl: './app-access-dialog.component.html',\n styleUrls: ['./app-access-dialog.component.css']\n})\nexport class AppAccessDialogComponent implements OnDestroy {\n @Input() visible = false;\n @Output() visibleChange = new EventEmitter<boolean>();\n @Output() result = new EventEmitter<AppAccessDialogResult>();\n\n config: AppAccessDialogConfig \| null = null;\n isProcessing = false;\n\n // Auto-dismiss countdown\n private countdownInterval: ReturnType<typeof setInterval> \| null = null;\n countdownSeconds = 0;\n private readonly AUTO_DISMISS_SECONDS = 5;\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n /\n Show the dialog with the specified configuration\n /\n show(config: AppAccessDialogConfig): void {\n this.config = config;\n this.visible = true;\n this.isProcessing = false;\n this.visibleChange.emit(true);\n\n // Start countdown for types that auto-dismiss\n if (this.shouldAutoDismiss()) {\n this.startCountdown();\n }\n\n this.cdr.detectChanges();\n }\n\n /\n Hide the dialog\n /\n hide(): void {\n this.stopCountdown();\n this.visible = false;\n this.visibleChange.emit(false);\n this.cdr.detectChanges();\n }\n\n ngOnDestroy(): void {\n this.stopCountdown();\n }\n\n /\n Get the dialog title based on type\n /\n get title(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n return 'Add Application?';\n case 'disabled':\n return 'Add Application?';\n case 'no_access':\n return 'Access Denied';\n case 'not_found':\n return 'Application Not Found';\n case 'inactive':\n return 'Application Unavailable';\n case 'no_apps':\n return 'No Applications Available';\n case 'layout_error':\n return 'Display Error';\n default:\n return 'Application Error';\n }\n }\n\n /\n Get the dialog icon based on type\n /\n get icon(): string {\n if (!this.config) return 'fa-circle-info';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return 'fa-circle-question';\n case 'no_access':\n return 'fa-lock';\n case 'not_found':\n return 'fa-circle-xmark';\n case 'inactive':\n return 'fa-circle-pause';\n case 'no_apps':\n return 'fa-folder-open';\n case 'layout_error':\n return 'fa-triangle-exclamation';\n default:\n return 'fa-circle-info';\n }\n }\n\n /\n Get the dialog icon color based on type\n /\n get iconColor(): string {\n if (!this.config) return '#666';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return '#2196F3'; // Blue for actionable\n case 'no_access':\n case 'inactive':\n return '#FF9800'; // Orange for warning\n case 'not_found':\n case 'layout_error':\n return '#F44336'; // Red for error\n case 'no_apps':\n return '#9E9E9E'; // Gray for info\n default:\n return '#666';\n }\n }\n\n /\n Get the main message based on type\n /\n get message(): string {\n if (!this.config) return '';\n\n const appName = this.config.appName \|\| 'this application';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return `Would you like to add \"${appName}\" to your applications?`;\n case 'no_access':\n return `You don't have permission to access \"${appName}\".`;\n case 'not_found':\n return `The application \"${appName}\" doesn't exist in this system.`;\n case 'inactive':\n return `The application \"${appName}\" is currently inactive and unavailable.`;\n case 'no_apps':\n return `You don't have any applications configured. Your system administrator needs to set up your application access.`;\n case 'layout_error':\n return `There was an error displaying the application interface. The system will redirect you to an available application.`;\n default:\n return 'An error occurred while loading the application.';\n }\n }\n\n /\n Get the secondary/help message based on type\n /\n get helpMessage(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return '';\n case 'no_access':\n case 'not_found':\n case 'inactive':\n return 'If you believe this is an error, please contact your system administrator.';\n case 'no_apps':\n return 'Please contact your system administrator to configure your application access.';\n case 'layout_error':\n return 'If this error persists, try clearing your browser cache or contact your system administrator.';\n default:\n return '';\n }\n }\n\n /\n Check if the primary action button should be shown\n /\n get showPrimaryAction(): boolean {\n if (!this.config) return false;\n return this.config.type === 'not_installed' \|\| this.config.type === 'disabled';\n }\n\n /\n Get the primary action button text\n /\n get primaryActionText(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return 'Add';\n default:\n return 'OK';\n }\n }\n\n /\n Get the secondary/dismiss button text with countdown if applicable\n * For actionable dialogs (install/enable), show \"Cancel\"\n * For non-actionable dialogs (errors), show \"OK\" with countdown\n /\n get dismissButtonText(): string {\n // For actionable dialogs, use \"Cancel\"\n if (this.showPrimaryAction) {\n return 'Cancel';\n }\n\n // For non-actionable dialogs, show countdown if active\n if (this.countdownSeconds > 0) {\n return `OK (${this.countdownSeconds})`;\n }\n return 'OK';\n }\n\n /\n Check if this dialog type should auto-dismiss\n /\n private shouldAutoDismiss(): boolean {\n if (!this.config) return false;\n return ['no_access', 'not_found', 'inactive', 'layout_error'].includes(this.config.type);\n }\n\n /\n Start the countdown timer for auto-dismiss\n /\n private startCountdown(): void {\n this.stopCountdown();\n this.countdownSeconds = this.AUTO_DISMISS_SECONDS;\n\n this.countdownInterval = setInterval(() => {\n this.countdownSeconds--;\n this.cdr.detectChanges();\n\n if (this.countdownSeconds <= 0) {\n this.onDismiss();\n }\n }, 1000);\n }\n\n /\n Stop the countdown timer\n /\n private stopCountdown(): void {\n if (this.countdownInterval) {\n clearInterval(this.countdownInterval);\n this.countdownInterval = null;\n }\n this.countdownSeconds = 0;\n }\n\n /\n Handle primary action (install/enable)\n /\n async onPrimaryAction(): Promise<void> {\n if (!this.config) return;\n\n this.isProcessing = true;\n this.cdr.detectChanges();\n\n const action = this.config.type === 'not_installed' ? 'install' : 'enable';\n\n this.result.emit({\n action,\n appId: this.config.appId\n });\n\n // Don't hide yet - let the parent component handle the result and close when ready\n }\n\n /\n Handle dismiss/redirect action\n /\n onDismiss(): void {\n this.stopCountdown();\n this.result.emit({ action: 'redirect' });\n this.hide();\n }\n\n /\n Mark processing as complete (called by parent after install/enable)\n /\n completeProcessing(): void {\n this.isProcessing = false;\n this.hide();\n }\n\n /\n Handle keyboard events for the dialog\n * Enter key triggers primary action (Install/Enable)\n * Escape key dismisses the dialog\n */\n @HostListener('document:keydown', ['$event'])\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.visible \|\| this.isProcessing) return;\n\n if (event.key === 'Enter') {\n // Enter triggers primary action if available\n if (this.showPrimaryAction) {\n event.preventDefault();\n event.stopPropagation();\n this.onPrimaryAction();\n }\n } else if (event.key === 'Escape') {\n // Escape dismisses the dialog\n event.preventDefault();\n event.stopPropagation();\n this.onDismiss();\n }\n }\n}\n","@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"onDismiss()\">\n <div class=\"dialog-container\" (click)=\"$event.stopPropagation()\">\n <!-- Icon -->\n <div class=\"dialog-icon\" [style.color]=\"iconColor\">\n <i class=\"fa-solid\" [ngClass]=\"icon\"></i>\n </div>\n <!-- Title -->\n <h2 class=\"dialog-title\">{{ title }}</h2>\n <!-- Message -->\n <p class=\"dialog-message\">{{ message }}</p>\n <!-- Help message -->\n @if (helpMessage) {\n <p class=\"dialog-help\">{{ helpMessage }}</p>\n }\n <!-- Actions -->\n <div class=\"dialog-actions\">\n @if (showPrimaryAction) {\n <button\n class=\"dialog-btn primary\"\n [disabled]=\"isProcessing\"\n (click)=\"onPrimaryAction()\">\n @if (isProcessing) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isProcessing) {\n <span>{{ primaryActionText }}</span>\n }\n @if (isProcessing) {\n <span>Processing...</span>\n }\n </button>\n }\n <button\n class=\"dialog-btn\"\n [class.secondary]=\"showPrimaryAction\"\n [disabled]=\"isProcessing\"\n (click)=\"onDismiss()\">\n {{ dismissButtonText }}\n </button>\n </div>\n </div>\n </div>\n}\n"]}
1	+ {"version":3,"file":"app-access-dialog.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/dialogs/app-access-dialog.component.ts","../../../../../src/lib/shell/components/dialogs/app-access-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAgC,YAAY,EAAE,MAAM,eAAe,CAAC;;;;ICa3G,4BAAuB;IAAA,YAAiB;IAAA,iBAAI;;;IAArB,cAAiB;IAAjB,wCAAiB;;;IAUlC,wBAA2C;;;IAG3C,4BAAM;IAAA,YAAuB;IAAA,iBAAO;;;IAA9B,cAAuB;IAAvB,8CAAuB;;;IAG7B,4BAAM;IAAA,6BAAa;IAAA,iBAAO;;;;IAX9B,kCAG8B;IAA5B,4MAAS,wBAAiB,KAAC;IAC3B,sHAAoB;IAGpB,qHAAqB;IAGrB,qHAAoB;IAGtB,iBAAS;;;IAXP,8CAAyB;IAEzB,cAEC;IAFD,8CAEC;IACD,cAEC;IAFD,+CAEC;IACD,cAEC;IAFD,8CAEC;;;;IA7BX,8BAAkD;IAAtB,yLAAS,kBAAW,KAAC;IAC/C,8BAAiE;IAAnC,4JAAS,wBAAwB,KAAC;IAE9D,8BAAmD;IACjD,uBAAyC;IAC3C,iBAAM;IAEN,6BAAyB;IAAA,YAAW;IAAA,iBAAK;IAEzC,4BAA0B;IAAA,YAAa;IAAA,iBAAI;IAE3C,sGAAmB;IAInB,8BAA4B;IAC1B,6GAAyB;IAgBzB,mCAIwB;IAAtB,6LAAS,kBAAW,KAAC;IACrB,aACF;IAGN,AADE,AADE,AADE,iBAAS,EACL,EACF,EACF;;;IAtCuB,eAAyB;IAAzB,yCAAyB;IAC5B,cAAgB;IAAhB,qCAAgB;IAGb,eAAW;IAAX,kCAAW;IAEV,eAAa;IAAb,oCAAa;IAEvC,cAEC;IAFD,6CAEC;IAGC,eAeC;IAfD,oDAeC;IAGC,cAAqC;IAArC,qDAAqC;IACrC,8CAAyB;IAEzB,cACF;IADE,yDACF;;ADRR;;;;GAIG;AAOH,MAAM,OAAO,wBAAwB;IAaf;IAZX,OAAO,GAAG,KAAK,CAAC;IACf,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;IAC5C,MAAM,GAAG,IAAI,YAAY,EAAyB,CAAC;IAE7D,MAAM,GAAiC,IAAI,CAAC;IAC5C,YAAY,GAAG,KAAK,CAAC;IAErB,yBAAyB;IACjB,iBAAiB,GAA0C,IAAI,CAAC;IACxE,gBAAgB,GAAG,CAAC,CAAC;IACJ,oBAAoB,GAAG,CAAC,CAAC;IAE1C,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;IAAG,CAAC;IAE9C;;OAEG;IACH,IAAI,CAAC,MAA6B;QAChC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE9B,8CAA8C;QAC9C,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,IAAI,KAAK;QACP,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAE5B,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe;gBAClB,OAAO,kBAAkB,CAAC;YAC5B,KAAK,UAAU;gBACb,OAAO,kBAAkB,CAAC;YAC5B,KAAK,WAAW;gBACd,OAAO,eAAe,CAAC;YACzB,KAAK,WAAW;gBACd,OAAO,uBAAuB,CAAC;YACjC,KAAK,UAAU;gBACb,OAAO,yBAAyB,CAAC;YACnC,KAAK,SAAS;gBACZ,OAAO,2BAA2B,CAAC;YACrC,KAAK,cAAc;gBACjB,OAAO,eAAe,CAAC;YACzB;gBACE,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;QACN,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,gBAAgB,CAAC;QAE1C,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,oBAAoB,CAAC;YAC9B,KAAK,WAAW;gBACd,OAAO,SAAS,CAAC;YACnB,KAAK,WAAW;gBACd,OAAO,iBAAiB,CAAC;YAC3B,KAAK,UAAU;gBACb,OAAO,iBAAiB,CAAC;YAC3B,KAAK,SAAS;gBACZ,OAAO,gBAAgB,CAAC;YAC1B,KAAK,cAAc;gBACjB,OAAO,yBAAyB,CAAC;YACnC;gBACE,OAAO,gBAAgB,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,0BAA0B,CAAC;QAEpD,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,SAAS,CAAC,CAAC,sBAAsB;YAC1C,KAAK,WAAW,CAAC;YACjB,KAAK,UAAU;gBACb,OAAO,SAAS,CAAC,CAAC,qBAAqB;YACzC,KAAK,WAAW,CAAC;YACjB,KAAK,cAAc;gBACjB,OAAO,SAAS,CAAC,CAAC,gBAAgB;YACpC,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC,CAAC,gBAAgB;YACpC;gBACE,OAAO,0BAA0B,CAAC;QACtC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAE5B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,kBAAkB,CAAC;QAE1D,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,0BAA0B,OAAO,yBAAyB,CAAC;YACpE,KAAK,WAAW;gBACd,OAAO,wCAAwC,OAAO,IAAI,CAAC;YAC7D,KAAK,WAAW;gBACd,OAAO,oBAAoB,OAAO,iCAAiC,CAAC;YACtE,KAAK,UAAU;gBACb,OAAO,oBAAoB,OAAO,0CAA0C,CAAC;YAC/E,KAAK,SAAS;gBACZ,OAAO,gHAAgH,CAAC;YAC1H,KAAK,cAAc;gBACjB,OAAO,oHAAoH,CAAC;YAC9H;gBACE,OAAO,kDAAkD,CAAC;QAC9D,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAE5B,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,EAAE,CAAC;YACZ,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW,CAAC;YACjB,KAAK,UAAU;gBACb,OAAO,4EAA4E,CAAC;YACtF,KAAK,SAAS;gBACZ,OAAO,gFAAgF,CAAC;YAC1F,KAAK,cAAc;gBACjB,OAAO,+FAA+F,CAAC;YACzG;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI,iBAAiB;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU,CAAC;IACjF,CAAC;IAED;;OAEG;IACH,IAAI,iBAAiB;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAE5B,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,uCAAuC;QACvC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,uDAAuD;QACvD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,OAAO,IAAI,CAAC,gBAAgB,GAAG,CAAC;QACzC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;OAEG;IACK,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC/B,OAAO,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3F,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAElD,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YAEzB,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAEzB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,MAAM;YACN,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK;SACzB,CAAC,CAAC;QAEH,mFAAmF;IACrF,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;OAEG;IACH,kBAAkB;QAChB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;;OAIG;IAEH,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE/C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,6CAA6C;YAC7C,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAClC,8BAA8B;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;kHAjTU,wBAAwB;6DAAxB,wBAAwB;YAAxB,uGAAA,yBAAqB,0BAAG;;YC1CrC,4FAAe;;YAAf,sCA2CC;;;iFDDY,wBAAwB;cANpC,SAAS;6BACI,KAAK,YACP,sBAAsB;;kBAK/B,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kBA6RN,YAAY;mBAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC;;kFAhSjC,wBAAwB","sourcesContent":["import { Component, Input, Output, EventEmitter, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\n\n/*\n Type of app access issue\n /\nexport type AppAccessDialogType =\n \| 'not_installed' // User can install the app\n \| 'disabled' // User has disabled the app, can re-enable\n \| 'no_access' // User doesn't have permission\n \| 'not_found' // App doesn't exist\n \| 'inactive' // App is inactive/disabled by admin\n \| 'no_apps' // User has no apps configured at all\n \| 'layout_error'; // Golden Layout failed to initialize\n\n/\n Configuration for the app access dialog\n /\nexport interface AppAccessDialogConfig {\n type: AppAccessDialogType;\n appName?: string;\n appId?: string;\n}\n\n/\n Result from the dialog\n /\nexport interface AppAccessDialogResult {\n action: 'install' \| 'enable' \| 'redirect' \| 'dismissed';\n appId?: string;\n}\n\n/\n Dialog component for handling app access errors.\n * Shows appropriate messages and actions based on the type of access issue.\n * Features auto-dismiss with countdown timer for certain dialog types.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-access-dialog',\n templateUrl: './app-access-dialog.component.html',\n styleUrls: ['./app-access-dialog.component.css']\n})\nexport class AppAccessDialogComponent implements OnDestroy {\n @Input() visible = false;\n @Output() visibleChange = new EventEmitter<boolean>();\n @Output() result = new EventEmitter<AppAccessDialogResult>();\n\n config: AppAccessDialogConfig \| null = null;\n isProcessing = false;\n\n // Auto-dismiss countdown\n private countdownInterval: ReturnType<typeof setInterval> \| null = null;\n countdownSeconds = 0;\n private readonly AUTO_DISMISS_SECONDS = 5;\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n /\n Show the dialog with the specified configuration\n /\n show(config: AppAccessDialogConfig): void {\n this.config = config;\n this.visible = true;\n this.isProcessing = false;\n this.visibleChange.emit(true);\n\n // Start countdown for types that auto-dismiss\n if (this.shouldAutoDismiss()) {\n this.startCountdown();\n }\n\n this.cdr.detectChanges();\n }\n\n /\n Hide the dialog\n /\n hide(): void {\n this.stopCountdown();\n this.visible = false;\n this.visibleChange.emit(false);\n this.cdr.detectChanges();\n }\n\n ngOnDestroy(): void {\n this.stopCountdown();\n }\n\n /\n Get the dialog title based on type\n /\n get title(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n return 'Add Application?';\n case 'disabled':\n return 'Add Application?';\n case 'no_access':\n return 'Access Denied';\n case 'not_found':\n return 'Application Not Found';\n case 'inactive':\n return 'Application Unavailable';\n case 'no_apps':\n return 'No Applications Available';\n case 'layout_error':\n return 'Display Error';\n default:\n return 'Application Error';\n }\n }\n\n /\n Get the dialog icon based on type\n /\n get icon(): string {\n if (!this.config) return 'fa-circle-info';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return 'fa-circle-question';\n case 'no_access':\n return 'fa-lock';\n case 'not_found':\n return 'fa-circle-xmark';\n case 'inactive':\n return 'fa-circle-pause';\n case 'no_apps':\n return 'fa-folder-open';\n case 'layout_error':\n return 'fa-triangle-exclamation';\n default:\n return 'fa-circle-info';\n }\n }\n\n /\n Get the dialog icon color based on type\n /\n get iconColor(): string {\n if (!this.config) return 'var(--mj-text-secondary)';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return '#2196F3'; // Blue for actionable\n case 'no_access':\n case 'inactive':\n return '#FF9800'; // Orange for warning\n case 'not_found':\n case 'layout_error':\n return '#F44336'; // Red for error\n case 'no_apps':\n return '#9E9E9E'; // Gray for info\n default:\n return 'var(--mj-text-secondary)';\n }\n }\n\n /\n Get the main message based on type\n /\n get message(): string {\n if (!this.config) return '';\n\n const appName = this.config.appName \|\| 'this application';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return `Would you like to add \"${appName}\" to your applications?`;\n case 'no_access':\n return `You don't have permission to access \"${appName}\".`;\n case 'not_found':\n return `The application \"${appName}\" doesn't exist in this system.`;\n case 'inactive':\n return `The application \"${appName}\" is currently inactive and unavailable.`;\n case 'no_apps':\n return `You don't have any applications configured. Your system administrator needs to set up your application access.`;\n case 'layout_error':\n return `There was an error displaying the application interface. The system will redirect you to an available application.`;\n default:\n return 'An error occurred while loading the application.';\n }\n }\n\n /\n Get the secondary/help message based on type\n /\n get helpMessage(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return '';\n case 'no_access':\n case 'not_found':\n case 'inactive':\n return 'If you believe this is an error, please contact your system administrator.';\n case 'no_apps':\n return 'Please contact your system administrator to configure your application access.';\n case 'layout_error':\n return 'If this error persists, try clearing your browser cache or contact your system administrator.';\n default:\n return '';\n }\n }\n\n /\n Check if the primary action button should be shown\n /\n get showPrimaryAction(): boolean {\n if (!this.config) return false;\n return this.config.type === 'not_installed' \|\| this.config.type === 'disabled';\n }\n\n /\n Get the primary action button text\n /\n get primaryActionText(): string {\n if (!this.config) return '';\n\n switch (this.config.type) {\n case 'not_installed':\n case 'disabled':\n return 'Add';\n default:\n return 'OK';\n }\n }\n\n /\n Get the secondary/dismiss button text with countdown if applicable\n * For actionable dialogs (install/enable), show \"Cancel\"\n * For non-actionable dialogs (errors), show \"OK\" with countdown\n /\n get dismissButtonText(): string {\n // For actionable dialogs, use \"Cancel\"\n if (this.showPrimaryAction) {\n return 'Cancel';\n }\n\n // For non-actionable dialogs, show countdown if active\n if (this.countdownSeconds > 0) {\n return `OK (${this.countdownSeconds})`;\n }\n return 'OK';\n }\n\n /\n Check if this dialog type should auto-dismiss\n /\n private shouldAutoDismiss(): boolean {\n if (!this.config) return false;\n return ['no_access', 'not_found', 'inactive', 'layout_error'].includes(this.config.type);\n }\n\n /\n Start the countdown timer for auto-dismiss\n /\n private startCountdown(): void {\n this.stopCountdown();\n this.countdownSeconds = this.AUTO_DISMISS_SECONDS;\n\n this.countdownInterval = setInterval(() => {\n this.countdownSeconds--;\n this.cdr.detectChanges();\n\n if (this.countdownSeconds <= 0) {\n this.onDismiss();\n }\n }, 1000);\n }\n\n /\n Stop the countdown timer\n /\n private stopCountdown(): void {\n if (this.countdownInterval) {\n clearInterval(this.countdownInterval);\n this.countdownInterval = null;\n }\n this.countdownSeconds = 0;\n }\n\n /\n Handle primary action (install/enable)\n /\n async onPrimaryAction(): Promise<void> {\n if (!this.config) return;\n\n this.isProcessing = true;\n this.cdr.detectChanges();\n\n const action = this.config.type === 'not_installed' ? 'install' : 'enable';\n\n this.result.emit({\n action,\n appId: this.config.appId\n });\n\n // Don't hide yet - let the parent component handle the result and close when ready\n }\n\n /\n Handle dismiss/redirect action\n /\n onDismiss(): void {\n this.stopCountdown();\n this.result.emit({ action: 'redirect' });\n this.hide();\n }\n\n /\n Mark processing as complete (called by parent after install/enable)\n /\n completeProcessing(): void {\n this.isProcessing = false;\n this.hide();\n }\n\n /\n Handle keyboard events for the dialog\n * Enter key triggers primary action (Install/Enable)\n * Escape key dismisses the dialog\n */\n @HostListener('document:keydown', ['$event'])\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.visible \|\| this.isProcessing) return;\n\n if (event.key === 'Enter') {\n // Enter triggers primary action if available\n if (this.showPrimaryAction) {\n event.preventDefault();\n event.stopPropagation();\n this.onPrimaryAction();\n }\n } else if (event.key === 'Escape') {\n // Escape dismisses the dialog\n event.preventDefault();\n event.stopPropagation();\n this.onDismiss();\n }\n }\n}\n","@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"onDismiss()\">\n <div class=\"dialog-container\" (click)=\"$event.stopPropagation()\">\n <!-- Icon -->\n <div class=\"dialog-icon\" [style.color]=\"iconColor\">\n <i class=\"fa-solid\" [ngClass]=\"icon\"></i>\n </div>\n <!-- Title -->\n <h2 class=\"dialog-title\">{{ title }}</h2>\n <!-- Message -->\n <p class=\"dialog-message\">{{ message }}</p>\n <!-- Help message -->\n @if (helpMessage) {\n <p class=\"dialog-help\">{{ helpMessage }}</p>\n }\n <!-- Actions -->\n <div class=\"dialog-actions\">\n @if (showPrimaryAction) {\n <button\n class=\"dialog-btn primary\"\n [disabled]=\"isProcessing\"\n (click)=\"onPrimaryAction()\">\n @if (isProcessing) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isProcessing) {\n <span>{{ primaryActionText }}</span>\n }\n @if (isProcessing) {\n <span>Processing...</span>\n }\n </button>\n }\n <button\n class=\"dialog-btn\"\n [class.secondary]=\"showPrimaryAction\"\n [disabled]=\"isProcessing\"\n (click)=\"onDismiss()\">\n {{ dismissButtonText }}\n </button>\n </div>\n </div>\n </div>\n}\n"]}

package/dist/lib/shell/components/header/app-nav.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-nav.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-nav.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AACtI,OAAO,EAAE,eAAe,EAAkB,OAAO,EAAE,qBAAqB,EAA0B,MAAM,qCAAqC,CAAC;AAC9I,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAG1D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,qBAOa,eAAgB,YAAW,MAAM,EAAE,SAAS;IA8BrD,OAAO,CAAC,gBAAgB;IACxB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,GAAG;IA/Bb,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,eAAe,CAAiB;IACxC,OAAO,CAAC,eAAe,~~CAAqB~~;~~IAC5C~~,OAAO,CAAC,iBAAiB,CAAS;IAElC;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,iBAAiB,CAAK;IAG9B,OAAO,CAAC,cAAc,CAA8B;IAE1C,YAAY,kCAAyC;IACrD,cAAc,wBAA+B;gBAG7C,gBAAgB,EAAE,qBAAqB,EACvC,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,iBAAiB;IAGhC;;OAEG;IACH,IACI,GAAG,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,EASpC;IAED,IAAI,GAAG,IAAI,eAAe,GAAG,IAAI,CAEhC;IAED,QAAQ,IAAI,IAAI;IAahB,WAAW,IAAI,IAAI;IAKnB;;OAEG;YACW,gBAAgB;IA6C9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAIjC;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,EAAE,CAExB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAKhC;;OAEG;IACH,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM;IAIrD;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI;IAOnD;;;;OAIG;IACH,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;yCAzNtC,eAAe;2CAAf,eAAe;CA0O3B"}
1	+ {"version":3,"file":"app-nav.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-nav.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AACtI,OAAO,EAAE,eAAe,EAAkB,OAAO,EAAE,qBAAqB,EAA0B,MAAM,qCAAqC,CAAC;AAC9I,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAG1D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,qBAOa,eAAgB,YAAW,MAAM,EAAE,SAAS;IA8BrD,OAAO,CAAC,gBAAgB;IACxB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,GAAG;IA/Bb,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,eAAe,CAAiB;IACxC,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,iBAAiB,CAAS;IAElC;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,iBAAiB,CAAK;IAG9B,OAAO,CAAC,cAAc,CAA8B;IAE1C,YAAY,kCAAyC;IACrD,cAAc,wBAA+B;gBAG7C,gBAAgB,EAAE,qBAAqB,EACvC,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,iBAAiB;IAGhC;;OAEG;IACH,IACI,GAAG,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,EASpC;IAED,IAAI,GAAG,IAAI,eAAe,GAAG,IAAI,CAEhC;IAED,QAAQ,IAAI,IAAI;IAahB,WAAW,IAAI,IAAI;IAKnB;;OAEG;YACW,gBAAgB;IA6C9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAIjC;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,EAAE,CAExB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO;IAKhC;;OAEG;IACH,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM;IAIrD;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI;IAOnD;;;;OAIG;IACH,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;yCAzNtC,eAAe;2CAAf,eAAe;CA0O3B"}

package/dist/lib/shell/components/header/app-nav.component.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class AppNavComponent {
     destroy$ = new Subject();
     _app = null;
     _cachedNavItems = [];
-    _cachedAppColor = '#1976d2';
+    _cachedAppColor = 'var(--mj-brand-primary)';
     _servicesInjected = false;
     /**
      * Monotonically increasing counter used to detect and discard stale async results.
@@ -145,11 +145,11 @@ export class AppNavComponent {
             }
             // Only show items with Status 'Active' or undefined (default to Active)
             this._cachedNavItems = items.filter(item => !item.Status || item.Status === 'Active');
-            this._cachedAppColor = this._app.GetColor() || '#1976d2';
+            this._cachedAppColor = this._app.GetColor() || 'var(--mj-brand-primary)';
         }
         else {
             this._cachedNavItems = [];
-            this._cachedAppColor = '#1976d2';
+            this._cachedAppColor = 'var(--mj-brand-primary)';
         }
         // Update active states after nav items change
         const config = this.workspaceManager.GetConfiguration();
@@ -261,11 +261,11 @@ export class AppNavComponent {
             i0.ɵɵstyleProp("--app-color", ctx.appColor);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.navItems);
-        } }, styles: [".nav-list[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color, #1976d2) 12%, var(--mj-bg-surface));\n  color: var(--app-color, #1976d2);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--app-color, #1976d2);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.no-icon[_ngcontent-%COMP%] {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: #f44336;\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.dynamic)    + .nav-item.dynamic[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active) {\n  opacity: 0.7;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active):hover {\n  opacity: 1;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:hover   .dismiss-btn[_ngcontent-%COMP%] {\n  display: flex;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  text-align: center;\n}"], changeDetection: 0 });
+        } }, styles: [".nav-list[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color, var(--mj-brand-primary)) 12%, var(--mj-bg-surface));\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.no-icon[_ngcontent-%COMP%] {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.dynamic)    + .nav-item.dynamic[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active) {\n  opacity: 0.7;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active):hover {\n  opacity: 1;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:hover   .dismiss-btn[_ngcontent-%COMP%] {\n  display: flex;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  text-align: center;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppNavComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-app-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav-list\" [style.--app-color]=\"appColor\">\n  @for (item of navItems; track trackByNavItem($index, item)) {\n    <div\n      class=\"nav-item\"\n      [class.active]=\"isActive(item)\"\n      [class.dynamic]=\"isDynamic(item)\"\n      [class.no-icon]=\"!item.Icon\"\n      (click)=\"onNavClick(item, $event)\">\n      @if (item.Icon) {\n        <i [class]=\"item.Icon\"></i>\n      }\n      <span>{{ item.Label }}</span>\n      @if (item.Badge) {\n        <span class=\"badge\">{{ item.Badge }}</span>\n      }\n      @if (isDynamic(item)) {\n        <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      }\n    </div>\n  }\n</nav>\n", styles: [".nav-list {\n  display: flex;\n  gap: 4px;\n}\n.nav-list .nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list .nav-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list .nav-item.active {\n  background: color-mix(in srgb, var(--app-color, #1976d2) 12%, var(--mj-bg-surface));\n  color: var(--app-color, #1976d2);\n}\n.nav-list .nav-item.active i {\n  color: var(--app-color, #1976d2);\n}\n.nav-list .nav-item i {\n  font-size: 16px;\n}\n.nav-list .nav-item.no-icon {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list .nav-item .badge {\n  background: #f44336;\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dynamic nav items (recent orphan resources) \u2014 separator and dimming */\n.nav-list .nav-item:not(.dynamic) + .nav-item.dynamic {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list .nav-item.dynamic:not(.active) {\n  opacity: 0.7;\n}\n.nav-list .nav-item.dynamic:not(.active):hover {\n  opacity: 1;\n}\n\n/* Dismiss button for dynamic nav items */\n.nav-list .nav-item .dismiss-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list .nav-item.dynamic:hover .dismiss-btn {\n  display: flex;\n}\n.nav-list .nav-item .dismiss-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n/* Mobile drawer vertical layout */\n:host-context(.mobile-nav-content) .nav-list {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item i {\n  width: 20px;\n  text-align: center;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-app-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav-list\" [style.--app-color]=\"appColor\">\n  @for (item of navItems; track trackByNavItem($index, item)) {\n    <div\n      class=\"nav-item\"\n      [class.active]=\"isActive(item)\"\n      [class.dynamic]=\"isDynamic(item)\"\n      [class.no-icon]=\"!item.Icon\"\n      (click)=\"onNavClick(item, $event)\">\n      @if (item.Icon) {\n        <i [class]=\"item.Icon\"></i>\n      }\n      <span>{{ item.Label }}</span>\n      @if (item.Badge) {\n        <span class=\"badge\">{{ item.Badge }}</span>\n      }\n      @if (isDynamic(item)) {\n        <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      }\n    </div>\n  }\n</nav>\n", styles: [".nav-list {\n  display: flex;\n  gap: 4px;\n}\n.nav-list .nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list .nav-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list .nav-item.active {\n  background: color-mix(in srgb, var(--app-color, var(--mj-brand-primary)) 12%, var(--mj-bg-surface));\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list .nav-item.active i {\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list .nav-item i {\n  font-size: 16px;\n}\n.nav-list .nav-item.no-icon {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list .nav-item .badge {\n  background: var(--mj-status-error);\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dynamic nav items (recent orphan resources) \u2014 separator and dimming */\n.nav-list .nav-item:not(.dynamic) + .nav-item.dynamic {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list .nav-item.dynamic:not(.active) {\n  opacity: 0.7;\n}\n.nav-list .nav-item.dynamic:not(.active):hover {\n  opacity: 1;\n}\n\n/* Dismiss button for dynamic nav items */\n.nav-list .nav-item .dismiss-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list .nav-item.dynamic:hover .dismiss-btn {\n  display: flex;\n}\n.nav-list .nav-item .dismiss-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n/* Mobile drawer vertical layout */\n:host-context(.mobile-nav-content) .nav-list {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item i {\n  width: 20px;\n  text-align: center;\n}\n"] }]
     }], () => [{ type: i1.WorkspaceStateManager }, { type: i2.SharedService }, { type: i0.ChangeDetectorRef }], { navItemClick: [{
             type: Output
         }], navItemDismiss: [{

package/dist/lib/shell/components/header/app-nav.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-nav.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-nav.component.ts","../../../../../src/lib/shell/components/header/app-nav.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\nimport { BaseApplication, DynamicNavItem, NavItem, WorkspaceStateManager, WorkspaceConfiguration } from '@memberjunction/ng-base-application';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport { Subject, takeUntil } from 'rxjs';\n\n/*\n Event emitted when a nav item is clicked\n /\nexport interface NavItemClickEvent {\n item: NavItem;\n shiftKey: boolean;\n}\n\n/\n Horizontal navigation items for the current app.\n * Uses OnPush change detection and reactive state management for optimal performance.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-nav',\n templateUrl: './app-nav.component.html',\n styleUrls: ['./app-nav.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AppNavComponent implements OnInit, OnDestroy {\n private destroy$ = new Subject<void>();\n private _app: BaseApplication \| null = null;\n private _cachedNavItems: NavItem[] = [];\n private _cachedAppColor: string = '#1976d2';\n private _servicesInjected = false;\n\n /\n Monotonically increasing counter used to detect and discard stale async results.\n \n Because GetNavItems() is async (HomeApplication does a DB lookup for record names),\n * and RxJS subscribe() does NOT serialize async callbacks, multiple calls to\n * updateCachedData() can overlap. Without this guard, a slow call (e.g., Home app\n * doing a DB lookup) that started BEFORE a fast call (e.g., switching to App B)\n * could resolve AFTER the fast call and overwrite the correct nav items with stale ones.\n \n How it works:\n * 1. Each updateCachedData() call increments this counter and captures it as `gen`\n * 2. After the await, it checks: does `gen` still match `_updateGeneration`?\n * 3. If not, a newer call started while we were waiting — discard our stale results\n /\n private _updateGeneration = 0;\n\n // Map of nav item key (Route or Label) to active state\n private activeStateMap = new Map<string, boolean>();\n\n @Output() navItemClick = new EventEmitter<NavItemClickEvent>();\n @Output() navItemDismiss = new EventEmitter<NavItem>();\n\n constructor(\n private workspaceManager: WorkspaceStateManager,\n private sharedService: SharedService,\n private cdr: ChangeDetectorRef\n ) {}\n\n /\n Input setter for app - triggers cache update when app changes\n /\n @Input()\n set app(value: BaseApplication \| null) {\n if (this._app !== value) {\n this._app = value;\n this._cachedNavItems = []; // Clear stale items immediately so previous app's items don't flash\n this.activeStateMap.clear();\n this._servicesInjected = false; // Reset injection flag\n this.updateCachedData();\n this.cdr.markForCheck();\n }\n }\n\n get app(): BaseApplication \| null {\n return this._app;\n }\n\n ngOnInit(): void {\n // Subscribe to workspace configuration changes.\n // Must rebuild nav items (not just active states) because dynamic nav items\n // are generated based on the currently active tab - when a user navigates\n // from one record to another (e.g., via OpenEntityRecord), the active tab\n // changes and the dynamic nav item needs to reflect the new record.\n this.workspaceManager.Configuration\n .pipe(takeUntil(this.destroy$))\n .subscribe(async () => {\n await this.updateCachedData();\n });\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n /\n Update cached nav items and app color when app changes\n /\n private async updateCachedData(): Promise<void> {\n // Capture the current generation before any async work.\n // See _updateGeneration JSDoc for full explanation of the race condition this prevents.\n const gen = ++this._updateGeneration;\n\n if (this._app) {\n // Inject services once for apps that need them (e.g., HomeApplication for dynamic nav items)\n if (!this._servicesInjected) {\n const appWithServices = this._app as BaseApplication & {\n SetWorkspaceManager?: (manager: WorkspaceStateManager) => void;\n SetSharedService?: (service: SharedService) => void;\n };\n\n if (typeof appWithServices.SetWorkspaceManager === 'function') {\n appWithServices.SetWorkspaceManager(this.workspaceManager);\n }\n if (typeof appWithServices.SetSharedService === 'function') {\n appWithServices.SetSharedService(this.sharedService);\n }\n this._servicesInjected = true;\n }\n\n const items = await this._app.GetNavItems() \|\| [];\n\n // If a newer call started while we were awaiting, our results are stale — bail out\n // so we don't overwrite the newer call's (correct) results.\n if (gen !== this._updateGeneration) {\n return;\n }\n\n // Only show items with Status 'Active' or undefined (default to Active)\n this._cachedNavItems = items.filter(item => !item.Status \|\| item.Status === 'Active');\n\n this._cachedAppColor = this._app.GetColor() \|\| '#1976d2';\n } else {\n this._cachedNavItems = [];\n this._cachedAppColor = '#1976d2';\n }\n\n // Update active states after nav items change\n const config = this.workspaceManager.GetConfiguration();\n this.updateActiveStates(config);\n this.cdr.markForCheck();\n }\n\n /\n Update active state map based on current workspace configuration\n /\n private updateActiveStates(config: WorkspaceConfiguration \| null): void {\n this.activeStateMap.clear();\n\n if (!config \|\| !this._app) {\n return;\n }\n\n const activeTab = config.tabs.find(t => t.id === config.activeTabId);\n if (!activeTab \|\| activeTab.applicationId !== this._app.ID) {\n return;\n }\n\n // Compute active state for each nav item once\n for (const item of this._cachedNavItems) {\n const key = this.getItemKey(item);\n const isActive = this.computeIsActive(item, activeTab);\n this.activeStateMap.set(key, isActive);\n }\n }\n\n /\n Get unique key for nav item (used for tracking and active state).\n * Prefers RecordID for dynamic items to avoid label collisions.\n /\n private getItemKey(item: NavItem): string {\n return item.RecordID \|\| item.Route \|\| item.Label \|\| '';\n }\n\n /\n Check if a nav item is dynamic (generated from recent orphan resources)\n /\n isDynamic(item: NavItem): boolean {\n return (item as DynamicNavItem).isDynamic === true;\n }\n\n /\n Compute if nav item is active based on active tab\n /\n private computeIsActive(item: NavItem, activeTab: any): boolean {\n // Check if nav item has a custom matching function (for dynamic items)\n const dynamicItem = item as NavItem & { isActiveMatch?: (tab: unknown) => boolean };\n if (dynamicItem.isActiveMatch && typeof dynamicItem.isActiveMatch === 'function') {\n return dynamicItem.isActiveMatch(activeTab);\n }\n\n // Standard matching: route or label\n return (item.Route && activeTab.configuration['route'] === item.Route) \|\|\n activeTab.title === item.Label;\n }\n\n /\n Get cached navigation items (no computation in getter)\n /\n get navItems(): NavItem[] {\n return this._cachedNavItems;\n }\n\n /\n Get cached app color (no computation in getter)\n /\n get appColor(): string {\n return this._cachedAppColor;\n }\n\n /\n Check if nav item is active (uses cached state from Map)\n /\n isActive(item: NavItem): boolean {\n const key = this.getItemKey(item);\n return this.activeStateMap.get(key) \|\| false;\n }\n\n /\n Track function for @for to optimize rendering\n /\n trackByNavItem(_index: number, item: NavItem): string {\n return this.getItemKey(item);\n }\n\n /\n Handle nav item click\n /\n onNavClick(item: NavItem, event?: MouseEvent): void {\n this.navItemClick.emit({\n item,\n shiftKey: event?.shiftKey \|\| false\n });\n }\n\n /\n Handle dismiss click on a dynamic nav item.\n * Removes from the app's recent stack and refreshes nav items immediately.\n * Stops propagation so the nav click handler doesn't fire.\n */\n onDismiss(item: NavItem, event: MouseEvent): void {\n event.stopPropagation();\n\n // Remove from the app's recent stack directly so we can refresh immediately\n if (this._app) {\n const appWithRemove = this._app as BaseApplication & {\n RemoveDynamicNavItem?: (navItem: NavItem) => void;\n };\n if (typeof appWithRemove.RemoveDynamicNavItem === 'function') {\n appWithRemove.RemoveDynamicNavItem(item);\n this.updateCachedData();\n }\n }\n\n this.navItemDismiss.emit(item);\n }\n\n}\n","<nav class=\"nav-list\" [style.--app-color]=\"appColor\">\n @for (item of navItems; track trackByNavItem($index, item)) {\n <div\n class=\"nav-item\"\n [class.active]=\"isActive(item)\"\n [class.dynamic]=\"isDynamic(item)\"\n [class.no-icon]=\"!item.Icon\"\n (click)=\"onNavClick(item, $event)\">\n @if (item.Icon) {\n <i [class]=\"item.Icon\"></i>\n }\n <span>{{ item.Label }}</span>\n @if (item.Badge) {\n <span class=\"badge\">{{ item.Badge }}</span>\n }\n @if (isDynamic(item)) {\n <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n</nav>\n"]}
1	+ {"version":3,"file":"app-nav.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-nav.component.ts","../../../../../src/lib/shell/components/header/app-nav.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAwC,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAGtI,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;;;;;ICMlC,oBAA2B;;;IAAxB,2BAAmB;;;IAItB,+BAAoB;IAAA,YAAgB;IAAA,iBAAO;;;IAAvB,cAAgB;IAAhB,mCAAgB;;;;IAGpC,iCAA6E;IAAlC,6OAAS,iCAAuB,KAAC;IAC1E,uBAAiC;IACnC,iBAAS;;;;IAhBb,8BAKqC;IAAnC,wMAAS,kCAAwB,KAAC;IAClC,qFAAiB;IAGjB,4BAAM;IAAA,YAAgB;IAAA,iBAAO;IAC7B,wFAAkB;IAGlB,0FAAuB;IAKzB,iBAAM;;;;IAdJ,AADA,AADA,kDAA+B,sCACE,0BACL;IAE5B,cAEC;IAFD,uCAEC;IACK,eAAgB;IAAhB,mCAAgB;IACtB,cAEC;IAFD,wCAEC;IACD,cAIC;IAJD,oDAIC;;ADNP;;;GAGG;AAQH,MAAM,OAAO,eAAe;IA8BhB;IACA;IACA;IA/BF,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;IAC/B,IAAI,GAA2B,IAAI,CAAC;IACpC,eAAe,GAAc,EAAE,CAAC;IAChC,eAAe,GAAW,yBAAyB,CAAC;IACpD,iBAAiB,GAAG,KAAK,CAAC;IAElC;;;;;;;;;;;;;OAaG;IACK,iBAAiB,GAAG,CAAC,CAAC;IAE9B,uDAAuD;IAC/C,cAAc,GAAG,IAAI,GAAG,EAAmB,CAAC;IAE1C,YAAY,GAAG,IAAI,YAAY,EAAqB,CAAC;IACrD,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IAEvD,YACU,gBAAuC,EACvC,aAA4B,EAC5B,GAAsB;QAFtB,qBAAgB,GAAhB,gBAAgB,CAAuB;QACvC,kBAAa,GAAb,aAAa,CAAe;QAC5B,QAAG,GAAH,GAAG,CAAmB;IAC7B,CAAC;IAEJ;;OAEG;IACH,IACI,GAAG,CAAC,KAA6B;QACnC,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,oEAAoE;YAC/F,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,CAAC,uBAAuB;YACvD,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,QAAQ;QACN,gDAAgD;QAChD,4EAA4E;QAC5E,0EAA0E;QAC1E,0EAA0E;QAC1E,oEAAoE;QACpE,IAAI,CAAC,gBAAgB,CAAC,aAAa;aAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC9B,SAAS,CAAC,KAAK,IAAI,EAAE;YACpB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,gBAAgB;QAC5B,wDAAwD;QACxD,wFAAwF;QACxF,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,iBAAiB,CAAC;QAErC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,6FAA6F;YAC7F,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,MAAM,eAAe,GAAG,IAAI,CAAC,IAG5B,CAAC;gBAEF,IAAI,OAAO,eAAe,CAAC,mBAAmB,KAAK,UAAU,EAAE,CAAC;oBAC9D,eAAe,CAAC,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAC7D,CAAC;gBACD,IAAI,OAAO,eAAe,CAAC,gBAAgB,KAAK,UAAU,EAAE,CAAC;oBAC3D,eAAe,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACvD,CAAC;gBACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAChC,CAAC;YAED,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;YAElD,mFAAmF;YACnF,4DAA4D;YAC5D,IAAI,GAAG,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACnC,OAAO;YACT,CAAC;YAED,wEAAwE;YACxE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC;YAEtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,yBAAyB,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,GAAG,yBAAyB,CAAC;QACnD,CAAC;QAED,8CAA8C;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,CAAC;QACxD,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED;;OAEG;IACK,kBAAkB,CAAC,MAAqC;QAC9D,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QAE5B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,WAAW,CAAC,CAAC;QACrE,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,aAAa,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,8CAA8C;QAC9C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,IAAa;QAC9B,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IACzD,CAAC;IAED;;OAEG;IACH,SAAS,CAAC,IAAa;QACrB,OAAQ,IAAuB,CAAC,SAAS,KAAK,IAAI,CAAC;IACrD,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,IAAa,EAAE,SAAc;QACnD,uEAAuE;QACvE,MAAM,WAAW,GAAG,IAA+D,CAAC;QACpF,IAAI,WAAW,CAAC,aAAa,IAAI,OAAO,WAAW,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;YACjF,OAAO,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC;QAED,oCAAoC;QACpC,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;YAC/D,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IACxC,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,QAAQ,CAAC,IAAa;QACpB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC;IAC/C,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,MAAc,EAAE,IAAa;QAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,IAAa,EAAE,KAAkB;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,IAAI;YACJ,QAAQ,EAAE,KAAK,EAAE,QAAQ,IAAI,KAAK;SACnC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,SAAS,CAAC,IAAa,EAAE,KAAiB;QACxC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,4EAA4E;QAC5E,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,aAAa,GAAG,IAAI,CAAC,IAE1B,CAAC;YACF,IAAI,OAAO,aAAa,CAAC,oBAAoB,KAAK,UAAU,EAAE,CAAC;gBAC7D,aAAa,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;yGAxOU,eAAe;6DAAf,eAAe;YCxB5B,8BAAqD;YACnD,iGAoBC;YACH,iBAAM;;YAtBgB,2CAA8B;YAClD,cAoBC;YApBD,2BAoBC;;;iFDGU,eAAe;cAP3B,SAAS;6BACI,KAAK,YACP,YAAY,mBAGL,uBAAuB,CAAC,MAAM;;kBA4B9C,MAAM;;kBACN,MAAM;;kBAWN,KAAK;;kFAtCK,eAAe","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\nimport { BaseApplication, DynamicNavItem, NavItem, WorkspaceStateManager, WorkspaceConfiguration } from '@memberjunction/ng-base-application';\nimport { SharedService } from '@memberjunction/ng-shared';\nimport { Subject, takeUntil } from 'rxjs';\n\n/*\n Event emitted when a nav item is clicked\n /\nexport interface NavItemClickEvent {\n item: NavItem;\n shiftKey: boolean;\n}\n\n/\n Horizontal navigation items for the current app.\n * Uses OnPush change detection and reactive state management for optimal performance.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-nav',\n templateUrl: './app-nav.component.html',\n styleUrls: ['./app-nav.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AppNavComponent implements OnInit, OnDestroy {\n private destroy$ = new Subject<void>();\n private _app: BaseApplication \| null = null;\n private _cachedNavItems: NavItem[] = [];\n private _cachedAppColor: string = 'var(--mj-brand-primary)';\n private _servicesInjected = false;\n\n /\n Monotonically increasing counter used to detect and discard stale async results.\n \n Because GetNavItems() is async (HomeApplication does a DB lookup for record names),\n * and RxJS subscribe() does NOT serialize async callbacks, multiple calls to\n * updateCachedData() can overlap. Without this guard, a slow call (e.g., Home app\n * doing a DB lookup) that started BEFORE a fast call (e.g., switching to App B)\n * could resolve AFTER the fast call and overwrite the correct nav items with stale ones.\n \n How it works:\n * 1. Each updateCachedData() call increments this counter and captures it as `gen`\n * 2. After the await, it checks: does `gen` still match `_updateGeneration`?\n * 3. If not, a newer call started while we were waiting — discard our stale results\n /\n private _updateGeneration = 0;\n\n // Map of nav item key (Route or Label) to active state\n private activeStateMap = new Map<string, boolean>();\n\n @Output() navItemClick = new EventEmitter<NavItemClickEvent>();\n @Output() navItemDismiss = new EventEmitter<NavItem>();\n\n constructor(\n private workspaceManager: WorkspaceStateManager,\n private sharedService: SharedService,\n private cdr: ChangeDetectorRef\n ) {}\n\n /\n Input setter for app - triggers cache update when app changes\n /\n @Input()\n set app(value: BaseApplication \| null) {\n if (this._app !== value) {\n this._app = value;\n this._cachedNavItems = []; // Clear stale items immediately so previous app's items don't flash\n this.activeStateMap.clear();\n this._servicesInjected = false; // Reset injection flag\n this.updateCachedData();\n this.cdr.markForCheck();\n }\n }\n\n get app(): BaseApplication \| null {\n return this._app;\n }\n\n ngOnInit(): void {\n // Subscribe to workspace configuration changes.\n // Must rebuild nav items (not just active states) because dynamic nav items\n // are generated based on the currently active tab - when a user navigates\n // from one record to another (e.g., via OpenEntityRecord), the active tab\n // changes and the dynamic nav item needs to reflect the new record.\n this.workspaceManager.Configuration\n .pipe(takeUntil(this.destroy$))\n .subscribe(async () => {\n await this.updateCachedData();\n });\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n /\n Update cached nav items and app color when app changes\n /\n private async updateCachedData(): Promise<void> {\n // Capture the current generation before any async work.\n // See _updateGeneration JSDoc for full explanation of the race condition this prevents.\n const gen = ++this._updateGeneration;\n\n if (this._app) {\n // Inject services once for apps that need them (e.g., HomeApplication for dynamic nav items)\n if (!this._servicesInjected) {\n const appWithServices = this._app as BaseApplication & {\n SetWorkspaceManager?: (manager: WorkspaceStateManager) => void;\n SetSharedService?: (service: SharedService) => void;\n };\n\n if (typeof appWithServices.SetWorkspaceManager === 'function') {\n appWithServices.SetWorkspaceManager(this.workspaceManager);\n }\n if (typeof appWithServices.SetSharedService === 'function') {\n appWithServices.SetSharedService(this.sharedService);\n }\n this._servicesInjected = true;\n }\n\n const items = await this._app.GetNavItems() \|\| [];\n\n // If a newer call started while we were awaiting, our results are stale — bail out\n // so we don't overwrite the newer call's (correct) results.\n if (gen !== this._updateGeneration) {\n return;\n }\n\n // Only show items with Status 'Active' or undefined (default to Active)\n this._cachedNavItems = items.filter(item => !item.Status \|\| item.Status === 'Active');\n\n this._cachedAppColor = this._app.GetColor() \|\| 'var(--mj-brand-primary)';\n } else {\n this._cachedNavItems = [];\n this._cachedAppColor = 'var(--mj-brand-primary)';\n }\n\n // Update active states after nav items change\n const config = this.workspaceManager.GetConfiguration();\n this.updateActiveStates(config);\n this.cdr.markForCheck();\n }\n\n /\n Update active state map based on current workspace configuration\n /\n private updateActiveStates(config: WorkspaceConfiguration \| null): void {\n this.activeStateMap.clear();\n\n if (!config \|\| !this._app) {\n return;\n }\n\n const activeTab = config.tabs.find(t => t.id === config.activeTabId);\n if (!activeTab \|\| activeTab.applicationId !== this._app.ID) {\n return;\n }\n\n // Compute active state for each nav item once\n for (const item of this._cachedNavItems) {\n const key = this.getItemKey(item);\n const isActive = this.computeIsActive(item, activeTab);\n this.activeStateMap.set(key, isActive);\n }\n }\n\n /\n Get unique key for nav item (used for tracking and active state).\n * Prefers RecordID for dynamic items to avoid label collisions.\n /\n private getItemKey(item: NavItem): string {\n return item.RecordID \|\| item.Route \|\| item.Label \|\| '';\n }\n\n /\n Check if a nav item is dynamic (generated from recent orphan resources)\n /\n isDynamic(item: NavItem): boolean {\n return (item as DynamicNavItem).isDynamic === true;\n }\n\n /\n Compute if nav item is active based on active tab\n /\n private computeIsActive(item: NavItem, activeTab: any): boolean {\n // Check if nav item has a custom matching function (for dynamic items)\n const dynamicItem = item as NavItem & { isActiveMatch?: (tab: unknown) => boolean };\n if (dynamicItem.isActiveMatch && typeof dynamicItem.isActiveMatch === 'function') {\n return dynamicItem.isActiveMatch(activeTab);\n }\n\n // Standard matching: route or label\n return (item.Route && activeTab.configuration['route'] === item.Route) \|\|\n activeTab.title === item.Label;\n }\n\n /\n Get cached navigation items (no computation in getter)\n /\n get navItems(): NavItem[] {\n return this._cachedNavItems;\n }\n\n /\n Get cached app color (no computation in getter)\n /\n get appColor(): string {\n return this._cachedAppColor;\n }\n\n /\n Check if nav item is active (uses cached state from Map)\n /\n isActive(item: NavItem): boolean {\n const key = this.getItemKey(item);\n return this.activeStateMap.get(key) \|\| false;\n }\n\n /\n Track function for @for to optimize rendering\n /\n trackByNavItem(_index: number, item: NavItem): string {\n return this.getItemKey(item);\n }\n\n /\n Handle nav item click\n /\n onNavClick(item: NavItem, event?: MouseEvent): void {\n this.navItemClick.emit({\n item,\n shiftKey: event?.shiftKey \|\| false\n });\n }\n\n /\n Handle dismiss click on a dynamic nav item.\n * Removes from the app's recent stack and refreshes nav items immediately.\n * Stops propagation so the nav click handler doesn't fire.\n */\n onDismiss(item: NavItem, event: MouseEvent): void {\n event.stopPropagation();\n\n // Remove from the app's recent stack directly so we can refresh immediately\n if (this._app) {\n const appWithRemove = this._app as BaseApplication & {\n RemoveDynamicNavItem?: (navItem: NavItem) => void;\n };\n if (typeof appWithRemove.RemoveDynamicNavItem === 'function') {\n appWithRemove.RemoveDynamicNavItem(item);\n this.updateCachedData();\n }\n }\n\n this.navItemDismiss.emit(item);\n }\n\n}\n","<nav class=\"nav-list\" [style.--app-color]=\"appColor\">\n @for (item of navItems; track trackByNavItem($index, item)) {\n <div\n class=\"nav-item\"\n [class.active]=\"isActive(item)\"\n [class.dynamic]=\"isDynamic(item)\"\n [class.no-icon]=\"!item.Icon\"\n (click)=\"onNavClick(item, $event)\">\n @if (item.Icon) {\n <i [class]=\"item.Icon\"></i>\n }\n <span>{{ item.Label }}</span>\n @if (item.Badge) {\n <span class=\"badge\">{{ item.Badge }}</span>\n }\n @if (isDynamic(item)) {\n <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n</nav>\n"]}

package/dist/lib/shell/components/header/app-switcher.component.js CHANGED Viewed

@@ -14,21 +14,21 @@ function AppSwitcherComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap((ctx_r1.activeApp == null ? null : ctx_r1.activeApp.Icon) || "fa-solid fa-cube");
     i0.ɵɵstyleProp("color", ctx_r1.activeApp == null ? null : ctx_r1.activeApp.GetColor())("--active-color", ctx_r1.activeApp == null ? null : ctx_r1.activeApp.GetColor());
 } }
-function AppSwitcherComponent_Conditional_5_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
+function AppSwitcherComponent_Conditional_5_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 15);
 } }
-function AppSwitcherComponent_Conditional_5_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function AppSwitcherComponent_Conditional_5_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const app_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMap(app_r5.Icon || "fa-solid fa-cube");
 } }
-function AppSwitcherComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AppSwitcherComponent_Conditional_5_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_For_2_Template_div_click_0_listener() { const app_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectApp(app_r5)); });
-    i0.ɵɵconditionalCreate(1, AppSwitcherComponent_Conditional_5_For_2_Conditional_1_Template, 1, 0, "i", 14);
-    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_5_For_2_Conditional_2_Template, 1, 2, "i", 15);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_For_3_Template_div_click_0_listener() { const app_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectApp(app_r5)); });
+    i0.ɵɵconditionalCreate(1, AppSwitcherComponent_Conditional_5_For_3_Conditional_1_Template, 1, 0, "i", 15);
+    i0.ɵɵconditionalCreate(2, AppSwitcherComponent_Conditional_5_For_3_Conditional_2_Template, 1, 2, "i", 16);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
@@ -46,18 +46,19 @@ function AppSwitcherComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1
 } }
 function AppSwitcherComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵrepeaterCreate(1, AppSwitcherComponent_Conditional_5_For_2_Template, 5, 9, "div", 9, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelement(3, "div", 10);
-    i0.ɵɵelementStart(4, "div", 11);
-    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_Template_div_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openConfigDialog()); });
-    i0.ɵɵelement(5, "i", 12);
-    i0.ɵɵelementStart(6, "span");
-    i0.ɵɵtext(7, "Configure...");
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 9);
+    i0.ɵɵrepeaterCreate(2, AppSwitcherComponent_Conditional_5_For_3_Template, 5, 9, "div", 10, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "div", 11);
+    i0.ɵɵelementStart(5, "div", 12);
+    i0.ɵɵlistener("click", function AppSwitcherComponent_Conditional_5_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openConfigDialog()); });
+    i0.ɵɵelement(6, "i", 13);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Configure...");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.apps);
 } }
 /**
@@ -152,7 +153,7 @@ export class AppSwitcherComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appConfigDialog = _t.first);
         } }, hostBindings: function AppSwitcherComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function AppSwitcherComponent_click_HostBindingHandler($event) { return ctx.onClickOutside($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { activeApp: "activeApp", isViewingSystemTab: "isViewingSystemTab", loadingAppId: "loadingAppId" }, outputs: { appSelected: "appSelected" }, standalone: false, decls: 8, vars: 6, consts: [["appConfigDialog", ""], [1, "app-switcher-container"], [1, "app-switcher-button", 3, "click"], [1, "app-icon", "loading-spinner", "fa-solid", "fa-spinner", "fa-spin"], [1, "app-icon", 3, "class", "color", "--active-color"], [1, "dropdown-arrow", "fa-solid", "fa-chevron-down"], [1, "app-switcher-dropdown"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "app-icon"], [1, "app-switcher-item", 3, "active", "loading", "--item-color"], [1, "app-switcher-divider"], [1, "app-switcher-item", "configure-item", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "app-switcher-item", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [3, "class"]], template: function AppSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { activeApp: "activeApp", isViewingSystemTab: "isViewingSystemTab", loadingAppId: "loadingAppId" }, outputs: { appSelected: "appSelected" }, standalone: false, decls: 8, vars: 6, consts: [["appConfigDialog", ""], [1, "app-switcher-container"], [1, "app-switcher-button", 3, "click"], [1, "app-icon", "loading-spinner", "fa-solid", "fa-spinner", "fa-spin"], [1, "app-icon", 3, "class", "color", "--active-color"], [1, "dropdown-arrow", "fa-solid", "fa-chevron-down"], [1, "app-switcher-dropdown"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "app-icon"], [1, "app-switcher-list"], [1, "app-switcher-item", 3, "active", "loading", "--item-color"], [1, "app-switcher-divider"], [1, "app-switcher-item", "configure-item", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "app-switcher-item", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [3, "class"]], template: function AppSwitcherComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵlistener("click", function AppSwitcherComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdown()); });
@@ -160,7 +161,7 @@ export class AppSwitcherComponent {
             i0.ɵɵconditionalCreate(3, AppSwitcherComponent_Conditional_3_Template, 1, 6, "i", 4);
             i0.ɵɵelement(4, "i", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(5, AppSwitcherComponent_Conditional_5_Template, 8, 0, "div", 6);
+            i0.ɵɵconditionalCreate(5, AppSwitcherComponent_Conditional_5_Template, 9, 0, "div", 6);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "mj-user-app-config", 7, 0);
             i0.ɵɵtwoWayListener("ShowDialogChange", function AppSwitcherComponent_Template_mj_user_app_config_ShowDialogChange_6_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
@@ -176,11 +177,11 @@ export class AppSwitcherComponent {
             i0.ɵɵconditional(ctx.showDropdown ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
-        } }, dependencies: [i2.UserAppConfigComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: -2px; \n\n}\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, #757575);\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, #757575);\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--item-color, #757575);\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--item-color, #1976d2) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, #1976d2);\n  font-weight: 600;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%]::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]::before {\n  display: none;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: #757575;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]::after {\n  \n\n  display: none;\n}\n\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--item-color, #757575);\n}\n\n\n\n@media (max-width: 600px) {\n  .app-switcher-dropdown[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    width: 24px;\n  }\n}"] });
+        } }, dependencies: [i2.UserAppConfigComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: -2px; \n\n}\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px);\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%]::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]::before {\n  display: none;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]::after {\n  \n\n  display: none;\n}\n\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n\n\n@media (max-width: 600px) {\n  .app-switcher-dropdown[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    flex: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppSwitcherComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    (click)=\"toggleDropdown()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\"\n      [style.--active-color]=\"activeApp?.GetColor()\"></i>\n    }\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <div class=\"app-switcher-dropdown\">\n      @for (app of apps; track app) {\n        <div\n          class=\"app-switcher-item\"\n          [class.active]=\"IsActiveApp(app)\"\n          [class.loading]=\"IsLoadingApp(app)\"\n          [style.--item-color]=\"app.GetColor()\"\n          (click)=\"selectApp(app)\">\n          @if (IsLoadingApp(app)) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          @if (!IsLoadingApp(app)) {\n            <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n          }\n          <span>{{ app.Name }}</span>\n        </div>\n      }\n      <!-- Divider -->\n      <div class=\"app-switcher-divider\"></div>\n      <!-- Configure option -->\n      <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n        <i class=\"fa-solid fa-gear\"></i>\n        <span>Configure...</span>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n  #appConfigDialog\n  [(ShowDialog)]=\"showConfigDialog\"\n  (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: -2px; /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n/* Color underline under the icon only, not the caret */\n.app-switcher-button .app-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, #757575);\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n}\n.app-switcher-dropdown .app-switcher-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown .app-switcher-item::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, #757575);\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item i {\n  font-size: 18px;\n  color: var(--item-color, #757575);\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown .app-switcher-item:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown .app-switcher-item.active {\n  background: color-mix(in srgb, var(--item-color, #1976d2) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, #1976d2);\n  font-weight: 600;\n}\n.app-switcher-dropdown .app-switcher-item.active::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n/* Configure option - no color line, neutral gray styling */\n.app-switcher-dropdown .app-switcher-item.configure-item {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item::before {\n  display: none;\n}\n.app-switcher-dropdown .app-switcher-item.configure-item i {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover i {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n/* Loading state for app switcher button */\n.app-switcher-button .loading-spinner {\n  color: #757575;\n}\n.app-switcher-button .loading-spinner::after {\n  /* Hide the underline when showing spinner */\n  display: none;\n}\n\n/* Loading state for dropdown items */\n.app-switcher-dropdown .app-switcher-item.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown .app-switcher-item.loading i {\n  color: var(--item-color, #757575);\n}\n\n/* Mobile: full-width dropdown with scroll */\n@media (max-width: 600px) {\n  .app-switcher-dropdown {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown .app-switcher-item {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown .app-switcher-item i {\n    font-size: 20px;\n    width: 24px;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    (click)=\"toggleDropdown()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\"\n      [style.--active-color]=\"activeApp?.GetColor()\"></i>\n    }\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <div class=\"app-switcher-dropdown\">\n      <div class=\"app-switcher-list\">\n        @for (app of apps; track app) {\n          <div\n            class=\"app-switcher-item\"\n            [class.active]=\"IsActiveApp(app)\"\n            [class.loading]=\"IsLoadingApp(app)\"\n            [style.--item-color]=\"app.GetColor()\"\n            (click)=\"selectApp(app)\">\n            @if (IsLoadingApp(app)) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!IsLoadingApp(app)) {\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            }\n            <span>{{ app.Name }}</span>\n          </div>\n        }\n      </div>\n      <!-- Divider + Configure pinned at bottom -->\n      <div class=\"app-switcher-divider\"></div>\n      <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n        <i class=\"fa-solid fa-gear\"></i>\n        <span>Configure...</span>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n  #appConfigDialog\n  [(ShowDialog)]=\"showConfigDialog\"\n  (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: -2px; /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n/* Color underline under the icon only, not the caret */\n.app-switcher-button .app-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px);\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown .app-switcher-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown .app-switcher-item::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item i {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown .app-switcher-item:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown .app-switcher-item.active {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown .app-switcher-item.active::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n/* Configure option - no color line, neutral gray styling */\n.app-switcher-dropdown .app-switcher-item.configure-item {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item::before {\n  display: none;\n}\n.app-switcher-dropdown .app-switcher-item.configure-item i {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover i {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n/* Loading state for app switcher button */\n.app-switcher-button .loading-spinner {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button .loading-spinner::after {\n  /* Hide the underline when showing spinner */\n  display: none;\n}\n\n/* Loading state for dropdown items */\n.app-switcher-dropdown .app-switcher-item.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown .app-switcher-item.loading i {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n/* Mobile: full-width dropdown with scroll */\n@media (max-width: 600px) {\n  .app-switcher-dropdown {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown .app-switcher-item {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown .app-switcher-item i {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list {\n    overflow-y: visible;\n    flex: none;\n  }\n}\n"] }]
     }], () => [{ type: i1.ApplicationManager }], { activeApp: [{
             type: Input
         }], isViewingSystemTab: [{

package/dist/lib/shell/components/header/app-switcher.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-switcher.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-switcher.component.ts","../../../../../src/lib/shell/components/header/app-switcher.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGhG,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;;;;;;ICE9C,uBAAoE;;;IAGpE,uBAEmD;;;IAF/B,8FAA+C;IAEnE,AADE,sFAAqC,iFACO;;;~~IAexC~~,wBAA2C;;;IAG3C,oBAAgD;;;IAA7C,gDAAwC;;;;IAV/C,+BAK2B;IAAzB,qNAAS,wBAAc,KAAC;IACxB,yGAAyB;IAGzB,yGAA0B;IAG1B,4BAAM;IAAA,YAAc;IACtB,AADsB,iBAAO,EACvB;;;;IATJ,iDAAqC;IADrC,AADA,oDAAiC,wCACE;IAGnC,cAEC;IAFD,sDAEC;IACD,cAEC;IAFD,uDAEC;IACK,eAAc;IAAd,iCAAc;;;;IAd1B,8BAAmC;~~IACjC~~,~~uHAeC~~;~~IAED~~,0BAAwC;~~IAExC~~,+BAA2E;IAA7B,qLAAS,yBAAkB,KAAC;IACxE,wBAAgC;IAChC,4BAAM;IAAA,4BAAY;IAEtB,AADE,AADoB,iBAAO,EACrB,EACF;;;~~IAvBJ~~,~~cAeC~~;IAfD,0BAeC;;~~AD3BP~~;;;GAGG;AAOH,MAAM,OAAO,oBAAoB;IAYX;IAXX,SAAS,GAA2B,IAAI,CAAC;IACzC,kBAAkB,GAAG,KAAK,CAAC;IACpC,qEAAqE;IAC5D,YAAY,GAAkB,IAAI,CAAC;IAClC,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IAErB,eAAe,CAA0B;IAEvE,YAAY,GAAG,KAAK,CAAC;IACrB,gBAAgB,GAAG,KAAK,CAAC;IAEzB,YAAoB,UAA8B;QAA9B,eAAU,GAAV,UAAU,CAAoB;IAAG,CAAC;IAEtD;;OAEG;IACH,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC;IACpC,CAAC;IAED;;;OAGG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC;IAED;;;OAGG;IACH,SAAS,CAAC,GAAoB;QAC5B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACvE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IAED,8EAA8E;IAC9E,WAAW,CAAC,GAAoB;QAC9B,OAAO,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,+EAA+E;IAC/E,YAAY,CAAC,GAAoB;QAC/B,OAAO,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;IAED;;OAEG;IAEH,cAAc,CAAC,KAAiB;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACpE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,kDAAkD;QAClD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;OAEG;IACH,aAAa;QACX,yDAAyD;QACzD,mDAAmD;QACnD,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;8GAzFU,oBAAoB;6DAApB,oBAAoB;;;;;;YAApB,+FAAA,0BAAsB,0BAAF;;;YCd/B,AADF,8BAAgE,aAEjC;YAA3B,oIAAS,oBAAgB,KAAC;YAE1B,oFAAiB;YAGjB,oFAAkB;YAKlB,uBAAuD;YACzD,iBAAM;YAEN,sFAAoB;~~YA2BtB~~,iBAAM;YAGN,gDAGkC;YADhC,wRAAiC;YACjC,+JAAe,mBAAe,KAAC;YACjC,iBAAqB;;~~YAjDe~~,wCAA2B;YAI3D,eAEC;YAFD,wCAEC;YACD,cAIC;YAJD,yCAIC;YAIH,~~eA0BC~~;~~YA1BD~~,~~2CA0BC~~;YAMD,cAAiC;YAAjC,uDAAiC;;;~~iFDhCtB~~,oBAAoB;cANhC,SAAS;6BACI,KAAK,YACP,iBAAiB;;kBAK1B,KAAK;;kBACL,KAAK;;kBAEL,KAAK;;kBACL,MAAM;;kBAEN,SAAS;mBAAC,iBAAiB;;kBAqD3B,YAAY;mBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;kFA5D/B,oBAAoB","sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core';\nimport { ApplicationManager, BaseApplication } from '@memberjunction/ng-base-application';\nimport { UserAppConfigComponent } from '@memberjunction/ng-explorer-settings';\nimport { UUIDsEqual } from '@memberjunction/global';\n\n/*\n App switcher dropdown in the header.\n * Displays current app and allows switching between apps.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-switcher',\n templateUrl: './app-switcher.component.html',\n styleUrls: ['./app-switcher.component.css']\n})\nexport class AppSwitcherComponent {\n @Input() activeApp: BaseApplication \| null = null;\n @Input() isViewingSystemTab = false;\n /* ID of the app currently being loaded (shows loading indicator) /\n @Input() loadingAppId: string \| null = null;\n @Output() appSelected = new EventEmitter<string>();\n\n @ViewChild('appConfigDialog') appConfigDialog!: UserAppConfigComponent;\n\n showDropdown = false;\n showConfigDialog = false;\n\n constructor(private appManager: ApplicationManager) {}\n\n /\n Check if the app switcher should show loading state\n /\n get isLoading(): boolean {\n return this.loadingAppId !== null;\n }\n\n /\n Get applications that should appear in the app switcher dropdown\n * (NavigationStyle = 'App Switcher' or 'Both')\n /\n get apps(): BaseApplication[] {\n return this.appManager.GetAppSwitcherApps();\n }\n\n /\n Toggle dropdown visibility\n /\n toggleDropdown(): void {\n this.showDropdown = !this.showDropdown;\n }\n\n /\n Select an application\n * When viewing a system tab, always emit to allow returning to the app\n /\n selectApp(app: BaseApplication): void {\n this.showDropdown = false;\n if (!UUIDsEqual(app.ID, this.activeApp?.ID) \|\| this.isViewingSystemTab) {\n this.appSelected.emit(app.ID);\n }\n }\n\n /* Case-insensitive UUID check whether an app is the currently active app. /\n IsActiveApp(app: BaseApplication): boolean {\n return UUIDsEqual(app.ID, this.activeApp?.ID);\n }\n\n /* Case-insensitive UUID check whether an app is the one currently loading. /\n IsLoadingApp(app: BaseApplication): boolean {\n return UUIDsEqual(app.ID, this.loadingAppId);\n }\n\n /\n Close dropdown when clicking outside\n /\n @HostListener('document:click', ['$event'])\n onClickOutside(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n if (!target.closest('.app-switcher-container') && this.showDropdown) {\n this.showDropdown = false;\n }\n }\n\n /\n Open the app configuration dialog\n /\n openConfigDialog(): void {\n this.showDropdown = false;\n this.showConfigDialog = true;\n // Use setTimeout to ensure ViewChild is available\n setTimeout(() => {\n if (this.appConfigDialog) {\n this.appConfigDialog.Open();\n }\n }, 0);\n }\n\n /\n Handle when config is saved - reload the app list\n */\n onConfigSaved(): void {\n // The ApplicationManager will be refreshed by the dialog\n // Force a re-render by triggering change detection\n this.showConfigDialog = false;\n }\n}\n","<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n <div class=\"app-switcher-button\"\n (click)=\"toggleDropdown()\">\n <!-- Show spinner when loading, otherwise show app icon -->\n @if (isLoading) {\n <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isLoading) {\n <i class=\"app-icon\" [class]=\"activeApp?.Icon \|\| 'fa-solid fa-cube'\"\n [style.color]=\"activeApp?.GetColor()\"\n [style.--active-color]=\"activeApp?.GetColor()\"></i>\n }\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n </div>\n\n @if (showDropdown) {\n <div class=\"app-switcher-dropdown\">\n @for (app of apps; track app) {\n <div\n class=\"app-switcher-item\"\n [class.active]=\"IsActiveApp(app)\"\n [class.loading]=\"IsLoadingApp(app)\"\n [style.--item-color]=\"app.GetColor()\"\n (click)=\"selectApp(app)\">\n @if (IsLoadingApp(app)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!IsLoadingApp(app)) {\n <i [class]=\"app.Icon \|\| 'fa-solid fa-cube'\"></i>\n }\n <span>{{ app.Name }}</span>\n </div>\n }\n <!-- Divider -->\n <div class=\"app-switcher-divider\"></div>\n ~~<!-- Configure option -->\n~~ <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n <i class=\"fa-solid fa-gear\"></i>\n <span>Configure...</span>\n </div>\n </div>\n }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n #appConfigDialog\n [(ShowDialog)]=\"showConfigDialog\"\n (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n"]}
1	+ {"version":3,"file":"app-switcher.component.js","sourceRoot":"","sources":["../../../../../src/lib/shell/components/header/app-switcher.component.ts","../../../../../src/lib/shell/components/header/app-switcher.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core';\nimport { ApplicationManager, BaseApplication } from '@memberjunction/ng-base-application';\nimport { UserAppConfigComponent } from '@memberjunction/ng-explorer-settings';\nimport { UUIDsEqual } from '@memberjunction/global';\n\n/*\n App switcher dropdown in the header.\n * Displays current app and allows switching between apps.\n /\n@Component({\n standalone: false,\n selector: 'mj-app-switcher',\n templateUrl: './app-switcher.component.html',\n styleUrls: ['./app-switcher.component.css']\n})\nexport class AppSwitcherComponent {\n @Input() activeApp: BaseApplication \| null = null;\n @Input() isViewingSystemTab = false;\n /* ID of the app currently being loaded (shows loading indicator) /\n @Input() loadingAppId: string \| null = null;\n @Output() appSelected = new EventEmitter<string>();\n\n @ViewChild('appConfigDialog') appConfigDialog!: UserAppConfigComponent;\n\n showDropdown = false;\n showConfigDialog = false;\n\n constructor(private appManager: ApplicationManager) {}\n\n /\n Check if the app switcher should show loading state\n /\n get isLoading(): boolean {\n return this.loadingAppId !== null;\n }\n\n /\n Get applications that should appear in the app switcher dropdown\n * (NavigationStyle = 'App Switcher' or 'Both')\n /\n get apps(): BaseApplication[] {\n return this.appManager.GetAppSwitcherApps();\n }\n\n /\n Toggle dropdown visibility\n /\n toggleDropdown(): void {\n this.showDropdown = !this.showDropdown;\n }\n\n /\n Select an application\n * When viewing a system tab, always emit to allow returning to the app\n /\n selectApp(app: BaseApplication): void {\n this.showDropdown = false;\n if (!UUIDsEqual(app.ID, this.activeApp?.ID) \|\| this.isViewingSystemTab) {\n this.appSelected.emit(app.ID);\n }\n }\n\n /* Case-insensitive UUID check whether an app is the currently active app. /\n IsActiveApp(app: BaseApplication): boolean {\n return UUIDsEqual(app.ID, this.activeApp?.ID);\n }\n\n /* Case-insensitive UUID check whether an app is the one currently loading. /\n IsLoadingApp(app: BaseApplication): boolean {\n return UUIDsEqual(app.ID, this.loadingAppId);\n }\n\n /\n Close dropdown when clicking outside\n /\n @HostListener('document:click', ['$event'])\n onClickOutside(event: MouseEvent): void {\n const target = event.target as HTMLElement;\n if (!target.closest('.app-switcher-container') && this.showDropdown) {\n this.showDropdown = false;\n }\n }\n\n /\n Open the app configuration dialog\n /\n openConfigDialog(): void {\n this.showDropdown = false;\n this.showConfigDialog = true;\n // Use setTimeout to ensure ViewChild is available\n setTimeout(() => {\n if (this.appConfigDialog) {\n this.appConfigDialog.Open();\n }\n }, 0);\n }\n\n /\n Handle when config is saved - reload the app list\n */\n onConfigSaved(): void {\n // The ApplicationManager will be refreshed by the dialog\n // Force a re-render by triggering change detection\n this.showConfigDialog = false;\n }\n}\n","<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n <div class=\"app-switcher-button\"\n (click)=\"toggleDropdown()\">\n <!-- Show spinner when loading, otherwise show app icon -->\n @if (isLoading) {\n <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isLoading) {\n <i class=\"app-icon\" [class]=\"activeApp?.Icon \|\| 'fa-solid fa-cube'\"\n [style.color]=\"activeApp?.GetColor()\"\n [style.--active-color]=\"activeApp?.GetColor()\"></i>\n }\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n </div>\n\n @if (showDropdown) {\n <div class=\"app-switcher-dropdown\">\n <div class=\"app-switcher-list\">\n @for (app of apps; track app) {\n <div\n class=\"app-switcher-item\"\n [class.active]=\"IsActiveApp(app)\"\n [class.loading]=\"IsLoadingApp(app)\"\n [style.--item-color]=\"app.GetColor()\"\n (click)=\"selectApp(app)\">\n @if (IsLoadingApp(app)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!IsLoadingApp(app)) {\n <i [class]=\"app.Icon \|\| 'fa-solid fa-cube'\"></i>\n }\n <span>{{ app.Name }}</span>\n </div>\n }\n </div>\n <!-- Divider + Configure pinned at bottom -->\n <div class=\"app-switcher-divider\"></div>\n <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n <i class=\"fa-solid fa-gear\"></i>\n <span>Configure...</span>\n </div>\n </div>\n }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n #appConfigDialog\n [(ShowDialog)]=\"showConfigDialog\"\n (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n"]}

package/dist/lib/shell/components/tabs/tab-container.component.js CHANGED Viewed

@@ -971,11 +971,11 @@ export class TabContainerComponent {
             i0.ɵɵconditional(ctx.useSingleResourceMode ? 1 : 2);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.contextMenuVisible ? 3 : -1);
-        } }, styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-surface) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-surface) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"], encapsulation: 2 });
+        } }, styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabContainerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-tab-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-container\">\n\n  <!-- Single-Resource Mode: Direct component rendering without Golden Layout -->\n  <!-- This avoids the 20px height issue when GL header is hidden -->\n  @if (useSingleResourceMode) {\n    <div #directContentContainer class=\"direct-content-container\"></div>\n  } @else {\n    <!-- Multi-Tab Mode: Golden Layout Container -->\n    <div #glContainer class=\"gl-container\"></div>\n  }\n\n  <!-- Context Menu (only relevant in multi-tab mode) -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"context-menu\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\">\n      <div class=\"context-menu-item\" (click)=\"onContextPin()\">\n        <i class=\"fa-solid fa-thumbtack\"></i>\n        <span>{{ isContextTabPinned ? 'Unpin Tab' : 'Pin Tab' }}</span>\n      </div>\n      <div class=\"context-menu-divider\"></div>\n      <div class=\"context-menu-item\" (click)=\"onContextClose()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n        <span>Close Tab</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseOthers()\">\n        <i class=\"fa-solid fa-layer-group\"></i>\n        <span>Close Others</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseToRight()\">\n        <i class=\"fa-solid fa-angles-right\"></i>\n        <span>Close to Right</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-surface) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-surface) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-tab-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-container\">\n\n  <!-- Single-Resource Mode: Direct component rendering without Golden Layout -->\n  <!-- This avoids the 20px height issue when GL header is hidden -->\n  @if (useSingleResourceMode) {\n    <div #directContentContainer class=\"direct-content-container\"></div>\n  } @else {\n    <!-- Multi-Tab Mode: Golden Layout Container -->\n    <div #glContainer class=\"gl-container\"></div>\n  }\n\n  <!-- Context Menu (only relevant in multi-tab mode) -->\n  @if (contextMenuVisible) {\n    <div\n      class=\"context-menu\"\n      [style.left.px]=\"contextMenuX\"\n      [style.top.px]=\"contextMenuY\">\n      <div class=\"context-menu-item\" (click)=\"onContextPin()\">\n        <i class=\"fa-solid fa-thumbtack\"></i>\n        <span>{{ isContextTabPinned ? 'Unpin Tab' : 'Pin Tab' }}</span>\n      </div>\n      <div class=\"context-menu-divider\"></div>\n      <div class=\"context-menu-item\" (click)=\"onContextClose()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n        <span>Close Tab</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseOthers()\">\n        <i class=\"fa-solid fa-layer-group\"></i>\n        <span>Close Others</span>\n      </div>\n      <div class=\"context-menu-item\" (click)=\"onContextCloseToRight()\">\n        <i class=\"fa-solid fa-angles-right\"></i>\n        <span>Close to Right</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: var(--mj-bg-page);\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.context-menu .context-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\n\n/* Ensure GL root container fills available space */\nmj-tab-container .lm_goldenlayout {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-tab-container .lm_root {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-tab-container .lm_item,\nmj-tab-container .lm_content,\nmj-tab-container .lm_stack,\nmj-tab-container .lm_row,\nmj-tab-container .lm_column {\n  box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-tab-container .lm_item {\n  overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\n/* This is separate from .lm_item - it holds the actual tab content */\nmj-tab-container .lm_items {\n  width: 100% !important;\n  height: calc(100% - 38px) !important; /* Account for header height (38px) */\n  box-sizing: border-box !important;\n  position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-tab-container .lm_stack.lm_maximised > .lm_items {\n  height: 100% !important;\n}\n\n/* Target the anonymous ComponentItem div inside lm_items (has no class) */\n/* Created in golden-layout/src/ts/items/component-item.ts:51 without a class */\n/* NOTE: Do NOT set display here - GL uses display:none to hide inactive tabs */\nmj-tab-container .lm_items > div {\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box !important;\n  flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-tab-container .lm_items > div:not([style*=\"display: none\"]) {\n  display: flex !important;\n}\n\n/* Clearfix for float-based row layout - GL uses float:left for horizontal panes */\nmj-tab-container .lm_row::after {\n  content: \"\" !important;\n  display: table !important;\n  clear: both !important;\n}\n\n/* Force content children to respect parent bounds (GL sets pixel widths inline) */\nmj-tab-container .lm_content > * {\n  max-width: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_content {\n  background: var(--mj-bg-page) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100% !important;\n  width: 100% !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: var(--mj-bg-page) !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: var(--mj-bg-surface-sunken) !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid var(--mj-border-default) !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: var(--mj-bg-surface-hover) !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: var(--mj-bg-surface) !important;\n  height: 36px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid var(--mj-border-default) !important;\n  border-bottom-color: var(--mj-bg-surface) !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: var(--mj-text-secondary) !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: var(--mj-status-error) !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"] }]
     }], () => [{ type: i1.GoldenLayoutManager }, { type: i1.WorkspaceStateManager }, { type: i1.ApplicationManager }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: i0.ChangeDetectorRef }], { glContainer: [{
             type: ViewChild,
             args: ['glContainer', { static: false }]

package/dist/lib/shell/loading-themes.js CHANGED Viewed

@@ -10,7 +10,7 @@ export const STANDARD_THEME = {
     staticColors: true, // Keep MJ blue the whole time
     animations: 'pulse', // Calm, professional pulse animation only
     colors: [
-        '#264FAF', // MJ Blue (only color used)
+        '', // Uses --mj-logo-color CSS variable (adapts to theme)
     ],
     messages: [
         'Loading workspace...',