@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/Admin/base-admin-container.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-admin-container.component.js","sourceRoot":"","sources":["../../src/Admin/base-admin-container.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Directive,\n    OnInit,\n    OnDestroy,\n    ChangeDetectorRef,\n    ViewChild,\n    ViewContainerRef,\n    ComponentRef,\n    Type,\n    inject\n} from '@angular/core';\nimport { BaseResourceComponent, BaseDashboard } from '@memberjunction/ng-shared';\nimport { MJGlobal } from '@memberjunction/global';\nimport { DashboardEngine } from '@memberjunction/core-entities';\n\n/** A single sub-section inside an admin container's left-nav. */\nexport interface AdminSection {\n    /** Stable identifier — used in the URL `?section=` deep-link. */\n    id: string;\n    label: string;\n    icon: string;\n    description: string;\n    source: AdminSectionSource;\n}\n\n/**\n * How to resolve and instantiate the component for this sub-section.\n *\n * - `resource`: looks up `@RegisterClass(BaseResourceComponent, driverClass)` and renders it directly.\n * - `dashboard`: looks up the MJ Dashboard record by name, then renders its `DriverClass` via the\n *   BaseDashboard registry with a synthetic `{ dashboard }` config (mirrors the shell's flow for\n *   `ResourceType: \"Dashboards\"` nav items).\n */\nexport type AdminSectionSource =\n    | { kind: 'resource'; driverClass: string }\n    | { kind: 'dashboard'; dashboardName: string };\n\n/**\n * Shared base for all Admin app container resources. Subclasses declare:\n *   - ContainerTitle / ContainerIcon / ContainerSubtitle\n *   - Sections[]\n *   - @RegisterClass(BaseResourceComponent, '...')\n *\n * The base handles: left-nav state, URL deep-linking via NavigationService,\n * dynamic component instantiation for both resource and dashboard sections,\n * teardown on switch.\n */\n@Directive()\nexport abstract class BaseAdminContainerComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public abstract readonly ContainerTitle: string;\n    public abstract readonly ContainerIcon: string;\n    public abstract readonly ContainerSubtitle: string;\n    public abstract readonly Sections: AdminSection[];\n\n    @ViewChild('contentHost', { read: ViewContainerRef, static: true })\n    protected contentHost!: ViewContainerRef;\n\n    public ActiveSection = '';\n    public LoadError: string | null = null;\n    public IsLoading = false;\n\n    /**\n     * Cache of section.id → ComponentRef. Once a sub-section is rendered we\n     * keep its component alive across switches by detaching + reattaching the\n     * view (instead of destroying + recreating). This preserves state — Event\n     * Monitor's captured events, GraphQL Console's history, query inputs,\n     * scroll position, etc. — and avoids expensive re-init.\n     */\n    protected cache = new Map<string, ComponentRef<unknown>>();\n    protected currentSectionId: string | null = null;\n\n    protected readonly cdr = inject(ChangeDetectorRef);\n\n    public override async ngOnInit(): Promise<void> {\n        super.ngOnInit();\n\n        const params = this.GetQueryParams();\n        const requested = params['section'];\n        const initial = this.findSection(requested)?.id ?? this.Sections[0]?.id ?? '';\n        const target = this.findSection(initial);\n        if (target) {\n            await this.selectSection(target, /*syncUrl*/ false);\n        }\n\n        if (!requested && this.ActiveSection) {\n            this.UpdateQueryParams({ section: this.ActiveSection });\n        }\n\n        this.NotifyLoadComplete();\n    }\n\n    public override ngOnDestroy(): void {\n        for (const ref of this.cache.values()) {\n            try { ref.destroy(); } catch { /* ignore */ }\n        }\n        this.cache.clear();\n        this.currentSectionId = null;\n        super.ngOnDestroy();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return this.ContainerTitle; }\n    public override async GetResourceIconClass(): Promise<string> { return this.ContainerIcon; }\n\n    /** Called by the framework on browser back/forward + deep-link entry. */\n    protected override OnQueryParamsChanged(params: Record<string, string>, _source: 'popstate' | 'deeplink'): void {\n        const section = params['section'];\n        if (!section || section === this.ActiveSection) return;\n        const target = this.findSection(section);\n        if (target) {\n            void this.selectSection(target, /*syncUrl*/ false);\n        }\n    }\n\n    public async OnSectionClick(section: AdminSection): Promise<void> {\n        if (section.id === this.ActiveSection) return;\n        await this.selectSection(section, /*syncUrl*/ true);\n    }\n\n    // ---------- protected ----------\n\n    private async selectSection(section: AdminSection, syncUrl: boolean): Promise<void> {\n        this.ActiveSection = section.id;\n        this.IsLoading = true;\n        this.LoadError = null;\n        this.cdr.markForCheck();\n\n        if (syncUrl) {\n            this.UpdateQueryParams({ section: section.id });\n        }\n\n        try {\n            await this.renderSection(section);\n        } catch (err) {\n            this.LoadError = err instanceof Error ? err.message : String(err);\n        } finally {\n            this.IsLoading = false;\n            this.cdr.markForCheck();\n        }\n    }\n\n    private async renderSection(section: AdminSection): Promise<void> {\n        // Detach (don't destroy) the currently visible sub-component so it\n        // stays alive in memory with its state intact.\n        this.detachCurrent();\n\n        // Reattach if cached\n        const cached = this.cache.get(section.id);\n        if (cached) {\n            this.contentHost.insert(cached.hostView);\n            this.currentSectionId = section.id;\n            return;\n        }\n\n        // Otherwise, create fresh\n        const ref = section.source.kind === 'resource'\n            ? await this.createResourceRef(section.source.driverClass)\n            : await this.createDashboardRef(section.source.dashboardName);\n\n        if (ref) {\n            this.applyHostSizing(ref);\n            this.cache.set(section.id, ref);\n            this.currentSectionId = section.id;\n        }\n    }\n\n    private detachCurrent(): void {\n        if (!this.currentSectionId) return;\n        const cur = this.cache.get(this.currentSectionId);\n        if (!cur) return;\n        const idx = this.contentHost.indexOf(cur.hostView);\n        if (idx >= 0) this.contentHost.detach(idx);\n    }\n\n    private async createResourceRef(driverClass: string): Promise<ComponentRef<unknown> | null> {\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);\n        if (!reg) {\n            this.LoadError = `Component \"${driverClass}\" is not registered. Make sure its module is imported.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseResourceComponent>);\n        const instance = ref.instance as BaseResourceComponent;\n        if (this.Data) instance.Data = this.Data;\n        return ref;\n    }\n\n    private async createDashboardRef(dashboardName: string): Promise<ComponentRef<unknown> | null> {\n        await DashboardEngine.Instance.Config(false);\n        const dashboard = DashboardEngine.Instance.Dashboards.find(d => d.Name === dashboardName);\n        if (!dashboard) {\n            this.LoadError = `Dashboard \"${dashboardName}\" was not found in metadata.`;\n            return null;\n        }\n        if (dashboard.Type !== 'Code') {\n            this.LoadError = `Dashboard \"${dashboardName}\" has type \"${dashboard.Type}\" — only Code dashboards can be embedded here.`;\n            return null;\n        }\n        if (!dashboard.DriverClass) {\n            this.LoadError = `Dashboard \"${dashboardName}\" has no DriverClass set.`;\n            return null;\n        }\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseDashboard, dashboard.DriverClass);\n        if (!reg) {\n            this.LoadError = `Driver class \"${dashboard.DriverClass}\" is not registered against BaseDashboard.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseDashboard>);\n        const instance = ref.instance as BaseDashboard;\n        instance.Config = { dashboard, userState: undefined };\n        instance.Refresh();\n        return ref;\n    }\n\n    /**\n     * Force the rendered sub-component's host element to fill the container\n     * cell. Mirrors what `tab-container` does for top-level resources — many\n     * dashboards rely on inline `height: 100%` to bound their internal layout\n     * (so their own `overflow-y: auto` regions actually scroll).\n     */\n    private applyHostSizing(ref: ComponentRef<unknown>): void {\n        const hostEl = (ref.hostView as unknown as { rootNodes: HTMLElement[] }).rootNodes[0];\n        if (!hostEl || !(hostEl instanceof HTMLElement)) return;\n        hostEl.style.height = '100%';\n        hostEl.style.minHeight = '0';\n        hostEl.style.display = 'flex';\n        hostEl.style.flexDirection = 'column';\n        hostEl.style.flex = '1 1 auto';\n    }\n\n    private findSection(id: string | undefined | null): AdminSection | undefined {\n        if (!id) return undefined;\n        return this.Sections.find(s => s.id === id);\n    }\n}\n"]}
+{"version":3,"file":"base-admin-container.component.js","sourceRoot":"","sources":["../../src/Admin/base-admin-container.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Directive,\n    OnInit,\n    OnDestroy,\n    ChangeDetectorRef,\n    ViewChild,\n    ViewContainerRef,\n    ComponentRef,\n    Type,\n    inject\n} from '@angular/core';\nimport { BaseResourceComponent, BaseDashboard } from '@memberjunction/ng-shared';\nimport { MJGlobal } from '@memberjunction/global';\nimport { DashboardEngine } from '@memberjunction/core-entities';\nimport { MJLeftNavItem, MJLeftNavSection } from '@memberjunction/ng-ui-components';\n\n/** A single sub-section inside an admin container's left-nav. */\nexport interface AdminSection {\n    /** Stable identifier — used in the URL `?section=` deep-link. */\n    id: string;\n    label: string;\n    icon: string;\n    description: string;\n    source: AdminSectionSource;\n}\n\n/**\n * How to resolve and instantiate the component for this sub-section.\n *\n * - `resource`: looks up `@RegisterClass(BaseResourceComponent, driverClass)` and renders it directly.\n * - `dashboard`: looks up the MJ Dashboard record by name, then renders its `DriverClass` via the\n *   BaseDashboard registry with a synthetic `{ dashboard }` config (mirrors the shell's flow for\n *   `ResourceType: \"Dashboards\"` nav items).\n */\nexport type AdminSectionSource =\n    | { kind: 'resource'; driverClass: string }\n    | { kind: 'dashboard'; dashboardName: string };\n\n/**\n * Shared base for all Admin app container resources. Subclasses declare:\n *   - ContainerTitle / ContainerIcon / ContainerSubtitle\n *   - Sections[]\n *   - @RegisterClass(BaseResourceComponent, '...')\n *\n * The base handles: left-nav state, URL deep-linking via NavigationService,\n * dynamic component instantiation for both resource and dashboard sections,\n * teardown on switch.\n */\n@Directive()\nexport abstract class BaseAdminContainerComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public abstract readonly ContainerTitle: string;\n    public abstract readonly ContainerIcon: string;\n    public abstract readonly ContainerSubtitle: string;\n    public abstract readonly Sections: AdminSection[];\n\n    @ViewChild('contentHost', { read: ViewContainerRef, static: true })\n    protected contentHost!: ViewContainerRef;\n\n    public ActiveSection = '';\n    public LoadError: string | null = null;\n    public IsLoading = false;\n\n    /**\n     * Cache of section.id → ComponentRef. Once a sub-section is rendered we\n     * keep its component alive across switches by detaching + reattaching the\n     * view (instead of destroying + recreating). This preserves state — Event\n     * Monitor's captured events, GraphQL Console's history, query inputs,\n     * scroll position, etc. — and avoids expensive re-init.\n     */\n    protected cache = new Map<string, ComponentRef<unknown>>();\n    protected currentSectionId: string | null = null;\n\n    protected readonly cdr = inject(ChangeDetectorRef);\n\n    public override async ngOnInit(): Promise<void> {\n        super.ngOnInit();\n\n        const params = this.GetQueryParams();\n        const requested = params['section'];\n        const initial = this.findSection(requested)?.id ?? this.Sections[0]?.id ?? '';\n        const target = this.findSection(initial);\n        if (target) {\n            await this.selectSection(target, /*syncUrl*/ false);\n        }\n\n        if (!requested && this.ActiveSection) {\n            this.UpdateQueryParams({ section: this.ActiveSection });\n        }\n\n        this.NotifyLoadComplete();\n    }\n\n    public override ngOnDestroy(): void {\n        for (const ref of this.cache.values()) {\n            try { ref.destroy(); } catch { /* ignore */ }\n        }\n        this.cache.clear();\n        this.currentSectionId = null;\n        super.ngOnDestroy();\n    }\n\n    public override async GetResourceDisplayName(): Promise<string> { return this.ContainerTitle; }\n    public override async GetResourceIconClass(): Promise<string> { return this.ContainerIcon; }\n\n    /**\n     * Single-section view of `Sections` shaped for `<mj-left-nav>`. AdminSection\n     * already has the required id / label / icon / description fields, so it's\n     * structurally compatible with MJLeftNavItem.\n     */\n    public get NavSections(): MJLeftNavSection[] {\n        return [{ items: this.Sections }];\n    }\n\n    /** Adapter from `<mj-left-nav>`'s ItemClicked event back to `selectSection`. */\n    public OnNavItemClicked(item: MJLeftNavItem): void {\n        const section = this.Sections.find(s => s.id === item.id);\n        if (section) {\n            void this.OnSectionClick(section);\n        }\n    }\n\n    /** Called by the framework on browser back/forward + deep-link entry. */\n    protected override OnQueryParamsChanged(params: Record<string, string>, _source: 'popstate' | 'deeplink'): void {\n        const section = params['section'];\n        if (!section || section === this.ActiveSection) return;\n        const target = this.findSection(section);\n        if (target) {\n            void this.selectSection(target, /*syncUrl*/ false);\n        }\n    }\n\n    public async OnSectionClick(section: AdminSection): Promise<void> {\n        if (section.id === this.ActiveSection) return;\n        await this.selectSection(section, /*syncUrl*/ true);\n    }\n\n    // ---------- protected ----------\n\n    private async selectSection(section: AdminSection, syncUrl: boolean): Promise<void> {\n        // Guard against duplicate calls for the same section. Without this,\n        // ngOnInit's own GetQueryParams read races with the workspace stream's\n        // synchronous replay through OnQueryParamsChanged on first mount —\n        // both call selectSection with the same target, both reach\n        // createComponent, and two instances of the sub-page end up mounted\n        // in the contentHost. OnSectionClick + OnQueryParamsChanged each\n        // guard their own call site, but defense-in-depth here covers any\n        // future caller (and the ngOnInit ↔ stream-replay race specifically).\n        if (section.id === this.ActiveSection) {\n            return;\n        }\n        this.ActiveSection = section.id;\n        this.IsLoading = true;\n        this.LoadError = null;\n        this.cdr.markForCheck();\n\n        if (syncUrl) {\n            this.UpdateQueryParams({ section: section.id });\n        }\n\n        try {\n            await this.renderSection(section);\n        } catch (err) {\n            this.LoadError = err instanceof Error ? err.message : String(err);\n        } finally {\n            this.IsLoading = false;\n            this.cdr.markForCheck();\n        }\n    }\n\n    private async renderSection(section: AdminSection): Promise<void> {\n        // Detach (don't destroy) the currently visible sub-component so it\n        // stays alive in memory with its state intact.\n        this.detachCurrent();\n\n        // Reattach if cached\n        const cached = this.cache.get(section.id);\n        if (cached) {\n            this.contentHost.insert(cached.hostView);\n            this.currentSectionId = section.id;\n            return;\n        }\n\n        // Otherwise, create fresh\n        const ref = section.source.kind === 'resource'\n            ? await this.createResourceRef(section.source.driverClass)\n            : await this.createDashboardRef(section.source.dashboardName);\n\n        if (ref) {\n            this.cache.set(section.id, ref);\n            this.currentSectionId = section.id;\n        }\n    }\n\n    private detachCurrent(): void {\n        if (!this.currentSectionId) return;\n        const cur = this.cache.get(this.currentSectionId);\n        if (!cur) return;\n        const idx = this.contentHost.indexOf(cur.hostView);\n        if (idx >= 0) this.contentHost.detach(idx);\n    }\n\n    private async createResourceRef(driverClass: string): Promise<ComponentRef<unknown> | null> {\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseResourceComponent, driverClass);\n        if (!reg) {\n            this.LoadError = `Component \"${driverClass}\" is not registered. Make sure its module is imported.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseResourceComponent>);\n        const instance = ref.instance as BaseResourceComponent;\n        if (this.Data) instance.Data = this.Data;\n        return ref;\n    }\n\n    private async createDashboardRef(dashboardName: string): Promise<ComponentRef<unknown> | null> {\n        await DashboardEngine.Instance.Config(false);\n        const dashboard = DashboardEngine.Instance.Dashboards.find(d => d.Name === dashboardName);\n        if (!dashboard) {\n            this.LoadError = `Dashboard \"${dashboardName}\" was not found in metadata.`;\n            return null;\n        }\n        if (dashboard.Type !== 'Code') {\n            this.LoadError = `Dashboard \"${dashboardName}\" has type \"${dashboard.Type}\" — only Code dashboards can be embedded here.`;\n            return null;\n        }\n        if (!dashboard.DriverClass) {\n            this.LoadError = `Dashboard \"${dashboardName}\" has no DriverClass set.`;\n            return null;\n        }\n        const reg = await MJGlobal.Instance.ClassFactory.GetRegistrationAsync(BaseDashboard, dashboard.DriverClass);\n        if (!reg) {\n            this.LoadError = `Driver class \"${dashboard.DriverClass}\" is not registered against BaseDashboard.`;\n            return null;\n        }\n        const ref = this.contentHost.createComponent(reg.SubClass as Type<BaseDashboard>);\n        const instance = ref.instance as BaseDashboard;\n        instance.Config = { dashboard, userState: undefined };\n        instance.Refresh();\n        return ref;\n    }\n\n    private findSection(id: string | undefined | null): AdminSection | undefined {\n        if (!id) return undefined;\n        return this.Sections.find(s => s.id === id);\n    }\n}\n"]}

package/dist/ApplicationRoles/application-roles-resource.component.js

@@ -14,24 +14,29 @@ import * as i2 from "@angular/forms";
 import * as i3 from "@memberjunction/ng-ui-components";
 import * as i4 from "@memberjunction/ng-shared-generic";
 const _forTrack0 = ($index, $item) => $item.ID;
-function ApplicationRolesResourceComponent_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 13);
+function ApplicationRolesResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-stat-badge", 7);
+    i0.ɵɵelementEnd();
+} }
+function ApplicationRolesResourceComponent_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 11);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function ApplicationRolesResourceComponent_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
+function ApplicationRolesResourceComponent_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 12);
     i0.ɵɵtext(1, " Save Changes ");
 } }
-function ApplicationRolesResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function ApplicationRolesResourceComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 6);
-    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DiscardChanges()); });
-    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DiscardChanges()); });
+    i0.ɵɵelement(1, "i", 9);
     i0.ɵɵtext(2, " Discard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 12);
-    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_7_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveChanges()); });
-    i0.ɵɵconditionalCreate(4, ApplicationRolesResourceComponent_Conditional_7_Conditional_4_Template, 2, 0)(5, ApplicationRolesResourceComponent_Conditional_7_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementStart(3, "button", 10);
+    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_4_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveChanges()); });
+    i0.ɵɵconditionalCreate(4, ApplicationRolesResourceComponent_Conditional_4_Conditional_4_Template, 2, 0)(5, ApplicationRolesResourceComponent_Conditional_4_Conditional_5_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -41,9 +46,9 @@ function ApplicationRolesResourceComponent_Conditional_7_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsSaving ? 4 : 5);
 } }
-function ApplicationRolesResourceComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "i", 15);
+function ApplicationRolesResourceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 13);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51,9 +56,9 @@ function ApplicationRolesResourceComponent_Conditional_11_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ErrorMessage, " ");
 } }
-function ApplicationRolesResourceComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "i", 16);
+function ApplicationRolesResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -61,30 +66,30 @@ function ApplicationRolesResourceComponent_Conditional_12_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.SuccessMessage, " ");
 } }
-function ApplicationRolesResourceComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 10);
+function ApplicationRolesResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 6);
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
     i0.ɵɵtext(1, "new");
     i0.ɵɵelementEnd();
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Template(rf, ctx) { if (rf & 1) {
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td", 34);
-    i0.ɵɵelement(2, "i", 39);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 33);
+    i0.ɵɵelement(2, "i", 38);
     i0.ɵɵtext(3);
-    i0.ɵɵconditionalCreate(4, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Conditional_4_Template, 2, 0, "span", 40);
+    i0.ɵɵconditionalCreate(4, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Conditional_4_Template, 2, 0, "span", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 35)(6, "input", 41);
-    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Template_input_change_6_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.ToggleCanAccess(row_r7)); });
+    i0.ɵɵelementStart(5, "td", 34)(6, "input", 40);
+    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Template_input_change_6_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.ToggleCanAccess(row_r7)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "td", 36)(8, "input", 41);
-    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Template_input_change_8_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.ToggleCanAdmin(row_r7)); });
+    i0.ɵɵelementStart(7, "td", 35)(8, "input", 40);
+    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Template_input_change_8_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.ToggleCanAdmin(row_r7)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 37)(10, "button", 42);
-    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Template_button_click_10_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const group_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RemoveRole(group_r4, row_r7)); });
-    i0.ɵɵelement(11, "i", 43);
+    i0.ɵɵelementStart(9, "td", 36)(10, "button", 41);
+    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Template_button_click_10_listener() { const row_r7 = i0.ɵɵrestoreView(_r6).$implicit; const group_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RemoveRole(group_r4, row_r7)); });
+    i0.ɵɵelement(11, "i", 42);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const row_r7 = ctx.$implicit;
@@ -98,35 +103,35 @@ function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Co
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("checked", row_r7.CanAdmin);
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "table", 27)(1, "thead")(2, "tr")(3, "th", 34);
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 25)(1, "thead")(2, "tr")(3, "th", 33);
     i0.ɵɵtext(4, "Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "th", 35);
+    i0.ɵɵelementStart(5, "th", 34);
     i0.ɵɵtext(6, "Can Access");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th", 36);
+    i0.ɵɵelementStart(7, "th", 35);
     i0.ɵɵtext(8, "Can Admin");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 37);
+    i0.ɵɵelementStart(9, "th", 36);
     i0.ɵɵtext(10, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(11, "tbody");
-    i0.ɵɵrepeaterCreate(12, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_For_13_Template, 12, 8, "tr", 38, i0.ɵɵcomponentInstance().TrackByRoleRow, true);
+    i0.ɵɵrepeaterCreate(12, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_For_13_Template, 12, 8, "tr", 37, i0.ɵɵcomponentInstance().TrackByRoleRow, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const group_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(12);
     i0.ɵɵrepeater(group_r4.Roles);
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵelement(1, "i", 44);
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2, " No role restrictions \u2014 all authenticated users can access this application. ");
     i0.ɵɵelementEnd();
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 32);
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 30);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -135,20 +140,20 @@ function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Fo
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(role_r8.Name);
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵconditionalCreate(1, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_1_Template, 14, 0, "table", 27)(2, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Conditional_2_Template, 3, 0, "div", 28);
-    i0.ɵɵelementStart(3, "div", 29)(4, "select", 30);
-    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Template_select_change_4_listener($event) { i0.ɵɵrestoreView(_r5); const group_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnAddRoleSelect(group_r4, $event.target.value)); });
-    i0.ɵɵelementStart(5, "option", 31);
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵconditionalCreate(1, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_1_Template, 14, 0, "table", 25)(2, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Conditional_2_Template, 3, 0, "div", 26);
+    i0.ɵɵelementStart(3, "div", 27)(4, "select", 28);
+    i0.ɵɵlistener("change", function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Template_select_change_4_listener($event) { i0.ɵɵrestoreView(_r5); const group_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnAddRoleSelect(group_r4, $event.target.value)); });
+    i0.ɵɵelementStart(5, "option", 29);
     i0.ɵɵtext(6, "Select a role to add...");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_For_8_Template, 2, 2, "option", 32, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_For_8_Template, 2, 2, "option", 30, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 6);
-    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const group_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AddRole(group_r4)); });
-    i0.ɵɵelement(10, "i", 33);
+    i0.ɵɵelementStart(9, "button", 31);
+    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const group_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AddRole(group_r4)); });
+    i0.ɵɵelement(10, "i", 32);
     i0.ɵɵtext(11, " Add Role ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -163,19 +168,19 @@ function ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Te
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.SelectedRoleIdToAdd.get(group_r4.ApplicationID));
 } }
-function ApplicationRolesResourceComponent_Conditional_14_For_4_Template(rf, ctx) { if (rf & 1) {
+function ApplicationRolesResourceComponent_Conditional_9_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
-    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_14_For_4_Template_div_click_1_listener() { const group_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleGroup(group_r4)); });
-    i0.ɵɵelementStart(2, "div", 22);
-    i0.ɵɵelement(3, "i", 23);
-    i0.ɵɵelementStart(4, "span", 24);
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Conditional_9_For_4_Template_div_click_1_listener() { const group_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleGroup(group_r4)); });
+    i0.ɵɵelementStart(2, "div", 20);
+    i0.ɵɵelement(3, "i", 21);
+    i0.ɵɵelementStart(4, "span", 22);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 25);
+    i0.ɵɵelementStart(6, "span", 23);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(8, ApplicationRolesResourceComponent_Conditional_14_For_4_Conditional_8_Template, 12, 3, "div", 26);
+    i0.ɵɵconditionalCreate(8, ApplicationRolesResourceComponent_Conditional_9_For_4_Conditional_8_Template, 12, 3, "div", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r4 = ctx.$implicit;
@@ -192,12 +197,12 @@ function ApplicationRolesResourceComponent_Conditional_14_For_4_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵconditional(group_r4.Expanded ? 8 : -1);
 } }
-function ApplicationRolesResourceComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 17);
+function ApplicationRolesResourceComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 15);
     i0.ɵɵtext(1, " Configure which roles can access each application. Applications with no role assignments are open to all users (backwards compatible). ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 18);
-    i0.ɵɵrepeaterCreate(3, ApplicationRolesResourceComponent_Conditional_14_For_4_Template, 9, 10, "div", 19, i0.ɵɵcomponentInstance().TrackByAppId, true);
+    i0.ɵɵelementStart(2, "div", 16);
+    i0.ɵɵrepeaterCreate(3, ApplicationRolesResourceComponent_Conditional_9_For_4_Template, 9, 10, "div", 17, i0.ɵɵcomponentInstance().TrackByAppId, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -481,40 +486,36 @@ let ApplicationRolesResourceComponent = class ApplicationRolesResourceComponent
         this.SelectedRoleIdToAdd.set(group.ApplicationID, roleId);
     }
     static ɵfac = function ApplicationRolesResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationRolesResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationRolesResourceComponent, selectors: [["mj-application-roles-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 15, vars: 8, consts: [[1, "app-roles-container"], [1, "header"], [1, "header-left"], [1, "fa-solid", "fa-user-shield", "header-icon"], [1, "header-title"], [1, "header-actions"], ["mjButton", "", "variant", "secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], [1, "message", "error-message"], [1, "message", "success-message"], ["text", "Loading application roles..."], [1, "fa-solid", "fa-rotate-left"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-floppy-disk"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-circle-check"], [1, "description"], [1, "app-groups"], [1, "app-group", 3, "expanded", "has-roles"], [1, "app-group"], [1, "app-group-header", 3, "click"], [1, "app-header-left"], [1, "fa-solid", 3, "ngClass"], [1, "app-name"], [1, "role-count-badge"], [1, "app-group-content"], [1, "roles-table"], [1, "no-roles-message"], [1, "add-role-row"], [1, "mj-input", "add-role-select", 3, "change", "value"], ["value", "", "disabled", ""], [3, "value"], [1, "fa-solid", "fa-plus"], [1, "col-role"], [1, "col-access"], [1, "col-admin"], [1, "col-actions"], [3, "dirty", "new-row"], [1, "fa-solid", "fa-shield-halved", "role-icon"], [1, "new-badge"], ["type", "checkbox", 1, "mj-checkbox", 3, "change", "checked"], ["title", "Remove role assignment", 1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "fa-solid", "fa-unlock"]], template: function ApplicationRolesResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵelementStart(4, "h2", 4);
-            i0.ɵɵtext(5, "Application Roles");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationRolesResourceComponent, selectors: [["mj-application-roles-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 8, consts: [["Role", "toolbar", "AriaLabel", "Application roles actions", "Title", "Application Roles", "Subtitle", "Assign roles per application"], ["meta", ""], ["actions", ""], [3, "Clicked", "Loading", "Disabled"], [1, "message", "error-message"], [1, "message", "success-message"], ["text", "Loading application roles..."], ["Icon", "fa-solid fa-circle-exclamation", "Label", "Unsaved changes", "Variant", "warning"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-floppy-disk"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-circle-check"], [1, "description"], [1, "app-groups"], [1, "app-group", 3, "expanded", "has-roles"], [1, "app-group"], [1, "app-group-header", 3, "click"], [1, "app-header-left"], [1, "fa-solid", 3, "ngClass"], [1, "app-name"], [1, "role-count-badge"], [1, "app-group-content"], [1, "roles-table"], [1, "no-roles-message"], [1, "add-role-row"], [1, "mj-input", "add-role-select", 3, "change", "value"], ["value", "", "disabled", ""], [3, "value"], ["mjButton", "", "variant", "secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], [1, "col-role"], [1, "col-access"], [1, "col-admin"], [1, "col-actions"], [3, "dirty", "new-row"], [1, "fa-solid", "fa-shield-halved", "role-icon"], [1, "new-badge"], ["type", "checkbox", 1, "mj-checkbox", 3, "change", "checked"], ["title", "Remove role assignment", 1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "fa-solid", "fa-unlock"]], template: function ApplicationRolesResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-header-interior", 0);
+            i0.ɵɵconditionalCreate(1, ApplicationRolesResourceComponent_Conditional_1_Template, 2, 0, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "mj-refresh-button", 3);
+            i0.ɵɵlistener("Clicked", function ApplicationRolesResourceComponent_Template_mj_refresh_button_Clicked_3_listener() { return ctx.loadData(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, ApplicationRolesResourceComponent_Conditional_4_Template, 6, 3);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 5);
-            i0.ɵɵconditionalCreate(7, ApplicationRolesResourceComponent_Conditional_7_Template, 6, 3);
-            i0.ɵɵelementStart(8, "button", 6);
-            i0.ɵɵlistener("click", function ApplicationRolesResourceComponent_Template_button_click_8_listener() { return ctx.loadData(); });
-            i0.ɵɵelement(9, "i", 7);
-            i0.ɵɵtext(10, " Refresh ");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(11, ApplicationRolesResourceComponent_Conditional_11_Template, 3, 1, "div", 8);
-            i0.ɵɵconditionalCreate(12, ApplicationRolesResourceComponent_Conditional_12_Template, 3, 1, "div", 9);
-            i0.ɵɵconditionalCreate(13, ApplicationRolesResourceComponent_Conditional_13_Template, 1, 0, "mj-loading", 10);
-            i0.ɵɵconditionalCreate(14, ApplicationRolesResourceComponent_Conditional_14_Template, 5, 0);
+            i0.ɵɵelementStart(5, "mj-page-body-interior");
+            i0.ɵɵconditionalCreate(6, ApplicationRolesResourceComponent_Conditional_6_Template, 3, 1, "div", 4);
+            i0.ɵɵconditionalCreate(7, ApplicationRolesResourceComponent_Conditional_7_Template, 3, 1, "div", 5);
+            i0.ɵɵconditionalCreate(8, ApplicationRolesResourceComponent_Conditional_8_Template, 1, 0, "mj-loading", 6);
+            i0.ɵɵconditionalCreate(9, ApplicationRolesResourceComponent_Conditional_9_Template, 5, 0);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(7);
-            i0.ɵɵconditional(ctx.HasUnsavedChanges ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("disabled", ctx.IsLoading || ctx.IsSaving);
+            i0.ɵɵconditional(ctx.HasUnsavedChanges ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.IsLoading)("Disabled", ctx.IsSaving);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("fa-spin", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.HasUnsavedChanges ? 4 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.ErrorMessage ? 11 : -1);
+            i0.ɵɵconditional(ctx.ErrorMessage ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.SuccessMessage ? 12 : -1);
+            i0.ɵɵconditional(ctx.SuccessMessage ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsLoading ? 13 : -1);
+            i0.ɵɵconditional(ctx.IsLoading ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.IsLoading ? 14 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.MJButtonDirective, i4.LoadingComponent], styles: [".app-roles-container[_ngcontent-%COMP%] {\n  padding: 24px;\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.header-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n}\n\n.success-message[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid var(--mj-status-success-border);\n}\n\n\n\n.description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n\n\n.app-groups[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.app-group[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.app-group.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-border-strong);\n}\n\n.app-group-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-surface-card);\n  transition: background 0.15s;\n}\n\n.app-group-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.app-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.app-header-left[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  width: 14px;\n  text-align: center;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.role-count-badge[_ngcontent-%COMP%] {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.role-count-badge.open-access[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success-text);\n}\n\n\n\n.app-group-content[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n\n\n.roles-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 12px;\n}\n\n.roles-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.roles-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.roles-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.roles-table[_ngcontent-%COMP%]   tr.dirty[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 6%, var(--mj-bg-surface));\n}\n\n.roles-table[_ngcontent-%COMP%]   tr.new-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.col-role[_ngcontent-%COMP%] {\n  width: 40%;\n}\n\n.col-access[_ngcontent-%COMP%], \n.col-admin[_ngcontent-%COMP%] {\n  width: 20%;\n  text-align: center;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n  width: 20%;\n  text-align: center;\n}\n\n.roles-table[_ngcontent-%COMP%]   th.col-access[_ngcontent-%COMP%], \n.roles-table[_ngcontent-%COMP%]   th.col-admin[_ngcontent-%COMP%], \n.roles-table[_ngcontent-%COMP%]   th.col-actions[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.role-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  margin-right: 6px;\n}\n\n.new-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  padding: 1px 6px;\n  border-radius: 8px;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  margin-left: 6px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: var(--mj-status-error-bg);\n}\n\n\n\n.no-roles-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  margin-bottom: 12px;\n}\n\n.no-roles-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-role-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.add-role-select[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 300px;\n  padding: 6px 10px;\n  font-size: 14px;\n}"] });
+            i0.ɵɵconditional(!ctx.IsLoading ? 9 : -1);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.MJButtonDirective, i3.MJPageHeaderInteriorComponent, i3.MJPageBodyInteriorComponent, i3.MJStatBadgeComponent, i3.MJRefreshButtonComponent, i4.LoadingComponent], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n}\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--mj-space-6);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n}\n\n.success-message[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid var(--mj-status-success-border);\n}\n\n\n\n.description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n\n\n.app-groups[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.app-group[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.app-group.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-border-strong);\n}\n\n.app-group-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-surface-card);\n  transition: background 0.15s;\n}\n\n.app-group-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.app-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.app-header-left[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  width: 14px;\n  text-align: center;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.role-count-badge[_ngcontent-%COMP%] {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.role-count-badge.open-access[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success-text);\n}\n\n\n\n.app-group-content[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n\n\n.roles-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 12px;\n}\n\n.roles-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.roles-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.roles-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.roles-table[_ngcontent-%COMP%]   tr.dirty[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 6%, var(--mj-bg-surface));\n}\n\n.roles-table[_ngcontent-%COMP%]   tr.new-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.col-role[_ngcontent-%COMP%] {\n  width: 40%;\n}\n\n.col-access[_ngcontent-%COMP%], \n.col-admin[_ngcontent-%COMP%] {\n  width: 20%;\n  text-align: center;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n  width: 20%;\n  text-align: center;\n}\n\n.roles-table[_ngcontent-%COMP%]   th.col-access[_ngcontent-%COMP%], \n.roles-table[_ngcontent-%COMP%]   th.col-admin[_ngcontent-%COMP%], \n.roles-table[_ngcontent-%COMP%]   th.col-actions[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.role-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  margin-right: 6px;\n}\n\n.new-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  padding: 1px 6px;\n  border-radius: 8px;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  margin-left: 6px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: var(--mj-status-error-bg);\n}\n\n\n\n.no-roles-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  margin-bottom: 12px;\n}\n\n.no-roles-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-role-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.add-role-select[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 300px;\n  padding: 6px 10px;\n  font-size: 14px;\n}"] });
 };
 ApplicationRolesResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'ApplicationRolesResource')
@@ -522,7 +523,7 @@ ApplicationRolesResourceComponent = __decorate([
 export { ApplicationRolesResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationRolesResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-application-roles-resource', template: "<div class=\"app-roles-container\">\n  <!-- Header -->\n  <div class=\"header\">\n    <div class=\"header-left\">\n      <i class=\"fa-solid fa-user-shield header-icon\"></i>\n      <h2 class=\"header-title\">Application Roles</h2>\n    </div>\n    <div class=\"header-actions\">\n      @if (HasUnsavedChanges) {\n        <button mjButton variant=\"secondary\" (click)=\"DiscardChanges()\" [disabled]=\"IsSaving\">\n          <i class=\"fa-solid fa-rotate-left\"></i> Discard\n        </button>\n        <button mjButton variant=\"primary\" (click)=\"SaveChanges()\" [disabled]=\"IsSaving\">\n          @if (IsSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save Changes\n          }\n        </button>\n      }\n      <button mjButton variant=\"secondary\" (click)=\"loadData()\" [disabled]=\"IsLoading || IsSaving\">\n        <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"IsLoading\"></i> Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Status Messages -->\n  @if (ErrorMessage) {\n    <div class=\"message error-message\">\n      <i class=\"fa-solid fa-circle-exclamation\"></i>\n      {{ ErrorMessage }}\n    </div>\n  }\n  @if (SuccessMessage) {\n    <div class=\"message success-message\">\n      <i class=\"fa-solid fa-circle-check\"></i>\n      {{ SuccessMessage }}\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (IsLoading) {\n    <mj-loading text=\"Loading application roles...\"></mj-loading>\n  }\n\n  <!-- Main Content -->\n  @if (!IsLoading) {\n    <p class=\"description\">\n      Configure which roles can access each application. Applications with no role assignments are open to all users (backwards compatible).\n    </p>\n\n    <div class=\"app-groups\">\n      @for (group of ApplicationGroups; track TrackByAppId($index, group)) {\n        <div class=\"app-group\" [class.expanded]=\"group.Expanded\" [class.has-roles]=\"group.Roles.length > 0\">\n          <!-- Application Header Row -->\n          <div class=\"app-group-header\" (click)=\"ToggleGroup(group)\">\n            <div class=\"app-header-left\">\n              <i class=\"fa-solid\" [ngClass]=\"group.Expanded ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n              <span class=\"app-name\">{{ group.ApplicationName }}</span>\n              <span class=\"role-count-badge\" [class.open-access]=\"group.Roles.length === 0\">\n                {{ GetRoleCountLabel(group) }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Expanded Content -->\n          @if (group.Expanded) {\n            <div class=\"app-group-content\">\n              <!-- Existing Role Assignments -->\n              @if (group.Roles.length > 0) {\n                <table class=\"roles-table\">\n                  <thead>\n                    <tr>\n                      <th class=\"col-role\">Role</th>\n                      <th class=\"col-access\">Can Access</th>\n                      <th class=\"col-admin\">Can Admin</th>\n                      <th class=\"col-actions\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of group.Roles; track TrackByRoleRow($index, row)) {\n                      <tr [class.dirty]=\"row.IsDirty\" [class.new-row]=\"row.IsNew\">\n                        <td class=\"col-role\">\n                          <i class=\"fa-solid fa-shield-halved role-icon\"></i>\n                          {{ row.RoleName }}\n                          @if (row.IsNew) {\n                            <span class=\"new-badge\">new</span>\n                          }\n                        </td>\n                        <td class=\"col-access\">\n                          <input type=\"checkbox\"\n                                 class=\"mj-checkbox\"\n                                 [checked]=\"row.CanAccess\"\n                                 (change)=\"ToggleCanAccess(row)\">\n                        </td>\n                        <td class=\"col-admin\">\n                          <input type=\"checkbox\"\n                                 class=\"mj-checkbox\"\n                                 [checked]=\"row.CanAdmin\"\n                                 (change)=\"ToggleCanAdmin(row)\">\n                        </td>\n                        <td class=\"col-actions\">\n                          <button class=\"remove-btn\" (click)=\"RemoveRole(group, row)\" title=\"Remove role assignment\">\n                            <i class=\"fa-solid fa-trash-can\"></i>\n                          </button>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              } @else {\n                <div class=\"no-roles-message\">\n                  <i class=\"fa-solid fa-unlock\"></i>\n                  No role restrictions \u2014 all authenticated users can access this application.\n                </div>\n              }\n\n              <!-- Add Role -->\n              <div class=\"add-role-row\">\n                <select class=\"mj-input add-role-select\"\n                        [value]=\"SelectedRoleIdToAdd.get(group.ApplicationID) || ''\"\n                        (change)=\"OnAddRoleSelect(group, $any($event.target).value)\">\n                  <option value=\"\" disabled>Select a role to add...</option>\n                  @for (role of GetUnassignedRoles(group); track role.ID) {\n                    <option [value]=\"role.ID\">{{ role.Name }}</option>\n                  }\n                </select>\n                <button mjButton\n                        variant=\"secondary\"\n                        (click)=\"AddRole(group)\"\n                        [disabled]=\"!SelectedRoleIdToAdd.get(group.ApplicationID)\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Role\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".app-roles-container {\n  padding: 24px;\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n/* Header */\n.header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.header-icon {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.header-title {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/* Messages */\n.message {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.error-message {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n}\n\n.success-message {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid var(--mj-status-success-border);\n}\n\n/* Description */\n.description {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n/* Application Groups */\n.app-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.app-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.app-group.expanded {\n  border-color: var(--mj-border-strong);\n}\n\n.app-group-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-surface-card);\n  transition: background 0.15s;\n}\n\n.app-group-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.app-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.app-header-left > i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  width: 14px;\n  text-align: center;\n}\n\n.app-name {\n  font-weight: 600;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.role-count-badge {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.role-count-badge.open-access {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success-text);\n}\n\n/* Expanded Content */\n.app-group-content {\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Table */\n.roles-table {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 12px;\n}\n\n.roles-table th {\n  text-align: left;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.roles-table td {\n  padding: 10px 12px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.roles-table tr:last-child td {\n  border-bottom: none;\n}\n\n.roles-table tr.dirty td {\n  background: color-mix(in srgb, var(--mj-status-warning) 6%, var(--mj-bg-surface));\n}\n\n.roles-table tr.new-row td {\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.col-role {\n  width: 40%;\n}\n\n.col-access,\n.col-admin {\n  width: 20%;\n  text-align: center;\n}\n\n.col-actions {\n  width: 20%;\n  text-align: center;\n}\n\n.roles-table th.col-access,\n.roles-table th.col-admin,\n.roles-table th.col-actions {\n  text-align: center;\n}\n\n.role-icon {\n  color: var(--mj-text-muted);\n  margin-right: 6px;\n}\n\n.new-badge {\n  font-size: 10px;\n  padding: 1px 6px;\n  border-radius: 8px;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  margin-left: 6px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.remove-btn {\n  border: none;\n  background: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: var(--mj-status-error);\n  background: var(--mj-status-error-bg);\n}\n\n/* No Roles Message */\n.no-roles-message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  margin-bottom: 12px;\n}\n\n.no-roles-message i {\n  color: var(--mj-status-success);\n}\n\n/* Add Role Row */\n.add-role-row {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.add-role-select {\n  flex: 1;\n  max-width: 300px;\n  padding: 6px 10px;\n  font-size: 14px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-application-roles-resource', template: "<!--\n  Interior chrome \u2014 see Section 10 of explorer-chrome-conventions. Role=\"toolbar\"\n  because this is an action band, not a search/filter region.\n-->\n<mj-page-header-interior\n  Role=\"toolbar\"\n  AriaLabel=\"Application roles actions\"\n  Title=\"Application Roles\"\n  Subtitle=\"Assign roles per application\">\n  @if (HasUnsavedChanges) {\n    <div meta>\n      <mj-stat-badge\n        Icon=\"fa-solid fa-circle-exclamation\"\n        Label=\"Unsaved changes\"\n        Variant=\"warning\">\n      </mj-stat-badge>\n    </div>\n  }\n  <div actions>\n    <!-- Order: secondary buttons (Refresh, Discard) \u2192 primary CTA (Save) rightmost,\n         per chrome conventions \u00A72 [actions]. -->\n    <mj-refresh-button [Loading]=\"IsLoading\" [Disabled]=\"IsSaving\" (Clicked)=\"loadData()\"></mj-refresh-button>\n    @if (HasUnsavedChanges) {\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"DiscardChanges()\" [disabled]=\"IsSaving\">\n        <i class=\"fa-solid fa-rotate-left\"></i> Discard\n      </button>\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"SaveChanges()\" [disabled]=\"IsSaving\">\n        @if (IsSaving) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n        } @else {\n          <i class=\"fa-solid fa-floppy-disk\"></i> Save Changes\n        }\n      </button>\n    }\n  </div>\n</mj-page-header-interior>\n\n<!-- Scrollable Content \u2014 owned by <mj-page-body-interior>. -->\n  <mj-page-body-interior>\n    <!-- Status Messages -->\n    @if (ErrorMessage) {\n      <div class=\"message error-message\">\n        <i class=\"fa-solid fa-circle-exclamation\"></i>\n        {{ ErrorMessage }}\n      </div>\n    }\n    @if (SuccessMessage) {\n      <div class=\"message success-message\">\n        <i class=\"fa-solid fa-circle-check\"></i>\n        {{ SuccessMessage }}\n      </div>\n    }\n\n    <!-- Loading State -->\n    @if (IsLoading) {\n      <mj-loading text=\"Loading application roles...\"></mj-loading>\n    }\n\n    <!-- Main Content -->\n    @if (!IsLoading) {\n      <p class=\"description\">\n        Configure which roles can access each application. Applications with no role assignments are open to all users (backwards compatible).\n      </p>\n\n      <div class=\"app-groups\">\n        @for (group of ApplicationGroups; track TrackByAppId($index, group)) {\n          <div class=\"app-group\" [class.expanded]=\"group.Expanded\" [class.has-roles]=\"group.Roles.length > 0\">\n            <!-- Application Header Row -->\n            <div class=\"app-group-header\" (click)=\"ToggleGroup(group)\">\n              <div class=\"app-header-left\">\n                <i class=\"fa-solid\" [ngClass]=\"group.Expanded ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                <span class=\"app-name\">{{ group.ApplicationName }}</span>\n                <span class=\"role-count-badge\" [class.open-access]=\"group.Roles.length === 0\">\n                  {{ GetRoleCountLabel(group) }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Expanded Content -->\n            @if (group.Expanded) {\n              <div class=\"app-group-content\">\n                <!-- Existing Role Assignments -->\n                @if (group.Roles.length > 0) {\n                  <table class=\"roles-table\">\n                    <thead>\n                      <tr>\n                        <th class=\"col-role\">Role</th>\n                        <th class=\"col-access\">Can Access</th>\n                        <th class=\"col-admin\">Can Admin</th>\n                        <th class=\"col-actions\">Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (row of group.Roles; track TrackByRoleRow($index, row)) {\n                        <tr [class.dirty]=\"row.IsDirty\" [class.new-row]=\"row.IsNew\">\n                          <td class=\"col-role\">\n                            <i class=\"fa-solid fa-shield-halved role-icon\"></i>\n                            {{ row.RoleName }}\n                            @if (row.IsNew) {\n                              <span class=\"new-badge\">new</span>\n                            }\n                          </td>\n                          <td class=\"col-access\">\n                            <input type=\"checkbox\"\n                                   class=\"mj-checkbox\"\n                                   [checked]=\"row.CanAccess\"\n                                   (change)=\"ToggleCanAccess(row)\">\n                          </td>\n                          <td class=\"col-admin\">\n                            <input type=\"checkbox\"\n                                   class=\"mj-checkbox\"\n                                   [checked]=\"row.CanAdmin\"\n                                   (change)=\"ToggleCanAdmin(row)\">\n                          </td>\n                          <td class=\"col-actions\">\n                            <button class=\"remove-btn\" (click)=\"RemoveRole(group, row)\" title=\"Remove role assignment\">\n                              <i class=\"fa-solid fa-trash-can\"></i>\n                            </button>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                } @else {\n                  <div class=\"no-roles-message\">\n                    <i class=\"fa-solid fa-unlock\"></i>\n                    No role restrictions \u2014 all authenticated users can access this application.\n                  </div>\n                }\n\n                <!-- Add Role -->\n                <div class=\"add-role-row\">\n                  <select class=\"mj-input add-role-select\"\n                          [value]=\"SelectedRoleIdToAdd.get(group.ApplicationID) || ''\"\n                          (change)=\"OnAddRoleSelect(group, $any($event.target).value)\">\n                    <option value=\"\" disabled>Select a role to add...</option>\n                    @for (role of GetUnassignedRoles(group); track role.ID) {\n                      <option [value]=\"role.ID\">{{ role.Name }}</option>\n                    }\n                  </select>\n                  <button mjButton\n                          variant=\"secondary\"\n                          (click)=\"AddRole(group)\"\n                          [disabled]=\"!SelectedRoleIdToAdd.get(group.ApplicationID)\">\n                    <i class=\"fa-solid fa-plus\"></i> Add Role\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </mj-page-body-interior>\n", styles: ["/* :host is flex-column / 100% height via mj-left-nav-content's ::ng-deep\n   sizing. Interior chrome lives in <mj-page-header-interior> \u2014 see Section 10\n   of explorer-chrome-conventions. */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n}\n\n/* Scrollable Content */\n.scrollable-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--mj-space-6);\n}\n\n/* Messages */\n.message {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.error-message {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n}\n\n.success-message {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid var(--mj-status-success-border);\n}\n\n/* Description */\n.description {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n/* Application Groups */\n.app-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.app-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.app-group.expanded {\n  border-color: var(--mj-border-strong);\n}\n\n.app-group-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-surface-card);\n  transition: background 0.15s;\n}\n\n.app-group-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.app-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.app-header-left > i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  width: 14px;\n  text-align: center;\n}\n\n.app-name {\n  font-weight: 600;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.role-count-badge {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.role-count-badge.open-access {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success-text);\n}\n\n/* Expanded Content */\n.app-group-content {\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Table */\n.roles-table {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 12px;\n}\n\n.roles-table th {\n  text-align: left;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.roles-table td {\n  padding: 10px 12px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.roles-table tr:last-child td {\n  border-bottom: none;\n}\n\n.roles-table tr.dirty td {\n  background: color-mix(in srgb, var(--mj-status-warning) 6%, var(--mj-bg-surface));\n}\n\n.roles-table tr.new-row td {\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.col-role {\n  width: 40%;\n}\n\n.col-access,\n.col-admin {\n  width: 20%;\n  text-align: center;\n}\n\n.col-actions {\n  width: 20%;\n  text-align: center;\n}\n\n.roles-table th.col-access,\n.roles-table th.col-admin,\n.roles-table th.col-actions {\n  text-align: center;\n}\n\n.role-icon {\n  color: var(--mj-text-muted);\n  margin-right: 6px;\n}\n\n.new-badge {\n  font-size: 10px;\n  padding: 1px 6px;\n  border-radius: 8px;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  margin-left: 6px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.remove-btn {\n  border: none;\n  background: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: var(--mj-status-error);\n  background: var(--mj-status-error-bg);\n}\n\n/* No Roles Message */\n.no-roles-message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  margin-bottom: 12px;\n}\n\n.no-roles-message i {\n  color: var(--mj-status-success);\n}\n\n/* Add Role Row */\n.add-role-row {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.add-role-select {\n  flex: 1;\n  max-width: 300px;\n  padding: 6px 10px;\n  font-size: 14px;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationRolesResourceComponent, { className: "ApplicationRolesResourceComponent", filePath: "src/ApplicationRoles/application-roles-resource.component.ts", lineNumber: 43 }); })();
 /** Tree-shaking prevention */