@memberjunction/ng-dashboards 5.27.1 → 5.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Home/action-pin-config-dialog.component.d.ts +60 -0
- package/dist/Home/action-pin-config-dialog.component.d.ts.map +1 -0
- package/dist/Home/action-pin-config-dialog.component.js +396 -0
- package/dist/Home/action-pin-config-dialog.component.js.map +1 -0
- package/dist/Home/action-pin-runner-dialog.component.d.ts +39 -0
- package/dist/Home/action-pin-runner-dialog.component.d.ts.map +1 -0
- package/dist/Home/action-pin-runner-dialog.component.js +285 -0
- package/dist/Home/action-pin-runner-dialog.component.js.map +1 -0
- package/dist/Home/home-dashboard.component.d.ts +26 -0
- package/dist/Home/home-dashboard.component.d.ts.map +1 -1
- package/dist/Home/home-dashboard.component.js +671 -462
- package/dist/Home/home-dashboard.component.js.map +1 -1
- package/dist/Integration/components/connections/connections.component.d.ts +27 -1
- package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
- package/dist/Integration/components/connections/connections.component.js +819 -445
- package/dist/Integration/components/connections/connections.component.js.map +1 -1
- package/dist/Integration/services/integration-data.service.d.ts +9 -1
- package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
- package/dist/Integration/services/integration-data.service.js +24 -4
- package/dist/Integration/services/integration-data.service.js.map +1 -1
- package/dist/core-dashboards.module.d.ts +32 -30
- package/dist/core-dashboards.module.d.ts.map +1 -1
- package/dist/core-dashboards.module.js +6 -0
- package/dist/core-dashboards.module.js.map +1 -1
- package/package.json +48 -48
|
@@ -11,6 +11,7 @@ import { BaseResourceComponent, HomeAppPinService } from '@memberjunction/ng-sha
|
|
|
11
11
|
import { RegisterClass } from '@memberjunction/global';
|
|
12
12
|
import { Metadata, CompositeKey, RunView } from '@memberjunction/core';
|
|
13
13
|
import { UserInfoEngine } from '@memberjunction/core-entities';
|
|
14
|
+
import { ActionEngineBase } from '@memberjunction/actions-base';
|
|
14
15
|
import { MJNotificationService } from '@memberjunction/ng-notifications';
|
|
15
16
|
import * as i0 from "@angular/core";
|
|
16
17
|
import * as i1 from "@memberjunction/ng-base-application";
|
|
@@ -19,43 +20,45 @@ import * as i3 from "@angular/forms";
|
|
|
19
20
|
import * as i4 from "@memberjunction/ng-ui-components";
|
|
20
21
|
import * as i5 from "@memberjunction/ng-shared-generic";
|
|
21
22
|
import * as i6 from "@memberjunction/ng-explorer-settings";
|
|
22
|
-
import * as i7 from "
|
|
23
|
+
import * as i7 from "./action-pin-config-dialog.component";
|
|
24
|
+
import * as i8 from "./action-pin-runner-dialog.component";
|
|
25
|
+
import * as i9 from "@angular/common";
|
|
23
26
|
const _c0 = ["appConfigDialog"];
|
|
24
27
|
const _forTrack0 = ($index, $item) => $item.appId;
|
|
25
28
|
const _forTrack1 = ($index, $item) => $item.label;
|
|
26
29
|
const _forTrack2 = ($index, $item) => $item.id;
|
|
27
30
|
function HomeDashboardComponent_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
28
31
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
29
|
-
i0.ɵɵelementStart(0, "button",
|
|
32
|
+
i0.ɵɵelementStart(0, "button", 23);
|
|
30
33
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
|
|
31
|
-
i0.ɵɵelement(1, "i",
|
|
34
|
+
i0.ɵɵelement(1, "i", 24);
|
|
32
35
|
i0.ɵɵtext(2, " Done ");
|
|
33
36
|
i0.ɵɵelementEnd();
|
|
34
37
|
} }
|
|
35
38
|
function HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
36
39
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
37
|
-
i0.ɵɵelementStart(0, "button",
|
|
40
|
+
i0.ɵɵelementStart(0, "button", 28);
|
|
38
41
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
|
|
39
|
-
i0.ɵɵelement(1, "i",
|
|
42
|
+
i0.ɵɵelement(1, "i", 29);
|
|
40
43
|
i0.ɵɵtext(2, " Edit ");
|
|
41
44
|
i0.ɵɵelementEnd();
|
|
42
45
|
} }
|
|
43
46
|
function HomeDashboardComponent_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
44
47
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
45
|
-
i0.ɵɵelementStart(0, "button",
|
|
48
|
+
i0.ɵɵelementStart(0, "button", 25);
|
|
46
49
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
|
|
47
|
-
i0.ɵɵelement(1, "i",
|
|
50
|
+
i0.ɵɵelement(1, "i", 26);
|
|
48
51
|
i0.ɵɵtext(2, " Add Pin ");
|
|
49
52
|
i0.ɵɵelementEnd();
|
|
50
|
-
i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template, 3, 0, "button",
|
|
53
|
+
i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template, 3, 0, "button", 27);
|
|
51
54
|
} if (rf & 2) {
|
|
52
55
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
53
56
|
i0.ɵɵadvance(3);
|
|
54
57
|
i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 3 : -1);
|
|
55
58
|
} }
|
|
56
59
|
function HomeDashboardComponent_Conditional_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
57
|
-
i0.ɵɵelementStart(0, "div",
|
|
58
|
-
i0.ɵɵelement(1, "i",
|
|
60
|
+
i0.ɵɵelementStart(0, "div", 20);
|
|
61
|
+
i0.ɵɵelement(1, "i", 30);
|
|
59
62
|
i0.ɵɵelementStart(2, "span")(3, "strong");
|
|
60
63
|
i0.ɵɵtext(4, "Edit mode");
|
|
61
64
|
i0.ɵɵelementEnd();
|
|
@@ -64,41 +67,41 @@ function HomeDashboardComponent_Conditional_8_Conditional_8_Template(rf, ctx) {
|
|
|
64
67
|
} }
|
|
65
68
|
function HomeDashboardComponent_Conditional_8_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
66
69
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
67
|
-
i0.ɵɵelementStart(0, "div",
|
|
68
|
-
i0.ɵɵelement(1, "i",
|
|
70
|
+
i0.ɵɵelementStart(0, "div", 21);
|
|
71
|
+
i0.ɵɵelement(1, "i", 17);
|
|
69
72
|
i0.ɵɵelementStart(2, "h3");
|
|
70
73
|
i0.ɵɵtext(3, "No pinned items yet");
|
|
71
74
|
i0.ɵɵelementEnd();
|
|
72
75
|
i0.ɵɵelementStart(4, "p");
|
|
73
76
|
i0.ɵɵtext(5, "Pin your favorite dashboards, views, queries, and reports for quick access.");
|
|
74
77
|
i0.ɵɵelementEnd();
|
|
75
|
-
i0.ɵɵelementStart(6, "button",
|
|
78
|
+
i0.ɵɵelementStart(6, "button", 25);
|
|
76
79
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
|
|
77
|
-
i0.ɵɵelement(7, "i",
|
|
80
|
+
i0.ɵɵelement(7, "i", 26);
|
|
78
81
|
i0.ɵɵtext(8, " Add your first pin ");
|
|
79
82
|
i0.ɵɵelementEnd()();
|
|
80
83
|
} }
|
|
81
84
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
82
85
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
83
|
-
i0.ɵɵelementStart(0, "div",
|
|
84
|
-
i0.ɵɵelement(2, "i",
|
|
86
|
+
i0.ɵɵelementStart(0, "div", 34)(1, "div", 43);
|
|
87
|
+
i0.ɵɵelement(2, "i", 44);
|
|
85
88
|
i0.ɵɵelementEnd();
|
|
86
|
-
i0.ɵɵelementStart(3, "div",
|
|
89
|
+
i0.ɵɵelementStart(3, "div", 45)(4, "button", 46);
|
|
87
90
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r9); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.RemovePin(pin_r8.Id); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
88
|
-
i0.ɵɵelement(5, "i",
|
|
91
|
+
i0.ɵɵelement(5, "i", 47);
|
|
89
92
|
i0.ɵɵelementEnd()()();
|
|
90
93
|
} }
|
|
91
94
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
92
95
|
const _r10 = i0.ɵɵgetCurrentView();
|
|
93
|
-
i0.ɵɵelementStart(0, "div",
|
|
96
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
94
97
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r10); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
95
98
|
i0.ɵɵtext(2, "Open");
|
|
96
99
|
i0.ɵɵelementEnd()();
|
|
97
100
|
} }
|
|
98
101
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
99
|
-
i0.ɵɵelementStart(0, "div",
|
|
100
|
-
i0.ɵɵelement(1, "img",
|
|
101
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template, 3, 0, "div",
|
|
102
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
103
|
+
i0.ɵɵelement(1, "img", 48);
|
|
104
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template, 3, 0, "div", 49);
|
|
102
105
|
i0.ɵɵelementEnd();
|
|
103
106
|
} if (rf & 2) {
|
|
104
107
|
const pin_r8 = i0.ɵɵnextContext().$implicit;
|
|
@@ -110,47 +113,68 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2
|
|
|
110
113
|
} }
|
|
111
114
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
112
115
|
const _r11 = i0.ɵɵgetCurrentView();
|
|
113
|
-
i0.ɵɵelementStart(0, "div",
|
|
116
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
114
117
|
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r11); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
115
|
-
i0.ɵɵtext(2, "
|
|
118
|
+
i0.ɵɵtext(2, "Run");
|
|
116
119
|
i0.ɵɵelementEnd()();
|
|
117
120
|
} }
|
|
118
121
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
119
|
-
i0.ɵɵelementStart(0, "div",
|
|
122
|
+
i0.ɵɵelementStart(0, "div", 51);
|
|
120
123
|
i0.ɵɵelement(1, "i");
|
|
121
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template, 3, 0, "div",
|
|
124
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template, 3, 0, "div", 49);
|
|
122
125
|
i0.ɵɵelementEnd();
|
|
123
126
|
} if (rf & 2) {
|
|
124
127
|
const pin_r8 = i0.ɵɵnextContext().$implicit;
|
|
125
128
|
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
126
|
-
i0.ɵɵstyleProp("
|
|
129
|
+
i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r8) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r8) + "cc 100%)");
|
|
127
130
|
i0.ɵɵadvance();
|
|
128
131
|
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
|
|
129
132
|
i0.ɵɵadvance();
|
|
130
133
|
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
131
134
|
} }
|
|
132
|
-
function
|
|
135
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
133
136
|
const _r12 = i0.ɵɵgetCurrentView();
|
|
134
|
-
i0.ɵɵelementStart(0, "
|
|
135
|
-
i0.ɵɵlistener("
|
|
137
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
138
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r12); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
139
|
+
i0.ɵɵtext(2, "Open");
|
|
140
|
+
i0.ɵɵelementEnd()();
|
|
141
|
+
} }
|
|
142
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
143
|
+
i0.ɵɵelementStart(0, "div", 52);
|
|
144
|
+
i0.ɵɵelement(1, "i");
|
|
145
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template, 3, 0, "div", 49);
|
|
146
|
+
i0.ɵɵelementEnd();
|
|
147
|
+
} if (rf & 2) {
|
|
148
|
+
const pin_r8 = i0.ɵɵnextContext().$implicit;
|
|
149
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
150
|
+
i0.ɵɵstyleProp("--pin-icon-color", pin_r8.Color || "var(--mj-text-muted)");
|
|
151
|
+
i0.ɵɵadvance();
|
|
152
|
+
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
|
|
153
|
+
i0.ɵɵadvance();
|
|
154
|
+
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
155
|
+
} }
|
|
156
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
157
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
158
|
+
i0.ɵɵelementStart(0, "input", 53);
|
|
159
|
+
i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r13); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r8.Id, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r13); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r8.Id, ctx_r2.GetInputValue($event))); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
136
160
|
i0.ɵɵelementEnd();
|
|
137
161
|
} if (rf & 2) {
|
|
138
162
|
const pin_r8 = i0.ɵɵnextContext().$implicit;
|
|
139
163
|
i0.ɵɵproperty("value", pin_r8.DisplayName);
|
|
140
164
|
} }
|
|
141
|
-
function
|
|
142
|
-
const
|
|
143
|
-
i0.ɵɵelementStart(0, "button",
|
|
144
|
-
i0.ɵɵlistener("click", function
|
|
145
|
-
i0.ɵɵelement(1, "i",
|
|
165
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
166
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
167
|
+
i0.ɵɵelementStart(0, "button", 56);
|
|
168
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ShowPinMenu($event, pin_r8)); });
|
|
169
|
+
i0.ɵɵelement(1, "i", 57);
|
|
146
170
|
i0.ɵɵelementEnd();
|
|
147
171
|
} }
|
|
148
|
-
function
|
|
149
|
-
const
|
|
150
|
-
i0.ɵɵelementStart(0, "div",
|
|
151
|
-
i0.ɵɵlistener("click", function
|
|
172
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
173
|
+
const _r14 = i0.ɵɵgetCurrentView();
|
|
174
|
+
i0.ɵɵelementStart(0, "div", 54);
|
|
175
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r8.Id, $event) : null); });
|
|
152
176
|
i0.ɵɵtext(1);
|
|
153
|
-
i0.ɵɵconditionalCreate(2,
|
|
177
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template, 2, 0, "button", 55);
|
|
154
178
|
i0.ɵɵelementEnd();
|
|
155
179
|
} if (rf & 2) {
|
|
156
180
|
const pin_r8 = i0.ɵɵnextContext().$implicit;
|
|
@@ -160,8 +184,8 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6
|
|
|
160
184
|
i0.ɵɵadvance();
|
|
161
185
|
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
162
186
|
} }
|
|
163
|
-
function
|
|
164
|
-
i0.ɵɵelementStart(0, "span",
|
|
187
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
188
|
+
i0.ɵɵelementStart(0, "span", 42);
|
|
165
189
|
i0.ɵɵtext(1);
|
|
166
190
|
i0.ɵɵelementEnd();
|
|
167
191
|
} if (rf & 2) {
|
|
@@ -171,16 +195,16 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1
|
|
|
171
195
|
} }
|
|
172
196
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
173
197
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
174
|
-
i0.ɵɵelementStart(0, "div",
|
|
198
|
+
i0.ɵɵelementStart(0, "div", 33);
|
|
175
199
|
i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragstart_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r8)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragover_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r8)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_drop_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r8)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_click_0_listener() { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r8)); });
|
|
176
|
-
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template, 6, 0, "div",
|
|
177
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template, 3, 3, "div",
|
|
178
|
-
i0.ɵɵelementStart(
|
|
179
|
-
i0.ɵɵconditionalCreate(
|
|
180
|
-
i0.ɵɵelementStart(
|
|
181
|
-
i0.ɵɵelement(
|
|
182
|
-
i0.ɵɵtext(
|
|
183
|
-
i0.ɵɵconditionalCreate(
|
|
200
|
+
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template, 6, 0, "div", 34);
|
|
201
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template, 3, 3, "div", 35)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template, 3, 5, "div", 36)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template, 3, 5, "div", 37);
|
|
202
|
+
i0.ɵɵelementStart(5, "div", 38);
|
|
203
|
+
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template, 1, 1, "input", 39)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template, 3, 2, "div", 40);
|
|
204
|
+
i0.ɵɵelementStart(8, "div", 41);
|
|
205
|
+
i0.ɵɵelement(9, "i");
|
|
206
|
+
i0.ɵɵtext(10);
|
|
207
|
+
i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template, 2, 1, "span", 42);
|
|
184
208
|
i0.ɵɵelementEnd()()();
|
|
185
209
|
} if (rf & 2) {
|
|
186
210
|
const pin_r8 = ctx.$implicit;
|
|
@@ -190,202 +214,223 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template(rf,
|
|
|
190
214
|
i0.ɵɵadvance();
|
|
191
215
|
i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
|
|
192
216
|
i0.ɵɵadvance();
|
|
193
|
-
i0.ɵɵconditional(pin_r8.Thumbnail ? 2 : 3);
|
|
194
|
-
i0.ɵɵadvance(
|
|
195
|
-
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r8.Id ?
|
|
217
|
+
i0.ɵɵconditional(pin_r8.Thumbnail ? 2 : pin_r8.ResourceType === "Actions" ? 3 : 4);
|
|
218
|
+
i0.ɵɵadvance(4);
|
|
219
|
+
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r8.Id ? 6 : 7);
|
|
196
220
|
i0.ɵɵadvance(3);
|
|
197
221
|
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
|
|
198
222
|
i0.ɵɵadvance();
|
|
199
223
|
i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r8), " ");
|
|
200
224
|
i0.ɵɵadvance();
|
|
201
|
-
i0.ɵɵconditional(pin_r8.ApplicationName && pin_r8.ResourceType !== "Custom" ?
|
|
225
|
+
i0.ɵɵconditional(pin_r8.ApplicationName && pin_r8.ResourceType !== "Custom" ? 11 : -1);
|
|
202
226
|
} }
|
|
203
227
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
204
|
-
const
|
|
205
|
-
i0.ɵɵelementStart(0, "input",
|
|
206
|
-
i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(
|
|
228
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
229
|
+
i0.ɵɵelementStart(0, "input", 64);
|
|
230
|
+
i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r16); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r17, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r16); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r17, ctx_r2.GetInputValue($event))); });
|
|
207
231
|
i0.ɵɵelementEnd();
|
|
208
232
|
} if (rf & 2) {
|
|
209
|
-
const
|
|
210
|
-
i0.ɵɵproperty("value",
|
|
233
|
+
const group_r17 = i0.ɵɵnextContext().$implicit;
|
|
234
|
+
i0.ɵɵproperty("value", group_r17);
|
|
211
235
|
} }
|
|
212
236
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
213
|
-
const
|
|
214
|
-
i0.ɵɵelementStart(0, "span",
|
|
215
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(
|
|
237
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
238
|
+
i0.ɵɵelementStart(0, "span", 65);
|
|
239
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r18); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingGroup(group_r17) : null); });
|
|
216
240
|
i0.ɵɵtext(1);
|
|
217
241
|
i0.ɵɵelementEnd();
|
|
218
242
|
} if (rf & 2) {
|
|
219
|
-
const
|
|
243
|
+
const group_r17 = i0.ɵɵnextContext().$implicit;
|
|
220
244
|
i0.ɵɵadvance();
|
|
221
|
-
i0.ɵɵtextInterpolate(
|
|
245
|
+
i0.ɵɵtextInterpolate(group_r17);
|
|
222
246
|
} }
|
|
223
247
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
224
|
-
const
|
|
225
|
-
i0.ɵɵelementStart(0, "div",
|
|
226
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(
|
|
227
|
-
i0.ɵɵelement(2, "i",
|
|
248
|
+
const _r19 = i0.ɵɵgetCurrentView();
|
|
249
|
+
i0.ɵɵelementStart(0, "div", 63)(1, "button", 66);
|
|
250
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.RemoveGroup(group_r17)); });
|
|
251
|
+
i0.ɵɵelement(2, "i", 67);
|
|
228
252
|
i0.ɵɵtext(3, " Remove Group ");
|
|
229
253
|
i0.ɵɵelementEnd()();
|
|
230
254
|
} }
|
|
231
255
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
232
|
-
const
|
|
233
|
-
i0.ɵɵelementStart(0, "div",
|
|
234
|
-
i0.ɵɵelement(2, "i",
|
|
256
|
+
const _r22 = i0.ɵɵgetCurrentView();
|
|
257
|
+
i0.ɵɵelementStart(0, "div", 34)(1, "div", 43);
|
|
258
|
+
i0.ɵɵelement(2, "i", 44);
|
|
235
259
|
i0.ɵɵelementEnd();
|
|
236
|
-
i0.ɵɵelementStart(3, "div",
|
|
237
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(
|
|
238
|
-
i0.ɵɵelement(5, "i",
|
|
260
|
+
i0.ɵɵelementStart(3, "div", 45)(4, "button", 46);
|
|
261
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r22); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.RemovePin(pin_r21.Id); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
262
|
+
i0.ɵɵelement(5, "i", 47);
|
|
239
263
|
i0.ɵɵelementEnd()()();
|
|
240
264
|
} }
|
|
241
265
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
242
|
-
const
|
|
243
|
-
i0.ɵɵelementStart(0, "div",
|
|
244
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
266
|
+
const _r23 = i0.ɵɵgetCurrentView();
|
|
267
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
268
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r23); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
245
269
|
i0.ɵɵtext(2, "Open");
|
|
246
270
|
i0.ɵɵelementEnd()();
|
|
247
271
|
} }
|
|
248
272
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
249
|
-
i0.ɵɵelementStart(0, "div",
|
|
250
|
-
i0.ɵɵelement(1, "img",
|
|
251
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template, 3, 0, "div",
|
|
273
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
274
|
+
i0.ɵɵelement(1, "img", 48);
|
|
275
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template, 3, 0, "div", 49);
|
|
252
276
|
i0.ɵɵelementEnd();
|
|
253
277
|
} if (rf & 2) {
|
|
254
|
-
const
|
|
278
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
255
279
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
256
280
|
i0.ɵɵadvance();
|
|
257
|
-
i0.ɵɵproperty("src",
|
|
281
|
+
i0.ɵɵproperty("src", pin_r21.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r21.DisplayName);
|
|
258
282
|
i0.ɵɵadvance();
|
|
259
283
|
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
260
284
|
} }
|
|
261
285
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
262
|
-
const
|
|
263
|
-
i0.ɵɵelementStart(0, "div",
|
|
264
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
265
|
-
i0.ɵɵtext(2, "
|
|
286
|
+
const _r24 = i0.ɵɵgetCurrentView();
|
|
287
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
288
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r24); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
289
|
+
i0.ɵɵtext(2, "Run");
|
|
266
290
|
i0.ɵɵelementEnd()();
|
|
267
291
|
} }
|
|
268
292
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
269
|
-
i0.ɵɵelementStart(0, "div",
|
|
293
|
+
i0.ɵɵelementStart(0, "div", 51);
|
|
270
294
|
i0.ɵɵelement(1, "i");
|
|
271
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template, 3, 0, "div",
|
|
295
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template, 3, 0, "div", 49);
|
|
272
296
|
i0.ɵɵelementEnd();
|
|
273
297
|
} if (rf & 2) {
|
|
274
|
-
const
|
|
298
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
275
299
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
276
|
-
i0.ɵɵstyleProp("
|
|
300
|
+
i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r21) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r21) + "cc 100%)");
|
|
277
301
|
i0.ɵɵadvance();
|
|
278
|
-
i0.ɵɵclassMap(ctx_r2.GetPinIcon(
|
|
302
|
+
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
|
|
279
303
|
i0.ɵɵadvance();
|
|
280
304
|
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
281
305
|
} }
|
|
282
|
-
function
|
|
283
|
-
const
|
|
284
|
-
i0.ɵɵelementStart(0, "
|
|
285
|
-
i0.ɵɵlistener("
|
|
306
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
307
|
+
const _r25 = i0.ɵɵgetCurrentView();
|
|
308
|
+
i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
|
|
309
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
310
|
+
i0.ɵɵtext(2, "Open");
|
|
311
|
+
i0.ɵɵelementEnd()();
|
|
312
|
+
} }
|
|
313
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
314
|
+
i0.ɵɵelementStart(0, "div", 52);
|
|
315
|
+
i0.ɵɵelement(1, "i");
|
|
316
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template, 3, 0, "div", 49);
|
|
286
317
|
i0.ɵɵelementEnd();
|
|
287
318
|
} if (rf & 2) {
|
|
288
|
-
const
|
|
289
|
-
i0.ɵɵ
|
|
319
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
320
|
+
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
321
|
+
i0.ɵɵstyleProp("--pin-icon-color", pin_r21.Color || "var(--mj-text-muted)");
|
|
322
|
+
i0.ɵɵadvance();
|
|
323
|
+
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
|
|
324
|
+
i0.ɵɵadvance();
|
|
325
|
+
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
290
326
|
} }
|
|
291
|
-
function
|
|
327
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
292
328
|
const _r26 = i0.ɵɵgetCurrentView();
|
|
293
|
-
i0.ɵɵelementStart(0, "
|
|
294
|
-
i0.ɵɵlistener("click", function
|
|
295
|
-
i0.ɵɵelement(1, "i", 53);
|
|
329
|
+
i0.ɵɵelementStart(0, "input", 53);
|
|
330
|
+
i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r26); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r21.Id, $event.target.value)); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r26); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r21.Id, $event.target.value)); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
296
331
|
i0.ɵɵelementEnd();
|
|
332
|
+
} if (rf & 2) {
|
|
333
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
334
|
+
i0.ɵɵproperty("value", pin_r21.DisplayName);
|
|
297
335
|
} }
|
|
298
|
-
function
|
|
299
|
-
const
|
|
300
|
-
i0.ɵɵelementStart(0, "
|
|
301
|
-
i0.ɵɵlistener("click", function
|
|
336
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
337
|
+
const _r28 = i0.ɵɵgetCurrentView();
|
|
338
|
+
i0.ɵɵelementStart(0, "button", 56);
|
|
339
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
340
|
+
i0.ɵɵelement(1, "i", 57);
|
|
341
|
+
i0.ɵɵelementEnd();
|
|
342
|
+
} }
|
|
343
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
344
|
+
const _r27 = i0.ɵɵgetCurrentView();
|
|
345
|
+
i0.ɵɵelementStart(0, "div", 54);
|
|
346
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r21.Id, $event) : null); });
|
|
302
347
|
i0.ɵɵtext(1);
|
|
303
|
-
i0.ɵɵconditionalCreate(2,
|
|
348
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template, 2, 0, "button", 55);
|
|
304
349
|
i0.ɵɵelementEnd();
|
|
305
350
|
} if (rf & 2) {
|
|
306
|
-
const
|
|
351
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
307
352
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
308
353
|
i0.ɵɵadvance();
|
|
309
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
354
|
+
i0.ɵɵtextInterpolate1(" ", pin_r21.DisplayName, " ");
|
|
310
355
|
i0.ɵɵadvance();
|
|
311
356
|
i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
|
|
312
357
|
} }
|
|
313
|
-
function
|
|
314
|
-
i0.ɵɵelementStart(0, "span",
|
|
358
|
+
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
359
|
+
i0.ɵɵelementStart(0, "span", 42);
|
|
315
360
|
i0.ɵɵtext(1);
|
|
316
361
|
i0.ɵɵelementEnd();
|
|
317
362
|
} if (rf & 2) {
|
|
318
|
-
const
|
|
363
|
+
const pin_r21 = i0.ɵɵnextContext().$implicit;
|
|
319
364
|
i0.ɵɵadvance();
|
|
320
|
-
i0.ɵɵtextInterpolate(
|
|
365
|
+
i0.ɵɵtextInterpolate(pin_r21.ApplicationName);
|
|
321
366
|
} }
|
|
322
367
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
323
|
-
const
|
|
324
|
-
i0.ɵɵelementStart(0, "div",
|
|
325
|
-
i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragstart_0_listener($event) { const
|
|
326
|
-
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template, 6, 0, "div",
|
|
327
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template, 3, 3, "div",
|
|
328
|
-
i0.ɵɵelementStart(
|
|
329
|
-
i0.ɵɵconditionalCreate(
|
|
330
|
-
i0.ɵɵelementStart(
|
|
331
|
-
i0.ɵɵelement(
|
|
332
|
-
i0.ɵɵtext(
|
|
333
|
-
i0.ɵɵconditionalCreate(
|
|
368
|
+
const _r20 = i0.ɵɵgetCurrentView();
|
|
369
|
+
i0.ɵɵelementStart(0, "div", 33);
|
|
370
|
+
i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragstart_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r21)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragover_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r21)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_drop_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r21)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_click_0_listener() { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r21)); });
|
|
371
|
+
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template, 6, 0, "div", 34);
|
|
372
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template, 3, 3, "div", 35)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template, 3, 5, "div", 36)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template, 3, 5, "div", 37);
|
|
373
|
+
i0.ɵɵelementStart(5, "div", 38);
|
|
374
|
+
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template, 1, 1, "input", 39)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template, 3, 2, "div", 40);
|
|
375
|
+
i0.ɵɵelementStart(8, "div", 41);
|
|
376
|
+
i0.ɵɵelement(9, "i");
|
|
377
|
+
i0.ɵɵtext(10);
|
|
378
|
+
i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template, 2, 1, "span", 42);
|
|
334
379
|
i0.ɵɵelementEnd()()();
|
|
335
380
|
} if (rf & 2) {
|
|
336
|
-
const
|
|
381
|
+
const pin_r21 = ctx.$implicit;
|
|
337
382
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
338
|
-
i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId ===
|
|
383
|
+
i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r21.Id)("drag-over", ctx_r2.DragOverPinId === pin_r21.Id);
|
|
339
384
|
i0.ɵɵproperty("draggable", ctx_r2.EditMode);
|
|
340
385
|
i0.ɵɵadvance();
|
|
341
386
|
i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
|
|
342
387
|
i0.ɵɵadvance();
|
|
343
|
-
i0.ɵɵconditional(
|
|
344
|
-
i0.ɵɵadvance(
|
|
345
|
-
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId ===
|
|
388
|
+
i0.ɵɵconditional(pin_r21.Thumbnail ? 2 : pin_r21.ResourceType === "Actions" ? 3 : 4);
|
|
389
|
+
i0.ɵɵadvance(4);
|
|
390
|
+
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r21.Id ? 6 : 7);
|
|
346
391
|
i0.ɵɵadvance(3);
|
|
347
|
-
i0.ɵɵclassMap(ctx_r2.GetPinIcon(
|
|
392
|
+
i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
|
|
348
393
|
i0.ɵɵadvance();
|
|
349
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(
|
|
394
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r21), " ");
|
|
350
395
|
i0.ɵɵadvance();
|
|
351
|
-
i0.ɵɵconditional(
|
|
396
|
+
i0.ɵɵconditional(pin_r21.ApplicationName ? 11 : -1);
|
|
352
397
|
} }
|
|
353
398
|
function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Template(rf, ctx) { if (rf & 1) {
|
|
354
|
-
i0.ɵɵelementStart(0, "div",
|
|
355
|
-
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template, 1, 1, "input",
|
|
356
|
-
i0.ɵɵelement(3, "div",
|
|
357
|
-
i0.ɵɵelementStart(4, "span",
|
|
399
|
+
i0.ɵɵelementStart(0, "div", 58);
|
|
400
|
+
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template, 1, 1, "input", 59)(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template, 2, 1, "span", 60);
|
|
401
|
+
i0.ɵɵelement(3, "div", 61);
|
|
402
|
+
i0.ɵɵelementStart(4, "span", 62);
|
|
358
403
|
i0.ɵɵtext(5);
|
|
359
404
|
i0.ɵɵelementEnd();
|
|
360
|
-
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template, 4, 0, "div",
|
|
405
|
+
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template, 4, 0, "div", 63);
|
|
361
406
|
i0.ɵɵelementEnd();
|
|
362
|
-
i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template,
|
|
407
|
+
i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template, 12, 14, "div", 31, i0.ɵɵcomponentInstance().trackByPin, true);
|
|
363
408
|
} if (rf & 2) {
|
|
364
|
-
const
|
|
409
|
+
const group_r17 = ctx.$implicit;
|
|
365
410
|
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
366
411
|
i0.ɵɵadvance();
|
|
367
|
-
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName ===
|
|
412
|
+
i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName === group_r17 ? 1 : 2);
|
|
368
413
|
i0.ɵɵadvance(4);
|
|
369
|
-
i0.ɵɵtextInterpolate1("", ctx_r2.GetPinsInGroup(
|
|
414
|
+
i0.ɵɵtextInterpolate1("", ctx_r2.GetPinsInGroup(group_r17).length, " pins");
|
|
370
415
|
i0.ɵɵadvance();
|
|
371
416
|
i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
|
|
372
417
|
i0.ɵɵadvance();
|
|
373
|
-
i0.ɵɵrepeater(ctx_r2.GetPinsInGroup(
|
|
418
|
+
i0.ɵɵrepeater(ctx_r2.GetPinsInGroup(group_r17));
|
|
374
419
|
} }
|
|
375
420
|
function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
376
|
-
const
|
|
377
|
-
i0.ɵɵelementStart(0, "div",
|
|
378
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
379
|
-
i0.ɵɵelement(1, "i",
|
|
421
|
+
const _r29 = i0.ɵɵgetCurrentView();
|
|
422
|
+
i0.ɵɵelementStart(0, "div", 68);
|
|
423
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
|
|
424
|
+
i0.ɵɵelement(1, "i", 26);
|
|
380
425
|
i0.ɵɵelementStart(2, "span");
|
|
381
426
|
i0.ɵɵtext(3, "Add Pin");
|
|
382
427
|
i0.ɵɵelementEnd()();
|
|
383
428
|
} }
|
|
384
429
|
function HomeDashboardComponent_Conditional_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
385
|
-
i0.ɵɵelementStart(0, "div",
|
|
386
|
-
i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template,
|
|
430
|
+
i0.ɵɵelementStart(0, "div", 22);
|
|
431
|
+
i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template, 12, 14, "div", 31, i0.ɵɵcomponentInstance().trackByPin, true);
|
|
387
432
|
i0.ɵɵrepeaterCreate(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Template, 9, 3, null, null, i0.ɵɵcomponentInstance().trackByGroup, true);
|
|
388
|
-
i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template, 4, 0, "div",
|
|
433
|
+
i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template, 4, 0, "div", 32);
|
|
389
434
|
i0.ɵɵelementEnd();
|
|
390
435
|
} if (rf & 2) {
|
|
391
436
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -397,16 +442,16 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_Template(rf, ctx) {
|
|
|
397
442
|
i0.ɵɵconditional(ctx_r2.EditMode ? 5 : -1);
|
|
398
443
|
} }
|
|
399
444
|
function HomeDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
400
|
-
i0.ɵɵelementStart(0, "div", 6)(1, "div",
|
|
401
|
-
i0.ɵɵelement(3, "i",
|
|
445
|
+
i0.ɵɵelementStart(0, "div", 6)(1, "div", 15)(2, "h2", 16);
|
|
446
|
+
i0.ɵɵelement(3, "i", 17);
|
|
402
447
|
i0.ɵɵtext(4, " Pinned ");
|
|
403
448
|
i0.ɵɵelementEnd();
|
|
404
|
-
i0.ɵɵelementStart(5, "div",
|
|
405
|
-
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_6_Template, 3, 0, "button",
|
|
449
|
+
i0.ɵɵelementStart(5, "div", 18);
|
|
450
|
+
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_6_Template, 3, 0, "button", 19)(7, HomeDashboardComponent_Conditional_8_Conditional_7_Template, 4, 1);
|
|
406
451
|
i0.ɵɵelementEnd()();
|
|
407
|
-
i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_8_Conditional_8_Template, 6, 0, "div",
|
|
408
|
-
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_8_Conditional_9_Template, 9, 0, "div",
|
|
409
|
-
i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_8_Conditional_10_Template, 6, 1, "div",
|
|
452
|
+
i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_8_Conditional_8_Template, 6, 0, "div", 20);
|
|
453
|
+
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_8_Conditional_9_Template, 9, 0, "div", 21);
|
|
454
|
+
i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_8_Conditional_10_Template, 6, 1, "div", 22);
|
|
410
455
|
i0.ɵɵelementEnd();
|
|
411
456
|
} if (rf & 2) {
|
|
412
457
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -420,53 +465,53 @@ function HomeDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
420
465
|
i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 10 : -1);
|
|
421
466
|
} }
|
|
422
467
|
function HomeDashboardComponent_Conditional_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
423
|
-
const
|
|
424
|
-
i0.ɵɵelementStart(0, "div",
|
|
425
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
468
|
+
const _r31 = i0.ɵɵgetCurrentView();
|
|
469
|
+
i0.ɵɵelementStart(0, "div", 78);
|
|
470
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(undefined)); });
|
|
426
471
|
i0.ɵɵelementStart(1, "span");
|
|
427
472
|
i0.ɵɵtext(2, "(No group)");
|
|
428
473
|
i0.ɵɵelementEnd()();
|
|
429
474
|
} }
|
|
430
475
|
function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
431
|
-
const
|
|
432
|
-
i0.ɵɵelementStart(0, "div",
|
|
433
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
476
|
+
const _r32 = i0.ɵɵgetCurrentView();
|
|
477
|
+
i0.ɵɵelementStart(0, "div", 78);
|
|
478
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const group_r33 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(group_r33)); });
|
|
434
479
|
i0.ɵɵelementStart(1, "span");
|
|
435
480
|
i0.ɵɵtext(2);
|
|
436
481
|
i0.ɵɵelementEnd()();
|
|
437
482
|
} if (rf & 2) {
|
|
438
|
-
const
|
|
483
|
+
const group_r33 = i0.ɵɵnextContext().$implicit;
|
|
439
484
|
i0.ɵɵadvance(2);
|
|
440
|
-
i0.ɵɵtextInterpolate(
|
|
485
|
+
i0.ɵɵtextInterpolate(group_r33);
|
|
441
486
|
} }
|
|
442
487
|
function HomeDashboardComponent_Conditional_9_For_13_Template(rf, ctx) { if (rf & 1) {
|
|
443
|
-
i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template, 3, 1, "div",
|
|
488
|
+
i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template, 3, 1, "div", 75);
|
|
444
489
|
} if (rf & 2) {
|
|
445
|
-
const
|
|
490
|
+
const group_r33 = ctx.$implicit;
|
|
446
491
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
447
|
-
i0.ɵɵconditional(
|
|
492
|
+
i0.ɵɵconditional(group_r33 !== ctx_r2.PinMenuPin.Group ? 0 : -1);
|
|
448
493
|
} }
|
|
449
494
|
function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
450
|
-
const
|
|
451
|
-
i0.ɵɵelementStart(0, "div",
|
|
452
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_1_listener() { i0.ɵɵrestoreView(
|
|
453
|
-
i0.ɵɵelement(2, "i",
|
|
495
|
+
const _r30 = i0.ɵɵgetCurrentView();
|
|
496
|
+
i0.ɵɵelementStart(0, "div", 69)(1, "div", 70);
|
|
497
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuEdit()); });
|
|
498
|
+
i0.ɵɵelement(2, "i", 29);
|
|
454
499
|
i0.ɵɵelementStart(3, "span");
|
|
455
500
|
i0.ɵɵtext(4, "Edit");
|
|
456
501
|
i0.ɵɵelementEnd()();
|
|
457
|
-
i0.ɵɵelement(5, "div",
|
|
458
|
-
i0.ɵɵelementStart(6, "div",
|
|
459
|
-
i0.ɵɵelement(8, "i",
|
|
502
|
+
i0.ɵɵelement(5, "div", 71);
|
|
503
|
+
i0.ɵɵelementStart(6, "div", 72)(7, "div", 73);
|
|
504
|
+
i0.ɵɵelement(8, "i", 74);
|
|
460
505
|
i0.ɵɵelementStart(9, "span");
|
|
461
506
|
i0.ɵɵtext(10, "Move to Group");
|
|
462
507
|
i0.ɵɵelementEnd()();
|
|
463
|
-
i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_9_Conditional_11_Template, 3, 0, "div",
|
|
508
|
+
i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_9_Conditional_11_Template, 3, 0, "div", 75);
|
|
464
509
|
i0.ɵɵrepeaterCreate(12, HomeDashboardComponent_Conditional_9_For_13_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
|
|
465
510
|
i0.ɵɵelementEnd();
|
|
466
|
-
i0.ɵɵelement(14, "div",
|
|
467
|
-
i0.ɵɵelementStart(15, "div",
|
|
468
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_15_listener() { i0.ɵɵrestoreView(
|
|
469
|
-
i0.ɵɵelement(16, "i",
|
|
511
|
+
i0.ɵɵelement(14, "div", 71);
|
|
512
|
+
i0.ɵɵelementStart(15, "div", 76);
|
|
513
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuUnpin()); });
|
|
514
|
+
i0.ɵɵelement(16, "i", 77);
|
|
470
515
|
i0.ɵɵelementStart(17, "span");
|
|
471
516
|
i0.ɵɵtext(18, "Unpin");
|
|
472
517
|
i0.ɵɵelementEnd()()();
|
|
@@ -479,19 +524,19 @@ function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
|
479
524
|
i0.ɵɵrepeater(ctx_r2.PinGroups);
|
|
480
525
|
} }
|
|
481
526
|
function HomeDashboardComponent_Conditional_10_For_20_Template(rf, ctx) { if (rf & 1) {
|
|
482
|
-
i0.ɵɵelementStart(0, "option",
|
|
527
|
+
i0.ɵɵelementStart(0, "option", 90);
|
|
483
528
|
i0.ɵɵtext(1);
|
|
484
529
|
i0.ɵɵelementEnd();
|
|
485
530
|
} if (rf & 2) {
|
|
486
|
-
const
|
|
487
|
-
i0.ɵɵproperty("value",
|
|
531
|
+
const group_r35 = ctx.$implicit;
|
|
532
|
+
i0.ɵɵproperty("value", group_r35);
|
|
488
533
|
i0.ɵɵadvance();
|
|
489
|
-
i0.ɵɵtextInterpolate(
|
|
534
|
+
i0.ɵɵtextInterpolate(group_r35);
|
|
490
535
|
} }
|
|
491
536
|
function HomeDashboardComponent_Conditional_10_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
492
|
-
const
|
|
493
|
-
i0.ɵɵelementStart(0, "div",
|
|
494
|
-
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(
|
|
537
|
+
const _r36 = i0.ɵɵgetCurrentView();
|
|
538
|
+
i0.ɵɵelementStart(0, "div", 92)(1, "input", 95);
|
|
539
|
+
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelNewGroupName, $event) || (ctx_r2.AddPanelNewGroupName = $event); return i0.ɵɵresetView($event); });
|
|
495
540
|
i0.ɵɵelementEnd()();
|
|
496
541
|
} if (rf & 2) {
|
|
497
542
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -499,64 +544,64 @@ function HomeDashboardComponent_Conditional_10_Conditional_23_Template(rf, ctx)
|
|
|
499
544
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r2.AddPanelNewGroupName);
|
|
500
545
|
} }
|
|
501
546
|
function HomeDashboardComponent_Conditional_10_Conditional_25_Template(rf, ctx) { if (rf & 1) {
|
|
502
|
-
i0.ɵɵelementStart(0, "div",
|
|
503
|
-
i0.ɵɵelement(1, "mj-loading",
|
|
547
|
+
i0.ɵɵelementStart(0, "div", 94);
|
|
548
|
+
i0.ɵɵelement(1, "mj-loading", 96);
|
|
504
549
|
i0.ɵɵelementEnd();
|
|
505
550
|
} }
|
|
506
551
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
507
|
-
i0.ɵɵelementStart(0, "button",
|
|
508
|
-
i0.ɵɵelement(1, "i",
|
|
552
|
+
i0.ɵɵelementStart(0, "button", 110);
|
|
553
|
+
i0.ɵɵelement(1, "i", 24);
|
|
509
554
|
i0.ɵɵtext(2, " Pinned");
|
|
510
555
|
i0.ɵɵelementEnd();
|
|
511
556
|
} }
|
|
512
557
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
513
|
-
const
|
|
514
|
-
i0.ɵɵelementStart(0, "button",
|
|
515
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
516
|
-
i0.ɵɵelement(1, "i",
|
|
558
|
+
const _r38 = i0.ɵɵgetCurrentView();
|
|
559
|
+
i0.ɵɵelementStart(0, "button", 112);
|
|
560
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r38); const ni_r39 = i0.ɵɵnextContext().$implicit; const app_r40 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinAppNavItem(app_r40.appName, app_r40.icon, app_r40.color, ni_r39.label, ni_r39.icon)); });
|
|
561
|
+
i0.ɵɵelement(1, "i", 26);
|
|
517
562
|
i0.ɵɵtext(2, " Pin ");
|
|
518
563
|
i0.ɵɵelementEnd();
|
|
519
564
|
} }
|
|
520
565
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template(rf, ctx) { if (rf & 1) {
|
|
521
|
-
i0.ɵɵelementStart(0, "div",
|
|
566
|
+
i0.ɵɵelementStart(0, "div", 105)(1, "div", 106);
|
|
522
567
|
i0.ɵɵelement(2, "i");
|
|
523
568
|
i0.ɵɵelementEnd();
|
|
524
|
-
i0.ɵɵelementStart(3, "div",
|
|
569
|
+
i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
|
|
525
570
|
i0.ɵɵtext(5);
|
|
526
571
|
i0.ɵɵelementEnd()();
|
|
527
|
-
i0.ɵɵelementStart(6, "div",
|
|
528
|
-
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template, 3, 0, "button",
|
|
572
|
+
i0.ɵɵelementStart(6, "div", 109);
|
|
573
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template, 3, 0, "button", 111);
|
|
529
574
|
i0.ɵɵelementEnd()();
|
|
530
575
|
} if (rf & 2) {
|
|
531
|
-
const
|
|
532
|
-
const
|
|
576
|
+
const ni_r39 = ctx.$implicit;
|
|
577
|
+
const app_r40 = i0.ɵɵnextContext().$implicit;
|
|
533
578
|
i0.ɵɵadvance();
|
|
534
|
-
i0.ɵɵstyleProp("background", "color-mix(in srgb, " +
|
|
579
|
+
i0.ɵɵstyleProp("background", "color-mix(in srgb, " + app_r40.color + " 10%, var(--mj-bg-surface-card))");
|
|
535
580
|
i0.ɵɵadvance();
|
|
536
|
-
i0.ɵɵclassMap(
|
|
537
|
-
i0.ɵɵstyleProp("color",
|
|
581
|
+
i0.ɵɵclassMap(ni_r39.icon);
|
|
582
|
+
i0.ɵɵstyleProp("color", app_r40.color);
|
|
538
583
|
i0.ɵɵadvance(3);
|
|
539
|
-
i0.ɵɵtextInterpolate(
|
|
584
|
+
i0.ɵɵtextInterpolate(ni_r39.label);
|
|
540
585
|
i0.ɵɵadvance(2);
|
|
541
|
-
i0.ɵɵconditional(
|
|
586
|
+
i0.ɵɵconditional(ni_r39.pinned ? 7 : 8);
|
|
542
587
|
} }
|
|
543
588
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
544
|
-
i0.ɵɵelementStart(0, "div",
|
|
589
|
+
i0.ɵɵelementStart(0, "div", 102)(1, "div", 103);
|
|
545
590
|
i0.ɵɵelement(2, "i");
|
|
546
591
|
i0.ɵɵelementEnd();
|
|
547
|
-
i0.ɵɵelementStart(3, "span",
|
|
592
|
+
i0.ɵɵelementStart(3, "span", 104);
|
|
548
593
|
i0.ɵɵtext(4);
|
|
549
594
|
i0.ɵɵelementEnd()();
|
|
550
|
-
i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template, 9, 8, "div",
|
|
595
|
+
i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template, 9, 8, "div", 105, _forTrack1);
|
|
551
596
|
} if (rf & 2) {
|
|
552
|
-
const
|
|
553
|
-
i0.ɵɵstyleProp("--panel-app-color",
|
|
597
|
+
const app_r40 = ctx.$implicit;
|
|
598
|
+
i0.ɵɵstyleProp("--panel-app-color", app_r40.color);
|
|
554
599
|
i0.ɵɵadvance(2);
|
|
555
|
-
i0.ɵɵclassMap(
|
|
600
|
+
i0.ɵɵclassMap(app_r40.icon);
|
|
556
601
|
i0.ɵɵadvance(2);
|
|
557
|
-
i0.ɵɵtextInterpolate(
|
|
602
|
+
i0.ɵɵtextInterpolate(app_r40.appName);
|
|
558
603
|
i0.ɵɵadvance();
|
|
559
|
-
i0.ɵɵrepeater(
|
|
604
|
+
i0.ɵɵrepeater(app_r40.navItems);
|
|
560
605
|
} }
|
|
561
606
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
562
607
|
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_Template, 7, 5, null, null, _forTrack0);
|
|
@@ -565,15 +610,15 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Cond
|
|
|
565
610
|
i0.ɵɵrepeater(ctx_r2.FilterApps());
|
|
566
611
|
} }
|
|
567
612
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
568
|
-
const
|
|
569
|
-
i0.ɵɵelementStart(0, "div",
|
|
570
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(
|
|
571
|
-
i0.ɵɵelement(2, "i",
|
|
613
|
+
const _r37 = i0.ɵɵgetCurrentView();
|
|
614
|
+
i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
|
|
615
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("apps")); });
|
|
616
|
+
i0.ɵɵelement(2, "i", 99);
|
|
572
617
|
i0.ɵɵtext(3, " Applications ");
|
|
573
|
-
i0.ɵɵelementStart(4, "span",
|
|
618
|
+
i0.ɵɵelementStart(4, "span", 100);
|
|
574
619
|
i0.ɵɵtext(5);
|
|
575
620
|
i0.ɵɵelementEnd();
|
|
576
|
-
i0.ɵɵelement(6, "i",
|
|
621
|
+
i0.ɵɵelement(6, "i", 101);
|
|
577
622
|
i0.ɵɵelementEnd();
|
|
578
623
|
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_Template, 2, 0);
|
|
579
624
|
i0.ɵɵelementEnd();
|
|
@@ -587,52 +632,52 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Temp
|
|
|
587
632
|
i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["apps"] ? 7 : -1);
|
|
588
633
|
} }
|
|
589
634
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
590
|
-
i0.ɵɵelementStart(0, "button",
|
|
591
|
-
i0.ɵɵelement(1, "i",
|
|
635
|
+
i0.ɵɵelementStart(0, "button", 110);
|
|
636
|
+
i0.ɵɵelement(1, "i", 24);
|
|
592
637
|
i0.ɵɵtext(2, " Pinned");
|
|
593
638
|
i0.ɵɵelementEnd();
|
|
594
639
|
} }
|
|
595
640
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
596
|
-
const
|
|
597
|
-
i0.ɵɵelementStart(0, "button",
|
|
598
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
599
|
-
i0.ɵɵelement(1, "i",
|
|
641
|
+
const _r42 = i0.ɵɵgetCurrentView();
|
|
642
|
+
i0.ɵɵelementStart(0, "button", 112);
|
|
643
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r42); const item_r43 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Dashboards", item_r43.id, item_r43.name)); });
|
|
644
|
+
i0.ɵɵelement(1, "i", 26);
|
|
600
645
|
i0.ɵɵtext(2, " Pin ");
|
|
601
646
|
i0.ɵɵelementEnd();
|
|
602
647
|
} }
|
|
603
648
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
604
|
-
i0.ɵɵelementStart(0, "div",
|
|
605
|
-
i0.ɵɵelement(2, "i",
|
|
649
|
+
i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
|
|
650
|
+
i0.ɵɵelement(2, "i", 116);
|
|
606
651
|
i0.ɵɵelementEnd();
|
|
607
|
-
i0.ɵɵelementStart(3, "div",
|
|
652
|
+
i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
|
|
608
653
|
i0.ɵɵtext(5);
|
|
609
654
|
i0.ɵɵelementEnd()();
|
|
610
|
-
i0.ɵɵelementStart(6, "div",
|
|
611
|
-
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button",
|
|
655
|
+
i0.ɵɵelementStart(6, "div", 109);
|
|
656
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 111);
|
|
612
657
|
i0.ɵɵelementEnd()();
|
|
613
658
|
} if (rf & 2) {
|
|
614
|
-
const
|
|
659
|
+
const item_r43 = ctx.$implicit;
|
|
615
660
|
i0.ɵɵadvance(5);
|
|
616
|
-
i0.ɵɵtextInterpolate(
|
|
661
|
+
i0.ɵɵtextInterpolate(item_r43.name);
|
|
617
662
|
i0.ɵɵadvance(2);
|
|
618
|
-
i0.ɵɵconditional(
|
|
663
|
+
i0.ɵɵconditional(item_r43.pinned ? 7 : 8);
|
|
619
664
|
} }
|
|
620
665
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
621
|
-
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template, 9, 2, "div",
|
|
666
|
+
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template, 9, 2, "div", 114, _forTrack2);
|
|
622
667
|
} if (rf & 2) {
|
|
623
668
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
624
669
|
i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableDashboards));
|
|
625
670
|
} }
|
|
626
671
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
627
|
-
const
|
|
628
|
-
i0.ɵɵelementStart(0, "div",
|
|
629
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template_div_click_1_listener() { i0.ɵɵrestoreView(
|
|
630
|
-
i0.ɵɵelement(2, "i",
|
|
672
|
+
const _r41 = i0.ɵɵgetCurrentView();
|
|
673
|
+
i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
|
|
674
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("dashboards")); });
|
|
675
|
+
i0.ɵɵelement(2, "i", 113);
|
|
631
676
|
i0.ɵɵtext(3, " Dashboards ");
|
|
632
|
-
i0.ɵɵelementStart(4, "span",
|
|
677
|
+
i0.ɵɵelementStart(4, "span", 100);
|
|
633
678
|
i0.ɵɵtext(5);
|
|
634
679
|
i0.ɵɵelementEnd();
|
|
635
|
-
i0.ɵɵelement(6, "i",
|
|
680
|
+
i0.ɵɵelement(6, "i", 101);
|
|
636
681
|
i0.ɵɵelementEnd();
|
|
637
682
|
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_Template, 2, 0);
|
|
638
683
|
i0.ɵɵelementEnd();
|
|
@@ -646,57 +691,57 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Temp
|
|
|
646
691
|
i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["dashboards"] ? 7 : -1);
|
|
647
692
|
} }
|
|
648
693
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
649
|
-
i0.ɵɵelementStart(0, "button",
|
|
650
|
-
i0.ɵɵelement(1, "i",
|
|
694
|
+
i0.ɵɵelementStart(0, "button", 110);
|
|
695
|
+
i0.ɵɵelement(1, "i", 24);
|
|
651
696
|
i0.ɵɵtext(2, " Pinned");
|
|
652
697
|
i0.ɵɵelementEnd();
|
|
653
698
|
} }
|
|
654
699
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
655
|
-
const
|
|
656
|
-
i0.ɵɵelementStart(0, "button",
|
|
657
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
658
|
-
i0.ɵɵelement(1, "i",
|
|
700
|
+
const _r45 = i0.ɵɵgetCurrentView();
|
|
701
|
+
i0.ɵɵelementStart(0, "button", 112);
|
|
702
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r45); const item_r46 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("User Views", item_r46.id, item_r46.name)); });
|
|
703
|
+
i0.ɵɵelement(1, "i", 26);
|
|
659
704
|
i0.ɵɵtext(2, " Pin ");
|
|
660
705
|
i0.ɵɵelementEnd();
|
|
661
706
|
} }
|
|
662
707
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
663
|
-
i0.ɵɵelementStart(0, "div",
|
|
664
|
-
i0.ɵɵelement(2, "i",
|
|
708
|
+
i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
|
|
709
|
+
i0.ɵɵelement(2, "i", 118);
|
|
665
710
|
i0.ɵɵelementEnd();
|
|
666
|
-
i0.ɵɵelementStart(3, "div",
|
|
711
|
+
i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
|
|
667
712
|
i0.ɵɵtext(5);
|
|
668
713
|
i0.ɵɵelementEnd();
|
|
669
|
-
i0.ɵɵelementStart(6, "div",
|
|
714
|
+
i0.ɵɵelementStart(6, "div", 119);
|
|
670
715
|
i0.ɵɵtext(7);
|
|
671
716
|
i0.ɵɵelementEnd()();
|
|
672
|
-
i0.ɵɵelementStart(8, "div",
|
|
673
|
-
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template, 3, 0, "button",
|
|
717
|
+
i0.ɵɵelementStart(8, "div", 109);
|
|
718
|
+
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template, 3, 0, "button", 110)(10, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template, 3, 0, "button", 111);
|
|
674
719
|
i0.ɵɵelementEnd()();
|
|
675
720
|
} if (rf & 2) {
|
|
676
|
-
const
|
|
721
|
+
const item_r46 = ctx.$implicit;
|
|
677
722
|
i0.ɵɵadvance(5);
|
|
678
|
-
i0.ɵɵtextInterpolate(
|
|
723
|
+
i0.ɵɵtextInterpolate(item_r46.name);
|
|
679
724
|
i0.ɵɵadvance(2);
|
|
680
|
-
i0.ɵɵtextInterpolate(
|
|
725
|
+
i0.ɵɵtextInterpolate(item_r46.entityName);
|
|
681
726
|
i0.ɵɵadvance(2);
|
|
682
|
-
i0.ɵɵconditional(
|
|
727
|
+
i0.ɵɵconditional(item_r46.pinned ? 9 : 10);
|
|
683
728
|
} }
|
|
684
729
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
685
|
-
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template, 11, 3, "div",
|
|
730
|
+
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template, 11, 3, "div", 114, _forTrack2);
|
|
686
731
|
} if (rf & 2) {
|
|
687
732
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
688
733
|
i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableViews));
|
|
689
734
|
} }
|
|
690
735
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
691
|
-
const
|
|
692
|
-
i0.ɵɵelementStart(0, "div",
|
|
693
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template_div_click_1_listener() { i0.ɵɵrestoreView(
|
|
694
|
-
i0.ɵɵelement(2, "i",
|
|
736
|
+
const _r44 = i0.ɵɵgetCurrentView();
|
|
737
|
+
i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
|
|
738
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("views")); });
|
|
739
|
+
i0.ɵɵelement(2, "i", 117);
|
|
695
740
|
i0.ɵɵtext(3, " Views ");
|
|
696
|
-
i0.ɵɵelementStart(4, "span",
|
|
741
|
+
i0.ɵɵelementStart(4, "span", 100);
|
|
697
742
|
i0.ɵɵtext(5);
|
|
698
743
|
i0.ɵɵelementEnd();
|
|
699
|
-
i0.ɵɵelement(6, "i",
|
|
744
|
+
i0.ɵɵelement(6, "i", 101);
|
|
700
745
|
i0.ɵɵelementEnd();
|
|
701
746
|
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_Template, 2, 0);
|
|
702
747
|
i0.ɵɵelementEnd();
|
|
@@ -710,52 +755,52 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Temp
|
|
|
710
755
|
i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["views"] ? 7 : -1);
|
|
711
756
|
} }
|
|
712
757
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
713
|
-
i0.ɵɵelementStart(0, "button",
|
|
714
|
-
i0.ɵɵelement(1, "i",
|
|
758
|
+
i0.ɵɵelementStart(0, "button", 110);
|
|
759
|
+
i0.ɵɵelement(1, "i", 24);
|
|
715
760
|
i0.ɵɵtext(2, " Pinned");
|
|
716
761
|
i0.ɵɵelementEnd();
|
|
717
762
|
} }
|
|
718
763
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
719
|
-
const
|
|
720
|
-
i0.ɵɵelementStart(0, "button",
|
|
721
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
722
|
-
i0.ɵɵelement(1, "i",
|
|
764
|
+
const _r48 = i0.ɵɵgetCurrentView();
|
|
765
|
+
i0.ɵɵelementStart(0, "button", 112);
|
|
766
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r48); const item_r49 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Queries", item_r49.id, item_r49.name)); });
|
|
767
|
+
i0.ɵɵelement(1, "i", 26);
|
|
723
768
|
i0.ɵɵtext(2, " Pin ");
|
|
724
769
|
i0.ɵɵelementEnd();
|
|
725
770
|
} }
|
|
726
771
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
727
|
-
i0.ɵɵelementStart(0, "div",
|
|
728
|
-
i0.ɵɵelement(2, "i",
|
|
772
|
+
i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
|
|
773
|
+
i0.ɵɵelement(2, "i", 121);
|
|
729
774
|
i0.ɵɵelementEnd();
|
|
730
|
-
i0.ɵɵelementStart(3, "div",
|
|
775
|
+
i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
|
|
731
776
|
i0.ɵɵtext(5);
|
|
732
777
|
i0.ɵɵelementEnd()();
|
|
733
|
-
i0.ɵɵelementStart(6, "div",
|
|
734
|
-
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button",
|
|
778
|
+
i0.ɵɵelementStart(6, "div", 109);
|
|
779
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 111);
|
|
735
780
|
i0.ɵɵelementEnd()();
|
|
736
781
|
} if (rf & 2) {
|
|
737
|
-
const
|
|
782
|
+
const item_r49 = ctx.$implicit;
|
|
738
783
|
i0.ɵɵadvance(5);
|
|
739
|
-
i0.ɵɵtextInterpolate(
|
|
784
|
+
i0.ɵɵtextInterpolate(item_r49.name);
|
|
740
785
|
i0.ɵɵadvance(2);
|
|
741
|
-
i0.ɵɵconditional(
|
|
786
|
+
i0.ɵɵconditional(item_r49.pinned ? 7 : 8);
|
|
742
787
|
} }
|
|
743
788
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
744
|
-
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template, 9, 2, "div",
|
|
789
|
+
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template, 9, 2, "div", 114, _forTrack2);
|
|
745
790
|
} if (rf & 2) {
|
|
746
791
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
747
792
|
i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableQueries));
|
|
748
793
|
} }
|
|
749
794
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
750
|
-
const
|
|
751
|
-
i0.ɵɵelementStart(0, "div",
|
|
752
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(
|
|
753
|
-
i0.ɵɵelement(2, "i",
|
|
795
|
+
const _r47 = i0.ɵɵgetCurrentView();
|
|
796
|
+
i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
|
|
797
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r47); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("queries")); });
|
|
798
|
+
i0.ɵɵelement(2, "i", 120);
|
|
754
799
|
i0.ɵɵtext(3, " Queries ");
|
|
755
|
-
i0.ɵɵelementStart(4, "span",
|
|
800
|
+
i0.ɵɵelementStart(4, "span", 100);
|
|
756
801
|
i0.ɵɵtext(5);
|
|
757
802
|
i0.ɵɵelementEnd();
|
|
758
|
-
i0.ɵɵelement(6, "i",
|
|
803
|
+
i0.ɵɵelement(6, "i", 101);
|
|
759
804
|
i0.ɵɵelementEnd();
|
|
760
805
|
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_Template, 2, 0);
|
|
761
806
|
i0.ɵɵelementEnd();
|
|
@@ -768,11 +813,71 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Temp
|
|
|
768
813
|
i0.ɵɵadvance();
|
|
769
814
|
i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["queries"] ? 7 : -1);
|
|
770
815
|
} }
|
|
816
|
+
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
817
|
+
i0.ɵɵelementStart(0, "div", 119);
|
|
818
|
+
i0.ɵɵtext(1);
|
|
819
|
+
i0.ɵɵelementEnd();
|
|
820
|
+
} if (rf & 2) {
|
|
821
|
+
const item_r52 = i0.ɵɵnextContext().$implicit;
|
|
822
|
+
i0.ɵɵadvance();
|
|
823
|
+
i0.ɵɵtextInterpolate(item_r52.description);
|
|
824
|
+
} }
|
|
825
|
+
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
826
|
+
const _r51 = i0.ɵɵgetCurrentView();
|
|
827
|
+
i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
|
|
828
|
+
i0.ɵɵelement(2, "i", 123);
|
|
829
|
+
i0.ɵɵelementEnd();
|
|
830
|
+
i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
|
|
831
|
+
i0.ɵɵtext(5);
|
|
832
|
+
i0.ɵɵelementEnd();
|
|
833
|
+
i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Conditional_6_Template, 2, 1, "div", 119);
|
|
834
|
+
i0.ɵɵelementEnd();
|
|
835
|
+
i0.ɵɵelementStart(7, "div", 109)(8, "button", 112);
|
|
836
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template_button_click_8_listener() { const item_r52 = i0.ɵɵrestoreView(_r51).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OpenActionPinConfig(item_r52.id, item_r52.name, item_r52.description)); });
|
|
837
|
+
i0.ɵɵelement(9, "i", 124);
|
|
838
|
+
i0.ɵɵtext(10, " Configure ");
|
|
839
|
+
i0.ɵɵelementEnd()()();
|
|
840
|
+
} if (rf & 2) {
|
|
841
|
+
const item_r52 = ctx.$implicit;
|
|
842
|
+
i0.ɵɵadvance(5);
|
|
843
|
+
i0.ɵɵtextInterpolate(item_r52.name);
|
|
844
|
+
i0.ɵɵadvance();
|
|
845
|
+
i0.ɵɵconditional(item_r52.description ? 6 : -1);
|
|
846
|
+
} }
|
|
847
|
+
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
848
|
+
i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template, 11, 2, "div", 114, _forTrack2);
|
|
849
|
+
} if (rf & 2) {
|
|
850
|
+
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
851
|
+
i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions));
|
|
852
|
+
} }
|
|
853
|
+
function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
854
|
+
const _r50 = i0.ɵɵgetCurrentView();
|
|
855
|
+
i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
|
|
856
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r50); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("actions")); });
|
|
857
|
+
i0.ɵɵelement(2, "i", 122);
|
|
858
|
+
i0.ɵɵtext(3, " Quick Actions ");
|
|
859
|
+
i0.ɵɵelementStart(4, "span", 100);
|
|
860
|
+
i0.ɵɵtext(5);
|
|
861
|
+
i0.ɵɵelementEnd();
|
|
862
|
+
i0.ɵɵelement(6, "i", 101);
|
|
863
|
+
i0.ɵɵelementEnd();
|
|
864
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_Template, 2, 0);
|
|
865
|
+
i0.ɵɵelementEnd();
|
|
866
|
+
} if (rf & 2) {
|
|
867
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
868
|
+
i0.ɵɵadvance(5);
|
|
869
|
+
i0.ɵɵtextInterpolate(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions).length);
|
|
870
|
+
i0.ɵɵadvance();
|
|
871
|
+
i0.ɵɵclassProp("fa-chevron-down", !ctx_r2.PanelSectionCollapsed["actions"])("fa-chevron-right", ctx_r2.PanelSectionCollapsed["actions"]);
|
|
872
|
+
i0.ɵɵadvance();
|
|
873
|
+
i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["actions"] ? 7 : -1);
|
|
874
|
+
} }
|
|
771
875
|
function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx) { if (rf & 1) {
|
|
772
|
-
i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template, 8, 6, "div",
|
|
773
|
-
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template, 8, 6, "div",
|
|
774
|
-
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template, 8, 6, "div",
|
|
775
|
-
i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template, 8, 6, "div",
|
|
876
|
+
i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template, 8, 6, "div", 97);
|
|
877
|
+
i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template, 8, 6, "div", 97);
|
|
878
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template, 8, 6, "div", 97);
|
|
879
|
+
i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template, 8, 6, "div", 97);
|
|
880
|
+
i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template, 8, 6, "div", 97);
|
|
776
881
|
} if (rf & 2) {
|
|
777
882
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
778
883
|
i0.ɵɵconditional(ctx_r2.FilterApps().length > 0 ? 0 : -1);
|
|
@@ -782,41 +887,43 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx)
|
|
|
782
887
|
i0.ɵɵconditional(ctx_r2.FilterPanelItems(ctx_r2.AvailableViews).length > 0 ? 2 : -1);
|
|
783
888
|
i0.ɵɵadvance();
|
|
784
889
|
i0.ɵɵconditional(ctx_r2.FilterPanelItems(ctx_r2.AvailableQueries).length > 0 ? 3 : -1);
|
|
890
|
+
i0.ɵɵadvance();
|
|
891
|
+
i0.ɵɵconditional(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions).length > 0 ? 4 : -1);
|
|
785
892
|
} }
|
|
786
893
|
function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
787
|
-
const
|
|
788
|
-
i0.ɵɵelementStart(0, "div",
|
|
789
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
894
|
+
const _r34 = i0.ɵɵgetCurrentView();
|
|
895
|
+
i0.ɵɵelementStart(0, "div", 79);
|
|
896
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
|
|
790
897
|
i0.ɵɵelementEnd();
|
|
791
|
-
i0.ɵɵelementStart(1, "div",
|
|
792
|
-
i0.ɵɵelement(4, "i",
|
|
898
|
+
i0.ɵɵelementStart(1, "div", 80)(2, "div", 81)(3, "h3");
|
|
899
|
+
i0.ɵɵelement(4, "i", 17);
|
|
793
900
|
i0.ɵɵtext(5, " Add Pin");
|
|
794
901
|
i0.ɵɵelementEnd();
|
|
795
|
-
i0.ɵɵelementStart(6, "button",
|
|
796
|
-
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(
|
|
797
|
-
i0.ɵɵelement(7, "i",
|
|
902
|
+
i0.ɵɵelementStart(6, "button", 82);
|
|
903
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
|
|
904
|
+
i0.ɵɵelement(7, "i", 47);
|
|
798
905
|
i0.ɵɵelementEnd()();
|
|
799
|
-
i0.ɵɵelementStart(8, "div",
|
|
800
|
-
i0.ɵɵelement(10, "i",
|
|
801
|
-
i0.ɵɵelementStart(11, "input",
|
|
802
|
-
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(
|
|
906
|
+
i0.ɵɵelementStart(8, "div", 83)(9, "div", 84);
|
|
907
|
+
i0.ɵɵelement(10, "i", 85);
|
|
908
|
+
i0.ɵɵelementStart(11, "input", 86);
|
|
909
|
+
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSearchQuery, $event) || (ctx_r2.AddPanelSearchQuery = $event); return i0.ɵɵresetView($event); });
|
|
803
910
|
i0.ɵɵelementEnd()()();
|
|
804
|
-
i0.ɵɵelementStart(12, "div",
|
|
805
|
-
i0.ɵɵelement(14, "i",
|
|
911
|
+
i0.ɵɵelementStart(12, "div", 87)(13, "label");
|
|
912
|
+
i0.ɵɵelement(14, "i", 74);
|
|
806
913
|
i0.ɵɵtext(15, " Add to group:");
|
|
807
914
|
i0.ɵɵelementEnd();
|
|
808
|
-
i0.ɵɵelementStart(16, "select",
|
|
809
|
-
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(
|
|
810
|
-
i0.ɵɵelementStart(17, "option",
|
|
915
|
+
i0.ɵɵelementStart(16, "select", 88);
|
|
916
|
+
i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSelectedGroup, $event) || (ctx_r2.AddPanelSelectedGroup = $event); return i0.ɵɵresetView($event); });
|
|
917
|
+
i0.ɵɵelementStart(17, "option", 89);
|
|
811
918
|
i0.ɵɵtext(18, "(No group)");
|
|
812
919
|
i0.ɵɵelementEnd();
|
|
813
|
-
i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_10_For_20_Template, 2, 2, "option",
|
|
814
|
-
i0.ɵɵelementStart(21, "option",
|
|
920
|
+
i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_10_For_20_Template, 2, 2, "option", 90, i0.ɵɵrepeaterTrackByIdentity);
|
|
921
|
+
i0.ɵɵelementStart(21, "option", 91);
|
|
815
922
|
i0.ɵɵtext(22, "+ New group...");
|
|
816
923
|
i0.ɵɵelementEnd()()();
|
|
817
|
-
i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_10_Conditional_23_Template, 2, 1, "div",
|
|
818
|
-
i0.ɵɵelementStart(24, "div",
|
|
819
|
-
i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_10_Conditional_25_Template, 2, 0, "div",
|
|
924
|
+
i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_10_Conditional_23_Template, 2, 1, "div", 92);
|
|
925
|
+
i0.ɵɵelementStart(24, "div", 93);
|
|
926
|
+
i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_10_Conditional_25_Template, 2, 0, "div", 94)(26, HomeDashboardComponent_Conditional_10_Conditional_26_Template, 5, 5);
|
|
820
927
|
i0.ɵɵelementEnd()();
|
|
821
928
|
} if (rf & 2) {
|
|
822
929
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -831,86 +938,86 @@ function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
|
831
938
|
i0.ɵɵadvance(2);
|
|
832
939
|
i0.ɵɵconditional(ctx_r2.AddPanelLoading ? 25 : 26);
|
|
833
940
|
} }
|
|
834
|
-
function
|
|
835
|
-
i0.ɵɵelementStart(0, "div",
|
|
836
|
-
i0.ɵɵelement(1, "mj-loading",
|
|
941
|
+
function HomeDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
942
|
+
i0.ɵɵelementStart(0, "div", 10);
|
|
943
|
+
i0.ɵɵelement(1, "mj-loading", 125);
|
|
837
944
|
i0.ɵɵelementEnd();
|
|
838
945
|
} }
|
|
839
|
-
function
|
|
840
|
-
i0.ɵɵelementStart(0, "p",
|
|
946
|
+
function HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
947
|
+
i0.ɵɵelementStart(0, "p", 134);
|
|
841
948
|
i0.ɵɵtext(1);
|
|
842
949
|
i0.ɵɵelementEnd();
|
|
843
950
|
} if (rf & 2) {
|
|
844
|
-
const
|
|
951
|
+
const appData_r54 = i0.ɵɵnextContext().$implicit;
|
|
845
952
|
i0.ɵɵadvance();
|
|
846
|
-
i0.ɵɵtextInterpolate(
|
|
953
|
+
i0.ɵɵtextInterpolate(appData_r54.app.Description);
|
|
847
954
|
} }
|
|
848
|
-
function
|
|
849
|
-
i0.ɵɵelementStart(0, "div",
|
|
955
|
+
function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
956
|
+
i0.ɵɵelementStart(0, "div", 138);
|
|
850
957
|
i0.ɵɵelement(1, "i");
|
|
851
958
|
i0.ɵɵelementStart(2, "span");
|
|
852
959
|
i0.ɵɵtext(3);
|
|
853
960
|
i0.ɵɵelementEnd()();
|
|
854
961
|
} if (rf & 2) {
|
|
855
|
-
const
|
|
962
|
+
const item_r55 = ctx.$implicit;
|
|
856
963
|
i0.ɵɵadvance();
|
|
857
|
-
i0.ɵɵclassMap(
|
|
964
|
+
i0.ɵɵclassMap(item_r55.Icon);
|
|
858
965
|
i0.ɵɵadvance(2);
|
|
859
|
-
i0.ɵɵtextInterpolate(
|
|
966
|
+
i0.ɵɵtextInterpolate(item_r55.Label);
|
|
860
967
|
} }
|
|
861
|
-
function
|
|
862
|
-
i0.ɵɵelementStart(0, "span",
|
|
968
|
+
function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
969
|
+
i0.ɵɵelementStart(0, "span", 139);
|
|
863
970
|
i0.ɵɵtext(1);
|
|
864
971
|
i0.ɵɵelementEnd();
|
|
865
972
|
} if (rf & 2) {
|
|
866
|
-
const
|
|
973
|
+
const appData_r54 = i0.ɵɵnextContext(2).$implicit;
|
|
867
974
|
i0.ɵɵadvance();
|
|
868
|
-
i0.ɵɵtextInterpolate1(" +",
|
|
975
|
+
i0.ɵɵtextInterpolate1(" +", appData_r54.moreItemsCount, " more ");
|
|
869
976
|
} }
|
|
870
|
-
function
|
|
871
|
-
i0.ɵɵelementStart(0, "div",
|
|
872
|
-
i0.ɵɵrepeaterCreate(1,
|
|
873
|
-
i0.ɵɵconditionalCreate(3,
|
|
977
|
+
function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
978
|
+
i0.ɵɵelementStart(0, "div", 135);
|
|
979
|
+
i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template, 4, 3, "div", 138, i0.ɵɵcomponentInstance().trackByNavItem, true);
|
|
980
|
+
i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template, 2, 1, "span", 139);
|
|
874
981
|
i0.ɵɵelementEnd();
|
|
875
982
|
} if (rf & 2) {
|
|
876
|
-
const
|
|
983
|
+
const appData_r54 = i0.ɵɵnextContext().$implicit;
|
|
877
984
|
i0.ɵɵadvance();
|
|
878
|
-
i0.ɵɵrepeater(
|
|
985
|
+
i0.ɵɵrepeater(appData_r54.navItemsPreview);
|
|
879
986
|
i0.ɵɵadvance(2);
|
|
880
|
-
i0.ɵɵconditional(
|
|
987
|
+
i0.ɵɵconditional(appData_r54.showMoreItems ? 3 : -1);
|
|
881
988
|
} }
|
|
882
|
-
function
|
|
883
|
-
const
|
|
884
|
-
i0.ɵɵelementStart(0, "div",
|
|
885
|
-
i0.ɵɵlistener("click", function
|
|
886
|
-
i0.ɵɵelementStart(1, "div",
|
|
989
|
+
function HomeDashboardComponent_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
|
|
990
|
+
const _r53 = i0.ɵɵgetCurrentView();
|
|
991
|
+
i0.ɵɵelementStart(0, "div", 129);
|
|
992
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_For_6_Template_div_click_0_listener() { const appData_r54 = i0.ɵɵrestoreView(_r53).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAppClick(appData_r54.app)); });
|
|
993
|
+
i0.ɵɵelementStart(1, "div", 130)(2, "div", 131);
|
|
887
994
|
i0.ɵɵelement(3, "i");
|
|
888
995
|
i0.ɵɵelementEnd()();
|
|
889
|
-
i0.ɵɵelementStart(4, "div",
|
|
996
|
+
i0.ɵɵelementStart(4, "div", 132)(5, "h3", 133);
|
|
890
997
|
i0.ɵɵtext(6);
|
|
891
998
|
i0.ɵɵelementEnd();
|
|
892
|
-
i0.ɵɵconditionalCreate(7,
|
|
893
|
-
i0.ɵɵconditionalCreate(8,
|
|
999
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template, 2, 1, "p", 134);
|
|
1000
|
+
i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template, 4, 1, "div", 135);
|
|
894
1001
|
i0.ɵɵelementEnd();
|
|
895
|
-
i0.ɵɵelementStart(9, "div",
|
|
896
|
-
i0.ɵɵelement(10, "i",
|
|
1002
|
+
i0.ɵɵelementStart(9, "div", 136);
|
|
1003
|
+
i0.ɵɵelement(10, "i", 137);
|
|
897
1004
|
i0.ɵɵelementEnd()();
|
|
898
1005
|
} if (rf & 2) {
|
|
899
|
-
const
|
|
900
|
-
i0.ɵɵstyleProp("--app-color",
|
|
1006
|
+
const appData_r54 = ctx.$implicit;
|
|
1007
|
+
i0.ɵɵstyleProp("--app-color", appData_r54.color);
|
|
901
1008
|
i0.ɵɵadvance(3);
|
|
902
|
-
i0.ɵɵclassMap(
|
|
1009
|
+
i0.ɵɵclassMap(appData_r54.icon);
|
|
903
1010
|
i0.ɵɵadvance(3);
|
|
904
|
-
i0.ɵɵtextInterpolate(
|
|
1011
|
+
i0.ɵɵtextInterpolate(appData_r54.app.Name);
|
|
905
1012
|
i0.ɵɵadvance();
|
|
906
|
-
i0.ɵɵconditional(
|
|
1013
|
+
i0.ɵɵconditional(appData_r54.app.Description ? 7 : -1);
|
|
907
1014
|
i0.ɵɵadvance();
|
|
908
|
-
i0.ɵɵconditional(
|
|
1015
|
+
i0.ɵɵconditional(appData_r54.navItemsCount > 0 ? 8 : -1);
|
|
909
1016
|
} }
|
|
910
|
-
function
|
|
911
|
-
const
|
|
912
|
-
i0.ɵɵelementStart(0, "div",
|
|
913
|
-
i0.ɵɵelement(2, "i",
|
|
1017
|
+
function HomeDashboardComponent_Conditional_14_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
1018
|
+
const _r56 = i0.ɵɵgetCurrentView();
|
|
1019
|
+
i0.ɵɵelementStart(0, "div", 128)(1, "div", 140);
|
|
1020
|
+
i0.ɵɵelement(2, "i", 141);
|
|
914
1021
|
i0.ɵɵelementEnd();
|
|
915
1022
|
i0.ɵɵelementStart(3, "h3");
|
|
916
1023
|
i0.ɵɵtext(4, "No Applications Available");
|
|
@@ -918,21 +1025,21 @@ function HomeDashboardComponent_Conditional_12_Conditional_7_Template(rf, ctx) {
|
|
|
918
1025
|
i0.ɵɵelementStart(5, "p");
|
|
919
1026
|
i0.ɵɵtext(6, "You don't have any applications configured yet.");
|
|
920
1027
|
i0.ɵɵelementEnd();
|
|
921
|
-
i0.ɵɵelementStart(7, "button",
|
|
922
|
-
i0.ɵɵlistener("click", function
|
|
923
|
-
i0.ɵɵelement(8, "i",
|
|
1028
|
+
i0.ɵɵelementStart(7, "button", 142);
|
|
1029
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r56); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openConfigDialog()); });
|
|
1030
|
+
i0.ɵɵelement(8, "i", 143);
|
|
924
1031
|
i0.ɵɵtext(9, " Configure Applications ");
|
|
925
1032
|
i0.ɵɵelementEnd()();
|
|
926
1033
|
} }
|
|
927
|
-
function
|
|
928
|
-
i0.ɵɵelementStart(0, "div",
|
|
929
|
-
i0.ɵɵelement(2, "i",
|
|
1034
|
+
function HomeDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
|
|
1035
|
+
i0.ɵɵelementStart(0, "div", 11)(1, "h2", 16);
|
|
1036
|
+
i0.ɵɵelement(2, "i", 99);
|
|
930
1037
|
i0.ɵɵtext(3, " My Applications ");
|
|
931
1038
|
i0.ɵɵelementEnd();
|
|
932
|
-
i0.ɵɵelementStart(4, "div",
|
|
933
|
-
i0.ɵɵrepeaterCreate(5,
|
|
1039
|
+
i0.ɵɵelementStart(4, "div", 126);
|
|
1040
|
+
i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_14_For_6_Template, 11, 7, "div", 127, i0.ɵɵcomponentInstance().trackByApp, true);
|
|
934
1041
|
i0.ɵɵelementEnd();
|
|
935
|
-
i0.ɵɵconditionalCreate(7,
|
|
1042
|
+
i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_Conditional_7_Template, 10, 0, "div", 128);
|
|
936
1043
|
i0.ɵɵelementEnd();
|
|
937
1044
|
} if (rf & 2) {
|
|
938
1045
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -941,33 +1048,33 @@ function HomeDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
|
|
|
941
1048
|
i0.ɵɵadvance(2);
|
|
942
1049
|
i0.ɵɵconditional(ctx_r2.apps.length === 0 ? 7 : -1);
|
|
943
1050
|
} }
|
|
944
|
-
function
|
|
945
|
-
const
|
|
946
|
-
i0.ɵɵelementStart(0, "div",
|
|
947
|
-
i0.ɵɵlistener("click", function
|
|
948
|
-
i0.ɵɵelementStart(1, "div",
|
|
1051
|
+
function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
1052
|
+
const _r58 = i0.ɵɵgetCurrentView();
|
|
1053
|
+
i0.ɵɵelementStart(0, "div", 156);
|
|
1054
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template_div_click_0_listener() { const notification_r59 = i0.ɵɵrestoreView(_r58).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r59)); });
|
|
1055
|
+
i0.ɵɵelementStart(1, "div", 157)(2, "span", 158);
|
|
949
1056
|
i0.ɵɵtext(3);
|
|
950
1057
|
i0.ɵɵelementEnd();
|
|
951
|
-
i0.ɵɵelementStart(4, "span",
|
|
1058
|
+
i0.ɵɵelementStart(4, "span", 159);
|
|
952
1059
|
i0.ɵɵtext(5);
|
|
953
1060
|
i0.ɵɵpipe(6, "slice");
|
|
954
1061
|
i0.ɵɵelementEnd()()();
|
|
955
1062
|
} if (rf & 2) {
|
|
956
|
-
const
|
|
1063
|
+
const notification_r59 = ctx.$implicit;
|
|
957
1064
|
i0.ɵɵadvance(3);
|
|
958
|
-
i0.ɵɵtextInterpolate(
|
|
1065
|
+
i0.ɵɵtextInterpolate(notification_r59.Title);
|
|
959
1066
|
i0.ɵɵadvance(2);
|
|
960
|
-
i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3,
|
|
1067
|
+
i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3, notification_r59.Message, 0, 40), "", ((notification_r59.Message == null ? null : notification_r59.Message.length) || 0) > 40 ? "..." : "");
|
|
961
1068
|
} }
|
|
962
|
-
function
|
|
963
|
-
i0.ɵɵelementStart(0, "div",
|
|
964
|
-
i0.ɵɵelement(2, "i",
|
|
1069
|
+
function HomeDashboardComponent_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
1070
|
+
i0.ɵɵelementStart(0, "div", 147)(1, "h4", 151);
|
|
1071
|
+
i0.ɵɵelement(2, "i", 152);
|
|
965
1072
|
i0.ɵɵtext(3, " Notifications ");
|
|
966
|
-
i0.ɵɵelementStart(4, "span",
|
|
1073
|
+
i0.ɵɵelementStart(4, "span", 153);
|
|
967
1074
|
i0.ɵɵtext(5);
|
|
968
1075
|
i0.ɵɵelementEnd()();
|
|
969
|
-
i0.ɵɵelementStart(6, "div",
|
|
970
|
-
i0.ɵɵrepeaterCreate(7,
|
|
1076
|
+
i0.ɵɵelementStart(6, "div", 154);
|
|
1077
|
+
i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template, 7, 7, "div", 155, i0.ɵɵcomponentInstance().trackByNotification, true);
|
|
971
1078
|
i0.ɵɵelementEnd()();
|
|
972
1079
|
} if (rf & 2) {
|
|
973
1080
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -976,52 +1083,52 @@ function HomeDashboardComponent_Conditional_13_Conditional_8_Template(rf, ctx) {
|
|
|
976
1083
|
i0.ɵɵadvance(2);
|
|
977
1084
|
i0.ɵɵrepeater(ctx_r2.unreadNotifications);
|
|
978
1085
|
} }
|
|
979
|
-
function
|
|
980
|
-
const
|
|
981
|
-
i0.ɵɵelementStart(0, "div",
|
|
982
|
-
i0.ɵɵlistener("click", function
|
|
983
|
-
i0.ɵɵelementStart(1, "div",
|
|
1086
|
+
function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
1087
|
+
const _r60 = i0.ɵɵgetCurrentView();
|
|
1088
|
+
i0.ɵɵelementStart(0, "div", 163);
|
|
1089
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template_div_click_0_listener() { const favorite_r61 = i0.ɵɵrestoreView(_r60).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r61)); });
|
|
1090
|
+
i0.ɵɵelementStart(1, "div", 164);
|
|
984
1091
|
i0.ɵɵelement(2, "i");
|
|
985
1092
|
i0.ɵɵelementEnd();
|
|
986
|
-
i0.ɵɵelementStart(3, "div",
|
|
1093
|
+
i0.ɵɵelementStart(3, "div", 157)(4, "span", 158);
|
|
987
1094
|
i0.ɵɵtext(5);
|
|
988
1095
|
i0.ɵɵelementEnd();
|
|
989
|
-
i0.ɵɵelementStart(6, "span",
|
|
1096
|
+
i0.ɵɵelementStart(6, "span", 159);
|
|
990
1097
|
i0.ɵɵtext(7);
|
|
991
1098
|
i0.ɵɵelementEnd()()();
|
|
992
1099
|
} if (rf & 2) {
|
|
993
|
-
const
|
|
1100
|
+
const favorite_r61 = ctx.$implicit;
|
|
994
1101
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
995
1102
|
i0.ɵɵadvance(2);
|
|
996
|
-
i0.ɵɵclassMap(ctx_r2.getEntityIconByName(
|
|
1103
|
+
i0.ɵɵclassMap(ctx_r2.getEntityIconByName(favorite_r61.Entity));
|
|
997
1104
|
i0.ɵɵadvance(3);
|
|
998
|
-
i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(
|
|
1105
|
+
i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(favorite_r61));
|
|
999
1106
|
i0.ɵɵadvance(2);
|
|
1000
|
-
i0.ɵɵtextInterpolate(
|
|
1107
|
+
i0.ɵɵtextInterpolate(favorite_r61.Entity);
|
|
1001
1108
|
} }
|
|
1002
|
-
function
|
|
1003
|
-
i0.ɵɵelementStart(0, "div",
|
|
1004
|
-
i0.ɵɵrepeaterCreate(1,
|
|
1109
|
+
function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
1110
|
+
i0.ɵɵelementStart(0, "div", 154);
|
|
1111
|
+
i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template, 8, 4, "div", 162, i0.ɵɵcomponentInstance().trackByFavorite, true);
|
|
1005
1112
|
i0.ɵɵelementEnd();
|
|
1006
1113
|
} if (rf & 2) {
|
|
1007
1114
|
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1008
1115
|
i0.ɵɵadvance();
|
|
1009
1116
|
i0.ɵɵrepeater(ctx_r2.favorites);
|
|
1010
1117
|
} }
|
|
1011
|
-
function
|
|
1012
|
-
i0.ɵɵelementStart(0, "div",
|
|
1013
|
-
i0.ɵɵelement(1, "i",
|
|
1118
|
+
function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1119
|
+
i0.ɵɵelementStart(0, "div", 161);
|
|
1120
|
+
i0.ɵɵelement(1, "i", 165);
|
|
1014
1121
|
i0.ɵɵelementStart(2, "span");
|
|
1015
1122
|
i0.ɵɵtext(3, "Loading...");
|
|
1016
1123
|
i0.ɵɵelementEnd()();
|
|
1017
1124
|
} }
|
|
1018
|
-
function
|
|
1019
|
-
i0.ɵɵelementStart(0, "div",
|
|
1020
|
-
i0.ɵɵelement(2, "i",
|
|
1125
|
+
function HomeDashboardComponent_Conditional_15_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
1126
|
+
i0.ɵɵelementStart(0, "div", 148)(1, "h4", 151);
|
|
1127
|
+
i0.ɵɵelement(2, "i", 160);
|
|
1021
1128
|
i0.ɵɵtext(3, " Favorites ");
|
|
1022
1129
|
i0.ɵɵelementEnd();
|
|
1023
|
-
i0.ɵɵconditionalCreate(4,
|
|
1024
|
-
i0.ɵɵconditionalCreate(5,
|
|
1130
|
+
i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template, 3, 0, "div", 154);
|
|
1131
|
+
i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template, 4, 0, "div", 161);
|
|
1025
1132
|
i0.ɵɵelementEnd();
|
|
1026
1133
|
} if (rf & 2) {
|
|
1027
1134
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -1030,52 +1137,52 @@ function HomeDashboardComponent_Conditional_13_Conditional_9_Template(rf, ctx) {
|
|
|
1030
1137
|
i0.ɵɵadvance();
|
|
1031
1138
|
i0.ɵɵconditional(ctx_r2.favoritesLoading ? 5 : -1);
|
|
1032
1139
|
} }
|
|
1033
|
-
function
|
|
1034
|
-
const
|
|
1035
|
-
i0.ɵɵelementStart(0, "div",
|
|
1036
|
-
i0.ɵɵlistener("click", function
|
|
1037
|
-
i0.ɵɵelementStart(1, "div",
|
|
1140
|
+
function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
1141
|
+
const _r62 = i0.ɵɵgetCurrentView();
|
|
1142
|
+
i0.ɵɵelementStart(0, "div", 168);
|
|
1143
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template_div_click_0_listener() { const item_r63 = i0.ɵɵrestoreView(_r62).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r63)); });
|
|
1144
|
+
i0.ɵɵelementStart(1, "div", 164);
|
|
1038
1145
|
i0.ɵɵelement(2, "i");
|
|
1039
1146
|
i0.ɵɵelementEnd();
|
|
1040
|
-
i0.ɵɵelementStart(3, "div",
|
|
1147
|
+
i0.ɵɵelementStart(3, "div", 157)(4, "span", 158);
|
|
1041
1148
|
i0.ɵɵtext(5);
|
|
1042
1149
|
i0.ɵɵelementEnd();
|
|
1043
|
-
i0.ɵɵelementStart(6, "span",
|
|
1150
|
+
i0.ɵɵelementStart(6, "span", 159);
|
|
1044
1151
|
i0.ɵɵtext(7);
|
|
1045
1152
|
i0.ɵɵelementEnd()()();
|
|
1046
1153
|
} if (rf & 2) {
|
|
1047
|
-
const
|
|
1154
|
+
const item_r63 = ctx.$implicit;
|
|
1048
1155
|
const ctx_r2 = i0.ɵɵnextContext(4);
|
|
1049
1156
|
i0.ɵɵadvance(2);
|
|
1050
|
-
i0.ɵɵclassMap(ctx_r2.getEntityIconByName(
|
|
1157
|
+
i0.ɵɵclassMap(ctx_r2.getEntityIconByName(item_r63.entityName));
|
|
1051
1158
|
i0.ɵɵadvance(3);
|
|
1052
|
-
i0.ɵɵtextInterpolate(
|
|
1159
|
+
i0.ɵɵtextInterpolate(item_r63.recordName || item_r63.recordId);
|
|
1053
1160
|
i0.ɵɵadvance(2);
|
|
1054
|
-
i0.ɵɵtextInterpolate2("",
|
|
1161
|
+
i0.ɵɵtextInterpolate2("", item_r63.entityName, " \u00B7 ", ctx_r2.formatDate(item_r63.latestAt));
|
|
1055
1162
|
} }
|
|
1056
|
-
function
|
|
1057
|
-
i0.ɵɵelementStart(0, "div",
|
|
1058
|
-
i0.ɵɵrepeaterCreate(1,
|
|
1163
|
+
function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
1164
|
+
i0.ɵɵelementStart(0, "div", 154);
|
|
1165
|
+
i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template, 8, 5, "div", 167, i0.ɵɵcomponentInstance().trackByRecent, true);
|
|
1059
1166
|
i0.ɵɵelementEnd();
|
|
1060
1167
|
} if (rf & 2) {
|
|
1061
1168
|
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1062
1169
|
i0.ɵɵadvance();
|
|
1063
1170
|
i0.ɵɵrepeater(ctx_r2.recentItems);
|
|
1064
1171
|
} }
|
|
1065
|
-
function
|
|
1066
|
-
i0.ɵɵelementStart(0, "div",
|
|
1067
|
-
i0.ɵɵelement(1, "i",
|
|
1172
|
+
function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1173
|
+
i0.ɵɵelementStart(0, "div", 161);
|
|
1174
|
+
i0.ɵɵelement(1, "i", 165);
|
|
1068
1175
|
i0.ɵɵelementStart(2, "span");
|
|
1069
1176
|
i0.ɵɵtext(3, "Loading...");
|
|
1070
1177
|
i0.ɵɵelementEnd()();
|
|
1071
1178
|
} }
|
|
1072
|
-
function
|
|
1073
|
-
i0.ɵɵelementStart(0, "div",
|
|
1074
|
-
i0.ɵɵelement(2, "i",
|
|
1179
|
+
function HomeDashboardComponent_Conditional_15_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
1180
|
+
i0.ɵɵelementStart(0, "div", 149)(1, "h4", 151);
|
|
1181
|
+
i0.ɵɵelement(2, "i", 166);
|
|
1075
1182
|
i0.ɵɵtext(3, " Recent ");
|
|
1076
1183
|
i0.ɵɵelementEnd();
|
|
1077
|
-
i0.ɵɵconditionalCreate(4,
|
|
1078
|
-
i0.ɵɵconditionalCreate(5,
|
|
1184
|
+
i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template, 3, 0, "div", 154);
|
|
1185
|
+
i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template, 4, 0, "div", 161);
|
|
1079
1186
|
i0.ɵɵelementEnd();
|
|
1080
1187
|
} if (rf & 2) {
|
|
1081
1188
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -1084,28 +1191,28 @@ function HomeDashboardComponent_Conditional_13_Conditional_10_Template(rf, ctx)
|
|
|
1084
1191
|
i0.ɵɵadvance();
|
|
1085
1192
|
i0.ɵɵconditional(ctx_r2.recentsLoading ? 5 : -1);
|
|
1086
1193
|
} }
|
|
1087
|
-
function
|
|
1088
|
-
i0.ɵɵelementStart(0, "div",
|
|
1089
|
-
i0.ɵɵelement(1, "i",
|
|
1194
|
+
function HomeDashboardComponent_Conditional_15_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
1195
|
+
i0.ɵɵelementStart(0, "div", 150);
|
|
1196
|
+
i0.ɵɵelement(1, "i", 169);
|
|
1090
1197
|
i0.ɵɵelementStart(2, "p");
|
|
1091
1198
|
i0.ɵɵtext(3, "No quick access items");
|
|
1092
1199
|
i0.ɵɵelementEnd()();
|
|
1093
1200
|
} }
|
|
1094
|
-
function
|
|
1095
|
-
const
|
|
1096
|
-
i0.ɵɵelementStart(0, "div",
|
|
1097
|
-
i0.ɵɵelement(3, "i",
|
|
1201
|
+
function HomeDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
1202
|
+
const _r57 = i0.ɵɵgetCurrentView();
|
|
1203
|
+
i0.ɵɵelementStart(0, "div", 12)(1, "div", 144)(2, "h3");
|
|
1204
|
+
i0.ɵɵelement(3, "i", 122);
|
|
1098
1205
|
i0.ɵɵtext(4, " Quick Access ");
|
|
1099
1206
|
i0.ɵɵelementEnd();
|
|
1100
|
-
i0.ɵɵelementStart(5, "button",
|
|
1101
|
-
i0.ɵɵlistener("click", function
|
|
1102
|
-
i0.ɵɵelement(6, "i",
|
|
1207
|
+
i0.ɵɵelementStart(5, "button", 145);
|
|
1208
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r57); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
|
|
1209
|
+
i0.ɵɵelement(6, "i", 47);
|
|
1103
1210
|
i0.ɵɵelementEnd()();
|
|
1104
|
-
i0.ɵɵelementStart(7, "div",
|
|
1105
|
-
i0.ɵɵconditionalCreate(8,
|
|
1106
|
-
i0.ɵɵconditionalCreate(9,
|
|
1107
|
-
i0.ɵɵconditionalCreate(10,
|
|
1108
|
-
i0.ɵɵconditionalCreate(11,
|
|
1211
|
+
i0.ɵɵelementStart(7, "div", 146);
|
|
1212
|
+
i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_15_Conditional_8_Template, 9, 1, "div", 147);
|
|
1213
|
+
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_15_Conditional_9_Template, 6, 2, "div", 148);
|
|
1214
|
+
i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_15_Conditional_10_Template, 6, 2, "div", 149);
|
|
1215
|
+
i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_15_Conditional_11_Template, 4, 0, "div", 150);
|
|
1109
1216
|
i0.ɵɵelementEnd()();
|
|
1110
1217
|
} if (rf & 2) {
|
|
1111
1218
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -1118,8 +1225,8 @@ function HomeDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
|
1118
1225
|
i0.ɵɵadvance();
|
|
1119
1226
|
i0.ɵɵconditional(!ctx_r2.favoritesLoading && !ctx_r2.recentsLoading && ctx_r2.unreadNotifications.length === 0 && ctx_r2.favorites.length === 0 && ctx_r2.recentItems.length === 0 ? 11 : -1);
|
|
1120
1227
|
} }
|
|
1121
|
-
function
|
|
1122
|
-
i0.ɵɵelementStart(0, "span",
|
|
1228
|
+
function HomeDashboardComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1229
|
+
i0.ɵɵelementStart(0, "span", 171);
|
|
1123
1230
|
i0.ɵɵtext(1);
|
|
1124
1231
|
i0.ɵɵelementEnd();
|
|
1125
1232
|
} if (rf & 2) {
|
|
@@ -1127,12 +1234,12 @@ function HomeDashboardComponent_Conditional_14_Conditional_2_Template(rf, ctx) {
|
|
|
1127
1234
|
i0.ɵɵadvance();
|
|
1128
1235
|
i0.ɵɵtextInterpolate(ctx_r2.unreadNotifications.length);
|
|
1129
1236
|
} }
|
|
1130
|
-
function
|
|
1131
|
-
const
|
|
1132
|
-
i0.ɵɵelementStart(0, "button",
|
|
1133
|
-
i0.ɵɵlistener("click", function
|
|
1134
|
-
i0.ɵɵelement(1, "i",
|
|
1135
|
-
i0.ɵɵconditionalCreate(2,
|
|
1237
|
+
function HomeDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
1238
|
+
const _r64 = i0.ɵɵgetCurrentView();
|
|
1239
|
+
i0.ɵɵelementStart(0, "button", 170);
|
|
1240
|
+
i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r64); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
|
|
1241
|
+
i0.ɵɵelement(1, "i", 122);
|
|
1242
|
+
i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 171);
|
|
1136
1243
|
i0.ɵɵelementEnd();
|
|
1137
1244
|
} if (rf & 2) {
|
|
1138
1245
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -1187,8 +1294,16 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1187
1294
|
AvailableDashboards = [];
|
|
1188
1295
|
AvailableViews = [];
|
|
1189
1296
|
AvailableQueries = [];
|
|
1297
|
+
AvailableActions = [];
|
|
1190
1298
|
AvailableApps = [];
|
|
1191
1299
|
AddPanelLoading = false;
|
|
1300
|
+
// Action pin dialog state
|
|
1301
|
+
ActionConfigDialogVisible = false;
|
|
1302
|
+
ActionConfigActionId = null;
|
|
1303
|
+
ActionConfigActionName = null;
|
|
1304
|
+
ActionConfigActionDescription = null;
|
|
1305
|
+
ActionRunnerDialogVisible = false;
|
|
1306
|
+
ActionRunnerPin = null;
|
|
1192
1307
|
// Collapsible section state for Add Pin panel
|
|
1193
1308
|
PanelSectionCollapsed = {};
|
|
1194
1309
|
// Pin context menu (ellipsis)
|
|
@@ -1804,6 +1919,17 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1804
1919
|
}
|
|
1805
1920
|
break;
|
|
1806
1921
|
}
|
|
1922
|
+
case 'Actions': {
|
|
1923
|
+
const actionId = config['actionId'];
|
|
1924
|
+
if (!actionId) {
|
|
1925
|
+
console.warn('[Pin Click] Action pin missing actionId', config);
|
|
1926
|
+
break;
|
|
1927
|
+
}
|
|
1928
|
+
this.ActionRunnerPin = pin;
|
|
1929
|
+
this.ActionRunnerDialogVisible = true;
|
|
1930
|
+
this.cdr.markForCheck();
|
|
1931
|
+
break;
|
|
1932
|
+
}
|
|
1807
1933
|
default:
|
|
1808
1934
|
console.warn('[Pin Click] Unrecognized resource type', rt, 'for pin', pin.DisplayName, config);
|
|
1809
1935
|
break;
|
|
@@ -1818,7 +1944,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1818
1944
|
const rt = pin.ResourceType;
|
|
1819
1945
|
const config = pin.Configuration;
|
|
1820
1946
|
// Already a known canonical type
|
|
1821
|
-
const knownTypes = ['Dashboards', 'User Views', 'Queries', 'Reports', 'Records', 'Custom'];
|
|
1947
|
+
const knownTypes = ['Dashboards', 'User Views', 'Queries', 'Reports', 'Records', 'Custom', 'Actions'];
|
|
1822
1948
|
if (knownTypes.includes(rt))
|
|
1823
1949
|
return rt;
|
|
1824
1950
|
// Check the config's own resourceType field
|
|
@@ -1836,6 +1962,8 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1836
1962
|
return 'Reports';
|
|
1837
1963
|
if ((config['Entity'] || config['entity']) && config['recordId'])
|
|
1838
1964
|
return 'Records';
|
|
1965
|
+
if (config['actionId'])
|
|
1966
|
+
return 'Actions';
|
|
1839
1967
|
if (config['navItemName'])
|
|
1840
1968
|
return 'Custom';
|
|
1841
1969
|
return rt; // Give up and return whatever was stored
|
|
@@ -1930,6 +2058,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1930
2058
|
case 'Reports': return 'fa-solid fa-chart-bar';
|
|
1931
2059
|
case 'Records': return entity ? this.getEntityIconByName(entity) : 'fa-solid fa-file';
|
|
1932
2060
|
case 'Custom': return this.getNavItemIcon(pin) || this.getAppIcon(pin) || 'fa-solid fa-cube';
|
|
2061
|
+
case 'Actions': return 'fa-solid fa-bolt';
|
|
1933
2062
|
default: return 'fa-solid fa-thumbtack';
|
|
1934
2063
|
}
|
|
1935
2064
|
}
|
|
@@ -1944,9 +2073,15 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
1944
2073
|
case 'Reports': return 'Report';
|
|
1945
2074
|
case 'Records': return pin.Configuration?.['Entity'] || pin.Configuration?.['entity'] || 'Record';
|
|
1946
2075
|
case 'Custom': return pin.ApplicationName || pin.Configuration['appName'] || 'App';
|
|
2076
|
+
case 'Actions': return 'Quick Action';
|
|
1947
2077
|
default: return pin.ResourceType;
|
|
1948
2078
|
}
|
|
1949
2079
|
}
|
|
2080
|
+
/** Accent color for a pin — prefers the stored accentColor in Configuration, falls back to Color, then CSS var */
|
|
2081
|
+
GetPinAccentColor(pin) {
|
|
2082
|
+
const fromConfig = pin.Configuration.accentColor;
|
|
2083
|
+
return fromConfig || pin.Color || 'var(--mj-text-muted)';
|
|
2084
|
+
}
|
|
1950
2085
|
/**
|
|
1951
2086
|
* Get the app icon for a pin by looking up the app by name
|
|
1952
2087
|
*/
|
|
@@ -2121,7 +2256,9 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2121
2256
|
}
|
|
2122
2257
|
async loadAvailableResources() {
|
|
2123
2258
|
const rv = new RunView();
|
|
2124
|
-
//
|
|
2259
|
+
// Actions come from ActionEngineBase's cache — no RunView needed. Config() is idempotent,
|
|
2260
|
+
// so calling it in parallel with the remaining RunViews is cheap on repeat loads and avoids
|
|
2261
|
+
// a redundant DB round trip when the engine is already primed.
|
|
2125
2262
|
const [dashboards, views, queries] = await Promise.all([
|
|
2126
2263
|
rv.RunView({
|
|
2127
2264
|
EntityName: 'MJ: Dashboards',
|
|
@@ -2142,8 +2279,12 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2142
2279
|
Fields: ['ID', 'Name'],
|
|
2143
2280
|
OrderBy: 'Name',
|
|
2144
2281
|
ResultType: 'simple'
|
|
2145
|
-
})
|
|
2282
|
+
}),
|
|
2283
|
+
ActionEngineBase.Instance.Config()
|
|
2146
2284
|
]);
|
|
2285
|
+
const cachedActions = ActionEngineBase.Instance.Actions
|
|
2286
|
+
.filter(a => a.Status === 'Active')
|
|
2287
|
+
.sort((a, b) => a.Name.localeCompare(b.Name));
|
|
2147
2288
|
this.AvailableDashboards = (dashboards.Results || []).map(d => ({
|
|
2148
2289
|
id: d.ID, name: d.Name,
|
|
2149
2290
|
pinned: this.pinService.IsPinned('Dashboards', { dashboardId: d.ID })
|
|
@@ -2156,6 +2297,12 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2156
2297
|
id: q.ID, name: q.Name,
|
|
2157
2298
|
pinned: this.pinService.IsPinned('Queries', { queryId: q.ID })
|
|
2158
2299
|
}));
|
|
2300
|
+
// Actions can be pinned multiple times with different configs, so we treat them
|
|
2301
|
+
// as always "not pinned" in the panel — the checkmark would be misleading.
|
|
2302
|
+
this.AvailableActions = cachedActions.map(a => ({
|
|
2303
|
+
id: a.ID, name: a.Name, description: a.Description || '',
|
|
2304
|
+
pinned: false
|
|
2305
|
+
}));
|
|
2159
2306
|
// Load apps with their nav items
|
|
2160
2307
|
await this.loadAvailableApps();
|
|
2161
2308
|
// Check if Data Explorer is available — if so, dashboards/queries/views
|
|
@@ -2260,6 +2407,58 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2260
2407
|
MJNotificationService.Instance.CreateSimpleNotification(`"${name}" pinned to Home`, 'success', 3000);
|
|
2261
2408
|
}
|
|
2262
2409
|
}
|
|
2410
|
+
// =============================================
|
|
2411
|
+
// ACTION PIN DIALOGS
|
|
2412
|
+
// =============================================
|
|
2413
|
+
/**
|
|
2414
|
+
* Open the Configure Action Pin dialog — triggered when the user clicks an Action
|
|
2415
|
+
* in the Add Pin panel. Actions need extra configuration (preset params, runtime
|
|
2416
|
+
* params, title, theming) before they can be pinned.
|
|
2417
|
+
*/
|
|
2418
|
+
OpenActionPinConfig(actionId, actionName, description) {
|
|
2419
|
+
this.ActionConfigActionId = actionId;
|
|
2420
|
+
this.ActionConfigActionName = actionName;
|
|
2421
|
+
this.ActionConfigActionDescription = description || null;
|
|
2422
|
+
this.ActionConfigDialogVisible = true;
|
|
2423
|
+
this.cdr.markForCheck();
|
|
2424
|
+
}
|
|
2425
|
+
/** Callback from the Configure Action Pin dialog */
|
|
2426
|
+
OnActionConfigResult(result) {
|
|
2427
|
+
this.ActionConfigDialogVisible = false;
|
|
2428
|
+
this.cdr.markForCheck();
|
|
2429
|
+
if (result.Action !== 'save' || !result.Pin)
|
|
2430
|
+
return;
|
|
2431
|
+
const p = result.Pin;
|
|
2432
|
+
const config = {
|
|
2433
|
+
actionId: p.ActionID,
|
|
2434
|
+
actionName: p.ActionName,
|
|
2435
|
+
presetParams: p.PresetParams,
|
|
2436
|
+
runtimeParamNames: p.RuntimeParamNames,
|
|
2437
|
+
accentColor: p.AccentColor,
|
|
2438
|
+
displayName: p.DisplayName
|
|
2439
|
+
};
|
|
2440
|
+
const input = {
|
|
2441
|
+
DisplayName: p.DisplayName,
|
|
2442
|
+
ResourceType: 'Actions',
|
|
2443
|
+
Icon: p.FaIcon,
|
|
2444
|
+
Color: p.AccentColor,
|
|
2445
|
+
Configuration: config,
|
|
2446
|
+
Group: this.getSelectedGroup() || undefined
|
|
2447
|
+
};
|
|
2448
|
+
const added = this.pinService.AddPin(input);
|
|
2449
|
+
if (added) {
|
|
2450
|
+
MJNotificationService.Instance.CreateSimpleNotification(`"${p.DisplayName}" pinned to Home`, 'success', 3000);
|
|
2451
|
+
}
|
|
2452
|
+
else {
|
|
2453
|
+
MJNotificationService.Instance.CreateSimpleNotification('A pin with the same title and config already exists.', 'warning', 3000);
|
|
2454
|
+
}
|
|
2455
|
+
}
|
|
2456
|
+
/** Callback from the Run Action Pin dialog */
|
|
2457
|
+
OnActionRunnerResult(_result) {
|
|
2458
|
+
this.ActionRunnerDialogVisible = false;
|
|
2459
|
+
this.ActionRunnerPin = null;
|
|
2460
|
+
this.cdr.markForCheck();
|
|
2461
|
+
}
|
|
2263
2462
|
/**
|
|
2264
2463
|
* Resolve the selected group — handles the "new group" option
|
|
2265
2464
|
*/
|
|
@@ -2303,7 +2502,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2303
2502
|
} if (rf & 2) {
|
|
2304
2503
|
let _t;
|
|
2305
2504
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appConfigDialog = _t.first);
|
|
2306
|
-
} }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
2505
|
+
} }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 19, consts: [["appConfigDialog", ""], [1, "home-dashboard"], [1, "main-content"], [1, "home-header"], [1, "greeting-section"], [1, "date"], [1, "pinned-section"], [1, "pin-context-menu", 3, "left", "top"], [3, "Result", "Visible", "ActionID", "ActionName", "ActionDescription"], [3, "Result", "Visible", "Pin"], [1, "loading-container"], [1, "apps-section"], [1, "quick-access-sidebar"], ["title", "Quick Access", 1, "sidebar-fab-toggle"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "pinned-header"], [1, "section-title"], [1, "fa-solid", "fa-thumbtack"], [1, "pinned-actions"], [1, "pin-action-btn", "done"], [1, "edit-mode-banner"], [1, "pin-empty-state"], [1, "pin-grid"], [1, "pin-action-btn", "done", 3, "click"], [1, "fa-solid", "fa-check"], [1, "pin-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "pin-action-btn"], [1, "pin-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "pin-card", 3, "edit-mode", "dragging", "drag-over", "draggable"], [1, "add-pin-card"], [1, "pin-card", 3, "dragstart", "dragover", "dragleave", "drop", "dragend", "click", "draggable"], [1, "edit-controls"], [1, "pin-thumbnail"], [1, "pin-thumbnail", "action-mode", 3, "background"], [1, "pin-thumbnail", "icon-mode", 3, "--pin-icon-color"], [1, "pin-info"], [1, "pin-name-input", 3, "value"], [1, "pin-name"], [1, "pin-meta"], [1, "pin-app-badge"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "edit-card-actions"], [1, "edit-card-btn", "delete", 3, "click"], [1, "fa-solid", "fa-xmark"], [3, "src", "alt"], [1, "pin-overlay"], [1, "open-btn", 3, "click"], [1, "pin-thumbnail", "action-mode"], [1, "pin-thumbnail", "icon-mode"], [1, "pin-name-input", 3, "blur", "keydown.enter", "click", "value"], [1, "pin-name", 3, "click"], [1, "more-btn"], [1, "more-btn", 3, "click"], [1, "fa-solid", "fa-ellipsis"], [1, "group-header"], [1, "group-name-input", 3, "value"], [1, "group-name"], [1, "group-line"], [1, "group-count"], [1, "group-edit-controls"], [1, "group-name-input", 3, "blur", "keydown.enter", "value"], [1, "group-name", 3, "click"], [1, "group-edit-btn", "danger", 3, "click"], [1, "fa-solid", "fa-folder-minus"], [1, "add-pin-card", 3, "click"], [1, "pin-context-menu"], [1, "pin-context-item", 3, "click"], [1, "pin-context-divider"], [1, "pin-context-submenu"], [1, "pin-context-item", "submenu-header"], [1, "fa-solid", "fa-folder"], [1, "pin-context-item", "submenu-item"], [1, "pin-context-item", "danger", 3, "click"], [1, "fa-solid", "fa-thumbtack-slash"], [1, "pin-context-item", "submenu-item", 3, "click"], [1, "slide-panel-backdrop", 3, "click"], [1, "slide-panel"], [1, "slide-panel-header"], [1, "slide-panel-close", 3, "click"], [1, "search-box"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search apps, dashboards, views, queries...", 3, "ngModelChange", "ngModel"], [1, "group-selector"], [3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["value", "__new__"], [1, "new-group-row"], [1, "panel-results"], [1, "panel-loading"], ["type", "text", "placeholder", "Enter new group name...", 1, "new-group-input", 3, "ngModelChange", "ngModel"], ["text", "Loading resources...", "size", "small"], [1, "panel-section"], [1, "panel-section-title", "collapsible", 3, "click"], [1, "fa-solid", "fa-grid-2"], [1, "panel-count"], [1, "section-chevron", "fa-solid"], [1, "panel-app-header"], [1, "panel-app-icon"], [1, "panel-app-name"], [1, "panel-item", "panel-nav-item"], [1, "panel-item-icon"], [1, "panel-item-info"], [1, "panel-item-name"], [1, "panel-item-action"], [1, "pinned-badge"], [1, "pin-btn"], [1, "pin-btn", 3, "click"], [1, "fa-solid", "fa-gauge-high"], [1, "panel-item"], [1, "panel-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))"], [1, "fa-solid", "fa-gauge-high", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-table-list"], [1, "fa-solid", "fa-table-list", 2, "color", "var(--mj-brand-primary)"], [1, "panel-item-sub"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-database", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-bolt", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-sliders"], ["text", "Loading your applications...", "size", "large"], [1, "apps-grid"], [1, "app-card", 3, "--app-color"], [1, "empty-state"], [1, "app-card", 3, "click"], [1, "app-icon-wrapper"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "app-description"], [1, "nav-preview"], [1, "app-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "nav-item-chip"], [1, "more-items"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "sidebar-header"], ["title", "Close panel", 1, "sidebar-close-btn", 3, "click"], [1, "sidebar-content"], [1, "sidebar-section", "notifications-section"], [1, "sidebar-section", "favorites-section"], [1, "sidebar-section", "recents-section"], [1, "sidebar-empty"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], [1, "sidebar-item", "notification-item"], [1, "sidebar-item", "notification-item", 3, "click"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "fa-solid", "fa-star"], [1, "sidebar-loading"], [1, "sidebar-item", "favorite-item"], [1, "sidebar-item", "favorite-item", 3, "click"], [1, "sidebar-item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "sidebar-item", "recent-item"], [1, "sidebar-item", "recent-item", 3, "click"], [1, "fa-solid", "fa-inbox"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
2307
2506
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
2308
2507
|
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "h1");
|
|
2309
2508
|
i0.ɵɵtext(5);
|
|
@@ -2314,14 +2513,20 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2314
2513
|
i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_8_Template, 11, 4, "div", 6);
|
|
2315
2514
|
i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_9_Template, 19, 5, "div", 7);
|
|
2316
2515
|
i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_10_Template, 27, 4);
|
|
2317
|
-
i0.ɵɵ
|
|
2318
|
-
i0.ɵɵ
|
|
2516
|
+
i0.ɵɵelementStart(11, "mj-action-pin-config-dialog", 8);
|
|
2517
|
+
i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_config_dialog_Result_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnActionConfigResult($event)); });
|
|
2518
|
+
i0.ɵɵelementEnd();
|
|
2519
|
+
i0.ɵɵelementStart(12, "mj-action-pin-runner-dialog", 9);
|
|
2520
|
+
i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_runner_dialog_Result_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnActionRunnerResult($event)); });
|
|
2521
|
+
i0.ɵɵelementEnd();
|
|
2522
|
+
i0.ɵɵconditionalCreate(13, HomeDashboardComponent_Conditional_13_Template, 2, 0, "div", 10);
|
|
2523
|
+
i0.ɵɵconditionalCreate(14, HomeDashboardComponent_Conditional_14_Template, 8, 1, "div", 11);
|
|
2319
2524
|
i0.ɵɵelementEnd();
|
|
2320
|
-
i0.ɵɵconditionalCreate(
|
|
2321
|
-
i0.ɵɵconditionalCreate(
|
|
2322
|
-
i0.ɵɵelementStart(
|
|
2323
|
-
i0.ɵɵtwoWayListener("ShowDialogChange", function
|
|
2324
|
-
i0.ɵɵlistener("ConfigSaved", function
|
|
2525
|
+
i0.ɵɵconditionalCreate(15, HomeDashboardComponent_Conditional_15_Template, 12, 4, "div", 12);
|
|
2526
|
+
i0.ɵɵconditionalCreate(16, HomeDashboardComponent_Conditional_16_Template, 3, 1, "button", 13);
|
|
2527
|
+
i0.ɵɵelementStart(17, "mj-user-app-config", 14, 0);
|
|
2528
|
+
i0.ɵɵtwoWayListener("ShowDialogChange", function HomeDashboardComponent_Template_mj_user_app_config_ShowDialogChange_17_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
|
|
2529
|
+
i0.ɵɵlistener("ConfigSaved", function HomeDashboardComponent_Template_mj_user_app_config_ConfigSaved_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onConfigSaved()); });
|
|
2325
2530
|
i0.ɵɵelementEnd()();
|
|
2326
2531
|
} if (rf & 2) {
|
|
2327
2532
|
i0.ɵɵclassProp("sidebar-open", ctx.sidebarOpen && ctx.hasSidebarContent);
|
|
@@ -2336,16 +2541,20 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
|
|
|
2336
2541
|
i0.ɵɵadvance();
|
|
2337
2542
|
i0.ɵɵconditional(ctx.AddPanelOpen ? 10 : -1);
|
|
2338
2543
|
i0.ɵɵadvance();
|
|
2339
|
-
i0.ɵɵ
|
|
2544
|
+
i0.ɵɵproperty("Visible", ctx.ActionConfigDialogVisible)("ActionID", ctx.ActionConfigActionId)("ActionName", ctx.ActionConfigActionName)("ActionDescription", ctx.ActionConfigActionDescription);
|
|
2545
|
+
i0.ɵɵadvance();
|
|
2546
|
+
i0.ɵɵproperty("Visible", ctx.ActionRunnerDialogVisible)("Pin", ctx.ActionRunnerPin);
|
|
2547
|
+
i0.ɵɵadvance();
|
|
2548
|
+
i0.ɵɵconditional(ctx.isLoading ? 13 : -1);
|
|
2340
2549
|
i0.ɵɵadvance();
|
|
2341
|
-
i0.ɵɵconditional(!ctx.isLoading ?
|
|
2550
|
+
i0.ɵɵconditional(!ctx.isLoading ? 14 : -1);
|
|
2342
2551
|
i0.ɵɵadvance();
|
|
2343
|
-
i0.ɵɵconditional(ctx.hasSidebarContent ?
|
|
2552
|
+
i0.ɵɵconditional(ctx.hasSidebarContent ? 15 : -1);
|
|
2344
2553
|
i0.ɵɵadvance();
|
|
2345
|
-
i0.ɵɵconditional(ctx.hasSidebarContent && !ctx.sidebarOpen ?
|
|
2554
|
+
i0.ɵɵconditional(ctx.hasSidebarContent && !ctx.sidebarOpen ? 16 : -1);
|
|
2346
2555
|
i0.ɵɵadvance();
|
|
2347
2556
|
i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
|
|
2348
|
-
} }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i5.LoadingComponent, i6.UserAppConfigComponent, i7.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 32px;\n overflow-y: auto;\n transition: margin-right var(--mj-transition-slow);\n}\n\n\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 320px;\n}\n\n\n\n.home-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 32px;\n}\n\n.greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-4xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.greeting-section[_ngcontent-%COMP%] .date[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n color: var(--mj-text-muted);\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n position: absolute;\n top: 20px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: var(--mj-radius-full);\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xl);\n cursor: pointer;\n box-shadow: var(--mj-shadow-brand-md);\n transition: all var(--mj-transition-base);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sidebar-fab-toggle[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n transform: scale(1.05);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n.fab-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\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 flex: 1;\n gap: 16px;\n color: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n color: var(--mj-brand-primary);\n}\n\n\n\n.apps-section[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0 0 24px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n\n\n.apps-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 20px;\n}\n\n\n\n.app-card[_ngcontent-%COMP%] {\n --app-color: var(--mj-text-muted);\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.app-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background: var(--app-color);\n opacity: 0;\n transition: opacity 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n border-color: var(--app-color);\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-3px);\n}\n\n.app-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n width: 52px;\n height: 52px;\n border-radius: var(--mj-radius-lg);\n background: color-mix(in srgb, var(--app-color) 12%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease;\n}\n\n.app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xl);\n color: var(--app-color);\n transition: transform 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-icon[_ngcontent-%COMP%] {\n background: var(--app-color);\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n transform: scale(1.1);\n}\n\n\n\n.app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\n\n.nav-preview[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n\n.nav-item-chip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n color: var(--mj-text-secondary);\n}\n\n.nav-item-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--mj-text-muted);\n}\n\n.more-items[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n\n\n.app-arrow[_ngcontent-%COMP%] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n transition: all 0.25s ease;\n color: var(--app-color);\n font-size: var(--mj-text-base);\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-arrow[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\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: 64px 24px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-card);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n color: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 20px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 400px;\n}\n\n.empty-state[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n}\n\n\n\n\n\n.quick-access-sidebar[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform var(--mj-transition-slow);\n overflow: hidden;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%] .quick-access-sidebar[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sidebar-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.sidebar-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n.notifications-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-600);\n}\n\n.favorites-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.recents-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.section-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n margin-left: auto;\n}\n\n\n\n.sidebar-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sidebar-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.notification-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.notification-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-600);\n}\n\n.favorite-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.favorite-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.recent-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-info-50);\n}\n\n.recent-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-item-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n flex: 1;\n}\n\n.sidebar-item-title[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.sidebar-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.pinned-section[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.pinned-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.pinned-header[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.pinned-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n gap: 8px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n padding: 6px 14px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n\n\n.edit-mode-banner[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: var(--mj-radius-lg);\n padding: 12px 20px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.pin-empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px 20px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 40px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n margin: 0 0 6px 0;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 360px;\n margin: 0 0 16px 0;\n}\n\n\n\n.pin-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n}\n\n\n\n.group-header[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0 4px 0;\n margin-top: 8px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.group-line[_ngcontent-%COMP%] {\n flex: 1;\n height: 1px;\n background: var(--mj-border-default);\n}\n\n.group-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n background: var(--mj-bg-surface-card);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.group-name-input[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 8px;\n background: var(--mj-bg-surface);\n outline: none;\n width: 160px;\n}\n\n.group-edit-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.group-edit-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid transparent;\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n padding: 2px 8px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n box-shadow: var(--mj-shadow-md);\n transform: translateY(-2px);\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%] {\n cursor: grab;\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%]:active {\n cursor: grabbing;\n}\n\n.pin-card.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-lg);\n transform: rotate(2deg);\n}\n\n.pin-card.drag-over[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n border-style: dashed;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.edit-controls[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n pointer-events: none;\n}\n\n.edit-controls[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n pointer-events: auto;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 14px;\n cursor: grab;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.edit-card-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 12px;\n cursor: pointer;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n\n\n.pin-thumbnail[_ngcontent-%COMP%] {\n width: 100%;\n aspect-ratio: 16 / 10;\n overflow: hidden;\n position: relative;\n}\n\n.pin-thumbnail[_ngcontent-%COMP%] img[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: var(--pin-icon-color, var(--mj-text-muted));\n opacity: 0.7;\n}\n\n\n\n.pin-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n background: rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover .pin-overlay[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n padding: 8px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.pin-info[_ngcontent-%COMP%] {\n padding: 10px 12px;\n}\n\n.pin-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 2px 4px;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover .pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 6px;\n width: 100%;\n outline: none;\n background: var(--mj-bg-surface);\n}\n\n.pin-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.pin-meta[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.pin-app-badge[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n\n\n.add-pin-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 2px dashed var(--mj-border-default);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 180px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n gap: 8px;\n color: var(--mj-text-muted);\n}\n\n.add-pin-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n}\n\n.add-pin-card[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n}\n\n\n\n\n\n.pin-context-menu[_ngcontent-%COMP%] {\n position: fixed;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n min-width: 180px;\n z-index: 10001;\n overflow: hidden;\n animation: _ngcontent-%COMP%_pinMenuIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinMenuIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 14px;\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: background 0.15s;\n}\n\n.pin-context-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-medium);\n cursor: default;\n font-size: 12px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.pin-context-item.submenu-item[_ngcontent-%COMP%] {\n padding-left: 30px;\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider[_ngcontent-%COMP%] {\n height: 1px;\n background: var(--mj-border-default);\n margin: 4px 0;\n}\n\n\n\n\n\n.slide-panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 2000;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-xl);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.slide-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n}\n\n.slide-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.slide-panel-close[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 8px 12px;\n transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 14px;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n border: none;\n outline: none;\n background: transparent;\n font-size: 14px;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.group-selector[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.group-selector[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-medium);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.group-selector[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n\n\n.panel-results[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.panel-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.panel-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 12px;\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.section-chevron[_ngcontent-%COMP%] {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.panel-count[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 8px;\n font-size: 10px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.panel-app-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 6px 12px;\n margin-top: 8px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header[_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--panel-app-color);\n}\n\n.panel-app-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%] {\n padding: 10px 12px 10px 32px;\n margin-left: 12px;\n border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:last-of-type {\n border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:hover {\n border-left-color: var(--mj-brand-primary);\n}\n\n\n\n.new-group-row[_ngcontent-%COMP%] {\n padding: 0 20px 12px 20px;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n.panel-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n cursor: pointer;\n}\n\n.panel-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.panel-item-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.panel-item-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-item-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.panel-item-action[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.panel-item-action[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 4px 12px;\n border-radius: var(--mj-radius-sm);\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.pin-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-status-success);\n border: 1px solid var(--mj-status-success);\n cursor: default !important;\n}\n\n\n\n\n\n\n\n\n\n@media (max-width: 1200px) {\n .quick-access-sidebar[_ngcontent-%COMP%] {\n width: 280px;\n }\n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 280px;\n }\n\n .apps-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n}\n\n\n\n@media (max-width: 992px) {\n .main-content[_ngcontent-%COMP%] {\n padding: 24px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-3xl);\n }\n\n \n\n .quick-access-sidebar[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n z-index: 1000;\n box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n }\n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 0;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 320px;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n }\n}\n\n\n\n@media (max-width: 768px) {\n .home-dashboard[_ngcontent-%COMP%] {\n height: auto;\n min-height: 100%;\n overflow: visible;\n }\n\n .main-content[_ngcontent-%COMP%] {\n padding: 20px;\n padding-bottom: 100px; \n\n overflow: visible;\n }\n\n .home-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-2xl);\n }\n\n \n\n .quick-access-sidebar[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n max-width: 100%;\n z-index: 10000;\n border-left: none;\n border-top: none;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n display: none;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n display: none;\n }\n\n .pin-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 12px;\n }\n\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .apps-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .app-card[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .app-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n }\n\n .app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-lg);\n }\n\n .app-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n }\n\n .nav-preview[_ngcontent-%COMP%] {\n display: none;\n }\n\n \n\n .sidebar-fab-toggle[_ngcontent-%COMP%] {\n position: fixed;\n top: auto;\n bottom: 20px;\n right: 20px;\n width: 48px;\n height: 48px;\n font-size: var(--mj-text-lg);\n }\n}\n\n@media (max-width: 480px) {\n .main-content[_ngcontent-%COMP%] {\n padding: 16px;\n padding-bottom: 80px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xl);\n }\n\n .greeting-section[_ngcontent-%COMP%] .date[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n }\n\n .section-title[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n margin-bottom: 16px;\n }\n\n .sidebar-fab-toggle[_ngcontent-%COMP%] {\n bottom: 16px;\n right: 16px;\n width: 44px;\n height: 44px;\n font-size: var(--mj-text-base);\n }\n}"], changeDetection: 0 });
|
|
2557
|
+
} }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i5.LoadingComponent, i6.UserAppConfigComponent, i7.ActionPinConfigDialogComponent, i8.ActionPinRunnerDialogComponent, i9.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 32px;\n overflow-y: auto;\n transition: margin-right var(--mj-transition-slow);\n}\n\n\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 320px;\n}\n\n\n\n.home-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 32px;\n}\n\n.greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-4xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.greeting-section[_ngcontent-%COMP%] .date[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n color: var(--mj-text-muted);\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n position: absolute;\n top: 20px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: var(--mj-radius-full);\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xl);\n cursor: pointer;\n box-shadow: var(--mj-shadow-brand-md);\n transition: all var(--mj-transition-base);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sidebar-fab-toggle[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n transform: scale(1.05);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n.fab-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\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 flex: 1;\n gap: 16px;\n color: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n color: var(--mj-brand-primary);\n}\n\n\n\n.apps-section[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0 0 24px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n\n\n.apps-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 20px;\n}\n\n\n\n.app-card[_ngcontent-%COMP%] {\n --app-color: var(--mj-text-muted);\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.app-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background: var(--app-color);\n opacity: 0;\n transition: opacity 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n border-color: var(--app-color);\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-3px);\n}\n\n.app-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n width: 52px;\n height: 52px;\n border-radius: var(--mj-radius-lg);\n background: color-mix(in srgb, var(--app-color) 12%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease;\n}\n\n.app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xl);\n color: var(--app-color);\n transition: transform 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-icon[_ngcontent-%COMP%] {\n background: var(--app-color);\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n transform: scale(1.1);\n}\n\n\n\n.app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\n\n.nav-preview[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n\n.nav-item-chip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n color: var(--mj-text-secondary);\n}\n\n.nav-item-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--mj-text-muted);\n}\n\n.more-items[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n\n\n.app-arrow[_ngcontent-%COMP%] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n transition: all 0.25s ease;\n color: var(--app-color);\n font-size: var(--mj-text-base);\n}\n\n.app-card[_ngcontent-%COMP%]:hover .app-arrow[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\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: 64px 24px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-card);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n color: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 20px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 400px;\n}\n\n.empty-state[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n}\n\n\n\n\n\n.quick-access-sidebar[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform var(--mj-transition-slow);\n overflow: hidden;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%] .quick-access-sidebar[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sidebar-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.sidebar-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n.notifications-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-600);\n}\n\n.favorites-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.recents-section[_ngcontent-%COMP%] .sidebar-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.section-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n margin-left: auto;\n}\n\n\n\n.sidebar-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sidebar-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.notification-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.notification-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-600);\n}\n\n.favorite-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n}\n\n.favorite-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.recent-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] {\n background: var(--mj-color-info-50);\n}\n\n.recent-item[_ngcontent-%COMP%] .sidebar-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-item-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n flex: 1;\n}\n\n.sidebar-item-title[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.sidebar-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.pinned-section[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.pinned-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.pinned-header[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.pinned-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n gap: 8px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n padding: 6px 14px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n\n\n.edit-mode-banner[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: var(--mj-radius-lg);\n padding: 12px 20px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.pin-empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px 20px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 40px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n margin: 0 0 6px 0;\n}\n\n.pin-empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 360px;\n margin: 0 0 16px 0;\n}\n\n\n\n.pin-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n}\n\n\n\n.group-header[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0 4px 0;\n margin-top: 8px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.group-line[_ngcontent-%COMP%] {\n flex: 1;\n height: 1px;\n background: var(--mj-border-default);\n}\n\n.group-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n background: var(--mj-bg-surface-card);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.group-name-input[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 8px;\n background: var(--mj-bg-surface);\n outline: none;\n width: 160px;\n}\n\n.group-edit-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.group-edit-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid transparent;\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n padding: 2px 8px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n box-shadow: var(--mj-shadow-md);\n transform: translateY(-2px);\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%] {\n cursor: grab;\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%]:active {\n cursor: grabbing;\n}\n\n.pin-card.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-lg);\n transform: rotate(2deg);\n}\n\n.pin-card.drag-over[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n border-style: dashed;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.edit-controls[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n pointer-events: none;\n}\n\n.edit-controls[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n pointer-events: auto;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 14px;\n cursor: grab;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.edit-card-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 12px;\n cursor: pointer;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n\n\n.pin-thumbnail[_ngcontent-%COMP%] {\n width: 100%;\n aspect-ratio: 16 / 10;\n overflow: hidden;\n position: relative;\n}\n\n.pin-thumbnail[_ngcontent-%COMP%] img[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: var(--pin-icon-color, var(--mj-text-muted));\n opacity: 0.7;\n}\n\n\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse, white);\n background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: var(--mj-text-inverse, white);\n}\n\n\n\n.pin-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n background: rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover .pin-overlay[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n padding: 8px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.pin-info[_ngcontent-%COMP%] {\n padding: 10px 12px;\n}\n\n.pin-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 2px 4px;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover .pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.pin-name[_ngcontent-%COMP%] .more-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 6px;\n width: 100%;\n outline: none;\n background: var(--mj-bg-surface);\n}\n\n.pin-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.pin-meta[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.pin-app-badge[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n\n\n.add-pin-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 2px dashed var(--mj-border-default);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 180px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n gap: 8px;\n color: var(--mj-text-muted);\n}\n\n.add-pin-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n}\n\n.add-pin-card[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n}\n\n\n\n\n\n.pin-context-menu[_ngcontent-%COMP%] {\n position: fixed;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n min-width: 180px;\n z-index: 10001;\n overflow: hidden;\n animation: _ngcontent-%COMP%_pinMenuIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinMenuIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 14px;\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: background 0.15s;\n}\n\n.pin-context-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-medium);\n cursor: default;\n font-size: 12px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.pin-context-item.submenu-item[_ngcontent-%COMP%] {\n padding-left: 30px;\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider[_ngcontent-%COMP%] {\n height: 1px;\n background: var(--mj-border-default);\n margin: 4px 0;\n}\n\n\n\n\n\n.slide-panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 2000;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-xl);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.slide-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n}\n\n.slide-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.slide-panel-close[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 8px 12px;\n transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 14px;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n border: none;\n outline: none;\n background: transparent;\n font-size: 14px;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.group-selector[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.group-selector[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-medium);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.group-selector[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n\n\n.panel-results[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.panel-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.panel-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 12px;\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.section-chevron[_ngcontent-%COMP%] {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.panel-count[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 8px;\n font-size: 10px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.panel-app-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 6px 12px;\n margin-top: 8px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header[_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--panel-app-color);\n}\n\n.panel-app-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%] {\n padding: 10px 12px 10px 32px;\n margin-left: 12px;\n border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:last-of-type {\n border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:hover {\n border-left-color: var(--mj-brand-primary);\n}\n\n\n\n.new-group-row[_ngcontent-%COMP%] {\n padding: 0 20px 12px 20px;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n.panel-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n cursor: pointer;\n}\n\n.panel-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.panel-item-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.panel-item-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-item-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.panel-item-action[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.panel-item-action[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 4px 12px;\n border-radius: var(--mj-radius-sm);\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.pin-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-status-success);\n border: 1px solid var(--mj-status-success);\n cursor: default !important;\n}\n\n\n\n\n\n\n\n\n\n@media (max-width: 1200px) {\n .quick-access-sidebar[_ngcontent-%COMP%] {\n width: 280px;\n }\n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 280px;\n }\n\n .apps-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n}\n\n\n\n@media (max-width: 992px) {\n .main-content[_ngcontent-%COMP%] {\n padding: 24px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-3xl);\n }\n\n \n\n .quick-access-sidebar[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n z-index: 1000;\n box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n }\n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%] .main-content[_ngcontent-%COMP%] {\n margin-right: 0;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 320px;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n }\n}\n\n\n\n@media (max-width: 768px) {\n .home-dashboard[_ngcontent-%COMP%] {\n height: auto;\n min-height: 100%;\n overflow: visible;\n }\n\n .main-content[_ngcontent-%COMP%] {\n padding: 20px;\n padding-bottom: 100px; \n\n overflow: visible;\n }\n\n .home-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-2xl);\n }\n\n \n\n .quick-access-sidebar[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n max-width: 100%;\n z-index: 10000;\n border-left: none;\n border-top: none;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n display: none;\n }\n\n \n\n .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n display: none;\n }\n\n .pin-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 12px;\n }\n\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .apps-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .app-card[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .app-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n }\n\n .app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-lg);\n }\n\n .app-name[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n }\n\n .nav-preview[_ngcontent-%COMP%] {\n display: none;\n }\n\n \n\n .sidebar-fab-toggle[_ngcontent-%COMP%] {\n position: fixed;\n top: auto;\n bottom: 20px;\n right: 20px;\n width: 48px;\n height: 48px;\n font-size: var(--mj-text-lg);\n }\n}\n\n@media (max-width: 480px) {\n .main-content[_ngcontent-%COMP%] {\n padding: 16px;\n padding-bottom: 80px;\n }\n\n .greeting-section[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xl);\n }\n\n .greeting-section[_ngcontent-%COMP%] .date[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n }\n\n .section-title[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n margin-bottom: 16px;\n }\n\n .sidebar-fab-toggle[_ngcontent-%COMP%] {\n bottom: 16px;\n right: 16px;\n width: 44px;\n height: 44px;\n font-size: var(--mj-text-base);\n }\n}"], changeDetection: 0 });
|
|
2349
2558
|
};
|
|
2350
2559
|
HomeDashboardComponent = __decorate([
|
|
2351
2560
|
RegisterClass(BaseResourceComponent, 'HomeDashboard')
|
|
@@ -2353,10 +2562,10 @@ HomeDashboardComponent = __decorate([
|
|
|
2353
2562
|
export { HomeDashboardComponent };
|
|
2354
2563
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeDashboardComponent, [{
|
|
2355
2564
|
type: Component,
|
|
2356
|
-
args: [{ standalone: false, selector: 'mj-home-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"home-dashboard\" [class.sidebar-open]=\"sidebarOpen && hasSidebarContent\">\n <!-- Main Content Area -->\n <div class=\"main-content\">\n <!-- Header Section -->\n <div class=\"home-header\">\n <div class=\"greeting-section\">\n <h1>{{ greeting }}, {{ currentUser?.Name }}</h1>\n <p class=\"date\">{{ formattedDate }}</p>\n </div>\n </div>\n\n <!-- Pinned Section -->\n @if (!isLoading) {\n <div class=\"pinned-section\">\n <div class=\"pinned-header\">\n <h2 class=\"section-title\">\n <i class=\"fa-solid fa-thumbtack\"></i>\n Pinned\n </h2>\n <div class=\"pinned-actions\">\n @if (EditMode) {\n <button class=\"pin-action-btn done\" (click)=\"ToggleEditMode()\">\n <i class=\"fa-solid fa-check\"></i> Done\n </button>\n } @else {\n <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Pin\n </button>\n @if (PinnedItems.length > 0) {\n <button class=\"pin-action-btn\" (click)=\"ToggleEditMode()\">\n <i class=\"fa-solid fa-pen\"></i> Edit\n </button>\n }\n }\n </div>\n </div>\n\n @if (EditMode) {\n <div class=\"edit-mode-banner\">\n <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n <span><strong>Edit mode</strong> \u2014 Drag cards to reorder. Click names to rename.</span>\n </div>\n }\n\n <!-- Empty State -->\n @if (PinnedItems.length === 0 && !EditMode) {\n <div class=\"pin-empty-state\">\n <i class=\"fa-solid fa-thumbtack\"></i>\n <h3>No pinned items yet</h3>\n <p>Pin your favorite dashboards, views, queries, and reports for quick access.</p>\n <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add your first pin\n </button>\n </div>\n }\n\n <!-- Pin Grid -->\n @if (PinnedItems.length > 0) {\n <div class=\"pin-grid\">\n <!-- Ungrouped Pins -->\n @for (pin of UngroupedPins; track trackByPin($index, pin)) {\n <div class=\"pin-card\"\n [class.edit-mode]=\"EditMode\"\n [class.dragging]=\"DraggingPinId === pin.Id\"\n [class.drag-over]=\"DragOverPinId === pin.Id\"\n [draggable]=\"EditMode\"\n (dragstart)=\"OnDragStart($event, pin)\"\n (dragover)=\"OnDragOver($event, pin)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop($event, pin)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"OnPinClick(pin)\">\n\n <!-- Edit mode controls -->\n @if (EditMode) {\n <div class=\"edit-controls\">\n <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n <div class=\"edit-card-actions\">\n <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Thumbnail / Icon -->\n @if (pin.Thumbnail) {\n <div class=\"pin-thumbnail\">\n <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n }\n\n <!-- Pin Info -->\n <div class=\"pin-info\">\n @if (EditMode && EditingPinId === pin.Id) {\n <input class=\"pin-name-input\"\n [value]=\"pin.DisplayName\"\n (blur)=\"SavePinName(pin.Id, GetInputValue($event))\"\n (keydown.enter)=\"SavePinName(pin.Id, GetInputValue($event))\"\n (click)=\"$event.stopPropagation()\" />\n } @else {\n <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n {{ pin.DisplayName }}\n @if (!EditMode) {\n <button class=\"more-btn\" (click)=\"ShowPinMenu($event, pin)\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n }\n </div>\n }\n <div class=\"pin-meta\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n {{ GetResourceTypeLabel(pin) }}\n @if (pin.ApplicationName && pin.ResourceType !== 'Custom') {\n <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Grouped Pins -->\n @for (group of PinGroups; track trackByGroup($index, group)) {\n <!-- Group Header -->\n <div class=\"group-header\">\n @if (EditMode && EditingGroupName === group) {\n <input class=\"group-name-input\"\n [value]=\"group\"\n (blur)=\"SaveGroupName(group, GetInputValue($event))\"\n (keydown.enter)=\"SaveGroupName(group, GetInputValue($event))\" />\n } @else {\n <span class=\"group-name\" (click)=\"EditMode ? StartEditingGroup(group) : null\">{{ group }}</span>\n }\n <div class=\"group-line\"></div>\n <span class=\"group-count\">{{ GetPinsInGroup(group).length }} pins</span>\n @if (EditMode) {\n <div class=\"group-edit-controls\">\n <button class=\"group-edit-btn danger\" (click)=\"RemoveGroup(group)\">\n <i class=\"fa-solid fa-folder-minus\"></i> Remove Group\n </button>\n </div>\n }\n </div>\n\n <!-- Pins in Group -->\n @for (pin of GetPinsInGroup(group); track trackByPin($index, pin)) {\n <div class=\"pin-card\"\n [class.edit-mode]=\"EditMode\"\n [class.dragging]=\"DraggingPinId === pin.Id\"\n [class.drag-over]=\"DragOverPinId === pin.Id\"\n [draggable]=\"EditMode\"\n (dragstart)=\"OnDragStart($event, pin)\"\n (dragover)=\"OnDragOver($event, pin)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop($event, pin)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"OnPinClick(pin)\">\n\n @if (EditMode) {\n <div class=\"edit-controls\">\n <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n <div class=\"edit-card-actions\">\n <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n @if (pin.Thumbnail) {\n <div class=\"pin-thumbnail\">\n <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n }\n\n <div class=\"pin-info\">\n @if (EditMode && EditingPinId === pin.Id) {\n <input class=\"pin-name-input\"\n [value]=\"pin.DisplayName\"\n (blur)=\"SavePinName(pin.Id, $event.target.value)\"\n (keydown.enter)=\"SavePinName(pin.Id, $event.target.value)\"\n (click)=\"$event.stopPropagation()\" />\n } @else {\n <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n {{ pin.DisplayName }}\n @if (!EditMode) {\n <button class=\"more-btn\" (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n }\n </div>\n }\n <div class=\"pin-meta\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n {{ GetResourceTypeLabel(pin) }}\n @if (pin.ApplicationName) {\n <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n }\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Add Pin card (edit mode) -->\n @if (EditMode) {\n <div class=\"add-pin-card\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i>\n <span>Add Pin</span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Pin Context Menu (ellipsis) -->\n @if (PinMenuVisible && PinMenuPin) {\n <div class=\"pin-context-menu\"\n [style.left.px]=\"PinMenuX\"\n [style.top.px]=\"PinMenuY\">\n <div class=\"pin-context-item\" (click)=\"OnPinMenuEdit()\">\n <i class=\"fa-solid fa-pen\"></i>\n <span>Edit</span>\n </div>\n <div class=\"pin-context-divider\"></div>\n <div class=\"pin-context-submenu\">\n <div class=\"pin-context-item submenu-header\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>Move to Group</span>\n </div>\n @if (PinMenuPin.Group) {\n <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(undefined)\">\n <span>(No group)</span>\n </div>\n }\n @for (group of PinGroups; track group) {\n @if (group !== PinMenuPin.Group) {\n <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(group)\">\n <span>{{ group }}</span>\n </div>\n }\n }\n </div>\n <div class=\"pin-context-divider\"></div>\n <div class=\"pin-context-item danger\" (click)=\"OnPinMenuUnpin()\">\n <i class=\"fa-solid fa-thumbtack-slash\"></i>\n <span>Unpin</span>\n </div>\n </div>\n }\n\n <!-- Add Pin Slide-In Panel -->\n @if (AddPanelOpen) {\n <div class=\"slide-panel-backdrop\" (click)=\"CloseAddPinPanel()\"></div>\n <div class=\"slide-panel\">\n <div class=\"slide-panel-header\">\n <h3><i class=\"fa-solid fa-thumbtack\"></i> Add Pin</h3>\n <button class=\"slide-panel-close\" (click)=\"CloseAddPinPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <div class=\"search-box\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <input type=\"text\"\n placeholder=\"Search apps, dashboards, views, queries...\"\n [(ngModel)]=\"AddPanelSearchQuery\" />\n </div>\n </div>\n\n <div class=\"group-selector\">\n <label><i class=\"fa-solid fa-folder\"></i> Add to group:</label>\n <select [(ngModel)]=\"AddPanelSelectedGroup\">\n <option value=\"\">(No group)</option>\n @for (group of PinGroups; track group) {\n <option [value]=\"group\">{{ group }}</option>\n }\n <option value=\"__new__\">+ New group...</option>\n </select>\n </div>\n @if (AddPanelSelectedGroup === '__new__') {\n <div class=\"new-group-row\">\n <input class=\"new-group-input\"\n type=\"text\"\n placeholder=\"Enter new group name...\"\n [(ngModel)]=\"AddPanelNewGroupName\" />\n </div>\n }\n\n <div class=\"panel-results\">\n @if (AddPanelLoading) {\n <div class=\"panel-loading\">\n <mj-loading text=\"Loading resources...\" size=\"small\"></mj-loading>\n </div>\n } @else {\n <!-- Apps with Nav Items -->\n @if (FilterApps().length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('apps')\">\n <i class=\"fa-solid fa-grid-2\"></i> Applications\n <span class=\"panel-count\">{{ FilterApps().length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['apps']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['apps']\"></i>\n </div>\n @if (!PanelSectionCollapsed['apps']) {\n @for (app of FilterApps(); track app.appId) {\n <div class=\"panel-app-header\" [style.--panel-app-color]=\"app.color\">\n <div class=\"panel-app-icon\">\n <i [class]=\"app.icon\"></i>\n </div>\n <span class=\"panel-app-name\">{{ app.appName }}</span>\n </div>\n @for (ni of app.navItems; track ni.label) {\n <div class=\"panel-item panel-nav-item\">\n <div class=\"panel-item-icon\" [style.background]=\"'color-mix(in srgb, ' + app.color + ' 10%, var(--mj-bg-surface-card))'\">\n <i [class]=\"ni.icon\" [style.color]=\"app.color\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ ni.label }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (ni.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinAppNavItem(app.appName, app.icon, app.color, ni.label, ni.icon)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n }\n </div>\n }\n\n <!-- Dashboards (metadata-driven Config type only) -->\n @if (FilterPanelItems(AvailableDashboards).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('dashboards')\">\n <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['dashboards']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['dashboards']\"></i>\n </div>\n @if (!PanelSectionCollapsed['dashboards']) {\n @for (item of FilterPanelItems(AvailableDashboards); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-gauge-high\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('Dashboards', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Views -->\n @if (FilterPanelItems(AvailableViews).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('views')\">\n <i class=\"fa-solid fa-table-list\"></i> Views\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableViews).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['views']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['views']\"></i>\n </div>\n @if (!PanelSectionCollapsed['views']) {\n @for (item of FilterPanelItems(AvailableViews); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n <div class=\"panel-item-sub\">{{ item.entityName }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('User Views', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Queries -->\n @if (FilterPanelItems(AvailableQueries).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('queries')\">\n <i class=\"fa-solid fa-database\"></i> Queries\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['queries']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['queries']\"></i>\n </div>\n @if (!PanelSectionCollapsed['queries']) {\n @for (item of FilterPanelItems(AvailableQueries); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-database\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('Queries', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Apps Grid -->\n @if (!isLoading) {\n <div class=\"apps-section\">\n <h2 class=\"section-title\">\n <i class=\"fa-solid fa-grid-2\"></i>\n My Applications\n </h2>\n <div class=\"apps-grid\">\n @for (appData of appsDisplayData; track trackByApp($index, appData)) {\n <div\n class=\"app-card\"\n [style.--app-color]=\"appData.color\"\n (click)=\"onAppClick(appData.app)\">\n <!-- App Icon -->\n <div class=\"app-icon-wrapper\">\n <div class=\"app-icon\">\n <i [class]=\"appData.icon\"></i>\n </div>\n </div>\n <!-- App Info -->\n <div class=\"app-info\">\n <h3 class=\"app-name\">{{ appData.app.Name }}</h3>\n @if (appData.app.Description) {\n <p class=\"app-description\">{{ appData.app.Description }}</p>\n }\n <!-- Nav Items Preview -->\n @if (appData.navItemsCount > 0) {\n <div class=\"nav-preview\">\n @for (item of appData.navItemsPreview; track trackByNavItem($index, item)) {\n <div class=\"nav-item-chip\">\n <i [class]=\"item.Icon\"></i>\n <span>{{ item.Label }}</span>\n </div>\n }\n @if (appData.showMoreItems) {\n <span class=\"more-items\">\n +{{ appData.moreItemsCount }} more\n </span>\n }\n </div>\n }\n </div>\n <!-- Hover Arrow -->\n <div class=\"app-arrow\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </div>\n </div>\n }\n </div>\n <!-- Empty State -->\n @if (apps.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </div>\n <h3>No Applications Available</h3>\n <p>You don't have any applications configured yet.</p>\n <button mjButton\n variant=\"primary\"\n (click)=\"openConfigDialog()\">\n <i class=\"fa-solid fa-gear\"></i>\n Configure Applications\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Collapsible Right Sidebar -->\n @if (hasSidebarContent) {\n <div class=\"quick-access-sidebar\">\n <div class=\"sidebar-header\">\n <h3>\n <i class=\"fa-solid fa-bolt\"></i>\n Quick Access\n </h3>\n <button class=\"sidebar-close-btn\" (click)=\"toggleSidebar()\" title=\"Close panel\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"sidebar-content\">\n <!-- Unread Notifications Section -->\n @if (unreadNotifications.length > 0) {\n <div class=\"sidebar-section notifications-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-bell\"></i>\n Notifications\n <span class=\"section-badge\">{{ unreadNotifications.length }}</span>\n </h4>\n <div class=\"sidebar-items\">\n @for (notification of unreadNotifications; track trackByNotification($index, notification)) {\n <div\n class=\"sidebar-item notification-item\"\n (click)=\"onNotificationClick(notification)\">\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ notification.Title }}</span>\n <span class=\"sidebar-item-subtitle\">{{ notification.Message | slice:0:40 }}{{ (notification.Message?.length || 0) > 40 ? '...' : '' }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- Favorites Section -->\n @if (favorites.length > 0 || favoritesLoading) {\n <div class=\"sidebar-section favorites-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-star\"></i>\n Favorites\n </h4>\n @if (!favoritesLoading) {\n <div class=\"sidebar-items\">\n @for (favorite of favorites; track trackByFavorite($index, favorite)) {\n <div\n class=\"sidebar-item favorite-item\"\n (click)=\"onFavoriteClick(favorite)\">\n <div class=\"sidebar-item-icon\">\n <i [class]=\"getEntityIconByName(favorite.Entity)\"></i>\n </div>\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ getFavoriteDisplayName(favorite) }}</span>\n <span class=\"sidebar-item-subtitle\">{{ favorite.Entity }}</span>\n </div>\n </div>\n }\n </div>\n }\n @if (favoritesLoading) {\n <div class=\"sidebar-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading...</span>\n </div>\n }\n </div>\n }\n <!-- Recents Section -->\n @if (recentItems.length > 0 || recentsLoading) {\n <div class=\"sidebar-section recents-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n Recent\n </h4>\n @if (!recentsLoading) {\n <div class=\"sidebar-items\">\n @for (item of recentItems; track trackByRecent($index, item)) {\n <div\n class=\"sidebar-item recent-item\"\n (click)=\"onRecentClick(item)\">\n <div class=\"sidebar-item-icon\">\n <i [class]=\"getEntityIconByName(item.entityName)\"></i>\n </div>\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ item.recordName || item.recordId }}</span>\n <span class=\"sidebar-item-subtitle\">{{ item.entityName }} \u00B7 {{ formatDate(item.latestAt) }}</span>\n </div>\n </div>\n }\n </div>\n }\n @if (recentsLoading) {\n <div class=\"sidebar-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading...</span>\n </div>\n }\n </div>\n }\n <!-- Empty sidebar state -->\n @if (!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0) {\n <div class=\"sidebar-empty\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No quick access items</p>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Quick Access FAB Toggle (Fixed Button) -->\n @if (hasSidebarContent && !sidebarOpen) {\n <button class=\"sidebar-fab-toggle\"\n (click)=\"toggleSidebar()\"\n title=\"Quick Access\">\n <i class=\"fa-solid fa-bolt\"></i>\n @if (unreadNotifications.length > 0) {\n <span class=\"fab-badge\">{{ unreadNotifications.length }}</span>\n }\n </button>\n }\n\n <!-- App Configuration Dialog -->\n <mj-user-app-config\n #appConfigDialog\n [(ShowDialog)]=\"showConfigDialog\"\n (ConfigSaved)=\"onConfigSaved()\">\n </mj-user-app-config>\n</div>\n", styles: [".home-dashboard {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n/* Main Content Area */\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 32px;\n overflow-y: auto;\n transition: margin-right var(--mj-transition-slow);\n}\n\n/* Sidebar open state adjusts main content on desktop */\n.home-dashboard.sidebar-open .main-content {\n margin-right: 320px;\n}\n\n/* Header */\n.home-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 32px;\n}\n\n.greeting-section h1 {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-4xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.greeting-section .date {\n margin: 0;\n font-size: var(--mj-text-base);\n color: var(--mj-text-muted);\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n position: absolute;\n top: 20px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: var(--mj-radius-full);\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xl);\n cursor: pointer;\n box-shadow: var(--mj-shadow-brand-md);\n transition: all var(--mj-transition-base);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n background: var(--mj-brand-primary-hover);\n transform: scale(1.05);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n.fab-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n gap: 16px;\n color: var(--mj-text-muted);\n}\n\n.loading-spinner {\n font-size: var(--mj-text-4xl);\n color: var(--mj-brand-primary);\n}\n\n/* Apps Section */\n.apps-section {\n flex: 0 0 auto;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0 0 24px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.section-title i {\n color: var(--mj-text-muted);\n}\n\n/* Apps Grid */\n.apps-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 20px;\n}\n\n/* App Card */\n.app-card {\n --app-color: var(--mj-text-muted);\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.app-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background: var(--app-color);\n opacity: 0;\n transition: opacity 0.25s ease;\n}\n\n.app-card:hover {\n border-color: var(--app-color);\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-3px);\n}\n\n.app-card:hover::before {\n opacity: 1;\n}\n\n/* App Icon */\n.app-icon-wrapper {\n flex-shrink: 0;\n}\n\n.app-icon {\n width: 52px;\n height: 52px;\n border-radius: var(--mj-radius-lg);\n background: color-mix(in srgb, var(--app-color) 12%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease;\n}\n\n.app-icon i {\n font-size: var(--mj-text-xl);\n color: var(--app-color);\n transition: transform 0.25s ease;\n}\n\n.app-card:hover .app-icon {\n background: var(--app-color);\n}\n\n.app-card:hover .app-icon i {\n color: var(--mj-text-inverse);\n transform: scale(1.1);\n}\n\n/* App Info */\n.app-info {\n flex: 1;\n min-width: 0;\n}\n\n.app-name {\n margin: 0 0 4px 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.app-description {\n margin: 0 0 10px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Nav Items Preview */\n.nav-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n\n.nav-item-chip {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n color: var(--mj-text-secondary);\n}\n\n.nav-item-chip i {\n font-size: 9px;\n color: var(--mj-text-muted);\n}\n\n.more-items {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* App Arrow */\n.app-arrow {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n transition: all 0.25s ease;\n color: var(--app-color);\n font-size: var(--mj-text-base);\n}\n\n.app-card:hover .app-arrow {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\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: 64px 24px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.empty-icon {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-card);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.empty-icon i {\n font-size: var(--mj-text-4xl);\n color: var(--mj-text-disabled);\n}\n\n.empty-state h3 {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n margin: 0 0 20px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 400px;\n}\n\n.empty-state button i {\n margin-right: 8px;\n}\n\n/* ========================================\n RIGHT SIDEBAR\n ======================================== */\n.quick-access-sidebar {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform var(--mj-transition-slow);\n overflow: hidden;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.home-dashboard.sidebar-open .quick-access-sidebar {\n transform: translateX(0);\n}\n\n.sidebar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sidebar-header h3 i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n margin-bottom: 20px;\n}\n\n.sidebar-section:last-child {\n margin-bottom: 0;\n}\n\n.sidebar-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n font-size: var(--mj-text-xs);\n}\n\n.notifications-section .sidebar-section-title i {\n color: var(--mj-color-warning-600);\n}\n\n.favorites-section .sidebar-section-title i {\n color: var(--mj-status-warning);\n}\n\n.recents-section .sidebar-section-title i {\n color: var(--mj-brand-primary);\n}\n\n.section-badge {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n margin-left: auto;\n}\n\n/* Sidebar Items */\n.sidebar-items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-item:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sidebar-item-icon i {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.notification-item .sidebar-item-icon {\n background: var(--mj-color-warning-50);\n}\n\n.notification-item .sidebar-item-icon i {\n color: var(--mj-color-warning-600);\n}\n\n.favorite-item .sidebar-item-icon {\n background: var(--mj-color-warning-50);\n}\n\n.favorite-item .sidebar-item-icon i {\n color: var(--mj-color-warning-500);\n}\n\n.recent-item .sidebar-item-icon {\n background: var(--mj-color-info-50);\n}\n\n.recent-item .sidebar-item-icon i {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-item-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n flex: 1;\n}\n\n.sidebar-item-title {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-loading {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n padding: 8px 0;\n}\n\n.sidebar-loading i {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.sidebar-empty i {\n font-size: var(--mj-text-4xl);\n margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n\n\n/* ========================================\n PINNED SECTION\n ======================================== */\n.pinned-section {\n margin-bottom: 32px;\n}\n\n.pinned-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.pinned-header .section-title {\n margin: 0;\n}\n\n.pinned-actions {\n margin-left: auto;\n display: flex;\n gap: 8px;\n}\n\n.pin-action-btn {\n padding: 6px 14px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n/* Edit Mode Banner */\n.edit-mode-banner {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: var(--mj-radius-lg);\n padding: 12px 20px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner strong {\n color: var(--mj-brand-primary);\n}\n\n/* Pin Empty State */\n.pin-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px 20px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.pin-empty-state > i {\n font-size: 40px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.pin-empty-state h3 {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n margin: 0 0 6px 0;\n}\n\n.pin-empty-state p {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 360px;\n margin: 0 0 16px 0;\n}\n\n/* Pin Grid */\n.pin-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n}\n\n/* Group Header */\n.group-header {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0 4px 0;\n margin-top: 8px;\n}\n\n.group-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.group-line {\n flex: 1;\n height: 1px;\n background: var(--mj-border-default);\n}\n\n.group-count {\n font-size: 11px;\n color: var(--mj-text-disabled);\n background: var(--mj-bg-surface-card);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.group-name-input {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 8px;\n background: var(--mj-bg-surface);\n outline: none;\n width: 160px;\n}\n\n.group-edit-controls {\n display: flex;\n gap: 6px;\n}\n\n.group-edit-btn {\n background: none;\n border: 1px solid transparent;\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n padding: 2px 8px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n/* Pin Card */\n.pin-card {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n}\n\n.pin-card:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n box-shadow: var(--mj-shadow-md);\n transform: translateY(-2px);\n}\n\n.pin-card.edit-mode {\n cursor: grab;\n}\n\n.pin-card.edit-mode:active {\n cursor: grabbing;\n}\n\n.pin-card.dragging {\n opacity: 0.5;\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-lg);\n transform: rotate(2deg);\n}\n\n.pin-card.drag-over {\n border-color: var(--mj-brand-primary);\n border-style: dashed;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Edit controls overlay */\n.edit-controls {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n pointer-events: none;\n}\n\n.edit-controls > * {\n pointer-events: auto;\n}\n\n.drag-handle {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 14px;\n cursor: grab;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.drag-handle:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions {\n display: flex;\n gap: 4px;\n}\n\n.edit-card-btn {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 12px;\n cursor: pointer;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n/* Pin Thumbnail */\n.pin-thumbnail {\n width: 100%;\n aspect-ratio: 16 / 10;\n overflow: hidden;\n position: relative;\n}\n\n.pin-thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode > i {\n font-size: 36px;\n color: var(--pin-icon-color, var(--mj-text-muted));\n opacity: 0.7;\n}\n\n/* Hover overlay */\n.pin-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n background: rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.pin-card:hover .pin-overlay {\n opacity: 1;\n pointer-events: auto;\n}\n\n.open-btn {\n padding: 8px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n box-shadow: var(--mj-shadow-md);\n}\n\n/* Pin Info */\n.pin-info {\n padding: 10px 12px;\n}\n\n.pin-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.pin-name .more-btn {\n margin-left: auto;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 2px 4px;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.pin-card:hover .pin-name .more-btn {\n opacity: 1;\n}\n\n.pin-name .more-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 6px;\n width: 100%;\n outline: none;\n background: var(--mj-bg-surface);\n}\n\n.pin-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.pin-meta > i {\n font-size: 10px;\n}\n\n.pin-app-badge {\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n/* Add Pin Card */\n.add-pin-card {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 2px dashed var(--mj-border-default);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 180px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n gap: 8px;\n color: var(--mj-text-muted);\n}\n\n.add-pin-card:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card i {\n font-size: 28px;\n}\n\n.add-pin-card span {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n}\n\n/* ========================================\n PIN CONTEXT MENU (ELLIPSIS)\n ======================================== */\n.pin-context-menu {\n position: fixed;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n min-width: 180px;\n z-index: 10001;\n overflow: hidden;\n animation: pinMenuIn 0.15s ease;\n}\n\n@keyframes pinMenuIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 14px;\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: background 0.15s;\n}\n\n.pin-context-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item i {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger i {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header {\n font-weight: var(--mj-font-medium);\n cursor: default;\n font-size: 12px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header:hover {\n background: transparent;\n}\n\n.pin-context-item.submenu-item {\n padding-left: 30px;\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider {\n height: 1px;\n background: var(--mj-border-default);\n margin: 4px 0;\n}\n\n/* ========================================\n SLIDE-IN PANEL (Add Pin)\n ======================================== */\n.slide-panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 2000;\n}\n\n.slide-panel {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-xl);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.slide-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header h3 {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n}\n\n.slide-panel-header h3 i {\n color: var(--mj-brand-primary);\n}\n\n.slide-panel-close {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n/* Search box */\n.search-box {\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 8px 12px;\n transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper:focus-within {\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper i {\n color: var(--mj-text-muted);\n font-size: 14px;\n}\n\n.search-input-wrapper input {\n border: none;\n outline: none;\n background: transparent;\n font-size: 14px;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.search-input-wrapper input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* Group selector */\n.group-selector {\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.group-selector label {\n font-weight: var(--mj-font-medium);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.group-selector select {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.new-group-input {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n/* Panel results */\n.panel-results {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n}\n\n.panel-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.panel-section {\n margin-bottom: 20px;\n}\n\n.panel-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title i:first-child {\n font-size: 12px;\n}\n\n.panel-section-title.collapsible {\n cursor: pointer;\n user-select: none;\n transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible:hover {\n color: var(--mj-text-secondary);\n}\n\n.section-chevron {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.panel-count {\n margin-left: auto;\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 8px;\n font-size: 10px;\n color: var(--mj-text-disabled);\n}\n\n/* App hierarchy in panel */\n.panel-app-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 6px 12px;\n margin-top: 8px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header:first-child {\n margin-top: 0;\n}\n\n.panel-app-icon {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-app-icon i {\n font-size: 14px;\n color: var(--panel-app-color);\n}\n\n.panel-app-name {\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* Nav items under app \u2014 indented with left border accent */\n.panel-item.panel-nav-item {\n padding: 10px 12px 10px 32px;\n margin-left: 12px;\n border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item:last-of-type {\n border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item:hover {\n border-left-color: var(--mj-brand-primary);\n}\n\n/* New group row */\n.new-group-row {\n padding: 0 20px 12px 20px;\n}\n\n.new-group-input {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n.panel-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n cursor: pointer;\n}\n\n.panel-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-item-icon i {\n font-size: 14px;\n}\n\n.panel-item-info {\n flex: 1;\n min-width: 0;\n}\n\n.panel-item-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-item-sub {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.panel-item-action {\n flex-shrink: 0;\n}\n\n.panel-item-action button {\n padding: 4px 12px;\n border-radius: var(--mj-radius-sm);\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.pin-btn {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge {\n background: transparent;\n color: var(--mj-status-success);\n border: 1px solid var(--mj-status-success);\n cursor: default !important;\n}\n\n\n/* ========================================\n RESPONSIVE DESIGN\n ======================================== */\n\n/* Tablet and smaller desktop */\n@media (max-width: 1200px) {\n .quick-access-sidebar {\n width: 280px;\n }\n\n .home-dashboard.sidebar-open .main-content {\n margin-right: 280px;\n }\n\n .apps-grid {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n}\n\n/* Tablet */\n@media (max-width: 992px) {\n .main-content {\n padding: 24px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-3xl);\n }\n\n /* Make sidebar an overlay on tablet */\n .quick-access-sidebar {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n z-index: 1000;\n box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n }\n\n .home-dashboard.sidebar-open .main-content {\n margin-right: 0;\n }\n\n /* Show backdrop when sidebar is open on tablet */\n .home-dashboard.sidebar-open::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 320px;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n .home-dashboard {\n height: auto;\n min-height: 100%;\n overflow: visible;\n }\n\n .main-content {\n padding: 20px;\n padding-bottom: 100px; /* Space for FAB button */\n overflow: visible;\n }\n\n .home-header {\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-2xl);\n }\n\n /* Full-width sidebar on mobile \u2014 fixed overlay covering full viewport */\n .quick-access-sidebar {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n max-width: 100%;\n z-index: 10000;\n border-left: none;\n border-top: none;\n }\n\n /* No separate backdrop needed on mobile \u2014 sidebar covers full screen */\n .home-dashboard.sidebar-open::before {\n display: none;\n }\n\n /* No ::after backdrop needed on mobile */\n .home-dashboard.sidebar-open::after {\n display: none;\n }\n\n .pin-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 12px;\n }\n\n .slide-panel {\n width: 100%;\n }\n\n .apps-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .app-card {\n padding: 16px;\n }\n\n .app-icon {\n width: 44px;\n height: 44px;\n }\n\n .app-icon i {\n font-size: var(--mj-text-lg);\n }\n\n .app-name {\n font-size: var(--mj-text-sm);\n }\n\n .nav-preview {\n display: none;\n }\n\n /* Move FAB to bottom-right on mobile \u2014 fixed so it stays visible while scrolling */\n .sidebar-fab-toggle {\n position: fixed;\n top: auto;\n bottom: 20px;\n right: 20px;\n width: 48px;\n height: 48px;\n font-size: var(--mj-text-lg);\n }\n}\n\n@media (max-width: 480px) {\n .main-content {\n padding: 16px;\n padding-bottom: 80px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-xl);\n }\n\n .greeting-section .date {\n font-size: var(--mj-text-sm);\n }\n\n .section-title {\n font-size: var(--mj-text-base);\n margin-bottom: 16px;\n }\n\n .sidebar-fab-toggle {\n bottom: 16px;\n right: 16px;\n width: 44px;\n height: 44px;\n font-size: var(--mj-text-base);\n }\n}\n"] }]
|
|
2565
|
+
args: [{ standalone: false, selector: 'mj-home-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"home-dashboard\" [class.sidebar-open]=\"sidebarOpen && hasSidebarContent\">\n <!-- Main Content Area -->\n <div class=\"main-content\">\n <!-- Header Section -->\n <div class=\"home-header\">\n <div class=\"greeting-section\">\n <h1>{{ greeting }}, {{ currentUser?.Name }}</h1>\n <p class=\"date\">{{ formattedDate }}</p>\n </div>\n </div>\n\n <!-- Pinned Section -->\n @if (!isLoading) {\n <div class=\"pinned-section\">\n <div class=\"pinned-header\">\n <h2 class=\"section-title\">\n <i class=\"fa-solid fa-thumbtack\"></i>\n Pinned\n </h2>\n <div class=\"pinned-actions\">\n @if (EditMode) {\n <button class=\"pin-action-btn done\" (click)=\"ToggleEditMode()\">\n <i class=\"fa-solid fa-check\"></i> Done\n </button>\n } @else {\n <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Pin\n </button>\n @if (PinnedItems.length > 0) {\n <button class=\"pin-action-btn\" (click)=\"ToggleEditMode()\">\n <i class=\"fa-solid fa-pen\"></i> Edit\n </button>\n }\n }\n </div>\n </div>\n\n @if (EditMode) {\n <div class=\"edit-mode-banner\">\n <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n <span><strong>Edit mode</strong> \u2014 Drag cards to reorder. Click names to rename.</span>\n </div>\n }\n\n <!-- Empty State -->\n @if (PinnedItems.length === 0 && !EditMode) {\n <div class=\"pin-empty-state\">\n <i class=\"fa-solid fa-thumbtack\"></i>\n <h3>No pinned items yet</h3>\n <p>Pin your favorite dashboards, views, queries, and reports for quick access.</p>\n <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add your first pin\n </button>\n </div>\n }\n\n <!-- Pin Grid -->\n @if (PinnedItems.length > 0) {\n <div class=\"pin-grid\">\n <!-- Ungrouped Pins -->\n @for (pin of UngroupedPins; track trackByPin($index, pin)) {\n <div class=\"pin-card\"\n [class.edit-mode]=\"EditMode\"\n [class.dragging]=\"DraggingPinId === pin.Id\"\n [class.drag-over]=\"DragOverPinId === pin.Id\"\n [draggable]=\"EditMode\"\n (dragstart)=\"OnDragStart($event, pin)\"\n (dragover)=\"OnDragOver($event, pin)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop($event, pin)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"OnPinClick(pin)\">\n\n <!-- Edit mode controls -->\n @if (EditMode) {\n <div class=\"edit-controls\">\n <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n <div class=\"edit-card-actions\">\n <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Thumbnail / Icon -->\n @if (pin.Thumbnail) {\n <div class=\"pin-thumbnail\">\n <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n } @else if (pin.ResourceType === 'Actions') {\n <div class=\"pin-thumbnail action-mode\"\n [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n }\n\n <!-- Pin Info -->\n <div class=\"pin-info\">\n @if (EditMode && EditingPinId === pin.Id) {\n <input class=\"pin-name-input\"\n [value]=\"pin.DisplayName\"\n (blur)=\"SavePinName(pin.Id, GetInputValue($event))\"\n (keydown.enter)=\"SavePinName(pin.Id, GetInputValue($event))\"\n (click)=\"$event.stopPropagation()\" />\n } @else {\n <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n {{ pin.DisplayName }}\n @if (!EditMode) {\n <button class=\"more-btn\" (click)=\"ShowPinMenu($event, pin)\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n }\n </div>\n }\n <div class=\"pin-meta\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n {{ GetResourceTypeLabel(pin) }}\n @if (pin.ApplicationName && pin.ResourceType !== 'Custom') {\n <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Grouped Pins -->\n @for (group of PinGroups; track trackByGroup($index, group)) {\n <!-- Group Header -->\n <div class=\"group-header\">\n @if (EditMode && EditingGroupName === group) {\n <input class=\"group-name-input\"\n [value]=\"group\"\n (blur)=\"SaveGroupName(group, GetInputValue($event))\"\n (keydown.enter)=\"SaveGroupName(group, GetInputValue($event))\" />\n } @else {\n <span class=\"group-name\" (click)=\"EditMode ? StartEditingGroup(group) : null\">{{ group }}</span>\n }\n <div class=\"group-line\"></div>\n <span class=\"group-count\">{{ GetPinsInGroup(group).length }} pins</span>\n @if (EditMode) {\n <div class=\"group-edit-controls\">\n <button class=\"group-edit-btn danger\" (click)=\"RemoveGroup(group)\">\n <i class=\"fa-solid fa-folder-minus\"></i> Remove Group\n </button>\n </div>\n }\n </div>\n\n <!-- Pins in Group -->\n @for (pin of GetPinsInGroup(group); track trackByPin($index, pin)) {\n <div class=\"pin-card\"\n [class.edit-mode]=\"EditMode\"\n [class.dragging]=\"DraggingPinId === pin.Id\"\n [class.drag-over]=\"DragOverPinId === pin.Id\"\n [draggable]=\"EditMode\"\n (dragstart)=\"OnDragStart($event, pin)\"\n (dragover)=\"OnDragOver($event, pin)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop($event, pin)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"OnPinClick(pin)\">\n\n @if (EditMode) {\n <div class=\"edit-controls\">\n <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n <div class=\"edit-card-actions\">\n <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n @if (pin.Thumbnail) {\n <div class=\"pin-thumbnail\">\n <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n } @else if (pin.ResourceType === 'Actions') {\n <div class=\"pin-thumbnail action-mode\"\n [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n @if (!EditMode) {\n <div class=\"pin-overlay\">\n <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n </div>\n }\n </div>\n }\n\n <div class=\"pin-info\">\n @if (EditMode && EditingPinId === pin.Id) {\n <input class=\"pin-name-input\"\n [value]=\"pin.DisplayName\"\n (blur)=\"SavePinName(pin.Id, $event.target.value)\"\n (keydown.enter)=\"SavePinName(pin.Id, $event.target.value)\"\n (click)=\"$event.stopPropagation()\" />\n } @else {\n <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n {{ pin.DisplayName }}\n @if (!EditMode) {\n <button class=\"more-btn\" (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n }\n </div>\n }\n <div class=\"pin-meta\">\n <i [class]=\"GetPinIcon(pin)\"></i>\n {{ GetResourceTypeLabel(pin) }}\n @if (pin.ApplicationName) {\n <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n }\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Add Pin card (edit mode) -->\n @if (EditMode) {\n <div class=\"add-pin-card\" (click)=\"OpenAddPinPanel()\">\n <i class=\"fa-solid fa-plus\"></i>\n <span>Add Pin</span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Pin Context Menu (ellipsis) -->\n @if (PinMenuVisible && PinMenuPin) {\n <div class=\"pin-context-menu\"\n [style.left.px]=\"PinMenuX\"\n [style.top.px]=\"PinMenuY\">\n <div class=\"pin-context-item\" (click)=\"OnPinMenuEdit()\">\n <i class=\"fa-solid fa-pen\"></i>\n <span>Edit</span>\n </div>\n <div class=\"pin-context-divider\"></div>\n <div class=\"pin-context-submenu\">\n <div class=\"pin-context-item submenu-header\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>Move to Group</span>\n </div>\n @if (PinMenuPin.Group) {\n <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(undefined)\">\n <span>(No group)</span>\n </div>\n }\n @for (group of PinGroups; track group) {\n @if (group !== PinMenuPin.Group) {\n <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(group)\">\n <span>{{ group }}</span>\n </div>\n }\n }\n </div>\n <div class=\"pin-context-divider\"></div>\n <div class=\"pin-context-item danger\" (click)=\"OnPinMenuUnpin()\">\n <i class=\"fa-solid fa-thumbtack-slash\"></i>\n <span>Unpin</span>\n </div>\n </div>\n }\n\n <!-- Add Pin Slide-In Panel -->\n @if (AddPanelOpen) {\n <div class=\"slide-panel-backdrop\" (click)=\"CloseAddPinPanel()\"></div>\n <div class=\"slide-panel\">\n <div class=\"slide-panel-header\">\n <h3><i class=\"fa-solid fa-thumbtack\"></i> Add Pin</h3>\n <button class=\"slide-panel-close\" (click)=\"CloseAddPinPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <div class=\"search-box\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <input type=\"text\"\n placeholder=\"Search apps, dashboards, views, queries...\"\n [(ngModel)]=\"AddPanelSearchQuery\" />\n </div>\n </div>\n\n <div class=\"group-selector\">\n <label><i class=\"fa-solid fa-folder\"></i> Add to group:</label>\n <select [(ngModel)]=\"AddPanelSelectedGroup\">\n <option value=\"\">(No group)</option>\n @for (group of PinGroups; track group) {\n <option [value]=\"group\">{{ group }}</option>\n }\n <option value=\"__new__\">+ New group...</option>\n </select>\n </div>\n @if (AddPanelSelectedGroup === '__new__') {\n <div class=\"new-group-row\">\n <input class=\"new-group-input\"\n type=\"text\"\n placeholder=\"Enter new group name...\"\n [(ngModel)]=\"AddPanelNewGroupName\" />\n </div>\n }\n\n <div class=\"panel-results\">\n @if (AddPanelLoading) {\n <div class=\"panel-loading\">\n <mj-loading text=\"Loading resources...\" size=\"small\"></mj-loading>\n </div>\n } @else {\n <!-- Apps with Nav Items -->\n @if (FilterApps().length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('apps')\">\n <i class=\"fa-solid fa-grid-2\"></i> Applications\n <span class=\"panel-count\">{{ FilterApps().length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['apps']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['apps']\"></i>\n </div>\n @if (!PanelSectionCollapsed['apps']) {\n @for (app of FilterApps(); track app.appId) {\n <div class=\"panel-app-header\" [style.--panel-app-color]=\"app.color\">\n <div class=\"panel-app-icon\">\n <i [class]=\"app.icon\"></i>\n </div>\n <span class=\"panel-app-name\">{{ app.appName }}</span>\n </div>\n @for (ni of app.navItems; track ni.label) {\n <div class=\"panel-item panel-nav-item\">\n <div class=\"panel-item-icon\" [style.background]=\"'color-mix(in srgb, ' + app.color + ' 10%, var(--mj-bg-surface-card))'\">\n <i [class]=\"ni.icon\" [style.color]=\"app.color\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ ni.label }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (ni.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinAppNavItem(app.appName, app.icon, app.color, ni.label, ni.icon)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n }\n </div>\n }\n\n <!-- Dashboards (metadata-driven Config type only) -->\n @if (FilterPanelItems(AvailableDashboards).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('dashboards')\">\n <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['dashboards']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['dashboards']\"></i>\n </div>\n @if (!PanelSectionCollapsed['dashboards']) {\n @for (item of FilterPanelItems(AvailableDashboards); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-gauge-high\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('Dashboards', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Views -->\n @if (FilterPanelItems(AvailableViews).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('views')\">\n <i class=\"fa-solid fa-table-list\"></i> Views\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableViews).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['views']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['views']\"></i>\n </div>\n @if (!PanelSectionCollapsed['views']) {\n @for (item of FilterPanelItems(AvailableViews); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n <div class=\"panel-item-sub\">{{ item.entityName }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('User Views', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Queries -->\n @if (FilterPanelItems(AvailableQueries).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('queries')\">\n <i class=\"fa-solid fa-database\"></i> Queries\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['queries']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['queries']\"></i>\n </div>\n @if (!PanelSectionCollapsed['queries']) {\n @for (item of FilterPanelItems(AvailableQueries); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-database\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n </div>\n <div class=\"panel-item-action\">\n @if (item.pinned) {\n <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n } @else {\n <button class=\"pin-btn\" (click)=\"PinFromPanel('Queries', item.id, item.name)\">\n <i class=\"fa-solid fa-plus\"></i> Pin\n </button>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Quick Actions -->\n @if (FilterPanelItems(AvailableActions).length > 0) {\n <div class=\"panel-section\">\n <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('actions')\">\n <i class=\"fa-solid fa-bolt\"></i> Quick Actions\n <span class=\"panel-count\">{{ FilterPanelItems(AvailableActions).length }}</span>\n <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['actions']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['actions']\"></i>\n </div>\n @if (!PanelSectionCollapsed['actions']) {\n @for (item of FilterPanelItems(AvailableActions); track item.id) {\n <div class=\"panel-item\">\n <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n <i class=\"fa-solid fa-bolt\" style=\"color: var(--mj-brand-primary)\"></i>\n </div>\n <div class=\"panel-item-info\">\n <div class=\"panel-item-name\">{{ item.name }}</div>\n @if (item.description) {\n <div class=\"panel-item-sub\">{{ item.description }}</div>\n }\n </div>\n <div class=\"panel-item-action\">\n <button class=\"pin-btn\" (click)=\"OpenActionPinConfig(item.id, item.name, item.description)\">\n <i class=\"fa-solid fa-sliders\"></i> Configure\n </button>\n </div>\n </div>\n }\n }\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- Action Pin Dialogs -->\n <mj-action-pin-config-dialog\n [Visible]=\"ActionConfigDialogVisible\"\n [ActionID]=\"ActionConfigActionId\"\n [ActionName]=\"ActionConfigActionName\"\n [ActionDescription]=\"ActionConfigActionDescription\"\n (Result)=\"OnActionConfigResult($event)\">\n </mj-action-pin-config-dialog>\n\n <mj-action-pin-runner-dialog\n [Visible]=\"ActionRunnerDialogVisible\"\n [Pin]=\"ActionRunnerPin\"\n (Result)=\"OnActionRunnerResult($event)\">\n </mj-action-pin-runner-dialog>\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Apps Grid -->\n @if (!isLoading) {\n <div class=\"apps-section\">\n <h2 class=\"section-title\">\n <i class=\"fa-solid fa-grid-2\"></i>\n My Applications\n </h2>\n <div class=\"apps-grid\">\n @for (appData of appsDisplayData; track trackByApp($index, appData)) {\n <div\n class=\"app-card\"\n [style.--app-color]=\"appData.color\"\n (click)=\"onAppClick(appData.app)\">\n <!-- App Icon -->\n <div class=\"app-icon-wrapper\">\n <div class=\"app-icon\">\n <i [class]=\"appData.icon\"></i>\n </div>\n </div>\n <!-- App Info -->\n <div class=\"app-info\">\n <h3 class=\"app-name\">{{ appData.app.Name }}</h3>\n @if (appData.app.Description) {\n <p class=\"app-description\">{{ appData.app.Description }}</p>\n }\n <!-- Nav Items Preview -->\n @if (appData.navItemsCount > 0) {\n <div class=\"nav-preview\">\n @for (item of appData.navItemsPreview; track trackByNavItem($index, item)) {\n <div class=\"nav-item-chip\">\n <i [class]=\"item.Icon\"></i>\n <span>{{ item.Label }}</span>\n </div>\n }\n @if (appData.showMoreItems) {\n <span class=\"more-items\">\n +{{ appData.moreItemsCount }} more\n </span>\n }\n </div>\n }\n </div>\n <!-- Hover Arrow -->\n <div class=\"app-arrow\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </div>\n </div>\n }\n </div>\n <!-- Empty State -->\n @if (apps.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </div>\n <h3>No Applications Available</h3>\n <p>You don't have any applications configured yet.</p>\n <button mjButton\n variant=\"primary\"\n (click)=\"openConfigDialog()\">\n <i class=\"fa-solid fa-gear\"></i>\n Configure Applications\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Collapsible Right Sidebar -->\n @if (hasSidebarContent) {\n <div class=\"quick-access-sidebar\">\n <div class=\"sidebar-header\">\n <h3>\n <i class=\"fa-solid fa-bolt\"></i>\n Quick Access\n </h3>\n <button class=\"sidebar-close-btn\" (click)=\"toggleSidebar()\" title=\"Close panel\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"sidebar-content\">\n <!-- Unread Notifications Section -->\n @if (unreadNotifications.length > 0) {\n <div class=\"sidebar-section notifications-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-bell\"></i>\n Notifications\n <span class=\"section-badge\">{{ unreadNotifications.length }}</span>\n </h4>\n <div class=\"sidebar-items\">\n @for (notification of unreadNotifications; track trackByNotification($index, notification)) {\n <div\n class=\"sidebar-item notification-item\"\n (click)=\"onNotificationClick(notification)\">\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ notification.Title }}</span>\n <span class=\"sidebar-item-subtitle\">{{ notification.Message | slice:0:40 }}{{ (notification.Message?.length || 0) > 40 ? '...' : '' }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- Favorites Section -->\n @if (favorites.length > 0 || favoritesLoading) {\n <div class=\"sidebar-section favorites-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-star\"></i>\n Favorites\n </h4>\n @if (!favoritesLoading) {\n <div class=\"sidebar-items\">\n @for (favorite of favorites; track trackByFavorite($index, favorite)) {\n <div\n class=\"sidebar-item favorite-item\"\n (click)=\"onFavoriteClick(favorite)\">\n <div class=\"sidebar-item-icon\">\n <i [class]=\"getEntityIconByName(favorite.Entity)\"></i>\n </div>\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ getFavoriteDisplayName(favorite) }}</span>\n <span class=\"sidebar-item-subtitle\">{{ favorite.Entity }}</span>\n </div>\n </div>\n }\n </div>\n }\n @if (favoritesLoading) {\n <div class=\"sidebar-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading...</span>\n </div>\n }\n </div>\n }\n <!-- Recents Section -->\n @if (recentItems.length > 0 || recentsLoading) {\n <div class=\"sidebar-section recents-section\">\n <h4 class=\"sidebar-section-title\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n Recent\n </h4>\n @if (!recentsLoading) {\n <div class=\"sidebar-items\">\n @for (item of recentItems; track trackByRecent($index, item)) {\n <div\n class=\"sidebar-item recent-item\"\n (click)=\"onRecentClick(item)\">\n <div class=\"sidebar-item-icon\">\n <i [class]=\"getEntityIconByName(item.entityName)\"></i>\n </div>\n <div class=\"sidebar-item-info\">\n <span class=\"sidebar-item-title\">{{ item.recordName || item.recordId }}</span>\n <span class=\"sidebar-item-subtitle\">{{ item.entityName }} \u00B7 {{ formatDate(item.latestAt) }}</span>\n </div>\n </div>\n }\n </div>\n }\n @if (recentsLoading) {\n <div class=\"sidebar-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading...</span>\n </div>\n }\n </div>\n }\n <!-- Empty sidebar state -->\n @if (!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0) {\n <div class=\"sidebar-empty\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No quick access items</p>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Quick Access FAB Toggle (Fixed Button) -->\n @if (hasSidebarContent && !sidebarOpen) {\n <button class=\"sidebar-fab-toggle\"\n (click)=\"toggleSidebar()\"\n title=\"Quick Access\">\n <i class=\"fa-solid fa-bolt\"></i>\n @if (unreadNotifications.length > 0) {\n <span class=\"fab-badge\">{{ unreadNotifications.length }}</span>\n }\n </button>\n }\n\n <!-- App Configuration Dialog -->\n <mj-user-app-config\n #appConfigDialog\n [(ShowDialog)]=\"showConfigDialog\"\n (ConfigSaved)=\"onConfigSaved()\">\n </mj-user-app-config>\n</div>\n", styles: [".home-dashboard {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n/* Main Content Area */\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 32px;\n overflow-y: auto;\n transition: margin-right var(--mj-transition-slow);\n}\n\n/* Sidebar open state adjusts main content on desktop */\n.home-dashboard.sidebar-open .main-content {\n margin-right: 320px;\n}\n\n/* Header */\n.home-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 32px;\n}\n\n.greeting-section h1 {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-4xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.greeting-section .date {\n margin: 0;\n font-size: var(--mj-text-base);\n color: var(--mj-text-muted);\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n position: absolute;\n top: 20px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: var(--mj-radius-full);\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xl);\n cursor: pointer;\n box-shadow: var(--mj-shadow-brand-md);\n transition: all var(--mj-transition-base);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n background: var(--mj-brand-primary-hover);\n transform: scale(1.05);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n.fab-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n gap: 16px;\n color: var(--mj-text-muted);\n}\n\n.loading-spinner {\n font-size: var(--mj-text-4xl);\n color: var(--mj-brand-primary);\n}\n\n/* Apps Section */\n.apps-section {\n flex: 0 0 auto;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0 0 24px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.section-title i {\n color: var(--mj-text-muted);\n}\n\n/* Apps Grid */\n.apps-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 20px;\n}\n\n/* App Card */\n.app-card {\n --app-color: var(--mj-text-muted);\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n overflow: hidden;\n}\n\n.app-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background: var(--app-color);\n opacity: 0;\n transition: opacity 0.25s ease;\n}\n\n.app-card:hover {\n border-color: var(--app-color);\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-3px);\n}\n\n.app-card:hover::before {\n opacity: 1;\n}\n\n/* App Icon */\n.app-icon-wrapper {\n flex-shrink: 0;\n}\n\n.app-icon {\n width: 52px;\n height: 52px;\n border-radius: var(--mj-radius-lg);\n background: color-mix(in srgb, var(--app-color) 12%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease;\n}\n\n.app-icon i {\n font-size: var(--mj-text-xl);\n color: var(--app-color);\n transition: transform 0.25s ease;\n}\n\n.app-card:hover .app-icon {\n background: var(--app-color);\n}\n\n.app-card:hover .app-icon i {\n color: var(--mj-text-inverse);\n transform: scale(1.1);\n}\n\n/* App Info */\n.app-info {\n flex: 1;\n min-width: 0;\n}\n\n.app-name {\n margin: 0 0 4px 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.app-description {\n margin: 0 0 10px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Nav Items Preview */\n.nav-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n\n.nav-item-chip {\n display: flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n color: var(--mj-text-secondary);\n}\n\n.nav-item-chip i {\n font-size: 9px;\n color: var(--mj-text-muted);\n}\n\n.more-items {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* App Arrow */\n.app-arrow {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n transition: all 0.25s ease;\n color: var(--app-color);\n font-size: var(--mj-text-base);\n}\n\n.app-card:hover .app-arrow {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\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: 64px 24px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.empty-icon {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-card);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.empty-icon i {\n font-size: var(--mj-text-4xl);\n color: var(--mj-text-disabled);\n}\n\n.empty-state h3 {\n margin: 0 0 8px 0;\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n margin: 0 0 20px 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 400px;\n}\n\n.empty-state button i {\n margin-right: 8px;\n}\n\n/* ========================================\n RIGHT SIDEBAR\n ======================================== */\n.quick-access-sidebar {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform var(--mj-transition-slow);\n overflow: hidden;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.home-dashboard.sidebar-open .quick-access-sidebar {\n transform: translateX(0);\n}\n\n.sidebar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sidebar-header h3 i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n margin-bottom: 20px;\n}\n\n.sidebar-section:last-child {\n margin-bottom: 0;\n}\n\n.sidebar-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n font-size: var(--mj-text-xs);\n}\n\n.notifications-section .sidebar-section-title i {\n color: var(--mj-color-warning-600);\n}\n\n.favorites-section .sidebar-section-title i {\n color: var(--mj-status-warning);\n}\n\n.recents-section .sidebar-section-title i {\n color: var(--mj-brand-primary);\n}\n\n.section-badge {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-md);\n margin-left: auto;\n}\n\n/* Sidebar Items */\n.sidebar-items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.sidebar-item:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sidebar-item-icon i {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.notification-item .sidebar-item-icon {\n background: var(--mj-color-warning-50);\n}\n\n.notification-item .sidebar-item-icon i {\n color: var(--mj-color-warning-600);\n}\n\n.favorite-item .sidebar-item-icon {\n background: var(--mj-color-warning-50);\n}\n\n.favorite-item .sidebar-item-icon i {\n color: var(--mj-color-warning-500);\n}\n\n.recent-item .sidebar-item-icon {\n background: var(--mj-color-info-50);\n}\n\n.recent-item .sidebar-item-icon i {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-item-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n flex: 1;\n}\n\n.sidebar-item-title {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sidebar-loading {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n padding: 8px 0;\n}\n\n.sidebar-loading i {\n color: var(--mj-brand-primary);\n}\n\n.sidebar-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.sidebar-empty i {\n font-size: var(--mj-text-4xl);\n margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n\n\n/* ========================================\n PINNED SECTION\n ======================================== */\n.pinned-section {\n margin-bottom: 32px;\n}\n\n.pinned-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.pinned-header .section-title {\n margin: 0;\n}\n\n.pinned-actions {\n margin-left: auto;\n display: flex;\n gap: 8px;\n}\n\n.pin-action-btn {\n padding: 6px 14px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n/* Edit Mode Banner */\n.edit-mode-banner {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: var(--mj-radius-lg);\n padding: 12px 20px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner strong {\n color: var(--mj-brand-primary);\n}\n\n/* Pin Empty State */\n.pin-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px 20px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n border: 2px dashed var(--mj-border-default);\n text-align: center;\n}\n\n.pin-empty-state > i {\n font-size: 40px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.pin-empty-state h3 {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n margin: 0 0 6px 0;\n}\n\n.pin-empty-state p {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 360px;\n margin: 0 0 16px 0;\n}\n\n/* Pin Grid */\n.pin-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 16px;\n margin-bottom: 12px;\n}\n\n/* Group Header */\n.group-header {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0 4px 0;\n margin-top: 8px;\n}\n\n.group-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.group-line {\n flex: 1;\n height: 1px;\n background: var(--mj-border-default);\n}\n\n.group-count {\n font-size: 11px;\n color: var(--mj-text-disabled);\n background: var(--mj-bg-surface-card);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.group-name-input {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 8px;\n background: var(--mj-bg-surface);\n outline: none;\n width: 160px;\n}\n\n.group-edit-controls {\n display: flex;\n gap: 6px;\n}\n\n.group-edit-btn {\n background: none;\n border: 1px solid transparent;\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n padding: 2px 8px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n/* Pin Card */\n.pin-card {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n}\n\n.pin-card:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n box-shadow: var(--mj-shadow-md);\n transform: translateY(-2px);\n}\n\n.pin-card.edit-mode {\n cursor: grab;\n}\n\n.pin-card.edit-mode:active {\n cursor: grabbing;\n}\n\n.pin-card.dragging {\n opacity: 0.5;\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-lg);\n transform: rotate(2deg);\n}\n\n.pin-card.drag-over {\n border-color: var(--mj-brand-primary);\n border-style: dashed;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Edit controls overlay */\n.edit-controls {\n position: absolute;\n top: 8px;\n left: 8px;\n right: 8px;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n pointer-events: none;\n}\n\n.edit-controls > * {\n pointer-events: auto;\n}\n\n.drag-handle {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 14px;\n cursor: grab;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.drag-handle:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions {\n display: flex;\n gap: 4px;\n}\n\n.edit-card-btn {\n width: 28px;\n height: 28px;\n background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-muted);\n font-size: 12px;\n cursor: pointer;\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-subtle);\n transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n/* Pin Thumbnail */\n.pin-thumbnail {\n width: 100%;\n aspect-ratio: 16 / 10;\n overflow: hidden;\n position: relative;\n}\n\n.pin-thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode > i {\n font-size: 36px;\n color: var(--pin-icon-color, var(--mj-text-muted));\n opacity: 0.7;\n}\n\n/* Action-pin card: colored gradient background with white icon/SVG */\n.pin-thumbnail.action-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse, white);\n background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode > i {\n font-size: 36px;\n color: var(--mj-text-inverse, white);\n}\n\n/* Hover overlay */\n.pin-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n background: rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.pin-card:hover .pin-overlay {\n opacity: 1;\n pointer-events: auto;\n}\n\n.open-btn {\n padding: 8px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: none;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n box-shadow: var(--mj-shadow-md);\n}\n\n/* Pin Info */\n.pin-info {\n padding: 10px 12px;\n}\n\n.pin-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.pin-name .more-btn {\n margin-left: auto;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 2px 4px;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.pin-card:hover .pin-name .more-btn {\n opacity: 1;\n}\n\n.pin-name .more-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n padding: 2px 6px;\n width: 100%;\n outline: none;\n background: var(--mj-bg-surface);\n}\n\n.pin-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.pin-meta > i {\n font-size: 10px;\n}\n\n.pin-app-badge {\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n/* Add Pin Card */\n.add-pin-card {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n border: 2px dashed var(--mj-border-default);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 180px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n gap: 8px;\n color: var(--mj-text-muted);\n}\n\n.add-pin-card:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card i {\n font-size: 28px;\n}\n\n.add-pin-card span {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n}\n\n/* ========================================\n PIN CONTEXT MENU (ELLIPSIS)\n ======================================== */\n.pin-context-menu {\n position: fixed;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n min-width: 180px;\n z-index: 10001;\n overflow: hidden;\n animation: pinMenuIn 0.15s ease;\n}\n\n@keyframes pinMenuIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 14px;\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: background 0.15s;\n}\n\n.pin-context-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item i {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger i {\n color: var(--mj-status-error);\n}\n\n.pin-context-item.danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header {\n font-weight: var(--mj-font-medium);\n cursor: default;\n font-size: 12px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header:hover {\n background: transparent;\n}\n\n.pin-context-item.submenu-item {\n padding-left: 30px;\n font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider {\n height: 1px;\n background: var(--mj-border-default);\n margin: 4px 0;\n}\n\n/* ========================================\n SLIDE-IN PANEL (Add Pin)\n ======================================== */\n.slide-panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 2000;\n}\n\n.slide-panel {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-xl);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.slide-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header h3 {\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n}\n\n.slide-panel-header h3 i {\n color: var(--mj-brand-primary);\n}\n\n.slide-panel-close {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n/* Search box */\n.search-box {\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 8px 12px;\n transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper:focus-within {\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper i {\n color: var(--mj-text-muted);\n font-size: 14px;\n}\n\n.search-input-wrapper input {\n border: none;\n outline: none;\n background: transparent;\n font-size: 14px;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.search-input-wrapper input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* Group selector */\n.group-selector {\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n}\n\n.group-selector label {\n font-weight: var(--mj-font-medium);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.group-selector select {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.new-group-input {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n/* Panel results */\n.panel-results {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n}\n\n.panel-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n}\n\n.panel-section {\n margin-bottom: 20px;\n}\n\n.panel-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title i:first-child {\n font-size: 12px;\n}\n\n.panel-section-title.collapsible {\n cursor: pointer;\n user-select: none;\n transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible:hover {\n color: var(--mj-text-secondary);\n}\n\n.section-chevron {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.panel-count {\n margin-left: auto;\n background: var(--mj-bg-surface-card);\n padding: 1px 6px;\n border-radius: 8px;\n font-size: 10px;\n color: var(--mj-text-disabled);\n}\n\n/* App hierarchy in panel */\n.panel-app-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 6px 12px;\n margin-top: 8px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header:first-child {\n margin-top: 0;\n}\n\n.panel-app-icon {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-app-icon i {\n font-size: 14px;\n color: var(--panel-app-color);\n}\n\n.panel-app-name {\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* Nav items under app \u2014 indented with left border accent */\n.panel-item.panel-nav-item {\n padding: 10px 12px 10px 32px;\n margin-left: 12px;\n border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item:last-of-type {\n border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item:hover {\n border-left-color: var(--mj-brand-primary);\n}\n\n/* New group row */\n.new-group-row {\n padding: 0 20px 12px 20px;\n}\n\n.new-group-input {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-focus);\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n}\n\n.panel-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n cursor: pointer;\n}\n\n.panel-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon {\n width: 36px;\n height: 36px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.panel-item-icon i {\n font-size: 14px;\n}\n\n.panel-item-info {\n flex: 1;\n min-width: 0;\n}\n\n.panel-item-name {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-item-sub {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.panel-item-action {\n flex-shrink: 0;\n}\n\n.panel-item-action button {\n padding: 4px 12px;\n border-radius: var(--mj-radius-sm);\n font-size: 12px;\n font-weight: var(--mj-font-semibold);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.pin-btn {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge {\n background: transparent;\n color: var(--mj-status-success);\n border: 1px solid var(--mj-status-success);\n cursor: default !important;\n}\n\n\n/* ========================================\n RESPONSIVE DESIGN\n ======================================== */\n\n/* Tablet and smaller desktop */\n@media (max-width: 1200px) {\n .quick-access-sidebar {\n width: 280px;\n }\n\n .home-dashboard.sidebar-open .main-content {\n margin-right: 280px;\n }\n\n .apps-grid {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n}\n\n/* Tablet */\n@media (max-width: 992px) {\n .main-content {\n padding: 24px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-3xl);\n }\n\n /* Make sidebar an overlay on tablet */\n .quick-access-sidebar {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 320px;\n z-index: 1000;\n box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n }\n\n .home-dashboard.sidebar-open .main-content {\n margin-right: 0;\n }\n\n /* Show backdrop when sidebar is open on tablet */\n .home-dashboard.sidebar-open::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 320px;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n .home-dashboard {\n height: auto;\n min-height: 100%;\n overflow: visible;\n }\n\n .main-content {\n padding: 20px;\n padding-bottom: 100px; /* Space for FAB button */\n overflow: visible;\n }\n\n .home-header {\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-2xl);\n }\n\n /* Full-width sidebar on mobile \u2014 fixed overlay covering full viewport */\n .quick-access-sidebar {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n max-width: 100%;\n z-index: 10000;\n border-left: none;\n border-top: none;\n }\n\n /* No separate backdrop needed on mobile \u2014 sidebar covers full screen */\n .home-dashboard.sidebar-open::before {\n display: none;\n }\n\n /* No ::after backdrop needed on mobile */\n .home-dashboard.sidebar-open::after {\n display: none;\n }\n\n .pin-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 12px;\n }\n\n .slide-panel {\n width: 100%;\n }\n\n .apps-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .app-card {\n padding: 16px;\n }\n\n .app-icon {\n width: 44px;\n height: 44px;\n }\n\n .app-icon i {\n font-size: var(--mj-text-lg);\n }\n\n .app-name {\n font-size: var(--mj-text-sm);\n }\n\n .nav-preview {\n display: none;\n }\n\n /* Move FAB to bottom-right on mobile \u2014 fixed so it stays visible while scrolling */\n .sidebar-fab-toggle {\n position: fixed;\n top: auto;\n bottom: 20px;\n right: 20px;\n width: 48px;\n height: 48px;\n font-size: var(--mj-text-lg);\n }\n}\n\n@media (max-width: 480px) {\n .main-content {\n padding: 16px;\n padding-bottom: 80px;\n }\n\n .greeting-section h1 {\n font-size: var(--mj-text-xl);\n }\n\n .greeting-section .date {\n font-size: var(--mj-text-sm);\n }\n\n .section-title {\n font-size: var(--mj-text-base);\n margin-bottom: 16px;\n }\n\n .sidebar-fab-toggle {\n bottom: 16px;\n right: 16px;\n width: 44px;\n height: 44px;\n font-size: var(--mj-text-base);\n }\n}\n"] }]
|
|
2357
2566
|
}], () => [{ type: i1.ApplicationManager }, { type: i2.RecentAccessService }, { type: i0.ChangeDetectorRef }], { appConfigDialog: [{
|
|
2358
2567
|
type: ViewChild,
|
|
2359
2568
|
args: ['appConfigDialog']
|
|
2360
2569
|
}] }); })();
|
|
2361
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/Home/home-dashboard.component.ts", lineNumber:
|
|
2570
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/Home/home-dashboard.component.ts", lineNumber: 44 }); })();
|
|
2362
2571
|
//# sourceMappingURL=home-dashboard.component.js.map
|