@memberjunction/ng-explorer-settings 3.2.0 → 3.4.0

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

@@ -3,38 +3,33 @@ import { Metadata, RunView, LogError, LogStatus } from '@memberjunction/core';
 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 "@angular/common";
-import * as i4 from "@progress/kendo-angular-dialog";
-import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@progress/kendo-angular-sortable";
-import * as i7 from "@memberjunction/ng-shared-generic";
-function UserAppConfigComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 2);
-} }
-function UserAppConfigComponent_kendo_window_1_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
+import * as i3 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);
     i0.ɵɵelement(1, "mj-loading", 17);
     i0.ɵɵelementEnd();
 } }
-function UserAppConfigComponent_kendo_window_1_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "span", 19);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+function UserAppConfigComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.errorMessage, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "span", 35);
+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.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "All applications added!");
     i0.ɵɵelementEnd()();
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_div_14_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -42,21 +37,21 @@ function UserAppConfigComponent_kendo_window_1_div_4_div_14_span_6_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r5.app.Description);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_div_14_Template(rf, ctx) { if (rf & 1) {
+function UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵlistener("dblclick", function UserAppConfigComponent_kendo_window_1_div_4_div_14_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", 37);
-    i0.ɵɵelement(2, "span");
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 38)(4, "span", 39);
+    i0.ɵɵelementStart(3, "div", 36)(4, "span", 37);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, UserAppConfigComponent_kendo_window_1_div_4_div_14_span_6_Template, 2, 1, "span", 40);
+    i0.ɵɵtemplate(6, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Conditional_6_Template, 2, 1, "span", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 41);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_div_14_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, "span", 42);
+    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.ɵɵtext(9, " Add ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -68,114 +63,118 @@ function UserAppConfigComponent_kendo_window_1_div_4_div_14_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r5.app.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r5.app.Description);
+    i0.ɵɵconditional(item_r5.app.Description ? 6 : -1);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "span", 44);
+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.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No applications selected");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 45);
+    i0.ɵɵelementStart(4, "p", 42);
     i0.ɵɵtext(5, "Add apps from the available list");
     i0.ɵɵelementEnd()();
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_span_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r8 = i0.ɵɵnextContext().item;
+    const item_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r8.app.Description);
+    i0.ɵɵtextInterpolate(item_r9.app.Description);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵlistener("dblclick", function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template_div_dblclick_0_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r7).item; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.removeApp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 48);
-    i0.ɵɵelement(2, "span", 49);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 37);
-    i0.ɵɵelement(4, "span");
+    i0.ɵɵelementStart(4, "div", 34);
+    i0.ɵɵelement(5, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 38)(6, "span", 39);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(6, "div", 36)(7, "span", 37);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_span_8_Template, 2, 1, "span", 40);
+    i0.ɵɵtemplate(9, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 50)(10, "button", 51);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template_button_click_10_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r7).item; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.moveUp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(11, "span", 52);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 53);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template_button_click_12_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r7).item; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.moveDown(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(13, "span", 54);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 55);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template_button_click_14_listener($event) { const item_r8 = i0.ɵɵrestoreView(_r7).item; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.removeApp(item_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(15, "span", 56);
-    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.ɵɵelement(16, "i", 6);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const item_r8 = ctx.item;
-    const index_r9 = ctx.index;
+    const item_r9 = ctx.$implicit;
+    const ɵ$index_115_r10 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("border-left-color", item_r8.app.GetColor());
+    i0.ɵɵclassProp("dragging", ctx_r1.draggedItem === item_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("border-left-color", item_r9.app.GetColor());
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", item_r8.app.GetColor());
+    i0.ɵɵstyleProp("background-color", item_r9.app.GetColor());
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r8.app.Icon || "fa-solid fa-cube");
+    i0.ɵɵclassMap(item_r9.app.Icon || "fa-solid fa-cube");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r8.app.Name);
+    i0.ɵɵtextInterpolate(item_r9.app.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r8.app.Description);
+    i0.ɵɵconditional(item_r9.app.Description ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", index_r9 === 0);
+    i0.ɵɵproperty("disabled", ɵ$index_115_r10 === 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", index_r9 === ctx_r1.activeApps.length - 1);
+    i0.ɵɵproperty("disabled", ɵ$index_115_r10 === ctx_r1.activeApps.length - 1);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_Template(rf, ctx) { if (rf & 1) {
+function UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-sortable", 46);
-    i0.ɵɵlistener("dragEnd", function UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_Template_kendo_sortable_dragEnd_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDragEnd($event)); });
-    i0.ɵɵtemplate(1, UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_ng_template_1_Template, 16, 10, "ng-template");
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("kendoSortableBinding", ctx_r1.activeApps)("animation", true);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.activeApps);
 } }
-function UserAppConfigComponent_kendo_window_1_div_4_Template(rf, ctx) { if (rf & 1) {
+function UserAppConfigComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "p", 21);
+    i0.ɵɵelementStart(0, "div", 10)(1, "p", 19);
     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", 22)(4, "div", 23)(5, "div", 24);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_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, "span", 25);
+    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.ɵɵelement(6, "i", 23);
     i0.ɵɵelementStart(7, "h3");
     i0.ɵɵtext(8, "Available Applications");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 26);
+    i0.ɵɵelementStart(9, "span", 24);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(11, "span", 27);
+    i0.ɵɵelement(11, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 28);
-    i0.ɵɵtemplate(13, UserAppConfigComponent_kendo_window_1_div_4_div_13_Template, 4, 0, "div", 29)(14, UserAppConfigComponent_kendo_window_1_div_4_div_14_Template, 10, 6, "div", 30);
+    i0.ɵɵelementStart(12, "div", 26);
+    i0.ɵɵtemplate(13, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_13_Template, 4, 0, "div", 27);
+    i0.ɵɵrepeaterCreate(14, UserAppConfigComponent_Conditional_0_Conditional_11_For_15_Template, 10, 6, "div", 28, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 31)(16, "div", 24);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_div_4_Template_div_click_16_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectedPanelCollapsed = !ctx_r1.selectedPanelCollapsed); });
-    i0.ɵɵelement(17, "span", 32);
-    i0.ɵɵelementStart(18, "h3");
-    i0.ɵɵtext(19, "Your Applications");
+    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.ɵɵelement(18, "i", 30);
+    i0.ɵɵelementStart(19, "h3");
+    i0.ɵɵtext(20, "Your Applications");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 26);
-    i0.ɵɵtext(21);
+    i0.ɵɵelementStart(21, "span", 24);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(22, "span", 27);
+    i0.ɵɵelement(23, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 28);
-    i0.ɵɵtemplate(24, UserAppConfigComponent_kendo_window_1_div_4_div_24_Template, 6, 0, "div", 29)(25, UserAppConfigComponent_kendo_window_1_div_4_kendo_sortable_25_Template, 2, 2, "kendo-sortable", 33);
+    i0.ɵɵelementStart(24, "div", 26);
+    i0.ɵɵtemplate(25, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_25_Template, 6, 0, "div", 27)(26, UserAppConfigComponent_Conditional_0_Conditional_11_Conditional_26_Template, 3, 0, "div", 31);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -186,77 +185,86 @@ function UserAppConfigComponent_kendo_window_1_div_4_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-down", ctx_r1.availablePanelCollapsed)("fa-chevron-up", !ctx_r1.availablePanelCollapsed);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.availableApps.length === 0);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.availableApps);
+    i0.ɵɵconditional(ctx_r1.availableApps.length === 0 ? 13 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.availableApps);
+    i0.ɵɵadvance(2);
     i0.ɵɵclassProp("collapsed", ctx_r1.selectedPanelCollapsed);
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.activeApps.length);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-down", ctx_r1.selectedPanelCollapsed)("fa-chevron-up", !ctx_r1.selectedPanelCollapsed);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.activeApps.length === 0);
+    i0.ɵɵconditional(ctx_r1.activeApps.length === 0 ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.activeApps.length > 0);
+    i0.ɵɵconditional(ctx_r1.activeApps.length > 0 ? 26 : -1);
 } }
-function UserAppConfigComponent_kendo_window_1_button_7_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 15);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.reset()); });
-    i0.ɵɵelement(1, "span", 57);
+function UserAppConfigComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = 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.ɵɵtext(2, " Reset Changes ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isSaving);
 } }
-function UserAppConfigComponent_kendo_window_1_mj_loading_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 58);
+function UserAppConfigComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 56);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Saving...");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function UserAppConfigComponent_kendo_window_1_span_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 59);
+function UserAppConfigComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 57);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Save Changes");
+    i0.ɵɵelementEnd();
 } }
-function UserAppConfigComponent_kendo_window_1_Template(rf, ctx) { if (rf & 1) {
+function UserAppConfigComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 3);
-    i0.ɵɵlistener("close", function UserAppConfigComponent_kendo_window_1_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵelementStart(1, "div", 4);
-    i0.ɵɵtemplate(2, UserAppConfigComponent_kendo_window_1_div_2_Template, 2, 0, "div", 5)(3, UserAppConfigComponent_kendo_window_1_div_3_Template, 3, 1, "div", 6)(4, UserAppConfigComponent_kendo_window_1_div_4_Template, 26, 18, "div", 7);
-    i0.ɵɵelementStart(5, "div", 8)(6, "div", 9);
-    i0.ɵɵtemplate(7, UserAppConfigComponent_kendo_window_1_button_7_Template, 3, 1, "button", 10);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 11)(9, "button", 12);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.save()); });
-    i0.ɵɵtemplate(10, UserAppConfigComponent_kendo_window_1_mj_loading_10_Template, 1, 1, "mj-loading", 13)(11, UserAppConfigComponent_kendo_window_1_span_11_Template, 1, 0, "span", 14);
-    i0.ɵɵtext(12);
+    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.ɵɵelement(7, "i", 6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 7);
+    i0.ɵɵtemplate(9, UserAppConfigComponent_Conditional_0_Conditional_9_Template, 2, 0, "div", 8)(10, UserAppConfigComponent_Conditional_0_Conditional_10_Template, 4, 1, "div", 9)(11, UserAppConfigComponent_Conditional_0_Conditional_11_Template, 27, 17, "div", 10);
+    i0.ɵɵelementStart(12, "div", 11)(13, "div", 12);
+    i0.ɵɵtemplate(14, UserAppConfigComponent_Conditional_0_Conditional_14_Template, 3, 1, "button", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 15);
-    i0.ɵɵlistener("click", function UserAppConfigComponent_kendo_window_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵtext(14, " Cancel ");
+    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.ɵɵtemplate(17, UserAppConfigComponent_Conditional_0_Conditional_17_Template, 3, 1)(18, UserAppConfigComponent_Conditional_0_Conditional_18_Template, 3, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 16);
+    i0.ɵɵlistener("click", function UserAppConfigComponent_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵtext(20, " Cancel ");
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("top", 0)("left", 0)("resizable", false)("draggable", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.isLoading);
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r1.isLoading ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.errorMessage);
+    i0.ɵɵconditional(ctx_r1.errorMessage ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading);
+    i0.ɵɵconditional(!ctx_r1.isLoading ? 11 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.hasChanges());
+    i0.ɵɵconditional(ctx_r1.hasChanges() ? 14 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isSaving || !ctx_r1.hasChanges());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isSaving);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.isSaving);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save Changes", " ");
-    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isSaving ? 17 : 18);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isSaving);
 } }
 /**
@@ -284,6 +292,10 @@ export class UserAppConfigComponent {
     // Panel collapse state (for mobile)
     availablePanelCollapsed = false;
     selectedPanelCollapsed = false;
+    // Native drag-and-drop state
+    draggedItem = null;
+    draggedIndex = -1;
+    dropTargetIndex = -1;
     constructor(appManager, sharedService, cdr) {
         this.appManager = appManager;
         this.sharedService = sharedService;
@@ -367,18 +379,63 @@ export class UserAppConfigComponent {
             .sort((a, b) => a.app.Name.localeCompare(b.app.Name));
     }
     /**
-     * Handles drag-and-drop reordering of active apps
+     * 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) {
-        if (event.index >= 0) {
+        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, index) => {
-                if (item.sequence !== index) {
-                    item.sequence = index;
+            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;
     }
     /**
      * Adds an app to the user's active list
@@ -530,17 +587,15 @@ export class UserAppConfigComponent {
         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)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { showDialog: "showDialog" }, outputs: { showDialogChange: "showDialogChange", configSaved: "configSaved" }, decls: 2, vars: 2, consts: [["class", "k-overlay", 4, "ngIf"], ["title", "Configure Apps", "class", "full-screen-dialog", 3, "top", "left", "resizable", "draggable", "close", 4, "ngIf"], [1, "k-overlay"], ["title", "Configure Apps", 1, "full-screen-dialog", 3, "close", "top", "left", "resizable", "draggable"], [1, "app-config-container"], ["class", "loading-container", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "config-content", 4, "ngIf"], [1, "dialog-footer"], [1, "footer-left"], ["kendoButton", "", "fillMode", "outline", 3, "disabled", "click", 4, "ngIf"], [1, "footer-right"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], ["class", "fa-solid fa-check", 4, "ngIf"], ["kendoButton", "", "fillMode", "outline", 3, "click", "disabled"], [1, "loading-container"], ["text", "Loading your app configuration...", "size", "medium"], [1, "error-message"], [1, "fa-solid", "fa-circle-exclamation"], [1, "config-content"], [1, "config-description"], [1, "panels-container"], [1, "panel", "available-apps-panel"], [1, "panel-header", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "badge"], [1, "collapse-toggle", "fa-solid"], [1, "panel-content"], ["class", "empty-state", 4, "ngIf"], ["class", "available-app-item", 3, "dblclick", 4, "ngFor", "ngForOf"], [1, "panel", "selected-apps-panel"], [1, "fa-solid", "fa-check-circle"], ["itemClass", "app-item", "activeItemClass", "app-item dragging", 3, "kendoSortableBinding", "animation", "dragEnd", 4, "ngIf"], [1, "empty-state"], [1, "fa-solid", "fa-check-double"], [1, "available-app-item", 3, "dblclick"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], ["class", "app-description", 4, "ngIf"], ["kendoButton", "", "themeColor", "primary", "fillMode", "outline", "title", "Add to your apps", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "app-description"], [1, "fa-solid", "fa-inbox"], [1, "hint"], ["itemClass", "app-item", "activeItemClass", "app-item dragging", 3, "dragEnd", "kendoSortableBinding", "animation"], [1, "app-item-content", 3, "dblclick"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "app-actions"], ["kendoButton", "", "fillMode", "flat", "title", "Move up", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["kendoButton", "", "fillMode", "flat", "title", "Move down", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "title", "Remove from your apps", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-rotate-left"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-check"]], template: function UserAppConfigComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, UserAppConfigComponent_div_0_Template, 1, 0, "div", 0)(1, UserAppConfigComponent_kendo_window_1_Template, 15, 13, "kendo-window", 1);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserAppConfigComponent, selectors: [["mj-user-app-config"]], inputs: { showDialog: "showDialog" }, outputs: { showDialogChange: "showDialogChange", configSaved: "configSaved" }, 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) {
+            i0.ɵɵtemplate(0, UserAppConfigComponent_Conditional_0_Template, 21, 7);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.showDialog);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDialog);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.WindowComponent, i5.ButtonComponent, i6.SortableComponent, i6.SortableBindingDirective, i7.LoadingComponent], styles: ["\n\n[_nghost-%COMP%]     .full-screen-dialog {\n  width: 100vw !important;\n  height: 100vh !important;\n}\n\n[_nghost-%COMP%]     .full-screen-dialog .k-window {\n  border-radius: 0;\n  box-shadow: none;\n}\n\n[_nghost-%COMP%]     .full-screen-dialog .k-window-titlebar {\n  background: var(--kendo-component-bg, #ffffff);\n  border-bottom: 1px solid var(--kendo-border-color, #e0e0e0);\n  padding: 16px 24px;\n}\n\n[_nghost-%COMP%]     .full-screen-dialog .k-window-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n\n\n[_nghost-%COMP%]     .full-screen-dialog .k-window-titlebar-action:not(:last-child) {\n  display: none;\n}\n\n[_nghost-%COMP%]     .full-screen-dialog .k-window-content {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n\n\n.app-config-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-surface-bg, #f5f5f5);\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: 16px;\n  color: var(--kendo-subtle-text, #666);\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  background: var(--kendo-error-bg, #ffebee);\n  color: var(--kendo-error-text, #c62828);\n  border-bottom: 1px solid var(--kendo-error-border, #ef9a9a);\n}\n\n.error-message[_ngcontent-%COMP%]   .fa-solid[_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: 24px;\n  overflow: hidden;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0 0 24px 0;\n  color: var(--kendo-subtle-text, #666);\n  font-size: 0.95rem;\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: 24px;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\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(--kendo-subtle-text, #666) !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(--kendo-hover-bg, #f0f0f0);\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(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 20px;\n  background: var(--kendo-surface-bg, #fafafa);\n  border-bottom: 1px solid var(--kendo-border-color, #e0e0e0);\n}\n\n.panel-header[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 1.1rem;\n  color: var(--kendo-primary, #0078d4);\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  flex: 1;\n}\n\n.panel-header[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--kendo-primary, #0078d4);\n  color: white;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 0.85rem;\n  font-weight: 500;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%]   .collapse-toggle[_ngcontent-%COMP%] {\n  display: none;\n  color: var(--kendo-subtle-text, #666);\n  font-size: 0.9rem;\n  margin-left: 8px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\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: 48px 24px;\n  color: var(--kendo-subtle-text, #999);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.95rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-size: 0.85rem;\n  opacity: 0.7;\n}\n\n\n\n[_nghost-%COMP%]     .app-item {\n  margin-bottom: 8px;\n  cursor: grab;\n}\n\n[_nghost-%COMP%]     .app-item.dragging {\n  opacity: 0.8;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.app-item-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-left-width: 4px;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.app-item-content[_ngcontent-%COMP%]:hover {\n  border-color: var(--kendo-primary, #0078d4);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  color: var(--kendo-subtle-text, #999);\n  cursor: grab;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 2px;\n  min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  font-size: 0.95rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description[_ngcontent-%COMP%] {\n  font-size: 0.8rem;\n  color: var(--kendo-subtle-text, #666);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.app-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n}\n\n\n\n.available-app-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: 8px;\n  background: var(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.available-app-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--kendo-primary, #0078d4);\n  background: var(--kendo-surface-bg, #fafafa);\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: 16px 24px;\n  background: var(--kendo-component-bg, #ffffff);\n  border-top: 1px solid var(--kendo-border-color, #e0e0e0);\n}\n\n.footer-left[_ngcontent-%COMP%], \n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n@media (max-width: 600px) {\n  .config-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .panels-container[_ngcontent-%COMP%] {\n    gap: 16px;\n  }\n\n  .app-item-content[_ngcontent-%COMP%], \n   .available-app-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n  }\n\n  .app-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    font-size: 1rem;\n  }\n\n  .app-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .footer-left[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n}"] });
+            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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserAppConfigComponent, [{
         type: Component,
-        args: [{ selector: 'mj-user-app-config', template: "<div class=\"k-overlay\" *ngIf=\"showDialog\"></div>\n<kendo-window\n  *ngIf=\"showDialog\"\n  [top]=\"0\"\n  [left]=\"0\"\n  [resizable]=\"false\"\n  [draggable]=\"false\"\n  title=\"Configure Apps\"\n  (close)=\"close()\"\n  class=\"full-screen-dialog\"\n>\n  <div class=\"app-config-container\">\n    <!-- Loading State -->\n    <div *ngIf=\"isLoading\" class=\"loading-container\">\n      <mj-loading text=\"Loading your app configuration...\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Error Message -->\n    <div *ngIf=\"errorMessage\" class=\"error-message\">\n      <span class=\"fa-solid fa-circle-exclamation\"></span>\n      {{ errorMessage }}\n    </div>\n\n    <!-- Main Content -->\n    <div *ngIf=\"!isLoading\" 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            <span class=\"fa-solid fa-layer-group\"></span>\n            <h3>Available Applications</h3>\n            <span class=\"badge\">{{ availableApps.length }}</span>\n            <span class=\"collapse-toggle fa-solid\" [class.fa-chevron-down]=\"availablePanelCollapsed\" [class.fa-chevron-up]=\"!availablePanelCollapsed\"></span>\n          </div>\n\n          <div class=\"panel-content\">\n            <div *ngIf=\"availableApps.length === 0\" class=\"empty-state\">\n              <span class=\"fa-solid fa-check-double\"></span>\n              <p>All applications added!</p>\n            </div>\n\n            <div *ngFor=\"let item of availableApps\" class=\"available-app-item\" (dblclick)=\"addApp(item)\">\n              <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                <span [class]=\"item.app.Icon || 'fa-solid fa-cube'\"></span>\n              </div>\n\n              <div class=\"app-info\">\n                <span class=\"app-name\">{{ item.app.Name }}</span>\n                <span class=\"app-description\" *ngIf=\"item.app.Description\">{{ item.app.Description }}</span>\n              </div>\n\n              <button\n                kendoButton\n                themeColor=\"primary\"\n                fillMode=\"outline\"\n                (click)=\"addApp(item)\"\n                title=\"Add to your apps\"\n              >\n                <span class=\"fa-solid fa-plus\"></span>\n                Add\n              </button>\n            </div>\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            <span class=\"fa-solid fa-check-circle\"></span>\n            <h3>Your Applications</h3>\n            <span class=\"badge\">{{ activeApps.length }}</span>\n            <span class=\"collapse-toggle fa-solid\" [class.fa-chevron-down]=\"selectedPanelCollapsed\" [class.fa-chevron-up]=\"!selectedPanelCollapsed\"></span>\n          </div>\n\n          <div class=\"panel-content\">\n            <div *ngIf=\"activeApps.length === 0\" class=\"empty-state\">\n              <span class=\"fa-solid fa-inbox\"></span>\n              <p>No applications selected</p>\n              <p class=\"hint\">Add apps from the available list</p>\n            </div>\n\n            <kendo-sortable\n              *ngIf=\"activeApps.length > 0\"\n              [kendoSortableBinding]=\"activeApps\"\n              [animation]=\"true\"\n              itemClass=\"app-item\"\n              activeItemClass=\"app-item dragging\"\n              (dragEnd)=\"onDragEnd($event)\"\n            >\n              <ng-template let-item=\"item\" let-index=\"index\">\n                <div class=\"app-item-content\" [style.border-left-color]=\"item.app.GetColor()\" (dblclick)=\"removeApp(item); $event.stopPropagation()\">\n                  <div class=\"drag-handle\">\n                    <span class=\"fa-solid fa-grip-vertical\"></span>\n                  </div>\n\n                  <div class=\"app-icon\" [style.background-color]=\"item.app.GetColor()\">\n                    <span [class]=\"item.app.Icon || 'fa-solid fa-cube'\"></span>\n                  </div>\n\n                  <div class=\"app-info\">\n                    <span class=\"app-name\">{{ item.app.Name }}</span>\n                    <span class=\"app-description\" *ngIf=\"item.app.Description\">{{ item.app.Description }}</span>\n                  </div>\n\n                  <div class=\"app-actions\">\n                    <button\n                      kendoButton\n                      fillMode=\"flat\"\n                      [disabled]=\"index === 0\"\n                      (click)=\"moveUp(item); $event.stopPropagation()\"\n                      title=\"Move up\"\n                    >\n                      <span class=\"fa-solid fa-chevron-up\"></span>\n                    </button>\n                    <button\n                      kendoButton\n                      fillMode=\"flat\"\n                      [disabled]=\"index === activeApps.length - 1\"\n                      (click)=\"moveDown(item); $event.stopPropagation()\"\n                      title=\"Move down\"\n                    >\n                      <span class=\"fa-solid fa-chevron-down\"></span>\n                    </button>\n                    <button\n                      kendoButton\n                      fillMode=\"flat\"\n                      themeColor=\"error\"\n                      (click)=\"removeApp(item); $event.stopPropagation()\"\n                      title=\"Remove from your apps\"\n                    >\n                      <span class=\"fa-solid fa-xmark\"></span>\n                    </button>\n                  </div>\n                </div>\n              </ng-template>\n            </kendo-sortable>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer Actions -->\n    <div class=\"dialog-footer\">\n      <div class=\"footer-left\">\n        <button\n          kendoButton\n          fillMode=\"outline\"\n          (click)=\"reset()\"\n          [disabled]=\"isLoading || isSaving\"\n          *ngIf=\"hasChanges()\"\n        >\n          <span class=\"fa-solid fa-rotate-left\"></span>\n          Reset Changes\n        </button>\n      </div>\n      <div class=\"footer-right\">\n        <button\n          kendoButton\n          themeColor=\"primary\"\n          (click)=\"save()\"\n          [disabled]=\"isLoading || isSaving || !hasChanges()\"\n        >\n          <mj-loading *ngIf=\"isSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n          <span *ngIf=\"!isSaving\" class=\"fa-solid fa-check\"></span>\n          {{ isSaving ? 'Saving...' : 'Save Changes' }}\n        </button>\n        <button\n          kendoButton\n          fillMode=\"outline\"\n          (click)=\"close()\"\n          [disabled]=\"isSaving\"\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  </div>\n</kendo-window>\n", styles: ["/* Full-screen dialog overlay */\n:host ::ng-deep .full-screen-dialog {\n  width: 100vw !important;\n  height: 100vh !important;\n}\n\n:host ::ng-deep .full-screen-dialog .k-window {\n  border-radius: 0;\n  box-shadow: none;\n}\n\n:host ::ng-deep .full-screen-dialog .k-window-titlebar {\n  background: var(--kendo-component-bg, #ffffff);\n  border-bottom: 1px solid var(--kendo-border-color, #e0e0e0);\n  padding: 16px 24px;\n}\n\n:host ::ng-deep .full-screen-dialog .k-window-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n/* Hide minimize/maximize buttons, keep only close */\n:host ::ng-deep .full-screen-dialog .k-window-titlebar-action:not(:last-child) {\n  display: none;\n}\n\n:host ::ng-deep .full-screen-dialog .k-window-content {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* Main container */\n.app-config-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-surface-bg, #f5f5f5);\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: 16px;\n  color: var(--kendo-subtle-text, #666);\n}\n\n/* Error message */\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  background: var(--kendo-error-bg, #ffebee);\n  color: var(--kendo-error-text, #c62828);\n  border-bottom: 1px solid var(--kendo-error-border, #ef9a9a);\n}\n\n.error-message .fa-solid {\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: 24px;\n  overflow: hidden;\n}\n\n.config-description {\n  margin: 0 0 24px 0;\n  color: var(--kendo-subtle-text, #666);\n  font-size: 0.95rem;\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: 24px;\n  overflow: hidden;\n}\n\n@media (max-width: 900px) {\n  .panels-container {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\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(--kendo-subtle-text, #666) !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(--kendo-hover-bg, #f0f0f0);\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(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 20px;\n  background: var(--kendo-surface-bg, #fafafa);\n  border-bottom: 1px solid var(--kendo-border-color, #e0e0e0);\n}\n\n.panel-header .fa-solid {\n  font-size: 1.1rem;\n  color: var(--kendo-primary, #0078d4);\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  flex: 1;\n}\n\n.panel-header .badge {\n  background: var(--kendo-primary, #0078d4);\n  color: white;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 0.85rem;\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(--kendo-subtle-text, #666);\n  font-size: 0.9rem;\n  margin-left: 8px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\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: 48px 24px;\n  color: var(--kendo-subtle-text, #999);\n  text-align: center;\n}\n\n.empty-state .fa-solid {\n  font-size: 2.5rem;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 0.95rem;\n}\n\n.empty-state .hint {\n  margin-top: 4px;\n  font-size: 0.85rem;\n  opacity: 0.7;\n}\n\n/* Sortable app items */\n:host ::ng-deep .app-item {\n  margin-bottom: 8px;\n  cursor: grab;\n}\n\n:host ::ng-deep .app-item.dragging {\n  opacity: 0.8;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.app-item-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-left-width: 4px;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.app-item-content:hover {\n  border-color: var(--kendo-primary, #0078d4);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.drag-handle {\n  color: var(--kendo-subtle-text, #999);\n  cursor: grab;\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n}\n\n.app-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 2px;\n  min-width: 0;\n}\n\n.app-name {\n  font-weight: 500;\n  font-size: 0.95rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-description {\n  font-size: 0.8rem;\n  color: var(--kendo-subtle-text, #666);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.app-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.app-actions button {\n  padding: 4px 8px;\n}\n\n/* Available app items */\n.available-app-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: 8px;\n  background: var(--kendo-component-bg, #ffffff);\n  border: 1px solid var(--kendo-border-color, #e0e0e0);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.available-app-item:hover {\n  border-color: var(--kendo-primary, #0078d4);\n  background: var(--kendo-surface-bg, #fafafa);\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: 16px 24px;\n  background: var(--kendo-component-bg, #ffffff);\n  border-top: 1px solid var(--kendo-border-color, #e0e0e0);\n}\n\n.footer-left,\n.footer-right {\n  display: flex;\n  gap: 12px;\n}\n\n.dialog-footer button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 600px) {\n  .config-content {\n    padding: 16px;\n  }\n\n  .panels-container {\n    gap: 16px;\n  }\n\n  .app-item-content,\n  .available-app-item {\n    padding: 10px 12px;\n  }\n\n  .app-icon {\n    width: 36px;\n    height: 36px;\n    font-size: 1rem;\n  }\n\n  .app-actions button {\n    padding: 2px 6px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .footer-left,\n  .footer-right {\n    width: 100%;\n    justify-content: center;\n  }\n}\n"] }]
+        args: [{ 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 }], { showDialog: [{
             type: Input
         }], showDialogChange: [{
@@ -548,5 +603,5 @@ export class UserAppConfigComponent {
         }], 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: 29 }); })();
 //# sourceMappingURL=user-app-config.component.js.map