@memberjunction/ng-explorer-settings 5.49.0 → 5.51.0

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

@@ -0,0 +1,753 @@
+import { Component, Output, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, inject } from '@angular/core';
+import { LogError, LogStatus, LogStatusEx } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { ApplicationManager } from '@memberjunction/ng-base-application';
+import { SharedService } from '@memberjunction/ng-shared';
+import { UUIDsEqual } from '@memberjunction/global';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { moveAndResequence, resequenceItems } from './user-app-config-reorder';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@memberjunction/ng-ui-components";
+const _forTrack0 = ($index, $item) => $item.app.ID;
+function UserAppConfigContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 10);
+    i0.ɵɵelementEnd();
+} }
+function UserAppConfigContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-alert", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.ErrorMessage);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 19);
+} }
+function UserAppConfigContentComponent_Conditional_3_For_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r4.app.Description);
+} }
+function UserAppConfigContentComponent_Conditional_3_For_15_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("dblclick", function UserAppConfigContentComponent_Conditional_3_For_15_Template_div_dblclick_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.AddApp(item_r4)); });
+    i0.ɵɵelementStart(1, "div", 28);
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 30)(4, "span", 31);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, UserAppConfigContentComponent_Conditional_3_For_15_Conditional_6_Template, 2, 1, "span", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 33);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_For_15_Template_button_click_7_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.AddApp(item_r4)); });
+    i0.ɵɵelement(8, "i", 34);
+    i0.ɵɵtext(9, " Add ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("--app-color", item_r4.app.GetColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(item_r4.app.Icon || "fa-solid fa-cube");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r4.app.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.app.Description ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Add " + item_r4.app.Name);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 23);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r8.app.Description);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵlistener("dragstart", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_div_dragstart_0_listener($event) { const ctx_r6 = i0.ɵɵrestoreView(_r6); const item_r8 = ctx_r6.$implicit; const ɵ$index_82_r9 = ctx_r6.$index; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDragStart($event, item_r8, ɵ$index_82_r9)); })("dragend", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDragEnd()); })("dragenter", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_div_dragenter_0_listener($event) { const ɵ$index_82_r9 = i0.ɵɵrestoreView(_r6).$index; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDragEnter($event, ɵ$index_82_r9)); })("dblclick", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_div_dblclick_0_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); ctx_r0.RemoveApp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 38)(2, "div", 39);
+    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 28);
+    i0.ɵɵelement(5, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 30)(7, "span", 31);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 41)(11, "button", 42);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_button_click_11_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); ctx_r0.MoveUp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(12, "i", 43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 44);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_button_click_13_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); ctx_r0.MoveDown(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(14, "i", 45);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "button", 46);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template_button_click_15_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); ctx_r0.RemoveApp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(16, "i", 47);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const item_r8 = ctx.$implicit;
+    const ɵ$index_82_r9 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("dragging", ctx_r0.DraggedItem === item_r8);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("--app-color", item_r8.app.GetColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(item_r8.app.Icon || "fa-solid fa-cube");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r8.app.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r8.app.Description ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_82_r9 === 0);
+    i0.ɵɵattribute("aria-label", "Move " + item_r8.app.Name + " up");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_82_r9 === ctx_r0.ActiveApps.length - 1);
+    i0.ɵɵattribute("aria-label", "Move " + item_r8.app.Name + " down");
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("aria-label", "Remove " + item_r8.app.Name);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵlistener("dragover", function UserAppConfigContentComponent_Conditional_3_Conditional_26_Template_div_dragover_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDragOver($event)); })("drop", function UserAppConfigContentComponent_Conditional_3_Conditional_26_Template_div_drop_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); });
+    i0.ɵɵrepeaterCreate(1, UserAppConfigContentComponent_Conditional_3_Conditional_26_For_2_Template, 17, 13, "div", 36, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.ActiveApps);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 49);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 49);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Conditional_0_Template, 1, 0, "div", 49);
+    i0.ɵɵelementStart(1, "div", 50)(2, "div", 51);
+    i0.ɵɵlistener("touchstart", function UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Template_div_touchstart_2_listener($event) { const ɵ$index_126_r11 = i0.ɵɵrestoreView(_r10).$index; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnTouchDragStart($event, ɵ$index_126_r11)); });
+    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 28);
+    i0.ɵɵelement(5, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 52);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 53);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Template_button_click_8_listener() { const item_r12 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleApp(item_r12)); });
+    i0.ɵɵelement(9, "i", 54);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(10, UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Conditional_10_Template, 1, 0, "div", 49);
+} if (rf & 2) {
+    const item_r12 = ctx.$implicit;
+    const ɵ$index_126_r11 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r0.TouchDragActive && ctx_r0.TouchDropIndex === ɵ$index_126_r11 && ctx_r0.TouchDragIndex > ɵ$index_126_r11 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("touch-ghost", ctx_r0.TouchDragActive && ctx_r0.TouchDragIndex === ɵ$index_126_r11);
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("--app-color", item_r12.app.GetColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(item_r12.app.Icon || "fa-solid fa-cube");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r12.app.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵariaProperty("aria-label", i0.ɵɵinterpolate1("Remove ", item_r12.app.Name));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.TouchDragActive && ctx_r0.TouchDropIndex === ɵ$index_126_r11 && ctx_r0.TouchDragIndex < ɵ$index_126_r11 ? 10 : -1);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 49);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵtext(1, "Your Apps");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, UserAppConfigContentComponent_Conditional_3_Conditional_29_For_3_Template, 11, 11, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(4, UserAppConfigContentComponent_Conditional_3_Conditional_29_Conditional_4_Template, 1, 0, "div", 49);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.ActiveApps);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.TouchDragActive && ctx_r0.TouchDropIndex === ctx_r0.ActiveApps.length - 1 && ctx_r0.TouchDragIndex < ctx_r0.TouchDropIndex ? 4 : -1);
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_30_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 28);
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 52);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 56);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Conditional_30_For_3_Template_button_click_5_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleApp(item_r14)); });
+    i0.ɵɵelement(6, "i", 57);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r14 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("--app-color", item_r14.app.GetColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(item_r14.app.Icon || "fa-solid fa-cube");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r14.app.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵariaProperty("aria-label", i0.ɵɵinterpolate1("Add ", item_r14.app.Name));
+} }
+function UserAppConfigContentComponent_Conditional_3_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵtext(1, "Available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, UserAppConfigContentComponent_Conditional_3_Conditional_30_For_3_Template, 7, 7, "div", 55, _forTrack0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.AvailableApps);
+} }
+function UserAppConfigContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "p", 11);
+    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", 12)(4, "div", 13)(5, "div", 14);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.AvailablePanelCollapsed = !ctx_r0.AvailablePanelCollapsed); });
+    i0.ɵɵelement(6, "i", 15);
+    i0.ɵɵelementStart(7, "h3");
+    i0.ɵɵtext(8, "Available Applications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 16);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 18);
+    i0.ɵɵconditionalCreate(13, UserAppConfigContentComponent_Conditional_3_Conditional_13_Template, 1, 0, "mj-empty-state", 19);
+    i0.ɵɵrepeaterCreate(14, UserAppConfigContentComponent_Conditional_3_For_15_Template, 10, 7, "div", 20, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 21)(17, "div", 14);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_3_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectedPanelCollapsed = !ctx_r0.SelectedPanelCollapsed); });
+    i0.ɵɵelement(18, "i", 22);
+    i0.ɵɵelementStart(19, "h3");
+    i0.ɵɵtext(20, "Your Applications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span", 16);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(23, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 18);
+    i0.ɵɵconditionalCreate(25, UserAppConfigContentComponent_Conditional_3_Conditional_25_Template, 1, 0, "mj-empty-state", 23);
+    i0.ɵɵconditionalCreate(26, UserAppConfigContentComponent_Conditional_3_Conditional_26_Template, 3, 0, "div", 24);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(27, "div", 25);
+    i0.ɵɵlistener("touchmove", function UserAppConfigContentComponent_Conditional_3_Template_div_touchmove_27_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTouchDragMove($event)); })("touchend", function UserAppConfigContentComponent_Conditional_3_Template_div_touchend_27_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTouchDragEnd()); })("touchcancel", function UserAppConfigContentComponent_Conditional_3_Template_div_touchcancel_27_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTouchDragEnd()); });
+    i0.ɵɵelementStart(28, "div", 26);
+    i0.ɵɵconditionalCreate(29, UserAppConfigContentComponent_Conditional_3_Conditional_29_Template, 5, 1);
+    i0.ɵɵconditionalCreate(30, UserAppConfigContentComponent_Conditional_3_Conditional_30_Template, 4, 0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("collapsed", ctx_r0.AvailablePanelCollapsed);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.AvailableApps.length);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.AvailablePanelCollapsed)("fa-chevron-up", !ctx_r0.AvailablePanelCollapsed);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.AvailableApps.length === 0 ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.AvailableApps);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("collapsed", ctx_r0.SelectedPanelCollapsed);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.ActiveApps.length);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.SelectedPanelCollapsed)("fa-chevron-up", !ctx_r0.SelectedPanelCollapsed);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ActiveApps.length === 0 ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ActiveApps.length > 0 ? 26 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.ActiveApps.length > 0 ? 29 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.AvailableApps.length > 0 ? 30 : -1);
+} }
+function UserAppConfigContentComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function UserAppConfigContentComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Reset()); });
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵtext(2, " Reset Changes ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r0.IsLoading || ctx_r0.IsSaving);
+} }
+function UserAppConfigContentComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 59);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Saving...");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("showText", false);
+} }
+function UserAppConfigContentComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Save Changes");
+    i0.ɵɵelementEnd();
+} }
+/**
+ * Chrome-free app-configuration content: select which applications appear in
+ * the app switcher and arrange their order. Owns all list/reorder/persistence
+ * logic (including its own Reset / Save / Cancel footer) but NO overlay —
+ * hosts embed it wherever it should live:
+ *  - `UserAppConfigComponent` wraps it in the full-screen modal (Home dashboard)
+ *  - the shell's app launcher embeds it as an in-panel view swap
+ *
+ * Loads on init (hosts create it fresh under an `@if`), saves in a batch on
+ * the Save button, and signals the host via `Saved` / `Cancelled` — the host
+ * decides what "done" means (close the dialog, swap the view back, etc.).
+ */
+export class UserAppConfigContentComponent extends BaseAngularComponent {
+    appManager = inject(ApplicationManager);
+    sharedService = inject(SharedService);
+    cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
+    el = inject(ElementRef);
+    /** Emitted once after a successful batch save */
+    Saved = new EventEmitter();
+    /** Emitted when the user cancels (or saves with nothing to save) */
+    Cancelled = new EventEmitter();
+    /** Every system app the user is authorized for, joined with their per-user config */
+    AllApps = [];
+    /** Apps the user has enabled, in their configured Sequence order */
+    ActiveApps = [];
+    /** Apps not yet enabled, alphabetical */
+    AvailableApps = [];
+    /** True while the initial configuration load is in flight */
+    IsLoading = false;
+    /** True while the batch save is in flight (disables the footer buttons) */
+    IsSaving = false;
+    /** User-facing load/save failure message; empty when healthy */
+    ErrorMessage = '';
+    /** Collapse state for the Available-apps panel (mobile accordion) */
+    AvailablePanelCollapsed = false;
+    /** Collapse state for the Selected-apps panel (mobile accordion) */
+    SelectedPanelCollapsed = false;
+    /** Item currently being dragged for reorder, null when idle */
+    DraggedItem = null;
+    /** Source index of the in-flight drag within ActiveApps */
+    DraggedIndex = -1;
+    /** Index the drag is currently hovering (drop indicator position) */
+    DropTargetIndex = -1;
+    async ngOnInit() {
+        await this.loadConfiguration();
+    }
+    /**
+     * Adds an app to the user's active list
+     */
+    AddApp(item) {
+        item.isActive = true;
+        item.sequence = this.ActiveApps.length;
+        item.isDirty = true;
+        this.refreshAppLists();
+    }
+    /**
+     * Removes an app from the user's active list
+     */
+    RemoveApp(item) {
+        item.isActive = false;
+        item.sequence = 999;
+        item.isDirty = true;
+        this.refreshAppLists();
+        this.resequenceActiveApps();
+    }
+    /**
+     * Toggles an app between active and inactive
+     */
+    ToggleApp(item) {
+        if (item.isActive) {
+            this.RemoveApp(item);
+        }
+        else {
+            this.AddApp(item);
+        }
+    }
+    /**
+     * Moves an app up in the order. Positional (splice + renumber), NOT a sequence-value
+     * swap: rows can carry duplicate Sequence values (issue #3027 — e.g. a re-enabled app
+     * kept a stale value), and swapping two equal values is a silent no-op. Reordering by
+     * position then renumbering 0..n-1 always works and heals duplicates as a side effect.
+     */
+    MoveUp(item) {
+        const index = this.ActiveApps.indexOf(item);
+        if (index > 0) {
+            this.moveActiveApp(index, index - 1);
+        }
+    }
+    /**
+     * Moves an app down in the order. Positional — see {@link MoveUp} for why.
+     */
+    MoveDown(item) {
+        const index = this.ActiveApps.indexOf(item);
+        if (index >= 0 && index < this.ActiveApps.length - 1) {
+            this.moveActiveApp(index, index + 1);
+        }
+    }
+    moveActiveApp(fromIndex, toIndex) {
+        this.ActiveApps = moveAndResequence(this.ActiveApps, fromIndex, toIndex);
+    }
+    /**
+     * Checks if there are any unsaved changes
+     */
+    HasChanges() {
+        return this.AllApps.some(item => item.isDirty);
+    }
+    /** Cancel button — host decides what dismissal means */
+    Cancel() {
+        this.Cancelled.emit();
+    }
+    /**
+     * Saves the user's app configuration
+     */
+    async Save() {
+        if (!this.HasChanges()) {
+            this.Cancelled.emit();
+            return;
+        }
+        this.IsSaving = true;
+        this.ErrorMessage = '';
+        try {
+            // Self-heal: renumber active apps 0..n-1 before persisting. Existing rows can
+            // carry duplicate Sequence values from older data (issue #3027); renumbering in
+            // display order marks any corrected rows dirty so this save fixes them for good.
+            this.resequenceActiveApps();
+            const md = this.ProviderToUse;
+            for (const item of this.AllApps) {
+                if (!item.isDirty)
+                    continue;
+                if (item.userAppId) {
+                    await this.updateUserApplication(md, item);
+                }
+                else if (item.isActive) {
+                    await this.createUserApplication(md, item);
+                }
+            }
+            // Each userApp.Save() above fires a BaseEntity 'save' event, which UserInfoEngine
+            // catches via HandleIndividualBaseEntityEvent → debounced refresh → NotifyDataChange.
+            // ApplicationManager.subscribeToEngineChanges then propagates to the shell app
+            // switcher. No explicit reload needed here — and avoiding it sidesteps NG0100
+            // from observable emissions interleaving with this method's save loop.
+            LogStatusEx({
+                message: 'User app configuration saved',
+                verboseOnly: true
+            });
+            this.sharedService.CreateSimpleNotification('App configuration saved successfully!', 'success', 3000);
+            this.Saved.emit();
+            // Backstop for a dropped/coalesced debounced engine event: force a reconcile from the source
+            // of truth so the app switcher can't be left "one save behind". DEFERRED past the current CD
+            // cycle — a synchronous reload here previously triggered NG0100 (commits e2059e6114 /
+            // 7bf8be7dc6). No-op cost when the event chain already delivered. (Ported from bug F1's fix
+            // to the pre-split monolith, PR #3289.)
+            Promise.resolve().then(() => this.appManager.ReloadUserApplications());
+        }
+        catch (error) {
+            this.ErrorMessage = 'Failed to save configuration. Please try again.';
+            LogError('Error saving app configuration:', undefined, error instanceof Error ? error.message : String(error));
+            // A partial-save failure can leave in-memory state half-committed (some items saved+clean,
+            // others still dirty) and divergent from the DB. Reconcile from the source of truth so
+            // recovery doesn't require a browser refresh — deferred, for the same NG0100 reason.
+            Promise.resolve().then(() => this.appManager.ReloadUserApplications());
+        }
+        finally {
+            this.ngZone.run(() => {
+                this.IsSaving = false;
+                this.cdr.detectChanges();
+            });
+        }
+    }
+    /**
+     * Resets all changes and reloads the configuration
+     */
+    async Reset() {
+        await this.loadConfiguration();
+    }
+    // ---------------------------------------------------------------------------
+    //  Drag-and-drop handlers (desktop only)
+    // ---------------------------------------------------------------------------
+    /** Begin an HTML5 drag of an active-app row */
+    OnDragStart(event, item, index) {
+        this.DraggedItem = item;
+        this.DraggedIndex = index;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', index.toString());
+        }
+    }
+    /** Allow dropping while a row drag passes over the list */
+    OnDragOver(event) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+    }
+    /** Track the row index the drag is hovering (drop indicator) */
+    OnDragEnter(event, index) {
+        event.preventDefault();
+        this.DropTargetIndex = index;
+    }
+    /** Clear all drag state (fires on drop or drag cancel) */
+    OnDragEnd() {
+        this.DraggedItem = null;
+        this.DraggedIndex = -1;
+        this.DropTargetIndex = -1;
+    }
+    /** Reorder ActiveApps to the hovered position and renumber sequences */
+    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)
+    // ---------------------------------------------------------------------------
+    /** Source index of the in-flight touch drag (-1 when idle) */
+    TouchDragIndex = -1;
+    /** Row index the touch drag would drop at */
+    TouchDropIndex = -1;
+    /** True while a touch drag is in progress */
+    TouchDragActive = false;
+    touchStartY = 0;
+    touchCurrentY = 0;
+    touchRowHeight = 0;
+    touchDragElement = null;
+    touchScrollContainer = null;
+    /** Begin a touch drag of a mobile app row (long-press handle) */
+    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');
+    }
+    /** Follow the finger: translate the row, track drop target, auto-scroll near edges */
+    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();
+    }
+    /** Commit the touch reorder (if moved) and reset touch-drag state */
+    OnTouchDragEnd() {
+        if (!this.TouchDragActive)
+            return;
+        if (this.touchDragElement) {
+            this.touchDragElement.style.transform = '';
+            this.touchDragElement.style.zIndex = '';
+            this.touchDragElement.classList.remove('touch-dragging');
+        }
+        if (this.TouchDragIndex >= 0 && this.TouchDropIndex >= 0 && this.TouchDragIndex !== this.TouchDropIndex) {
+            const [movedItem] = this.ActiveApps.splice(this.TouchDragIndex, 1);
+            this.ActiveApps.splice(this.TouchDropIndex, 0, movedItem);
+            this.resequenceActiveApps();
+        }
+        this.resetTouchDragState();
+        this.cdr.detectChanges();
+    }
+    updateTouchDropTarget(deltaY) {
+        const rowsToMove = Math.round(deltaY / this.touchRowHeight);
+        const newIndex = Math.max(0, Math.min(this.ActiveApps.length - 1, this.TouchDragIndex + rowsToMove));
+        this.TouchDropIndex = newIndex;
+    }
+    autoScrollIfNeeded() {
+        if (!this.touchScrollContainer)
+            return;
+        const rect = this.touchScrollContainer.getBoundingClientRect();
+        const edgeZone = 40;
+        if (this.touchCurrentY < rect.top + edgeZone) {
+            this.touchScrollContainer.scrollTop -= 8;
+        }
+        else if (this.touchCurrentY > rect.bottom - edgeZone) {
+            this.touchScrollContainer.scrollTop += 8;
+        }
+    }
+    resetTouchDragState() {
+        this.TouchDragIndex = -1;
+        this.TouchDropIndex = -1;
+        this.TouchDragActive = false;
+        this.touchDragElement = null;
+        this.touchScrollContainer = null;
+    }
+    // ---------------------------------------------------------------------------
+    //  Private helpers
+    // ---------------------------------------------------------------------------
+    async loadConfiguration() {
+        this.IsLoading = true;
+        this.ErrorMessage = '';
+        try {
+            // Read directly from UserInfoEngine's cache. The engine already loaded
+            // and maintains MJ: User Applications via its event-driven refresh — no
+            // need to re-query the DB on every open. EnsureLoaded is idempotent
+            // and instant when the engine is already loaded (the typical case here,
+            // since UserInfoEngine fires at startup).
+            const provider = this.ProviderToUse;
+            const engine = provider
+                ? UserInfoEngine.GetProviderInstance(provider, UserInfoEngine)
+                : UserInfoEngine.Instance;
+            await engine.EnsureLoaded();
+            const systemApps = this.appManager.GetAuthorizedSystemApps();
+            const userApps = engine.UserApplications;
+            this.AllApps = this.buildAppConfigItems(systemApps, userApps);
+            this.refreshAppLists();
+        }
+        catch (error) {
+            this.ErrorMessage = 'Failed to load app configuration. Please try again.';
+            LogError('Error loading app configuration:', undefined, error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            this.ngZone.run(() => {
+                this.IsLoading = false;
+                this.cdr.detectChanges();
+            });
+        }
+    }
+    buildAppConfigItems(systemApps, userApps) {
+        return systemApps.map(app => {
+            const userApp = userApps.find(ua => UUIDsEqual(ua.ApplicationID, app.ID));
+            return {
+                app,
+                userAppId: userApp?.ID ?? null,
+                sequence: userApp?.Sequence ?? 999,
+                isActive: userApp?.IsActive ?? false,
+                isDirty: false
+            };
+        });
+    }
+    refreshAppLists() {
+        this.ActiveApps = this.AllApps
+            .filter(item => item.isActive)
+            .sort((a, b) => a.sequence - b.sequence);
+        this.AvailableApps = this.AllApps
+            .filter(item => !item.isActive)
+            .sort((a, b) => a.app.Name.localeCompare(b.app.Name));
+    }
+    resequenceActiveApps() {
+        resequenceItems(this.ActiveApps);
+    }
+    async updateUserApplication(md, item) {
+        const userApp = await md.GetEntityObject('MJ: User Applications', md.CurrentUser);
+        await userApp.Load(item.userAppId);
+        userApp.Sequence = item.sequence;
+        userApp.IsActive = item.isActive;
+        const saved = await userApp.Save();
+        if (!saved) {
+            throw new Error(`Failed to update UserApplication for ${item.app.Name}: ${userApp.LatestResult?.CompleteMessage ?? 'unknown error'}`);
+        }
+        item.isDirty = false;
+        LogStatus(`Updated UserApplication for ${item.app.Name}: sequence=${item.sequence}, isActive=${item.isActive}`);
+    }
+    async createUserApplication(md, item) {
+        const userApp = await md.GetEntityObject('MJ: User Applications', md.CurrentUser);
+        userApp.NewRecord();
+        userApp.UserID = md.CurrentUser.ID;
+        userApp.ApplicationID = item.app.ID;
+        userApp.Sequence = item.sequence;
+        userApp.IsActive = item.isActive;
+        const saved = await userApp.Save();
+        if (!saved) {
+            throw new Error(`Failed to create UserApplication for ${item.app.Name}: ${userApp.LatestResult?.CompleteMessage ?? 'unknown error'}`);
+        }
+        item.userAppId = userApp.ID;
+        item.isDirty = false;
+        LogStatus(`Created UserApplication for ${item.app.Name}: sequence=${item.sequence}`);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵUserAppConfigContentComponent_BaseFactory; return function UserAppConfigContentComponent_Factory(__ngFactoryType__) { return (ɵUserAppConfigContentComponent_BaseFactory || (ɵUserAppConfigContentComponent_BaseFactory = i0.ɵɵgetInheritedFactory(UserAppConfigContentComponent)))(__ngFactoryType__ || UserAppConfigContentComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigContentComponent, selectors: [["mj-user-app-config-content"]], outputs: { Saved: "Saved", Cancelled: "Cancelled" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 7, consts: [[1, "app-config-container"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["Variant", "error"], [1, "config-content"], [1, "dialog-footer"], [1, "footer-left"], ["mjButton", "", 3, "disabled"], [1, "footer-right"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["text", "Loading your app configuration...", "size", "medium"], [1, "config-description"], [1, "panels-container", "desktop-only"], [1, "panel", "available-apps-panel"], [1, "panel-header", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], [1, "badge"], ["aria-hidden", "true", 1, "collapse-toggle", "fa-solid"], [1, "panel-content"], ["Size", "compact", "Icon", "fa-solid fa-check-double", "Title", "All applications added!"], [1, "available-app-item"], [1, "panel", "selected-apps-panel"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-circle"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No applications selected", "Message", "Add apps from the available list"], [1, "sortable-list"], [1, "mobile-view", 3, "touchmove", "touchend", "touchcancel"], [1, "mobile-list"], [1, "available-app-item", 3, "dblclick"], [1, "app-icon"], ["aria-hidden", "true"], [1, "app-info"], [1, "app-name"], [1, "app-description"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Add to your apps", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], [1, "sortable-list", 3, "dragover", "drop"], ["draggable", "true", 1, "app-item", 3, "dragging"], ["draggable", "true", 1, "app-item", 3, "dragstart", "dragend", "dragenter", "dblclick"], [1, "app-item-content"], [1, "drag-handle"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip-vertical"], [1, "app-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move up", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Move down", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove from your apps", 1, "remove-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [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 UserAppConfigContentComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, UserAppConfigContentComponent_Conditional_1_Template, 2, 0, "div", 1);
+            i0.ɵɵconditionalCreate(2, UserAppConfigContentComponent_Conditional_2_Template, 2, 1, "mj-alert", 2);
+            i0.ɵɵconditionalCreate(3, UserAppConfigContentComponent_Conditional_3_Template, 31, 19, "div", 3);
+            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5);
+            i0.ɵɵconditionalCreate(6, UserAppConfigContentComponent_Conditional_6_Template, 3, 1, "button", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "div", 7)(8, "button", 8);
+            i0.ɵɵlistener("click", function UserAppConfigContentComponent_Template_button_click_8_listener() { return ctx.Save(); });
+            i0.ɵɵconditionalCreate(9, UserAppConfigContentComponent_Conditional_9_Template, 3, 1)(10, UserAppConfigContentComponent_Conditional_10_Template, 3, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 9);
+            i0.ɵɵlistener("click", function UserAppConfigContentComponent_Template_button_click_11_listener() { return ctx.Cancel(); });
+            i0.ɵɵtext(12, " Cancel ");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ErrorMessage ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading ? 3 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.HasChanges() ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.IsLoading || ctx.IsSaving || !ctx.HasChanges());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsSaving ? 9 : 10);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+        } }, dependencies: [i1.LoadingComponent, i2.MJButtonDirective, i2.MJEmptyStateComponent, i2.MJAlertComponent], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n\n\n.app-config-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n\n\n\n.config-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  padding: 1.5rem;\n  overflow: hidden;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0 0 1.5rem 0;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  line-height: 1.5;\n}\n\n\n\n.panels-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    overflow-y: auto;\n  }\n\n  \n\n  .panel-header[_ngcontent-%COMP%]   .collapse-toggle[_ngcontent-%COMP%] {\n    display: inline-block !important;\n    color: var(--mat-sys-on-surface-variant) !important;\n  }\n\n  \n\n  .panel-header[_ngcontent-%COMP%] {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .panel-header[_ngcontent-%COMP%]:hover {\n    background: var(--mat-sys-surface-container);\n  }\n\n  \n\n  .panel.collapsed[_ngcontent-%COMP%] {\n    flex: 0 0 auto !important;\n  }\n\n  .panel.collapsed[_ngcontent-%COMP%]   .panel-content[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .panel.collapsed[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n    border-bottom: none;\n  }\n\n  \n\n  .panel[_ngcontent-%COMP%]:not(.collapsed) {\n    flex: 1 1 auto;\n    min-height: 150px;\n  }\n}\n\n\n\n.panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-medium);\n  overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 1rem 1.25rem;\n  background: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 1.1rem;\n  color: var(--mat-sys-primary);\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font: var(--mat-sys-title-medium);\n  color: var(--mat-sys-on-surface);\n  flex: 1;\n}\n\n.panel-header[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n  padding: 0.125rem 0.625rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-medium);\n  font-weight: 500;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%]   .collapse-toggle[_ngcontent-%COMP%] {\n  display: none;\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 0.9rem;\n  margin-left: 0.5rem;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n\n\n\n\n.sortable-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n\n\n.app-item[_ngcontent-%COMP%] {\n  cursor: grab;\n  transition: transform 0.2s, opacity 0.2s;\n}\n\n.app-item[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.app-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  transform: scale(0.98);\n}\n\n\n\n\n\n\n.app-item-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  \n\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast);\n  position: relative; \n\n}\n\n.app-item-content[_ngcontent-%COMP%]:hover, \n.app-item-content[_ngcontent-%COMP%]:focus-within {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\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\n\n\n.app-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--app-color, var(--mj-text-muted));\n  background: color-mix(in srgb, var(--app-color, var(--mj-text-muted)) 14%, var(--mj-bg-surface-card));\n  font-size: var(--mj-text-lg);\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-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n  flex-shrink: 0;\n  position: absolute;\n  right: var(--mj-space-2);\n  top: 50%;\n  transform: translateY(-50%);\n  padding-left: var(--mj-space-6);\n  \n\n\n  background: linear-gradient(to right, transparent, var(--mj-bg-surface-hover) 1.25rem);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--mj-transition-fast);\n}\n\n.app-item-content[_ngcontent-%COMP%]:hover   .app-actions[_ngcontent-%COMP%], \n.app-item-content[_ngcontent-%COMP%]:focus-within   .app-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\n\n\n\n\n@media (hover: none) {\n  .app-actions[_ngcontent-%COMP%] {\n    position: static;\n    transform: none;\n    padding-left: 0;\n    background: none;\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  width: 1.75rem;\n  height: 1.75rem;\n  min-width: 0;\n  padding: 0;\n  font-size: 0.8rem;\n  justify-content: center;\n}\n\n\n\n\n.app-actions[_ngcontent-%COMP%]    > .remove-btn[_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: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  margin-bottom: var(--mj-space-2);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast);\n}\n\n.available-app-item[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\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  flex-shrink: 0;\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: 768px) {\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  .config-content[_ngcontent-%COMP%] {\n    padding: 0;\n  }\n\n  \n\n  .dialog-footer[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n    gap: 0.5rem;\n  }\n\n  .footer-left[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  .app-item[_ngcontent-%COMP%], \n   .app-item-content[_ngcontent-%COMP%], \n   .available-app-item[_ngcontent-%COMP%], \n   .app-actions[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserAppConfigContentComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-user-app-config-content', template: "<div class=\"app-config-container\">\n  <!-- Loading State -->\n  @if (IsLoading) {\n    <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n      <mj-loading text=\"Loading your app configuration...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error Message -->\n  @if (ErrorMessage) {\n    <mj-alert Variant=\"error\">{{ ErrorMessage }}</mj-alert>\n  }\n\n  <!-- Main Content -->\n  @if (!IsLoading) {\n    <div class=\"config-content\">\n      <p class=\"config-description\">\n        Select which applications appear in your app switcher and arrange them in your preferred order.\n        Double-click to quickly add or remove. Drag and drop to reorder, or use the arrow buttons.\n      </p>\n\n      <!-- Desktop: two-panel layout with drag-and-drop -->\n      <div class=\"panels-container desktop-only\">\n        <!-- Available Apps Panel -->\n        <div class=\"panel available-apps-panel\" [class.collapsed]=\"AvailablePanelCollapsed\">\n          <div class=\"panel-header\" (click)=\"AvailablePanelCollapsed = !AvailablePanelCollapsed\">\n            <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i>\n            <h3>Available Applications</h3>\n            <span class=\"badge\">{{ AvailableApps.length }}</span>\n            <i\n              class=\"collapse-toggle fa-solid\"\n              [class.fa-chevron-down]=\"AvailablePanelCollapsed\"\n              [class.fa-chevron-up]=\"!AvailablePanelCollapsed\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"panel-content\">\n            @if (AvailableApps.length === 0) {\n              <mj-empty-state\n                Size=\"compact\"\n                Icon=\"fa-solid fa-check-double\"\n                Title=\"All applications added!\" />\n            }\n\n            @for (item of AvailableApps; track item.app.ID) {\n              <div class=\"available-app-item\" (dblclick)=\"AddApp(item)\">\n                <div class=\"app-icon\" [style.--app-color]=\"item.app.GetColor()\">\n                  <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                </div>\n\n                <div class=\"app-info\">\n                  <span class=\"app-name\">{{ item.app.Name }}</span>\n                  @if (item.app.Description) {\n                    <span class=\"app-description\">{{ item.app.Description }}</span>\n                  }\n                </div>\n\n                <button\n                  mjButton variant=\"outline\" size=\"sm\"\n                  (click)=\"AddApp(item)\"\n                  title=\"Add to your apps\"\n                  [attr.aria-label]=\"'Add ' + item.app.Name\"\n                >\n                  <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n                  Add\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Selected Apps Panel -->\n        <div class=\"panel selected-apps-panel\" [class.collapsed]=\"SelectedPanelCollapsed\">\n          <div class=\"panel-header\" (click)=\"SelectedPanelCollapsed = !SelectedPanelCollapsed\">\n            <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n            <h3>Your Applications</h3>\n            <span class=\"badge\">{{ ActiveApps.length }}</span>\n            <i\n              class=\"collapse-toggle fa-solid\"\n              [class.fa-chevron-down]=\"SelectedPanelCollapsed\"\n              [class.fa-chevron-up]=\"!SelectedPanelCollapsed\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"panel-content\">\n            @if (ActiveApps.length === 0) {\n              <mj-empty-state\n                Size=\"compact\"\n                Icon=\"fa-solid fa-inbox\"\n                Title=\"No applications selected\"\n                Message=\"Add apps from the available list\" />\n            }\n\n            @if (ActiveApps.length > 0) {\n              <div\n                class=\"sortable-list\"\n                (dragover)=\"OnDragOver($event)\"\n                (drop)=\"OnDrop($event)\"\n              >\n                @for (item of ActiveApps; track item.app.ID; let i = $index) {\n                  <div\n                    class=\"app-item\"\n                    [class.dragging]=\"DraggedItem === item\"\n                    draggable=\"true\"\n                    (dragstart)=\"OnDragStart($event, item, i)\"\n                    (dragend)=\"OnDragEnd()\"\n                    (dragenter)=\"OnDragEnter($event, i)\"\n                    (dblclick)=\"RemoveApp(item); $event.stopPropagation()\"\n                  >\n                    <div class=\"app-item-content\">\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.--app-color]=\"item.app.GetColor()\">\n                        <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                      </div>\n\n                      <div class=\"app-info\">\n                        <span class=\"app-name\">{{ item.app.Name }}</span>\n                        @if (item.app.Description) {\n                          <span class=\"app-description\">{{ item.app.Description }}</span>\n                        }\n                      </div>\n\n                      <div class=\"app-actions\">\n                        <button\n                          mjButton variant=\"flat\" size=\"sm\"\n                          [disabled]=\"i === 0\"\n                          (click)=\"MoveUp(item); $event.stopPropagation()\"\n                          title=\"Move up\"\n                          [attr.aria-label]=\"'Move ' + item.app.Name + ' up'\"\n                        >\n                          <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button\n                          mjButton variant=\"flat\" size=\"sm\"\n                          [disabled]=\"i === ActiveApps.length - 1\"\n                          (click)=\"MoveDown(item); $event.stopPropagation()\"\n                          title=\"Move down\"\n                          [attr.aria-label]=\"'Move ' + item.app.Name + ' down'\"\n                        >\n                          <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button\n                          mjButton variant=\"flat\" size=\"sm\"\n                          class=\"remove-btn\"\n                          (click)=\"RemoveApp(item); $event.stopPropagation()\"\n                          title=\"Remove from your apps\"\n                          [attr.aria-label]=\"'Remove ' + item.app.Name\"\n                        >\n                          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile: single list with toggles + touch drag reorder -->\n      <div\n        class=\"mobile-view\"\n        (touchmove)=\"OnTouchDragMove($event)\"\n        (touchend)=\"OnTouchDragEnd()\"\n        (touchcancel)=\"OnTouchDragEnd()\"\n      >\n        <div class=\"mobile-list\">\n          @if (ActiveApps.length > 0) {\n            <div class=\"mobile-section-label\">Your Apps</div>\n            @for (item of ActiveApps; track item.app.ID; let i = $index) {\n              @if (TouchDragActive && TouchDropIndex === i && TouchDragIndex > i) {\n                <div class=\"mobile-drop-indicator\"></div>\n              }\n              <div\n                class=\"mobile-app-row\"\n                [class.touch-ghost]=\"TouchDragActive && TouchDragIndex === i\"\n              >\n                <div\n                  class=\"mobile-drag-handle\"\n                  (touchstart)=\"OnTouchDragStart($event, i)\"\n                  aria-label=\"Drag to reorder\"\n                >\n                  <i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"app-icon\" [style.--app-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.--app-color]=\"item.app.GetColor()\">\n                  <i [class]=\"item.app.Icon || 'fa-solid fa-cube'\" aria-hidden=\"true\"></i>\n                </div>\n                <span class=\"mobile-app-name\">{{ item.app.Name }}</span>\n                <button\n                  class=\"mobile-toggle off\"\n                  (click)=\"ToggleApp(item)\"\n                  aria-label=\"Add {{ item.app.Name }}\"\n                >\n                  <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Footer Actions -->\n  <div class=\"dialog-footer\">\n    <div class=\"footer-left\">\n      @if (HasChanges()) {\n        <button\n          mjButton\n          (click)=\"Reset()\"\n          [disabled]=\"IsLoading || IsSaving\"\n        >\n          <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n          Reset Changes\n        </button>\n      }\n    </div>\n    <div class=\"footer-right\">\n      <button\n        mjButton variant=\"primary\"\n        (click)=\"Save()\"\n        [disabled]=\"IsLoading || IsSaving || !HasChanges()\"\n      >\n        @if (IsSaving) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n          <span>Saving...</span>\n        } @else {\n          <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n          <span>Save Changes</span>\n        }\n      </button>\n      <button\n        mjButton\n        (click)=\"Cancel()\"\n        [disabled]=\"IsSaving\"\n      >\n        Cancel\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["/* ============================================\n   User App Config Content (chrome-free)\n   Hosted by the full-screen dialog wrapper AND\n   the shell app launcher's in-panel config view.\n   ============================================ */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/* Main container */\n.app-config-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n/* Loading state */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n\n/* Config content */\n.config-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  padding: 1.5rem;\n  overflow: hidden;\n}\n\n.config-description {\n  margin: 0 0 1.5rem 0;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  line-height: 1.5;\n}\n\n/* Panels container */\n.panels-container {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    overflow-y: auto;\n  }\n\n  /* Show collapse toggle on mobile */\n  .panel-header .collapse-toggle {\n    display: inline-block !important;\n    color: var(--mat-sys-on-surface-variant) !important;\n  }\n\n  /* Make header clickable on mobile */\n  .panel-header {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .panel-header:hover {\n    background: var(--mat-sys-surface-container);\n  }\n\n  /* Collapsed panel - just show header */\n  .panel.collapsed {\n    flex: 0 0 auto !important;\n  }\n\n  .panel.collapsed .panel-content {\n    display: none !important;\n  }\n\n  .panel.collapsed .panel-header {\n    border-bottom: none;\n  }\n\n  /* Non-collapsed panel takes available space */\n  .panel:not(.collapsed) {\n    flex: 1 1 auto;\n    min-height: 150px;\n  }\n}\n\n/* Panel styles */\n.panel {\n  display: flex;\n  flex-direction: column;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-medium);\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 1rem 1.25rem;\n  background: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header i:first-child {\n  font-size: 1.1rem;\n  color: var(--mat-sys-primary);\n}\n\n.panel-header h3 {\n  margin: 0;\n  font: var(--mat-sys-title-medium);\n  color: var(--mat-sys-on-surface);\n  flex: 1;\n}\n\n.panel-header .badge {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n  padding: 0.125rem 0.625rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-medium);\n  font-weight: 500;\n}\n\n/* Collapse toggle - hidden by default, shown on mobile */\n.panel-header .collapse-toggle {\n  display: none;\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 0.9rem;\n  margin-left: 0.5rem;\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n\n\n/* Sortable list container */\n.sortable-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* App items */\n.app-item {\n  cursor: grab;\n  transition: transform 0.2s, opacity 0.2s;\n}\n\n.app-item:active {\n  cursor: grabbing;\n}\n\n.app-item.dragging {\n  opacity: 0.5;\n  transform: scale(0.98);\n}\n\n/* Rows share the launcher's app-card language: surface bg, default border,\n   radius-lg, brand-tinted border + surface-hover on hover. Identity lives in\n   the tinted glyph (no left color bar). No hover lift here \u2014 these rows are\n   drag-reorder targets and a transform would fight the drag affordance. */\n.app-item-content {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  /* surface-card so the rows keep card depth on white panels in light mode */\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast);\n  position: relative; /* Anchor for the hover-reveal action cluster */\n}\n\n.app-item-content:hover,\n.app-item-content:focus-within {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\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/* Identity glyph \u2014 the launcher card treatment: color-tinted tile with the\n   app-colored icon, driven by --app-color from the template. */\n.app-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--app-color, var(--mj-text-muted));\n  background: color-mix(in srgb, var(--app-color, var(--mj-text-muted)) 14%, var(--mj-bg-surface-card));\n  font-size: var(--mj-text-lg);\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-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description {\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Hover-reveal actions: out of the flex flow (absolute over the row's right\n   edge) so the title/description get the full row width; revealed on row\n   hover or keyboard focus within the row. The left gradient fades the\n   underlying text out beneath the cluster for legibility. */\n.app-actions {\n  display: flex;\n  gap: 0.25rem;\n  flex-shrink: 0;\n  position: absolute;\n  right: var(--mj-space-2);\n  top: 50%;\n  transform: translateY(-50%);\n  padding-left: var(--mj-space-6);\n  /* Fades to the row's HOVER background \u2014 the cluster is only ever visible\n     while the row is hovered/focused, when that bg is active. */\n  background: linear-gradient(to right, transparent, var(--mj-bg-surface-hover) 1.25rem);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--mj-transition-fast);\n}\n\n.app-item-content:hover .app-actions,\n.app-item-content:focus-within .app-actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Touch devices have no hover: keep the actions permanently visible and in\n   the normal flex flow (the hover-reveal overlay would be unreachable, and\n   HTML5 drag reorder doesn't work on touch \u2014 buttons are the only reorder\n   path there). */\n@media (hover: none) {\n  .app-actions {\n    position: static;\n    transform: none;\n    padding-left: 0;\n    background: none;\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n\n/* Compact icon-square sizing for the row actions. Wrapper-scoped element\n   selector per the mjButton rule (never override .mj-btn classes; the old\n   single-dash .mj-btn-ghost/-sm/-danger selectors here matched nothing the\n   directive emits and were dead). */\n.app-actions > button {\n  width: 1.75rem;\n  height: 1.75rem;\n  min-width: 0;\n  padding: 0;\n  font-size: 0.8rem;\n  justify-content: center;\n}\n\n/* Remove is a quiet flat button that turns danger-tinted on hover \u2014 a solid\n   red button appearing on every row hover is too loud for a tertiary action */\n.app-actions > .remove-btn:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n/* Available app items \u2014 same card language as the selected rows */\n.available-app-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-3-5);\n  margin-bottom: var(--mj-space-2);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  transition: border-color var(--mj-transition-fast), background var(--mj-transition-fast);\n}\n\n.available-app-item:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  background: var(--mj-bg-surface-hover);\n}\n\n.available-app-item .app-info {\n  flex: 1;\n}\n\n/* Footer actions */\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  flex-shrink: 0;\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: 768px) {\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  /* Content compact */\n  .config-content {\n    padding: 0;\n  }\n\n  /* Footer compact */\n  .dialog-footer {\n    padding: 0.75rem;\n    gap: 0.5rem;\n  }\n\n  .footer-left,\n  .footer-right {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n}\n\n/* Accessibility - Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .app-item,\n  .app-item-content,\n  .available-app-item,\n  .app-actions {\n    transition: none;\n  }\n}\n"] }]
+    }], null, { Saved: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserAppConfigContentComponent, { className: "UserAppConfigContentComponent", filePath: "src/lib/user-app-config/user-app-config-content.component.ts", lineNumber: 40 }); })();
+//# sourceMappingURL=user-app-config-content.component.js.map