@memberjunction/ng-explorer-settings 5.49.0 → 5.50.0

package/dist/lib/user-app-config/user-app-config.component.js

@@ -1,329 +1,7 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, inject } from '@angular/core';
-import { LogError, LogStatus, LogStatusEx } from '@memberjunction/core';
-import { UserInfoEngine } from '@memberjunction/core-entities';
-import { ApplicationManager } from '@memberjunction/ng-base-application';
-import { SharedService } from '@memberjunction/ng-shared';
-import { UUIDsEqual } from '@memberjunction/global';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { moveAndResequence, resequenceItems } from './user-app-config-reorder';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "@memberjunction/ng-ui-components";
-const _forTrack0 = ($index, $item) => $item.app.ID;
-function UserAppConfigComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "mj-loading", 17);
-    i0.ɵɵelementEnd();
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-alert", 9);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.ErrorMessage);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 26);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r5.app.Description);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵlistener("dblclick", function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template_div_dblclick_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.AddApp(item_r5)); });
-    i0.ɵɵelementStart(1, "div", 35);
-    i0.ɵɵelement(2, "i", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 37)(4, "span", 38);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template, 2, 1, "span", 39);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 40);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template_button_click_7_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.AddApp(item_r5)); });
-    i0.ɵɵelement(8, "i", 41);
-    i0.ɵɵtext(9, " Add ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", item_r5.app.GetColor());
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r5.app.Icon || "fa-solid fa-cube");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r5.app.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r5.app.Description ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", "Add " + item_r5.app.Name);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 30);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r9 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r9.app.Description);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵlistener("dragstart", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dragstart_0_listener($event) { const ctx_r7 = i0.ɵɵrestoreView(_r7); const item_r9 = ctx_r7.$implicit; const ɵ$index_98_r10 = ctx_r7.$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDragStart($event, item_r9, ɵ$index_98_r10)); })("dragend", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDragEnd()); })("dragenter", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dragenter_0_listener($event) { const ɵ$index_98_r10 = i0.ɵɵrestoreView(_r7).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDragEnter($event, ɵ$index_98_r10)); })("dblclick", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dblclick_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.RemoveApp(item_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 45)(2, "div", 46);
-    i0.ɵɵelement(3, "i", 47);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 35);
-    i0.ɵɵelement(5, "i", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 37)(7, "span", 38);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 39);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 48)(11, "button", 49);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_button_click_11_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.MoveUp(item_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(12, "i", 50);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 51);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_button_click_13_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.MoveDown(item_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(14, "i", 52);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 53);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_button_click_15_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.RemoveApp(item_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(16, "i", 6);
-    i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    const ɵ$index_98_r10 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("dragging", ctx_r1.DraggedItem === item_r9);
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("border-left-color", item_r9.app.GetColor());
-    i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", item_r9.app.GetColor());
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r9.app.Icon || "fa-solid fa-cube");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r9.app.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r9.app.Description ? 9 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_98_r10 === 0);
-    i0.ɵɵattribute("aria-label", "Move " + item_r9.app.Name + " up");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_98_r10 === ctx_r1.ActiveApps.length - 1);
-    i0.ɵɵattribute("aria-label", "Move " + item_r9.app.Name + " down");
-    i0.ɵɵadvance(2);
-    i0.ɵɵattribute("aria-label", "Remove " + item_r9.app.Name);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵlistener("dragover", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template_div_dragover_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDragOver($event)); })("drop", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template_div_drop_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDrop($event)); });
-    i0.ɵɵrepeaterCreate(1, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template, 17, 15, "div", 43, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.ActiveApps);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 55);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 55);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_0_Template, 1, 0, "div", 55);
-    i0.ɵɵelementStart(1, "div", 56)(2, "div", 57);
-    i0.ɵɵlistener("touchstart", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Template_div_touchstart_2_listener($event) { const ɵ$index_142_r12 = i0.ɵɵrestoreView(_r11).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnTouchDragStart($event, ɵ$index_142_r12)); });
-    i0.ɵɵelement(3, "i", 47);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 35);
-    i0.ɵɵelement(5, "i", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 58);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 59);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Template_button_click_8_listener() { const item_r13 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleApp(item_r13)); });
-    i0.ɵɵelement(9, "i", 60);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_10_Template, 1, 0, "div", 55);
-} if (rf & 2) {
-    const item_r13 = ctx.$implicit;
-    const ɵ$index_142_r12 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵconditional(ctx_r1.TouchDragActive && ctx_r1.TouchDropIndex === ɵ$index_142_r12 && ctx_r1.TouchDragIndex > ɵ$index_142_r12 ? 0 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("touch-ghost", ctx_r1.TouchDragActive && ctx_r1.TouchDragIndex === ɵ$index_142_r12);
-    i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", item_r13.app.GetColor());
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r13.app.Icon || "fa-solid fa-cube");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r13.app.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵariaProperty("aria-label", i0.ɵɵinterpolate1("Remove ", item_r13.app.Name));
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.TouchDragActive && ctx_r1.TouchDropIndex === ɵ$index_142_r12 && ctx_r1.TouchDragIndex < ɵ$index_142_r12 ? 10 : -1);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 55);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵtext(1, "Your Apps");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(2, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Template, 11, 11, null, null, _forTrack0);
-    i0.ɵɵconditionalCreate(4, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Conditional_4_Template, 1, 0, "div", 55);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.ActiveApps);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.TouchDragActive && ctx_r1.TouchDropIndex === ctx_r1.ActiveApps.length - 1 && ctx_r1.TouchDragIndex < ctx_r1.TouchDropIndex ? 4 : -1);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 35);
-    i0.ɵɵelement(2, "i", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 58);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 62);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_For_3_Template_button_click_5_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleApp(item_r15)); });
-    i0.ɵɵelement(6, "i", 63);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r15 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", item_r15.app.GetColor());
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r15.app.Icon || "fa-solid fa-cube");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r15.app.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵariaProperty("aria-label", i0.ɵɵinterpolate1("Add ", item_r15.app.Name));
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵtext(1, "Available");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(2, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_For_3_Template, 7, 7, "div", 61, _forTrack0);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.AvailableApps);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "p", 18);
-    i0.ɵɵtext(2, " Select which applications appear in your app switcher and arrange them in your preferred order. Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 19)(4, "div", 20)(5, "div", 21);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AvailablePanelCollapsed = !ctx_r1.AvailablePanelCollapsed); });
-    i0.ɵɵelement(6, "i", 22);
-    i0.ɵɵelementStart(7, "h3");
-    i0.ɵɵtext(8, "Available Applications");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 23);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(11, "i", 24);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 25);
-    i0.ɵɵconditionalCreate(13, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_13_Template, 1, 0, "mj-empty-state", 26);
-    i0.ɵɵrepeaterCreate(14, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template, 10, 7, "div", 27, _forTrack0);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 28)(17, "div", 21);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_11_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectedPanelCollapsed = !ctx_r1.SelectedPanelCollapsed); });
-    i0.ɵɵelement(18, "i", 29);
-    i0.ɵɵelementStart(19, "h3");
-    i0.ɵɵtext(20, "Your Applications");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 23);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "i", 24);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 25);
-    i0.ɵɵconditionalCreate(25, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_25_Template, 1, 0, "mj-empty-state", 30);
-    i0.ɵɵconditionalCreate(26, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template, 3, 0, "div", 31);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(27, "div", 32);
-    i0.ɵɵlistener("touchmove", function UserAppConfigComponent_Conditional_0_Conditional_11_Template_div_touchmove_27_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTouchDragMove($event)); })("touchend", function UserAppConfigComponent_Conditional_0_Conditional_11_Template_div_touchend_27_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTouchDragEnd()); })("touchcancel", function UserAppConfigComponent_Conditional_0_Conditional_11_Template_div_touchcancel_27_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTouchDragEnd()); });
-    i0.ɵɵelementStart(28, "div", 33);
-    i0.ɵɵconditionalCreate(29, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Template, 5, 1);
-    i0.ɵɵconditionalCreate(30, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_Template, 4, 0);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("collapsed", ctx_r1.AvailablePanelCollapsed);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.AvailableApps.length);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.AvailablePanelCollapsed)("fa-chevron-up", !ctx_r1.AvailablePanelCollapsed);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.AvailableApps.length === 0 ? 13 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.AvailableApps);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("collapsed", ctx_r1.SelectedPanelCollapsed);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.ActiveApps.length);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.SelectedPanelCollapsed)("fa-chevron-up", !ctx_r1.SelectedPanelCollapsed);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.ActiveApps.length === 0 ? 25 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ActiveApps.length > 0 ? 26 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.ActiveApps.length > 0 ? 29 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.AvailableApps.length > 0 ? 30 : -1);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Reset()); });
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵtext(2, " Reset Changes ");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r1.IsLoading || ctx_r1.IsSaving);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 65);
-    i0.ɵɵelementStart(1, "span");
-    i0.ɵɵtext(2, "Saving...");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("showText", false);
-} }
-function UserAppConfigComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 66);
-    i0.ɵɵelementStart(1, "span");
-    i0.ɵɵtext(2, "Save Changes");
-    i0.ɵɵelementEnd();
-} }
+import * as i1 from "./user-app-config-content.component";
 function UserAppConfigComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 0);
@@ -337,55 +15,37 @@ function UserAppConfigComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
     i0.ɵɵelement(7, "i", 6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 7);
-    i0.ɵɵconditionalCreate(9, UserAppConfigComponent_Conditional_0_Conditional_9_Template, 2, 0, "div", 8);
-    i0.ɵɵconditionalCreate(10, UserAppConfigComponent_Conditional_0_Conditional_10_Template, 2, 1, "mj-alert", 9);
-    i0.ɵɵconditionalCreate(11, UserAppConfigComponent_Conditional_0_Conditional_11_Template, 31, 19, "div", 10);
-    i0.ɵɵelementStart(12, "div", 11)(13, "div", 12);
-    i0.ɵɵconditionalCreate(14, UserAppConfigComponent_Conditional_0_Conditional_14_Template, 3, 1, "button", 13);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 14)(16, "button", 15);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Save()); });
-    i0.ɵɵconditionalCreate(17, UserAppConfigComponent_Conditional_0_Conditional_17_Template, 3, 1)(18, UserAppConfigComponent_Conditional_0_Conditional_18_Template, 3, 0);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 16);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
-    i0.ɵɵtext(20, " Cancel ");
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(8, "mj-user-app-config-content", 7);
+    i0.ɵɵlistener("Saved", function UserAppConfigComponent_Conditional_0_Template_mj_user_app_config_content_Saved_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnContentSaved()); })("Cancelled", function UserAppConfigComponent_Conditional_0_Template_mj_user_app_config_content_Cancelled_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.IsLoading ? 9 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 10 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsLoading ? 11 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.HasChanges() ? 14 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.IsLoading || ctx_r1.IsSaving || !ctx_r1.HasChanges());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSaving ? 17 : 18);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("Provider", ctx_r1.Provider);
 } }
 /**
- * Full-screen modal dialog for configuring user's application visibility and order.
- * Allows users to:
- * - Select which applications to show in the app switcher
- * - Reorder applications via drag-and-drop (desktop)
- * - Toggle apps on/off in a single list (mobile)
+ * Full-screen modal dialog for configuring user's application visibility and
+ * order. Thin wrapper: the actual configuration UI (list/reorder/persistence)
+ * lives in `mj-user-app-config-content`, which the shell's app launcher also
+ * embeds directly as an in-panel view. This wrapper only provides the modal
+ * chrome + the `ShowDialog`/`Open()`/`Close()` API its dialog consumers use
+ * (e.g. the Home dashboard).
+ *
+ * The content component loads its data in ngOnInit — because it is created
+ * fresh under this template's `@if (ShowDialog)`, every `Open()` gets a fresh
+ * load with no stale-list flash (the concern bug F1's resetLists() addressed
+ * in the pre-split monolith is solved structurally here).
  */
 export class UserAppConfigComponent extends BaseAngularComponent {
-    appManager = inject(ApplicationManager);
-    sharedService = inject(SharedService);
-    cdr = inject(ChangeDetectorRef);
-    ngZone = inject(NgZone);
-    el = inject(ElementRef);
     _showDialog = false;
     set ShowDialog(value) {
         if (value !== this._showDialog) {
             this._showDialog = value;
+            // Emit on EVERY change so the parent's `[(ShowDialog)]` two-way binding round-trips (bug F1).
+            // Previously the setter never emitted, so when child and parent state diverged the dialog got
+            // stuck in a state only a full browser refresh could clear. This is the single emit path —
+            // Open()/Close() route through this setter rather than emitting themselves.
+            this.ShowDialogChange.emit(value);
         }
     }
     get ShowDialog() {
@@ -393,353 +53,35 @@ export class UserAppConfigComponent extends BaseAngularComponent {
     }
     ShowDialogChange = new EventEmitter();
     ConfigSaved = new EventEmitter();
-    AllApps = [];
-    ActiveApps = [];
-    AvailableApps = [];
-    IsLoading = false;
-    IsSaving = false;
-    ErrorMessage = '';
-    AvailablePanelCollapsed = false;
-    SelectedPanelCollapsed = false;
-    DraggedItem = null;
-    DraggedIndex = -1;
-    DropTargetIndex = -1;
     /**
-     * Opens the dialog and loads user's app configuration
+     * Opens the dialog (the embedded content component loads on creation).
+     * Routes through the setter — the single ShowDialogChange emit path.
      */
-    async Open() {
-        this._showDialog = true;
-        this.ShowDialogChange.emit(true);
-        this.ErrorMessage = '';
-        await this.loadConfiguration();
+    Open() {
+        this.ShowDialog = true;
     }
     /**
-     * Closes the dialog without saving
+     * Closes the dialog without saving. Routes through the setter — the single
+     * ShowDialogChange emit path.
      */
     Close() {
-        this._showDialog = false;
-        this.ShowDialogChange.emit(false);
-    }
-    /**
-     * Adds an app to the user's active list
-     */
-    AddApp(item) {
-        item.isActive = true;
-        item.sequence = this.ActiveApps.length;
-        item.isDirty = true;
-        this.refreshAppLists();
-    }
-    /**
-     * Removes an app from the user's active list
-     */
-    RemoveApp(item) {
-        item.isActive = false;
-        item.sequence = 999;
-        item.isDirty = true;
-        this.refreshAppLists();
-        this.resequenceActiveApps();
-    }
-    /**
-     * Toggles an app between active and inactive
-     */
-    ToggleApp(item) {
-        if (item.isActive) {
-            this.RemoveApp(item);
-        }
-        else {
-            this.AddApp(item);
-        }
-    }
-    /**
-     * Moves an app up in the order. Positional (splice + renumber), NOT a sequence-value
-     * swap: rows can carry duplicate Sequence values (issue #3027 — e.g. a re-enabled app
-     * kept a stale value), and swapping two equal values is a silent no-op. Reordering by
-     * position then renumbering 0..n-1 always works and heals duplicates as a side effect.
-     */
-    MoveUp(item) {
-        const index = this.ActiveApps.indexOf(item);
-        if (index > 0) {
-            this.moveActiveApp(index, index - 1);
-        }
-    }
-    /**
-     * Moves an app down in the order. Positional — see {@link MoveUp} for why.
-     */
-    MoveDown(item) {
-        const index = this.ActiveApps.indexOf(item);
-        if (index >= 0 && index < this.ActiveApps.length - 1) {
-            this.moveActiveApp(index, index + 1);
-        }
-    }
-    moveActiveApp(fromIndex, toIndex) {
-        this.ActiveApps = moveAndResequence(this.ActiveApps, fromIndex, toIndex);
-    }
-    /**
-     * Checks if there are any unsaved changes
-     */
-    HasChanges() {
-        return this.AllApps.some(item => item.isDirty);
-    }
-    /**
-     * Saves the user's app configuration
-     */
-    async Save() {
-        if (!this.HasChanges()) {
-            this.Close();
-            return;
-        }
-        this.IsSaving = true;
-        this.ErrorMessage = '';
-        try {
-            // Self-heal: renumber active apps 0..n-1 before persisting. Existing rows can
-            // carry duplicate Sequence values from older data (issue #3027); renumbering in
-            // display order marks any corrected rows dirty so this save fixes them for good.
-            this.resequenceActiveApps();
-            const md = this.ProviderToUse;
-            for (const item of this.AllApps) {
-                if (!item.isDirty)
-                    continue;
-                if (item.userAppId) {
-                    await this.updateUserApplication(md, item);
-                }
-                else if (item.isActive) {
-                    await this.createUserApplication(md, item);
-                }
-            }
-            // Each userApp.Save() above fires a BaseEntity 'save' event, which UserInfoEngine
-            // catches via HandleIndividualBaseEntityEvent → debounced refresh → NotifyDataChange.
-            // ApplicationManager.subscribeToEngineChanges then propagates to the shell app
-            // switcher. No explicit reload needed here — and avoiding it sidesteps NG0100
-            // from observable emissions interleaving with this method's save loop.
-            LogStatusEx({
-                message: 'User app configuration saved',
-                verboseOnly: true
-            });
-            this.sharedService.CreateSimpleNotification('App configuration saved successfully!', 'success', 3000);
-            this.ConfigSaved.emit();
-            this.Close();
-        }
-        catch (error) {
-            this.ErrorMessage = 'Failed to save configuration. Please try again.';
-            LogError('Error saving app configuration:', undefined, error instanceof Error ? error.message : String(error));
-        }
-        finally {
-            this.ngZone.run(() => {
-                this.IsSaving = false;
-                this.cdr.detectChanges();
-            });
-        }
-    }
-    /**
-     * Resets all changes and reloads the configuration
-     */
-    async Reset() {
-        await this.loadConfiguration();
-    }
-    // ---------------------------------------------------------------------------
-    //  Drag-and-drop handlers (desktop only)
-    // ---------------------------------------------------------------------------
-    OnDragStart(event, item, index) {
-        this.DraggedItem = item;
-        this.DraggedIndex = index;
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/plain', index.toString());
-        }
-    }
-    OnDragOver(event) {
-        event.preventDefault();
-        if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'move';
-        }
+        this.ShowDialog = false;
     }
-    OnDragEnter(event, index) {
-        event.preventDefault();
-        this.DropTargetIndex = index;
-    }
-    OnDragEnd() {
-        this.DraggedItem = null;
-        this.DraggedIndex = -1;
-        this.DropTargetIndex = -1;
-    }
-    OnDrop(event) {
-        event.preventDefault();
-        if (this.DraggedIndex >= 0 && this.DropTargetIndex >= 0 && this.DraggedIndex !== this.DropTargetIndex) {
-            const [movedItem] = this.ActiveApps.splice(this.DraggedIndex, 1);
-            this.ActiveApps.splice(this.DropTargetIndex, 0, movedItem);
-            this.resequenceActiveApps();
-            this.cdr.detectChanges();
-        }
-        this.OnDragEnd();
-    }
-    // ---------------------------------------------------------------------------
-    //  Touch drag-and-drop handlers (mobile)
-    // ---------------------------------------------------------------------------
-    TouchDragIndex = -1;
-    TouchDropIndex = -1;
-    TouchDragActive = false;
-    touchStartY = 0;
-    touchCurrentY = 0;
-    touchRowHeight = 0;
-    touchDragElement = null;
-    touchScrollContainer = null;
-    OnTouchDragStart(event, index) {
-        const touch = event.touches[0];
-        const row = event.target.closest('.mobile-app-row');
-        if (!row)
-            return;
-        event.preventDefault();
-        this.TouchDragIndex = index;
-        this.TouchDropIndex = index;
-        this.TouchDragActive = true;
-        this.touchStartY = touch.clientY;
-        this.touchCurrentY = touch.clientY;
-        this.touchDragElement = row;
-        this.touchRowHeight = row.offsetHeight;
-        this.touchScrollContainer = this.el.nativeElement.querySelector('.mobile-list');
-        row.classList.add('touch-dragging');
-    }
-    OnTouchDragMove(event) {
-        if (!this.TouchDragActive || !this.touchDragElement)
-            return;
-        event.preventDefault();
-        const touch = event.touches[0];
-        this.touchCurrentY = touch.clientY;
-        const deltaY = this.touchCurrentY - this.touchStartY;
-        this.touchDragElement.style.transform = `translateY(${deltaY}px)`;
-        this.touchDragElement.style.zIndex = '100';
-        this.updateTouchDropTarget(deltaY);
-        this.autoScrollIfNeeded();
-    }
-    OnTouchDragEnd() {
-        if (!this.TouchDragActive)
-            return;
-        if (this.touchDragElement) {
-            this.touchDragElement.style.transform = '';
-            this.touchDragElement.style.zIndex = '';
-            this.touchDragElement.classList.remove('touch-dragging');
-        }
-        if (this.TouchDragIndex >= 0 && this.TouchDropIndex >= 0 && this.TouchDragIndex !== this.TouchDropIndex) {
-            const [movedItem] = this.ActiveApps.splice(this.TouchDragIndex, 1);
-            this.ActiveApps.splice(this.TouchDropIndex, 0, movedItem);
-            this.resequenceActiveApps();
-        }
-        this.resetTouchDragState();
-        this.cdr.detectChanges();
-    }
-    updateTouchDropTarget(deltaY) {
-        const rowsToMove = Math.round(deltaY / this.touchRowHeight);
-        const newIndex = Math.max(0, Math.min(this.ActiveApps.length - 1, this.TouchDragIndex + rowsToMove));
-        this.TouchDropIndex = newIndex;
-    }
-    autoScrollIfNeeded() {
-        if (!this.touchScrollContainer)
-            return;
-        const rect = this.touchScrollContainer.getBoundingClientRect();
-        const edgeZone = 40;
-        if (this.touchCurrentY < rect.top + edgeZone) {
-            this.touchScrollContainer.scrollTop -= 8;
-        }
-        else if (this.touchCurrentY > rect.bottom - edgeZone) {
-            this.touchScrollContainer.scrollTop += 8;
-        }
-    }
-    resetTouchDragState() {
-        this.TouchDragIndex = -1;
-        this.TouchDropIndex = -1;
-        this.TouchDragActive = false;
-        this.touchDragElement = null;
-        this.touchScrollContainer = null;
-    }
-    // ---------------------------------------------------------------------------
-    //  Private helpers
-    // ---------------------------------------------------------------------------
-    async loadConfiguration() {
-        this.IsLoading = true;
-        this.ErrorMessage = '';
-        try {
-            // Read directly from UserInfoEngine's cache. The engine already loaded
-            // and maintains MJ: User Applications via its event-driven refresh — no
-            // need to re-query the DB on every dialog open. EnsureLoaded is idempotent
-            // and instant when the engine is already loaded (the typical case here,
-            // since UserInfoEngine fires at startup).
-            await UserInfoEngine.Instance.EnsureLoaded();
-            const systemApps = this.appManager.GetAuthorizedSystemApps();
-            const userApps = UserInfoEngine.Instance.UserApplications;
-            this.AllApps = this.buildAppConfigItems(systemApps, userApps);
-            this.refreshAppLists();
-        }
-        catch (error) {
-            this.ErrorMessage = 'Failed to load app configuration. Please try again.';
-            LogError('Error loading app configuration:', undefined, error instanceof Error ? error.message : String(error));
-        }
-        finally {
-            this.ngZone.run(() => {
-                this.IsLoading = false;
-                this.cdr.detectChanges();
-            });
-        }
-    }
-    buildAppConfigItems(systemApps, userApps) {
-        return systemApps.map(app => {
-            const userApp = userApps.find(ua => UUIDsEqual(ua.ApplicationID, app.ID));
-            return {
-                app,
-                userAppId: userApp?.ID ?? null,
-                sequence: userApp?.Sequence ?? 999,
-                isActive: userApp?.IsActive ?? false,
-                isDirty: false
-            };
-        });
-    }
-    refreshAppLists() {
-        this.ActiveApps = this.AllApps
-            .filter(item => item.isActive)
-            .sort((a, b) => a.sequence - b.sequence);
-        this.AvailableApps = this.AllApps
-            .filter(item => !item.isActive)
-            .sort((a, b) => a.app.Name.localeCompare(b.app.Name));
-    }
-    resequenceActiveApps() {
-        resequenceItems(this.ActiveApps);
-    }
-    async updateUserApplication(md, item) {
-        const userApp = await md.GetEntityObject('MJ: User Applications');
-        await userApp.Load(item.userAppId);
-        userApp.Sequence = item.sequence;
-        userApp.IsActive = item.isActive;
-        const saved = await userApp.Save();
-        if (!saved) {
-            throw new Error(`Failed to update UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);
-        }
-        item.isDirty = false;
-        LogStatus(`Updated UserApplication for ${item.app.Name}: sequence=${item.sequence}, isActive=${item.isActive}`);
-    }
-    async createUserApplication(md, item) {
-        const userApp = await md.GetEntityObject('MJ: User Applications');
-        userApp.NewRecord();
-        userApp.UserID = md.CurrentUser.ID;
-        userApp.ApplicationID = item.app.ID;
-        userApp.Sequence = item.sequence;
-        userApp.IsActive = item.isActive;
-        const saved = await userApp.Save();
-        if (!saved) {
-            throw new Error(`Failed to create UserApplication for ${item.app.Name}: ${userApp.LatestResult}`);
-        }
-        item.userAppId = userApp.ID;
-        item.isDirty = false;
-        LogStatus(`Created UserApplication for ${item.app.Name}: sequence=${item.sequence}`);
+    /** Content saved successfully — surface it and close */
+    OnContentSaved() {
+        this.ConfigSaved.emit();
+        this.Close();
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵUserAppConfigComponent_BaseFactory; return function UserAppConfigComponent_Factory(__ngFactoryType__) { return (ɵUserAppConfigComponent_BaseFactory || (ɵUserAppConfigComponent_BaseFactory = i0.ɵɵgetInheritedFactory(UserAppConfigComponent)))(__ngFactoryType__ || UserAppConfigComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { ShowDialog: "ShowDialog" }, outputs: { ShowDialogChange: "ShowDialogChange", ConfigSaved: "ConfigSaved" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "app-config-title", 1, "modal-dialog", "full-screen-dialog"], [1, "modal-header"], ["id", "app-config-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-grid-2"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [1, "app-config-container"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["Variant", "error"], [1, "config-content"], [1, "dialog-footer"], [1, "footer-left"], ["mjButton", "", 3, "disabled"], [1, "footer-right"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["text", "Loading your app configuration...", "size", "medium"], [1, "config-description"], [1, "panels-container", "desktop-only"], [1, "panel", "available-apps-panel"], [1, "panel-header", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], [1, "badge"], ["aria-hidden", "true", 1, "collapse-toggle", "fa-solid"], [1, "panel-content"], ["Size", "compact", "Icon", "fa-solid fa-check-double", "Title", "All applications added!"], [1, "available-app-item"], [1, "panel", "selected-apps-panel"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-circle"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No applications selected", "Message", "Add apps from the available list"], [1, "sortable-list"], [1, "mobile-view", 3, "touchmove", "touchend", "touchcancel"], [1, "mobile-list"], [1, "available-app-item", 3, "dblclick"], [1, "app-icon"], ["aria-hidden", "true"], [1, "app-info"], [1, "app-name"], [1, "app-description"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Add to your apps", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], [1, "sortable-list", 3, "dragover", "drop"], ["draggable", "true", 1, "app-item", 3, "dragging"], ["draggable", "true", 1, "app-item", 3, "dragstart", "dragend", "dragenter", "dblclick"], [1, "app-item-content"], [1, "drag-handle"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip-vertical"], [1, "app-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move up", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move down", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Remove from your apps", 3, "click"], [1, "mobile-section-label"], [1, "mobile-drop-indicator"], [1, "mobile-app-row"], ["aria-label", "Drag to reorder", 1, "mobile-drag-handle", 3, "touchstart"], [1, "mobile-app-name"], [1, "mobile-toggle", "on", 3, "click", "aria-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-on"], [1, "mobile-app-row", "inactive"], [1, "mobile-toggle", "off", 3, "click", "aria-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-off"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], ["size", "small", 3, "showText"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"]], template: function UserAppConfigComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, UserAppConfigComponent_Conditional_0_Template, 21, 7);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { ShowDialog: "ShowDialog" }, outputs: { ShowDialogChange: "ShowDialogChange", ConfigSaved: "ConfigSaved" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "app-config-title", 1, "modal-dialog", "full-screen-dialog"], [1, "modal-header"], ["id", "app-config-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [3, "Saved", "Cancelled", "Provider"]], template: function UserAppConfigComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, UserAppConfigComponent_Conditional_0_Template, 9, 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.ShowDialog ? 0 : -1);
-        } }, dependencies: [i1.LoadingComponent, i2.MJButtonDirective, i2.MJEmptyStateComponent, i2.MJAlertComponent], styles: ["\n\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n}\n\n\n\n.full-screen-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mat-sys-surface);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mat-sys-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: none;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-close[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n\n\n.app-config-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n\n\n\n.config-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  overflow: hidden;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0 0 1.5rem 0;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  line-height: 1.5;\n}\n\n\n\n.panels-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    overflow-y: auto;\n  }\n\n  \n\n  .panel-header[_ngcontent-%COMP%]   .collapse-toggle[_ngcontent-%COMP%] {\n    display: inline-block !important;\n    color: var(--mat-sys-on-surface-variant) !important;\n  }\n\n  \n\n  .panel-header[_ngcontent-%COMP%] {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .panel-header[_ngcontent-%COMP%]:hover {\n    background: var(--mat-sys-surface-container);\n  }\n\n  \n\n  .panel.collapsed[_ngcontent-%COMP%] {\n    flex: 0 0 auto !important;\n  }\n\n  .panel.collapsed[_ngcontent-%COMP%]   .panel-content[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .panel.collapsed[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n    border-bottom: none;\n  }\n\n  \n\n  .panel[_ngcontent-%COMP%]:not(.collapsed) {\n    flex: 1 1 auto;\n    min-height: 150px;\n  }\n}\n\n\n\n.panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-medium);\n  overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 1rem 1.25rem;\n  background: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 1.1rem;\n  color: var(--mat-sys-primary);\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font: var(--mat-sys-title-medium);\n  color: var(--mat-sys-on-surface);\n  flex: 1;\n}\n\n.panel-header[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n  padding: 0.125rem 0.625rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-medium);\n  font-weight: 500;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%]   .collapse-toggle[_ngcontent-%COMP%] {\n  display: none;\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 0.9rem;\n  margin-left: 0.5rem;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n\n\n\n\n.sortable-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n\n\n.app-item[_ngcontent-%COMP%] {\n  cursor: grab;\n  transition: transform 0.2s, opacity 0.2s;\n}\n\n.app-item[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.app-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  transform: scale(0.98);\n}\n\n.app-item-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-left-width: 4px;\n  border-radius: var(--mat-sys-corner-small);\n  transition: all 0.2s ease;\n}\n\n.app-item-content[_ngcontent-%COMP%]:hover {\n  border-color: var(--mat-sys-primary);\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface-variant);\n  cursor: grab;\n  padding: 0.25rem;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mat-sys-corner-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 1.1rem;\n  flex-shrink: 0;\n}\n\n.app-info[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  font: var(--mat-sys-body-large);\n  font-weight: 500;\n  color: var(--mat-sys-on-surface);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description[_ngcontent-%COMP%] {\n  font: var(--mat-sys-body-small);\n  color: var(--mat-sys-on-surface-variant);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n\n.app-actions[_ngcontent-%COMP%]   .mj-btn-ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.app-actions[_ngcontent-%COMP%]   .mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.app-actions[_ngcontent-%COMP%]   .mj-btn-ghost[_ngcontent-%COMP%]:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.app-actions[_ngcontent-%COMP%]   .mj-btn-sm[_ngcontent-%COMP%] {\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  font-size: 0.8rem;\n}\n\n.app-actions[_ngcontent-%COMP%]   .mj-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n\n\n.available-app-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0.5rem;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-small);\n  transition: all 0.2s ease;\n}\n\n.available-app-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mat-sys-primary);\n  background: var(--mat-sys-surface-container);\n}\n\n.available-app-item[_ngcontent-%COMP%]   .app-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n.footer-left[_ngcontent-%COMP%], \n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n\n\n\n\n\n\n\n.mobile-view[_ngcontent-%COMP%] {\n  display: none;\n}\n\n@media (max-width: 600px) {\n  \n\n  .desktop-only[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .config-description[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .mobile-view[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .mobile-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n  }\n\n  \n\n  .mobile-section-label[_ngcontent-%COMP%] {\n    padding: 0.5rem 0.625rem 0.25rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n    color: var(--mj-text-secondary);\n  }\n\n  \n\n  .mobile-app-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.625rem;\n    padding: 0.625rem;\n    border-radius: var(--mj-radius-md);\n    transition: background-color 0.15s ease;\n  }\n\n  .mobile-app-row.inactive[_ngcontent-%COMP%] {\n    opacity: 0.7;\n  }\n\n  .mobile-app-row[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n    width: 2rem;\n    height: 2rem;\n    font-size: 0.875rem;\n    flex-shrink: 0;\n  }\n\n  .mobile-app-name[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  \n\n  .mobile-drag-handle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5rem;\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.875rem;\n    touch-action: none;\n    cursor: grab;\n    padding: 0.5rem 0;\n  }\n\n  .mobile-drag-handle[_ngcontent-%COMP%]:active {\n    cursor: grabbing;\n    color: var(--mj-text-primary);\n  }\n\n  \n\n  .mobile-app-row.touch-dragging[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-hover);\n    box-shadow: var(--mj-shadow-lg);\n    border-radius: var(--mj-radius-md);\n    position: relative;\n    z-index: 100;\n    opacity: 0.95;\n  }\n\n  \n\n  .mobile-app-row.touch-ghost[_ngcontent-%COMP%] {\n    opacity: 0.3;\n  }\n\n  \n\n  .mobile-drop-indicator[_ngcontent-%COMP%] {\n    height: 2px;\n    background: var(--mj-brand-primary);\n    border-radius: 1px;\n    margin: 0 0.625rem;\n  }\n\n  \n\n  .mobile-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    padding: 0.25rem;\n    cursor: pointer;\n    font-size: 1.5rem;\n    flex-shrink: 0;\n    transition: color 0.15s ease;\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  .mobile-toggle.on[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n  }\n\n  .mobile-toggle.off[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n  }\n\n  \n\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 0.75rem 1rem;\n  }\n\n  .modal-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n\n  \n\n  .config-content[_ngcontent-%COMP%] {\n    padding: 0;\n  }\n\n  \n\n  .dialog-footer[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n    gap: 0.5rem;\n  }\n\n  .footer-left[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  .app-item[_ngcontent-%COMP%], \n   .app-item-content[_ngcontent-%COMP%], \n   .available-app-item[_ngcontent-%COMP%], \n   .modal-close[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"] });
+        } }, dependencies: [i1.UserAppConfigContentComponent], styles: ["\n\n\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n}\n\n\n\n.full-screen-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mat-sys-surface);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mat-sys-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: none;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-close[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n@media (max-width: 600px) {\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 0.75rem 1rem;\n  }\n\n  .modal-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-close[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserAppConfigComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-user-app-config', template: "<!-- Modal Backdrop -->\n@if (ShowDialog) {\n  <div class=\"modal-backdrop\" (click)=\"Close()\" role=\"presentation\"></div>\n  <div\n    class=\"modal-dialog full-screen-dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"app-config-title\"\n  >\n    <!-- Dialog Header -->\n    <div class=\"modal-header\">\n      <h2 class=\"modal-title\" id=\"app-config-title\">\n        <i class=\"fa-solid fa-grid-2\" aria-hidden=\"true\"></i>\n        Configure Apps\n      </h2>\n      <button\n        class=\"modal-close\"\n        (click)=\"Close()\"\n        aria-label=\"Close dialog\"\n      >\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"app-config-container\">\n      <!-- Loading State -->\n      @if (IsLoading) {\n        <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n          <mj-loading text=\"Loading your app configuration...\" size=\"medium\"></mj-loading>\n        </div>\n      }\n\n      <!-- Error Message -->\n      @if (ErrorMessage) {\n        <mj-alert Variant=\"error\">{{ ErrorMessage }}</mj-alert>\n      }\n\n      <!-- Main Content -->\n      @if (!IsLoading) {\n        <div class=\"config-content\">\n          <p class=\"config-description\">\n            Select which applications appear in your app switcher and arrange them in your preferred order.\n            Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n          </p>\n\n          <!-- Desktop: two-panel layout with drag-and-drop -->\n          <div class=\"panels-container desktop-only\">\n            <!-- Available Apps Panel -->\n            <div class=\"panel available-apps-panel\" [class.collapsed]=\"AvailablePanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"AvailablePanelCollapsed = !AvailablePanelCollapsed\">\n                <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n                <h3>Available Applications</h3>\n                <span class=\"badge\">{{ AvailableApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"AvailablePanelCollapsed\"\n                  [class.fa-chevron-up]=\"!AvailablePanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (AvailableApps.length === 0) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-check-double\"\n                    Title=\"All applications added!\" />\n                }\n\n                @for (item of AvailableApps; track item.app.ID) {\n                  <div class=\"available-app-item\" (dblclick)=\"AddApp(item)\">\n                    <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                      <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                    </div>\n\n                    <div class=\"app-info\">\n                      <span class=\"app-name\">{{ item.app.Name }}</span>\n                      @if (item.app.Description) {\n                        <span class=\"app-description\">{{ item.app.Description }}</span>\n                      }\n                    </div>\n\n                    <button\n                      mjButton variant=\"outline\" size=\"sm\"\n                      (click)=\"AddApp(item)\"\n                      title=\"Add to your apps\"\n                      [attr.aria-label]=\"'Add ' + item.app.Name\"\n                    >\n                      <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n                      Add\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Selected Apps Panel -->\n            <div class=\"panel selected-apps-panel\" [class.collapsed]=\"SelectedPanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"SelectedPanelCollapsed = !SelectedPanelCollapsed\">\n                <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n                <h3>Your Applications</h3>\n                <span class=\"badge\">{{ ActiveApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"SelectedPanelCollapsed\"\n                  [class.fa-chevron-up]=\"!SelectedPanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (ActiveApps.length === 0) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-inbox\"\n                    Title=\"No applications selected\"\n                    Message=\"Add apps from the available list\" />\n                }\n\n                @if (ActiveApps.length > 0) {\n                  <div\n                    class=\"sortable-list\"\n                    (dragover)=\"OnDragOver($event)\"\n                    (drop)=\"OnDrop($event)\"\n                  >\n                    @for (item of ActiveApps; track item.app.ID; let i = $index) {\n                      <div\n                        class=\"app-item\"\n                        [class.dragging]=\"DraggedItem === item\"\n                        draggable=\"true\"\n                        (dragstart)=\"OnDragStart($event, item, i)\"\n                        (dragend)=\"OnDragEnd()\"\n                        (dragenter)=\"OnDragEnter($event, i)\"\n                        (dblclick)=\"RemoveApp(item); $event.stopPropagation()\"\n                      >\n                        <div class=\"app-item-content\" [style.border-left-color]=\"item.app.GetColor()\">\n                          <div class=\"drag-handle\">\n                            <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n                          </div>\n\n                          <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                            <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                          </div>\n\n                          <div class=\"app-info\">\n                            <span class=\"app-name\">{{ item.app.Name }}</span>\n                            @if (item.app.Description) {\n                              <span class=\"app-description\">{{ item.app.Description }}</span>\n                            }\n                          </div>\n\n                          <div class=\"app-actions\">\n                            <button\n                              mjButton variant=\"flat\" size=\"sm\"\n                              [disabled]=\"i === 0\"\n                              (click)=\"MoveUp(item); $event.stopPropagation()\"\n                              title=\"Move up\"\n                              [attr.aria-label]=\"'Move ' + item.app.Name + ' up'\"\n                            >\n                              <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              mjButton variant=\"flat\" size=\"sm\"\n                              [disabled]=\"i === ActiveApps.length - 1\"\n                              (click)=\"MoveDown(item); $event.stopPropagation()\"\n                              title=\"Move down\"\n                              [attr.aria-label]=\"'Move ' + item.app.Name + ' down'\"\n                            >\n                              <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              mjButton variant=\"danger\" size=\"sm\"\n                              (click)=\"RemoveApp(item); $event.stopPropagation()\"\n                              title=\"Remove from your apps\"\n                              [attr.aria-label]=\"'Remove ' + item.app.Name\"\n                            >\n                              <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Mobile: single list with toggles + touch drag reorder -->\n          <div\n            class=\"mobile-view\"\n            (touchmove)=\"OnTouchDragMove($event)\"\n            (touchend)=\"OnTouchDragEnd()\"\n            (touchcancel)=\"OnTouchDragEnd()\"\n          >\n            <div class=\"mobile-list\">\n              @if (ActiveApps.length > 0) {\n                <div class=\"mobile-section-label\">Your Apps</div>\n                @for (item of ActiveApps; track item.app.ID; let i = $index) {\n                  @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex > i) {\n                    <div class=\"mobile-drop-indicator\"></div>\n                  }\n                  <div\n                    class=\"mobile-app-row\"\n                    [class.touch-ghost]=\"TouchDragActive && TouchDragIndex === i\"\n                  >\n                    <div\n                      class=\"mobile-drag-handle\"\n                      (touchstart)=\"OnTouchDragStart($event, i)\"\n                      aria-label=\"Drag to reorder\"\n                    >\n                      <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n                    </div>\n                    <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                      <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                    </div>\n                    <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n                    <button\n                      class=\"mobile-toggle on\"\n                      (click)=\"ToggleApp(item)\"\n                      aria-label=\"Remove {{ item.app.Name }}\"\n                    >\n                      <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                  @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex < i) {\n                    <div class=\"mobile-drop-indicator\"></div>\n                  }\n                }\n                @if (TouchDragActive && TouchDropIndex === ActiveApps.length - 1 && TouchDragIndex < TouchDropIndex) {\n                  <div class=\"mobile-drop-indicator\"></div>\n                }\n              }\n\n              @if (AvailableApps.length > 0) {\n                <div class=\"mobile-section-label\">Available</div>\n                @for (item of AvailableApps; track item.app.ID) {\n                  <div class=\"mobile-app-row inactive\">\n                    <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                      <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                    </div>\n                    <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n                    <button\n                      class=\"mobile-toggle off\"\n                      (click)=\"ToggleApp(item)\"\n                      aria-label=\"Add {{ item.app.Name }}\"\n                    >\n                      <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Footer Actions -->\n      <div class=\"dialog-footer\">\n        <div class=\"footer-left\">\n          @if (HasChanges()) {\n            <button\n              mjButton\n              (click)=\"Reset()\"\n              [disabled]=\"IsLoading || IsSaving\"\n            >\n              <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n              Reset Changes\n            </button>\n          }\n        </div>\n        <div class=\"footer-right\">\n          <button\n            mjButton variant=\"primary\"\n            (click)=\"Save()\"\n            [disabled]=\"IsLoading || IsSaving || !HasChanges()\"\n          >\n            @if (IsSaving) {\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n              <span>Saving...</span>\n            } @else {\n              <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n              <span>Save Changes</span>\n            }\n          </button>\n          <button\n            mjButton\n            (click)=\"Close()\"\n            [disabled]=\"IsSaving\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ============================================\n   User App Config - MD3 Design System\n   ============================================ */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n}\n\n/* Full-screen dialog */\n.full-screen-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mat-sys-surface);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Modal Header */\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-title i {\n  color: var(--mat-sys-primary);\n}\n\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: none;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.modal-close:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-close:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n/* Main container */\n.app-config-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n/* Loading state */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n\n/* Config content */\n.config-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  overflow: hidden;\n}\n\n.config-description {\n  margin: 0 0 1.5rem 0;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  line-height: 1.5;\n}\n\n/* Panels container */\n.panels-container {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    overflow-y: auto;\n  }\n\n  /* Show collapse toggle on mobile */\n  .panel-header .collapse-toggle {\n    display: inline-block !important;\n    color: var(--mat-sys-on-surface-variant) !important;\n  }\n\n  /* Make header clickable on mobile */\n  .panel-header {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .panel-header:hover {\n    background: var(--mat-sys-surface-container);\n  }\n\n  /* Collapsed panel - just show header */\n  .panel.collapsed {\n    flex: 0 0 auto !important;\n  }\n\n  .panel.collapsed .panel-content {\n    display: none !important;\n  }\n\n  .panel.collapsed .panel-header {\n    border-bottom: none;\n  }\n\n  /* Non-collapsed panel takes available space */\n  .panel:not(.collapsed) {\n    flex: 1 1 auto;\n    min-height: 150px;\n  }\n}\n\n/* Panel styles */\n.panel {\n  display: flex;\n  flex-direction: column;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-medium);\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 1rem 1.25rem;\n  background: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header i:first-child {\n  font-size: 1.1rem;\n  color: var(--mat-sys-primary);\n}\n\n.panel-header h3 {\n  margin: 0;\n  font: var(--mat-sys-title-medium);\n  color: var(--mat-sys-on-surface);\n  flex: 1;\n}\n\n.panel-header .badge {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n  padding: 0.125rem 0.625rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-medium);\n  font-weight: 500;\n}\n\n/* Collapse toggle - hidden by default, shown on mobile */\n.panel-header .collapse-toggle {\n  display: none;\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 0.9rem;\n  margin-left: 0.5rem;\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n\n\n/* Sortable list container */\n.sortable-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* App items */\n.app-item {\n  cursor: grab;\n  transition: transform 0.2s, opacity 0.2s;\n}\n\n.app-item:active {\n  cursor: grabbing;\n}\n\n.app-item.dragging {\n  opacity: 0.5;\n  transform: scale(0.98);\n}\n\n.app-item-content {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-left-width: 4px;\n  border-radius: var(--mat-sys-corner-small);\n  transition: all 0.2s ease;\n}\n\n.app-item-content:hover {\n  border-color: var(--mat-sys-primary);\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n.drag-handle {\n  color: var(--mat-sys-on-surface-variant);\n  cursor: grab;\n  padding: 0.25rem;\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n}\n\n.app-icon {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mat-sys-corner-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 1.1rem;\n  flex-shrink: 0;\n}\n\n.app-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n.app-name {\n  font: var(--mat-sys-body-large);\n  font-weight: 500;\n  color: var(--mat-sys-on-surface);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description {\n  font: var(--mat-sys-body-small);\n  color: var(--mat-sys-on-surface-variant);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-actions {\n  display: flex;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n\n.app-actions .mj-btn-ghost {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.app-actions .mj-btn-ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.app-actions .mj-btn-ghost:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.app-actions .mj-btn-sm {\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  font-size: 0.8rem;\n}\n\n.app-actions .mj-btn-danger:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n/* Available app items */\n.available-app-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0.5rem;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-small);\n  transition: all 0.2s ease;\n}\n\n.available-app-item:hover {\n  border-color: var(--mat-sys-primary);\n  background: var(--mat-sys-surface-container);\n}\n\n.available-app-item .app-info {\n  flex: 1;\n}\n\n/* Dialog footer */\n.dialog-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n.footer-left,\n.footer-right {\n  display: flex;\n  gap: 0.75rem;\n}\n\n.dialog-footer button {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* ==============================================\n   Mobile: single list with toggles\n   ============================================== */\n\n/* Hidden by default on desktop */\n.mobile-view {\n  display: none;\n}\n\n@media (max-width: 600px) {\n  /* Swap layouts */\n  .desktop-only {\n    display: none !important;\n  }\n\n  .config-description {\n    display: none;\n  }\n\n  .mobile-view {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .mobile-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n  }\n\n  /* Section labels */\n  .mobile-section-label {\n    padding: 0.5rem 0.625rem 0.25rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n    color: var(--mj-text-secondary);\n  }\n\n  /* App rows */\n  .mobile-app-row {\n    display: flex;\n    align-items: center;\n    gap: 0.625rem;\n    padding: 0.625rem;\n    border-radius: var(--mj-radius-md);\n    transition: background-color 0.15s ease;\n  }\n\n  .mobile-app-row.inactive {\n    opacity: 0.7;\n  }\n\n  .mobile-app-row .app-icon {\n    width: 2rem;\n    height: 2rem;\n    font-size: 0.875rem;\n    flex-shrink: 0;\n  }\n\n  .mobile-app-name {\n    flex: 1;\n    min-width: 0;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Drag handle */\n  .mobile-drag-handle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5rem;\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.875rem;\n    touch-action: none;\n    cursor: grab;\n    padding: 0.5rem 0;\n  }\n\n  .mobile-drag-handle:active {\n    cursor: grabbing;\n    color: var(--mj-text-primary);\n  }\n\n  /* Dragging row */\n  .mobile-app-row.touch-dragging {\n    background: var(--mj-bg-surface-hover);\n    box-shadow: var(--mj-shadow-lg);\n    border-radius: var(--mj-radius-md);\n    position: relative;\n    z-index: 100;\n    opacity: 0.95;\n  }\n\n  /* Ghost placeholder for the original position */\n  .mobile-app-row.touch-ghost {\n    opacity: 0.3;\n  }\n\n  /* Drop indicator line */\n  .mobile-drop-indicator {\n    height: 2px;\n    background: var(--mj-brand-primary);\n    border-radius: 1px;\n    margin: 0 0.625rem;\n  }\n\n  /* Toggle button */\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    padding: 0.25rem;\n    cursor: pointer;\n    font-size: 1.5rem;\n    flex-shrink: 0;\n    transition: color 0.15s ease;\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  .mobile-toggle.on {\n    color: var(--mj-brand-primary);\n  }\n\n  .mobile-toggle.off {\n    color: var(--mj-text-muted);\n  }\n\n  /* Header compact */\n  .modal-header {\n    padding: 0.75rem 1rem;\n  }\n\n  .modal-title {\n    font-size: 1.125rem;\n  }\n\n  /* Content compact */\n  .config-content {\n    padding: 0;\n  }\n\n  /* Footer compact */\n  .dialog-footer {\n    padding: 0.75rem;\n    gap: 0.5rem;\n  }\n\n  .footer-left,\n  .footer-right {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n}\n\n/* Accessibility - Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .app-item,\n  .app-item-content,\n  .available-app-item,\n  .modal-close {\n    transition: none;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-user-app-config', template: "<!-- Modal Backdrop -->\n@if (ShowDialog) {\n  <div class=\"modal-backdrop\" (click)=\"Close()\" role=\"presentation\"></div>\n  <div\n    class=\"modal-dialog full-screen-dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"app-config-title\"\n  >\n    <!-- Dialog Header -->\n    <div class=\"modal-header\">\n      <h2 class=\"modal-title\" id=\"app-config-title\">\n        <i class=\"fa-solid fa-grip\" aria-hidden=\"true\"></i>\n        Configure Apps\n      </h2>\n      <button\n        class=\"modal-close\"\n        (click)=\"Close()\"\n        aria-label=\"Close dialog\"\n      >\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <mj-user-app-config-content\n      [Provider]=\"Provider\"\n      (Saved)=\"OnContentSaved()\"\n      (Cancelled)=\"Close()\">\n    </mj-user-app-config-content>\n  </div>\n}\n", styles: ["/* ============================================\n   User App Config \u2014 full-screen modal chrome.\n   Content styles live in user-app-config-content.component.css\n   ============================================ */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n}\n\n/* Full-screen dialog */\n.full-screen-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: var(--mat-sys-surface);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Modal Header */\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  background: var(--mat-sys-surface);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-title i {\n  color: var(--mat-sys-primary);\n}\n\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: none;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.modal-close:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.modal-close:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n@media (max-width: 600px) {\n  .modal-header {\n    padding: 0.75rem 1rem;\n  }\n\n  .modal-title {\n    font-size: 1.125rem;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-close {\n    transition: none;\n  }\n}\n"] }]
     }], null, { ShowDialog: [{
             type: Input
         }], ShowDialogChange: [{
@@ -747,5 +89,5 @@ export class UserAppConfigComponent extends BaseAngularComponent {
         }], ConfigSaved: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAppConfigComponent, { className: "UserAppConfigComponent", filePath: "src/lib/user-app-config/user-app-config.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAppConfigComponent, { className: "UserAppConfigComponent", filePath: "src/lib/user-app-config/user-app-config.component.ts", lineNumber: 23 }); })();
 //# sourceMappingURL=user-app-config.component.js.map