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

@memberjunction/ng-explorer-settings 5.3.0 → 5.4.0

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

Files changed (35) hide show

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

@@ -1,9 +1,9 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, inject } from '@angular/core';
 import { Metadata, RunView, LogError, LogStatus } from '@memberjunction/core';
+import { ApplicationManager } from '@memberjunction/ng-base-application';
+import { SharedService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-base-application";
-import * as i2 from "@memberjunction/ng-shared";
-import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i1 from "@memberjunction/ng-shared-generic";
 const _forTrack0 = ($index, $item) => $item.app.ID;
 function UserAppConfigComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
@@ -19,17 +19,17 @@ function UserAppConfigComponent_Conditional_0_Conditional_10_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+    i0.ɵɵtextInterpolate(ctx_r1.ErrorMessage);
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "All applications added!");
     i0.ɵɵelementEnd()();
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -39,19 +39,19 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33);
-    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", 34);
-    i0.ɵɵelement(2, "i", 35);
+    i0.ɵɵelementStart(0, "div", 35);
+    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", 36);
+    i0.ɵɵelement(2, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 36)(4, "span", 37);
+    i0.ɵɵelementStart(3, "div", 38)(4, "span", 39);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template, 2, 1, "span", 38);
+    i0.ɵɵconditionalCreate(6, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template, 2, 1, "span", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 39);
-    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", 40);
+    i0.ɵɵelementStart(7, "button", 41);
+    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", 42);
     i0.ɵɵtext(9, " Add ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -67,16 +67,16 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template(rf,
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No applications selected");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 42);
+    i0.ɵɵelementStart(4, "p", 44);
     i0.ɵɵtext(5, "Add apps from the available list");
     i0.ɵɵelementEnd()();
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -86,36 +86,36 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
-    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_115_r10 = ctx_r7.$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDragStart($event, item_r9, ɵ$index_115_r10)); })("dragend", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dragend_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDragEnd($event)); })("dragenter", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template_div_dragenter_0_listener($event) { const ɵ$index_115_r10 = i0.ɵɵrestoreView(_r7).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDragEnter($event, ɵ$index_115_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", 46)(2, "div", 47);
-    i0.ɵɵelement(3, "i", 48);
+    i0.ɵɵelementStart(0, "div", 47);
+    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_115_r10 = ctx_r7.$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDragStart($event, item_r9, ɵ$index_115_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_115_r10 = i0.ɵɵrestoreView(_r7).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDragEnter($event, ɵ$index_115_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", 48)(2, "div", 49);
+    i0.ɵɵelement(3, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 34);
-    i0.ɵɵelement(5, "i", 35);
+    i0.ɵɵelementStart(4, "div", 36);
+    i0.ɵɵelement(5, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 36)(7, "span", 37);
+    i0.ɵɵelementStart(6, "div", 38)(7, "span", 39);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 38);
+    i0.ɵɵconditionalCreate(9, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 49)(11, "button", 50);
-    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", 51);
+    i0.ɵɵelementStart(10, "div", 51)(11, "button", 52);
+    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", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 52);
-    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", 53);
+    i0.ɵɵelementStart(13, "button", 54);
+    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", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 54);
-    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.ɵɵelementStart(15, "button", 56);
+    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_115_r10 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("dragging", ctx_r1.draggedItem === item_r9);
+    i0.ɵɵclassProp("dragging", ctx_r1.DraggedItem === item_r9);
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("border-left-color", item_r9.app.GetColor());
     i0.ɵɵadvance(3);
@@ -129,18 +129,109 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ɵ$index_115_r10 === 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_115_r10 === ctx_r1.activeApps.length - 1);
+    i0.ɵɵproperty("disabled", ɵ$index_115_r10 === ctx_r1.ActiveApps.length - 1);
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43);
-    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, 12, "div", 44, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 45);
+    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, 12, "div", 46, _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", 58);
+} }
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 58);
+} }
+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", 58);
+    i0.ɵɵelementStart(1, "div", 59)(2, "div", 60);
+    i0.ɵɵlistener("touchstart", function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Template_div_touchstart_2_listener($event) { const ɵ$index_159_r12 = i0.ɵɵrestoreView(_r11).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnTouchDragStart($event, ɵ$index_159_r12)); });
+    i0.ɵɵelement(3, "i", 50);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 36);
+    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 61);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 62);
+    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", 63);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(10, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_For_3_Conditional_10_Template, 1, 0, "div", 58);
+} if (rf & 2) {
+    const item_r13 = ctx.$implicit;
+    const ɵ$index_159_r12 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r1.TouchDragActive && ctx_r1.TouchDropIndex === ɵ$index_159_r12 && ctx_r1.TouchDragIndex > ɵ$index_159_r12 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("touch-ghost", ctx_r1.TouchDragActive && ctx_r1.TouchDragIndex === ɵ$index_159_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_159_r12 && ctx_r1.TouchDragIndex < ɵ$index_159_r12 ? 10 : -1);
+} }
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 58);
+} }
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    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", 58);
 } 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", 64)(1, "div", 36);
+    i0.ɵɵelement(2, "i", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 61);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 65);
+    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", 66);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r15 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", item_r15.app.GetColor());
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.activeApps);
+    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", 57);
+    i0.ɵɵtext(1, "Available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_30_For_3_Template, 7, 7, "div", 64, _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();
@@ -148,7 +239,7 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_Template(rf, ctx) {
     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", 20)(4, "div", 21)(5, "div", 22);
-    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.ɵɵ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", 23);
     i0.ɵɵelementStart(7, "h3");
     i0.ɵɵtext(8, "Available Applications");
@@ -163,7 +254,7 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_Template(rf, ctx) {
     i0.ɵɵrepeaterCreate(14, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template, 10, 6, "div", 28, _forTrack0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(16, "div", 29)(17, "div", 22);
-    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.ɵɵ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", 30);
     i0.ɵɵelementStart(19, "h3");
     i0.ɵɵtext(20, "Your Applications");
@@ -176,43 +267,53 @@ function UserAppConfigComponent_Conditional_0_Conditional_11_Template(rf, ctx) {
     i0.ɵɵelementStart(24, "div", 26);
     i0.ɵɵconditionalCreate(25, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_25_Template, 6, 0, "div", 27);
     i0.ɵɵconditionalCreate(26, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template, 3, 0, "div", 31);
-    i0.ɵɵelementEnd()()()();
+    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.ɵɵclassProp("collapsed", ctx_r1.AvailablePanelCollapsed);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.availableApps.length);
+    i0.ɵɵtextInterpolate(ctx_r1.AvailableApps.length);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.availablePanelCollapsed)("fa-chevron-up", !ctx_r1.availablePanelCollapsed);
+    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.ɵɵconditional(ctx_r1.AvailableApps.length === 0 ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.availableApps);
+    i0.ɵɵrepeater(ctx_r1.AvailableApps);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("collapsed", ctx_r1.selectedPanelCollapsed);
+    i0.ɵɵclassProp("collapsed", ctx_r1.SelectedPanelCollapsed);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.activeApps.length);
+    i0.ɵɵtextInterpolate(ctx_r1.ActiveApps.length);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.selectedPanelCollapsed)("fa-chevron-up", !ctx_r1.selectedPanelCollapsed);
+    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.ɵɵ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.activeApps.length > 0 ? 26 : -1);
+    i0.ɵɵconditional(ctx_r1.AvailableApps.length > 0 ? 30 : -1);
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    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(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.reset()); });
-    i0.ɵɵelement(1, "i", 55);
+    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", 67);
     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);
+    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", 56);
+    i0.ɵɵelement(0, "mj-loading", 68);
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2, "Saving...");
     i0.ɵɵelementEnd();
@@ -220,7 +321,7 @@ function UserAppConfigComponent_Conditional_0_Conditional_17_Template(rf, ctx) {
     i0.ɵɵproperty("showText", false);
 } }
 function UserAppConfigComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+    i0.ɵɵelement(0, "i", 69);
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2, "Save Changes");
     i0.ɵɵelementEnd();
@@ -228,337 +329,384 @@ function UserAppConfigComponent_Conditional_0_Conditional_18_Template(rf, ctx) {
 function UserAppConfigComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "h2", 3);
     i0.ɵɵelement(4, "i", 4);
     i0.ɵɵtext(5, " Configure Apps ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "button", 5);
-    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.ɵɵ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, 4, 1, "div", 9);
-    i0.ɵɵconditionalCreate(11, UserAppConfigComponent_Conditional_0_Conditional_11_Template, 27, 17, "div", 10);
+    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.ɵɵ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.ɵɵ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()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.isLoading ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.IsLoading ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.errorMessage ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isLoading ? 11 : -1);
+    i0.ɵɵconditional(!ctx_r1.IsLoading ? 11 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.hasChanges() ? 14 : -1);
+    i0.ɵɵconditional(ctx_r1.HasChanges() ? 14 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isSaving || !ctx_r1.hasChanges());
+    i0.ɵɵproperty("disabled", ctx_r1.IsLoading || ctx_r1.IsSaving || !ctx_r1.HasChanges());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSaving ? 17 : 18);
+    i0.ɵɵconditional(ctx_r1.IsSaving ? 17 : 18);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
 } }
 /**
  * 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
+ * - Reorder applications via drag-and-drop (desktop)
+ * - Toggle apps on/off in a single list (mobile)
  */
 export class UserAppConfigComponent {
-    appManager;
-    sharedService;
-    cdr;
-    ngZone;
-    showDialog = false;
-    showDialogChange = new EventEmitter();
-    configSaved = new EventEmitter();
-    // All available apps from the system
-    allApps = [];
-    // User's selected apps (active and ordered)
-    activeApps = [];
-    // Available apps not yet selected
-    availableApps = [];
-    isLoading = false;
-    isSaving = false;
-    errorMessage = '';
-    // Panel collapse state (for mobile)
-    availablePanelCollapsed = false;
-    selectedPanelCollapsed = false;
-    // Native drag-and-drop state
-    draggedItem = null;
-    draggedIndex = -1;
-    dropTargetIndex = -1;
-    constructor(appManager, sharedService, cdr, ngZone) {
-        this.appManager = appManager;
-        this.sharedService = sharedService;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
+    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;
+        }
+    }
+    get ShowDialog() {
+        return this._showDialog;
     }
+    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
      */
-    async open() {
-        this.showDialog = true;
-        this.showDialogChange.emit(true);
-        this.errorMessage = '';
+    async Open() {
+        this._showDialog = true;
+        this.ShowDialogChange.emit(true);
+        this.ErrorMessage = '';
         await this.loadConfiguration();
     }
     /**
      * Closes the dialog without saving
      */
-    close() {
-        this.showDialog = false;
-        this.showDialogChange.emit(false);
-    }
-    /**
-     * Loads the user's current app configuration
-     */
-    async loadConfiguration() {
-        this.isLoading = true;
-        this.errorMessage = '';
-        try {
-            const md = new Metadata();
-            const rv = new RunView();
-            // Load all system apps from ApplicationManager
-            const systemApps = this.appManager.GetAllSystemApps();
-            // Load user's UserApplication records
-            const userAppsResult = await rv.RunView({
-                EntityName: 'MJ: User Applications',
-                ExtraFilter: `UserID = '${md.CurrentUser.ID}'`,
-                OrderBy: 'Sequence, Application',
-                ResultType: 'entity_object'
-            });
-            const userApps = userAppsResult.Success ? userAppsResult.Results : [];
-            // Build app config items
-            this.allApps = this.buildAppConfigItems(systemApps, userApps);
-            // Separate into active (selected) and available (unselected)
-            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();
-            });
-        }
-    }
-    /**
-     * Builds app config items by matching system apps with user's UserApplication records
-     */
-    buildAppConfigItems(systemApps, userApps) {
-        const items = [];
-        for (const app of systemApps) {
-            const userApp = userApps.find(ua => ua.ApplicationID === app.ID);
-            items.push({
-                app,
-                userAppId: userApp?.ID || null,
-                sequence: userApp?.Sequence ?? 999, // Default high sequence for unselected
-                isActive: userApp?.IsActive ?? false,
-                isDirty: false
-            });
-        }
-        return items;
-    }
-    /**
-     * Separates apps into active and available lists based on isActive state
-     */
-    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));
-    }
-    /**
-     * Native drag start handler
-     */
-    onDragStart(event, item, index) {
-        this.draggedItem = item;
-        this.draggedIndex = index;
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/plain', index.toString());
-        }
-    }
-    /**
-     * Native drag over handler - allows drop
-     */
-    onDragOver(event) {
-        event.preventDefault();
-        if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'move';
-        }
-    }
-    /**
-     * Native drag enter handler - tracks drop target
-     */
-    onDragEnter(event, index) {
-        event.preventDefault();
-        this.dropTargetIndex = index;
-    }
-    /**
-     * Native drag end handler - cleanup
-     */
-    onDragEnd(event) {
-        this.draggedItem = null;
-        this.draggedIndex = -1;
-        this.dropTargetIndex = -1;
-    }
-    /**
-     * Native drop handler - reorder items
-     */
-    onDrop(event) {
-        event.preventDefault();
-        if (this.draggedIndex >= 0 && this.dropTargetIndex >= 0 && this.draggedIndex !== this.dropTargetIndex) {
-            // Remove item from old position
-            const [movedItem] = this.activeApps.splice(this.draggedIndex, 1);
-            // Insert at new position
-            this.activeApps.splice(this.dropTargetIndex, 0, movedItem);
-            // Update sequences based on new order
-            this.activeApps.forEach((item, idx) => {
-                if (item.sequence !== idx) {
-                    item.sequence = idx;
-                    item.isDirty = true;
-                }
-            });
-            this.cdr.detectChanges();
-        }
-        // Reset drag state
-        this.draggedItem = null;
-        this.draggedIndex = -1;
-        this.dropTargetIndex = -1;
+    Close() {
+        this._showDialog = false;
+        this.ShowDialogChange.emit(false);
     }
     /**
      * Adds an app to the user's active list
      */
-    addApp(item) {
+    AddApp(item) {
         item.isActive = true;
-        item.sequence = this.activeApps.length;
+        item.sequence = this.ActiveApps.length;
         item.isDirty = true;
         this.refreshAppLists();
     }
     /**
      * Removes an app from the user's active list
      */
-    removeApp(item) {
+    RemoveApp(item) {
         item.isActive = false;
         item.sequence = 999;
         item.isDirty = true;
         this.refreshAppLists();
-        // Resequence remaining active apps
-        this.activeApps.forEach((activeItem, index) => {
-            if (activeItem.sequence !== index) {
-                activeItem.sequence = index;
-                activeItem.isDirty = true;
-            }
-        });
+        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
      */
-    moveUp(item) {
-        const index = this.activeApps.indexOf(item);
+    MoveUp(item) {
+        const index = this.ActiveApps.indexOf(item);
         if (index > 0) {
-            // Swap with previous item
-            const prevItem = this.activeApps[index - 1];
-            // Swap sequences
-            const tempSeq = item.sequence;
-            item.sequence = prevItem.sequence;
-            prevItem.sequence = tempSeq;
-            item.isDirty = true;
-            prevItem.isDirty = true;
-            // Re-sort and create new array reference to trigger change detection
-            this.activeApps = [...this.activeApps].sort((a, b) => a.sequence - b.sequence);
+            this.swapSequences(item, this.ActiveApps[index - 1]);
+            this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);
         }
     }
     /**
      * Moves an app down in the order
      */
-    moveDown(item) {
-        const index = this.activeApps.indexOf(item);
-        if (index < this.activeApps.length - 1) {
-            // Swap with next item
-            const nextItem = this.activeApps[index + 1];
-            // Swap sequences
-            const tempSeq = item.sequence;
-            item.sequence = nextItem.sequence;
-            nextItem.sequence = tempSeq;
-            item.isDirty = true;
-            nextItem.isDirty = true;
-            // Re-sort and create new array reference to trigger change detection
-            this.activeApps = [...this.activeApps].sort((a, b) => a.sequence - b.sequence);
+    MoveDown(item) {
+        const index = this.ActiveApps.indexOf(item);
+        if (index < this.ActiveApps.length - 1) {
+            this.swapSequences(item, this.ActiveApps[index + 1]);
+            this.ActiveApps = [...this.ActiveApps].sort((a, b) => a.sequence - b.sequence);
         }
     }
     /**
      * Checks if there are any unsaved changes
      */
-    hasChanges() {
-        return this.allApps.some(item => item.isDirty);
+    HasChanges() {
+        return this.AllApps.some(item => item.isDirty);
     }
     /**
      * Saves the user's app configuration
      */
-    async save() {
-        if (!this.hasChanges()) {
-            this.close();
+    async Save() {
+        if (!this.HasChanges()) {
+            this.Close();
             return;
         }
-        this.isSaving = true;
-        this.errorMessage = '';
+        this.IsSaving = true;
+        this.ErrorMessage = '';
         try {
             const md = new Metadata();
-            const rv = new RunView();
-            // Process each app config item
-            for (const item of this.allApps) {
+            for (const item of this.AllApps) {
                 if (!item.isDirty)
                     continue;
                 if (item.userAppId) {
-                    // Update existing UserApplication record
                     await this.updateUserApplication(md, item);
                 }
                 else if (item.isActive) {
-                    // Create new UserApplication record (only if active)
                     await this.createUserApplication(md, item);
                 }
-                // If not active and no existing record, nothing to do
             }
-            // Reload the ApplicationManager to reflect changes
             LogStatus('User app configuration saved, reloading ApplicationManager...');
             await this.appManager.ReloadUserApplications();
             this.sharedService.CreateSimpleNotification('App configuration saved successfully!', 'success', 3000);
-            this.configSaved.emit();
-            this.close();
+            this.ConfigSaved.emit();
+            this.Close();
         }
         catch (error) {
-            this.errorMessage = 'Failed to save configuration. Please try again.';
+            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.IsSaving = false;
                 this.cdr.detectChanges();
             });
         }
     }
     /**
-     * Updates an existing UserApplication record
+     * 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';
+        }
+    }
+    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 {
+            const md = new Metadata();
+            const rv = new RunView();
+            const systemApps = this.appManager.GetAllSystemApps();
+            const userAppsResult = await rv.RunView({
+                EntityName: 'MJ: User Applications',
+                Fields: ['ID', 'ApplicationID', 'Sequence', 'IsActive'],
+                ExtraFilter: `UserID = '${md.CurrentUser.ID}'`,
+                OrderBy: 'Sequence, Application',
+                ResultType: 'simple'
+            });
+            if (!userAppsResult.Success) {
+                throw new Error(userAppsResult.ErrorMessage);
+            }
+            this.AllApps = this.buildAppConfigItems(systemApps, userAppsResult.Results);
+            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 => 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() {
+        this.ActiveApps.forEach((item, index) => {
+            if (item.sequence !== index) {
+                item.sequence = index;
+                item.isDirty = true;
+            }
+        });
+    }
+    swapSequences(a, b) {
+        const tempSeq = a.sequence;
+        a.sequence = b.sequence;
+        b.sequence = tempSeq;
+        a.isDirty = true;
+        b.isDirty = true;
+    }
     async updateUserApplication(md, item) {
         const userApp = await md.GetEntityObject('MJ: User Applications');
         await userApp.Load(item.userAppId);
@@ -571,9 +719,6 @@ export class UserAppConfigComponent {
         item.isDirty = false;
         LogStatus(`Updated UserApplication for ${item.app.Name}: sequence=${item.sequence}, isActive=${item.isActive}`);
     }
-    /**
-     * Creates a new UserApplication record
-     */
     async createUserApplication(md, item) {
         const userApp = await md.GetEntityObject('MJ: User Applications');
         userApp.NewRecord();
@@ -589,28 +734,22 @@ export class UserAppConfigComponent {
         item.isDirty = false;
         LogStatus(`Created UserApplication for ${item.app.Name}: sequence=${item.sequence}`);
     }
-    /**
-     * Resets all changes and reloads the configuration
-     */
-    async reset() {
-        await this.loadConfiguration();
-    }
-    static ɵfac = function UserAppConfigComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserAppConfigComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { showDialog: "showDialog" }, outputs: { showDialogChange: "showDialogChange", configSaved: "configSaved" }, standalone: false, 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"], ["role", "alert", 1, "error-message"], [1, "config-content"], [1, "dialog-footer"], [1, "footer-left"], [1, "mj-btn", "mj-btn-secondary", 3, "disabled"], [1, "footer-right"], [1, "mj-btn", "mj-btn-primary", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 3, "click", "disabled"], ["text", "Loading your app configuration...", "size", "medium"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-exclamation"], [1, "config-description"], [1, "panels-container"], [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"], [1, "empty-state"], [1, "available-app-item"], [1, "panel", "selected-apps-panel"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-circle"], [1, "sortable-list"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-double"], [1, "available-app-item", 3, "dblclick"], [1, "app-icon"], ["aria-hidden", "true"], [1, "app-info"], [1, "app-name"], [1, "app-description"], ["title", "Add to your apps", 1, "mj-btn", "mj-btn-primary", "mj-btn-outline", "mj-btn-sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-hidden", "true", 1, "fa-solid", "fa-inbox"], [1, "hint"], [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"], ["title", "Move up", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["title", "Remove from your apps", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 3, "click"], ["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) {
+    static ɵfac = function UserAppConfigComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserAppConfigComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { ShowDialog: "ShowDialog" }, outputs: { ShowDialogChange: "ShowDialogChange", ConfigSaved: "ConfigSaved" }, standalone: false, 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"], ["role", "alert", 1, "error-message"], [1, "config-content"], [1, "dialog-footer"], [1, "footer-left"], [1, "mj-btn", "mj-btn-secondary", 3, "disabled"], [1, "footer-right"], [1, "mj-btn", "mj-btn-primary", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 3, "click", "disabled"], ["text", "Loading your app configuration...", "size", "medium"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-exclamation"], [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"], [1, "empty-state"], [1, "available-app-item"], [1, "panel", "selected-apps-panel"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-circle"], [1, "sortable-list"], [1, "mobile-view", 3, "touchmove", "touchend", "touchcancel"], [1, "mobile-list"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-double"], [1, "available-app-item", 3, "dblclick"], [1, "app-icon"], ["aria-hidden", "true"], [1, "app-info"], [1, "app-name"], [1, "app-description"], ["title", "Add to your apps", 1, "mj-btn", "mj-btn-primary", "mj-btn-outline", "mj-btn-sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-hidden", "true", 1, "fa-solid", "fa-inbox"], [1, "hint"], [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"], ["title", "Move up", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["title", "Remove from your apps", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 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);
         } if (rf & 2) {
-            i0.ɵɵconditional(ctx.showDialog ? 0 : -1);
-        } }, dependencies: [i3.LoadingComponent], 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.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n  border-bottom: 1px solid var(--mat-sys-error);\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.1rem;\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.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 1.5rem;\n  color: var(--mat-sys-on-surface-variant);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font: var(--mat-sys-body-large);\n}\n\n.empty-state[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n  margin-top: 0.25rem;\n  font: var(--mat-sys-body-medium);\n  opacity: 0.7;\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\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@media (max-width: 600px) {\n  .config-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .panels-container[_ngcontent-%COMP%] {\n    gap: 1rem;\n  }\n\n  .app-item-content[_ngcontent-%COMP%], \n   .available-app-item[_ngcontent-%COMP%] {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .app-icon[_ngcontent-%COMP%] {\n    width: 2.25rem;\n    height: 2.25rem;\n    font-size: 1rem;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 0.75rem;\n  }\n\n  .footer-left[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\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}"] });
+            i0.ɵɵconditional(ctx.ShowDialog ? 0 : -1);
+        } }, dependencies: [i1.LoadingComponent], 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.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n  border-bottom: 1px solid var(--mat-sys-error);\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.1rem;\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.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 1.5rem;\n  color: var(--mat-sys-on-surface-variant);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font: var(--mat-sys-body-large);\n}\n\n.empty-state[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n  margin-top: 0.25rem;\n  font: var(--mat-sys-body-medium);\n  opacity: 0.7;\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.app-actions[_ngcontent-%COMP%]   .mj-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.15s ease;\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  .dialog-footer[_ngcontent-%COMP%]   .mj-btn[_ngcontent-%COMP%] {\n    padding: 0.5rem 0.875rem;\n    font-size: 0.8125rem;\n    min-height: 38px;\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}"] });
 }
 (() => { (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        <div class=\"error-message\" role=\"alert\">\n          <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>\n          <span>{{ errorMessage }}</span>\n        </div>\n      }\n\n      <!-- Main Content -->\n      @if (!isLoading) {\n        <div class=\"config-content\">\n          <p class=\"config-description\">\n            Select which applications appear in your app switcher and arrange them in your preferred order.\n            Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n          </p>\n\n          <div class=\"panels-container\">\n            <!-- Available Apps Panel -->\n            <div class=\"panel available-apps-panel\" [class.collapsed]=\"availablePanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"availablePanelCollapsed = !availablePanelCollapsed\">\n                <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n                <h3>Available Applications</h3>\n                <span class=\"badge\">{{ availableApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"availablePanelCollapsed\"\n                  [class.fa-chevron-up]=\"!availablePanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (availableApps.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n                    <p>All applications added!</p>\n                  </div>\n                }\n\n                @for (item of availableApps; track item.app.ID) {\n                  <div class=\"available-app-item\" (dblclick)=\"addApp(item)\">\n                    <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                      <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                    </div>\n\n                    <div class=\"app-info\">\n                      <span class=\"app-name\">{{ item.app.Name }}</span>\n                      @if (item.app.Description) {\n                        <span class=\"app-description\">{{ item.app.Description }}</span>\n                      }\n                    </div>\n\n                    <button\n                      class=\"mj-btn mj-btn-primary mj-btn-outline mj-btn-sm\"\n                      (click)=\"addApp(item)\"\n                      title=\"Add to your apps\"\n                    >\n                      <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n                      Add\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Selected Apps Panel -->\n            <div class=\"panel selected-apps-panel\" [class.collapsed]=\"selectedPanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"selectedPanelCollapsed = !selectedPanelCollapsed\">\n                <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n                <h3>Your Applications</h3>\n                <span class=\"badge\">{{ activeApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"selectedPanelCollapsed\"\n                  [class.fa-chevron-up]=\"!selectedPanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (activeApps.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\" aria-hidden=\"true\"></i>\n                    <p>No applications selected</p>\n                    <p class=\"hint\">Add apps from the available list</p>\n                  </div>\n                }\n\n                @if (activeApps.length > 0) {\n                  <div\n                    class=\"sortable-list\"\n                    (dragover)=\"onDragOver($event)\"\n                    (drop)=\"onDrop($event)\"\n                  >\n                    @for (item of activeApps; track item.app.ID; let i = $index) {\n                      <div\n                        class=\"app-item\"\n                        [class.dragging]=\"draggedItem === item\"\n                        draggable=\"true\"\n                        (dragstart)=\"onDragStart($event, item, i)\"\n                        (dragend)=\"onDragEnd($event)\"\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                              class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                              [disabled]=\"i === 0\"\n                              (click)=\"moveUp(item); $event.stopPropagation()\"\n                              title=\"Move up\"\n                            >\n                              <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                              [disabled]=\"i === activeApps.length - 1\"\n                              (click)=\"moveDown(item); $event.stopPropagation()\"\n                              title=\"Move down\"\n                            >\n                              <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                              (click)=\"removeApp(item); $event.stopPropagation()\"\n                              title=\"Remove from your apps\"\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        </div>\n      }\n\n      <!-- Footer Actions - Primary on LEFT per MD3 -->\n      <div class=\"dialog-footer\">\n        <div class=\"footer-left\">\n          @if (hasChanges()) {\n            <button\n              class=\"mj-btn mj-btn-secondary\"\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            class=\"mj-btn mj-btn-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            class=\"mj-btn mj-btn-secondary\"\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/* Error message */\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n  border-bottom: 1px solid var(--mat-sys-error);\n}\n\n.error-message i {\n  font-size: 1.1rem;\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/* Empty state */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 1.5rem;\n  color: var(--mat-sys-on-surface-variant);\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font: var(--mat-sys-body-large);\n}\n\n.empty-state .hint {\n  margin-top: 0.25rem;\n  font: var(--mat-sys-body-medium);\n  opacity: 0.7;\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/* 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/* Responsive adjustments */\n@media (max-width: 600px) {\n  .config-content {\n    padding: 1rem;\n  }\n\n  .panels-container {\n    gap: 1rem;\n  }\n\n  .app-item-content,\n  .available-app-item {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .app-icon {\n    width: 2.25rem;\n    height: 2.25rem;\n    font-size: 1rem;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    gap: 0.75rem;\n  }\n\n  .footer-left,\n  .footer-right {\n    width: 100%;\n    justify-content: center;\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"] }]
-    }], () => [{ type: i1.ApplicationManager }, { type: i2.SharedService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { showDialog: [{
+        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        <div class=\"error-message\" role=\"alert\">\n          <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>\n          <span>{{ ErrorMessage }}</span>\n        </div>\n      }\n\n      <!-- Main Content -->\n      @if (!IsLoading) {\n        <div class=\"config-content\">\n          <p class=\"config-description\">\n            Select which applications appear in your app switcher and arrange them in your preferred order.\n            Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n          </p>\n\n          <!-- Desktop: two-panel layout with drag-and-drop -->\n          <div class=\"panels-container desktop-only\">\n            <!-- Available Apps Panel -->\n            <div class=\"panel available-apps-panel\" [class.collapsed]=\"AvailablePanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"AvailablePanelCollapsed = !AvailablePanelCollapsed\">\n                <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n                <h3>Available Applications</h3>\n                <span class=\"badge\">{{ AvailableApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"AvailablePanelCollapsed\"\n                  [class.fa-chevron-up]=\"!AvailablePanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (AvailableApps.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n                    <p>All applications added!</p>\n                  </div>\n                }\n\n                @for (item of AvailableApps; track item.app.ID) {\n                  <div class=\"available-app-item\" (dblclick)=\"AddApp(item)\">\n                    <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                      <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                    </div>\n\n                    <div class=\"app-info\">\n                      <span class=\"app-name\">{{ item.app.Name }}</span>\n                      @if (item.app.Description) {\n                        <span class=\"app-description\">{{ item.app.Description }}</span>\n                      }\n                    </div>\n\n                    <button\n                      class=\"mj-btn mj-btn-primary mj-btn-outline mj-btn-sm\"\n                      (click)=\"AddApp(item)\"\n                      title=\"Add to your apps\"\n                    >\n                      <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n                      Add\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Selected Apps Panel -->\n            <div class=\"panel selected-apps-panel\" [class.collapsed]=\"SelectedPanelCollapsed\">\n              <div class=\"panel-header\" (click)=\"SelectedPanelCollapsed = !SelectedPanelCollapsed\">\n                <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n                <h3>Your Applications</h3>\n                <span class=\"badge\">{{ ActiveApps.length }}</span>\n                <i\n                  class=\"collapse-toggle fa-solid\"\n                  [class.fa-chevron-down]=\"SelectedPanelCollapsed\"\n                  [class.fa-chevron-up]=\"!SelectedPanelCollapsed\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n              <div class=\"panel-content\">\n                @if (ActiveApps.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\" aria-hidden=\"true\"></i>\n                    <p>No applications selected</p>\n                    <p class=\"hint\">Add apps from the available list</p>\n                  </div>\n                }\n\n                @if (ActiveApps.length > 0) {\n                  <div\n                    class=\"sortable-list\"\n                    (dragover)=\"OnDragOver($event)\"\n                    (drop)=\"OnDrop($event)\"\n                  >\n                    @for (item of ActiveApps; track item.app.ID; let i = $index) {\n                      <div\n                        class=\"app-item\"\n                        [class.dragging]=\"DraggedItem === item\"\n                        draggable=\"true\"\n                        (dragstart)=\"OnDragStart($event, item, i)\"\n                        (dragend)=\"OnDragEnd()\"\n                        (dragenter)=\"OnDragEnter($event, i)\"\n                        (dblclick)=\"RemoveApp(item); $event.stopPropagation()\"\n                      >\n                        <div class=\"app-item-content\" [style.border-left-color]=\"item.app.GetColor()\">\n                          <div class=\"drag-handle\">\n                            <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n                          </div>\n\n                          <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                            <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                          </div>\n\n                          <div class=\"app-info\">\n                            <span class=\"app-name\">{{ item.app.Name }}</span>\n                            @if (item.app.Description) {\n                              <span class=\"app-description\">{{ item.app.Description }}</span>\n                            }\n                          </div>\n\n                          <div class=\"app-actions\">\n                            <button\n                              class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                              [disabled]=\"i === 0\"\n                              (click)=\"MoveUp(item); $event.stopPropagation()\"\n                              title=\"Move up\"\n                            >\n                              <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                              [disabled]=\"i === ActiveApps.length - 1\"\n                              (click)=\"MoveDown(item); $event.stopPropagation()\"\n                              title=\"Move down\"\n                            >\n                              <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                            </button>\n                            <button\n                              class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                              (click)=\"RemoveApp(item); $event.stopPropagation()\"\n                              title=\"Remove from your apps\"\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              class=\"mj-btn mj-btn-secondary\"\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            class=\"mj-btn mj-btn-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            class=\"mj-btn mj-btn-secondary\"\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/* Error message */\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n  border-bottom: 1px solid var(--mat-sys-error);\n}\n\n.error-message i {\n  font-size: 1.1rem;\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/* Empty state */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 1.5rem;\n  color: var(--mat-sys-on-surface-variant);\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font: var(--mat-sys-body-large);\n}\n\n.empty-state .hint {\n  margin-top: 0.25rem;\n  font: var(--mat-sys-body-medium);\n  opacity: 0.7;\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.app-actions .mj-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.15s ease;\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  .dialog-footer .mj-btn {\n    padding: 0.5rem 0.875rem;\n    font-size: 0.8125rem;\n    min-height: 38px;\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"] }]
+    }], null, { ShowDialog: [{
             type: Input
-        }], showDialogChange: [{
+        }], ShowDialogChange: [{
             type: Output
-        }], configSaved: [{
+        }], ConfigSaved: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAppConfigComponent, { className: "UserAppConfigComponent", filePath: "src/lib/user-app-config/user-app-config.component.ts", lineNumber: 30 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAppConfigComponent, { className: "UserAppConfigComponent", filePath: "src/lib/user-app-config/user-app-config.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=user-app-config.component.js.map