@memberjunction/ng-explorer-settings 3.1.1 → 3.3.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/lib/application-management/application-dialog/application-dialog.component.d.ts +15 -1
- package/dist/lib/application-management/application-dialog/application-dialog.component.d.ts.map +1 -1
- package/dist/lib/application-management/application-dialog/application-dialog.component.js +329 -190
- package/dist/lib/application-management/application-dialog/application-dialog.component.js.map +1 -1
- package/dist/lib/application-management/application-management.component.d.ts.map +1 -1
- package/dist/lib/application-management/application-management.component.js +265 -184
- package/dist/lib/application-management/application-management.component.js.map +1 -1
- package/dist/lib/entity-permissions/entity-permissions.component.d.ts +1 -0
- package/dist/lib/entity-permissions/entity-permissions.component.d.ts.map +1 -1
- package/dist/lib/entity-permissions/entity-permissions.component.js +369 -192
- package/dist/lib/entity-permissions/entity-permissions.component.js.map +1 -1
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.d.ts.map +1 -1
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js +160 -143
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js.map +1 -1
- package/dist/lib/module.d.ts +17 -21
- package/dist/lib/module.d.ts.map +1 -1
- package/dist/lib/module.js +20 -39
- package/dist/lib/module.js.map +1 -1
- package/dist/lib/notification-preferences/notification-preferences.component.d.ts +113 -0
- package/dist/lib/notification-preferences/notification-preferences.component.d.ts.map +1 -0
- package/dist/lib/notification-preferences/notification-preferences.component.js +382 -0
- package/dist/lib/notification-preferences/notification-preferences.component.js.map +1 -0
- package/dist/lib/role-management/role-dialog/role-dialog.component.d.ts.map +1 -1
- package/dist/lib/role-management/role-dialog/role-dialog.component.js +93 -89
- package/dist/lib/role-management/role-dialog/role-dialog.component.js.map +1 -1
- package/dist/lib/role-management/role-management.component.d.ts +1 -0
- package/dist/lib/role-management/role-management.component.d.ts.map +1 -1
- package/dist/lib/role-management/role-management.component.js +275 -158
- package/dist/lib/role-management/role-management.component.js.map +1 -1
- package/dist/lib/settings/settings.component.d.ts +54 -1
- package/dist/lib/settings/settings.component.d.ts.map +1 -1
- package/dist/lib/settings/settings.component.js +528 -172
- package/dist/lib/settings/settings.component.js.map +1 -1
- package/dist/lib/shared/settings-card.component.d.ts.map +1 -1
- package/dist/lib/shared/settings-card.component.js +21 -18
- package/dist/lib/shared/settings-card.component.js.map +1 -1
- package/dist/lib/sql-logging/sql-logging.component.d.ts +70 -10
- package/dist/lib/sql-logging/sql-logging.component.d.ts.map +1 -1
- package/dist/lib/sql-logging/sql-logging.component.js +547 -205
- package/dist/lib/sql-logging/sql-logging.component.js.map +1 -1
- package/dist/lib/user-app-config/user-app-config.component.d.ts +21 -3
- package/dist/lib/user-app-config/user-app-config.component.d.ts.map +1 -1
- package/dist/lib/user-app-config/user-app-config.component.js +202 -147
- package/dist/lib/user-app-config/user-app-config.component.js.map +1 -1
- package/dist/lib/user-management/user-dialog/user-dialog.component.d.ts.map +1 -1
- package/dist/lib/user-management/user-dialog/user-dialog.component.js +120 -116
- package/dist/lib/user-management/user-dialog/user-dialog.component.js.map +1 -1
- package/dist/lib/user-management/user-management.component.d.ts +32 -2
- package/dist/lib/user-management/user-management.component.d.ts.map +1 -1
- package/dist/lib/user-management/user-management.component.js +822 -297
- package/dist/lib/user-management/user-management.component.js.map +1 -1
- package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts +31 -2
- package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts.map +1 -1
- package/dist/lib/user-profile-settings/user-profile-settings.component.js +213 -80
- package/dist/lib/user-profile-settings/user-profile-settings.component.js.map +1 -1
- package/dist/public-api.d.ts +1 -0
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +1 -0
- package/dist/public-api.js.map +1 -1
- package/package.json +21 -20
|
@@ -11,27 +11,25 @@ import { RunView, Metadata } from '@memberjunction/core';
|
|
|
11
11
|
import { BaseDashboard } from '@memberjunction/ng-shared';
|
|
12
12
|
import { RegisterClass } from '@memberjunction/global';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
|
-
import * as i1 from "
|
|
15
|
-
import * as i2 from "
|
|
14
|
+
import * as i1 from "@memberjunction/ng-shared-generic";
|
|
15
|
+
import * as i2 from "./application-dialog/application-dialog.component";
|
|
16
|
+
import * as i3 from "@angular/common";
|
|
16
17
|
const _forTrack0 = ($index, $item) => $item.ID;
|
|
17
|
-
function
|
|
18
|
-
i0.ɵɵelementStart(0, "div",
|
|
19
|
-
i0.ɵɵelement(
|
|
18
|
+
function ApplicationManagementComponent_Conditional_60_Template(rf, ctx) { if (rf & 1) {
|
|
19
|
+
i0.ɵɵelementStart(0, "div", 34);
|
|
20
|
+
i0.ɵɵelement(1, "mj-loading", 39);
|
|
20
21
|
i0.ɵɵelementEnd();
|
|
21
|
-
i0.ɵɵelementStart(5, "div", 35);
|
|
22
|
-
i0.ɵɵtext(6, "Loading applications...");
|
|
23
|
-
i0.ɵɵelementEnd()();
|
|
24
22
|
} }
|
|
25
|
-
function
|
|
23
|
+
function ApplicationManagementComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
|
|
26
24
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
27
|
-
i0.ɵɵelementStart(0, "div",
|
|
28
|
-
i0.ɵɵelement(2, "i",
|
|
29
|
-
i0.ɵɵelementStart(3, "p",
|
|
25
|
+
i0.ɵɵelementStart(0, "div", 35)(1, "div", 40);
|
|
26
|
+
i0.ɵɵelement(2, "i", 41);
|
|
27
|
+
i0.ɵɵelementStart(3, "p", 42);
|
|
30
28
|
i0.ɵɵtext(4);
|
|
31
29
|
i0.ɵɵelementEnd();
|
|
32
|
-
i0.ɵɵelementStart(5, "button",
|
|
33
|
-
i0.ɵɵlistener("click", function
|
|
34
|
-
i0.ɵɵelement(6, "i",
|
|
30
|
+
i0.ɵɵelementStart(5, "button", 43);
|
|
31
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_61_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
|
|
32
|
+
i0.ɵɵelement(6, "i", 44);
|
|
35
33
|
i0.ɵɵtext(7, " Try Again ");
|
|
36
34
|
i0.ɵɵelementEnd()()();
|
|
37
35
|
} if (rf & 2) {
|
|
@@ -39,40 +37,40 @@ function ApplicationManagementComponent_Conditional_57_Template(rf, ctx) { if (r
|
|
|
39
37
|
i0.ɵɵadvance(4);
|
|
40
38
|
i0.ɵɵtextInterpolate(ctx_r1.error);
|
|
41
39
|
} }
|
|
42
|
-
function
|
|
43
|
-
i0.ɵɵelementStart(0, "span",
|
|
40
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
41
|
+
i0.ɵɵelementStart(0, "span", 82);
|
|
44
42
|
i0.ɵɵtext(1, "Public");
|
|
45
43
|
i0.ɵɵelementEnd();
|
|
46
44
|
} }
|
|
47
|
-
function
|
|
48
|
-
i0.ɵɵelementStart(0, "div",
|
|
45
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
46
|
+
i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
|
|
49
47
|
i0.ɵɵtext(2);
|
|
50
48
|
i0.ɵɵelementEnd();
|
|
51
|
-
i0.ɵɵelementStart(3, "div",
|
|
52
|
-
i0.ɵɵtemplate(4,
|
|
53
|
-
i0.ɵɵelementStart(5, "span",
|
|
49
|
+
i0.ɵɵelementStart(3, "div", 81);
|
|
50
|
+
i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template, 2, 0, "span", 82);
|
|
51
|
+
i0.ɵɵelementStart(5, "span", 83);
|
|
54
52
|
i0.ɵɵtext(6);
|
|
55
53
|
i0.ɵɵelementEnd()()();
|
|
56
54
|
} if (rf & 2) {
|
|
57
|
-
const
|
|
55
|
+
const appEntity_r6 = i0.ɵɵnextContext().$implicit;
|
|
58
56
|
i0.ɵɵadvance(2);
|
|
59
57
|
i0.ɵɵtextInterpolate(ctx.Name);
|
|
60
58
|
i0.ɵɵadvance(2);
|
|
61
|
-
i0.ɵɵconditional(
|
|
59
|
+
i0.ɵɵconditional(appEntity_r6.DefaultForNewUser ? 4 : -1);
|
|
62
60
|
i0.ɵɵadvance(2);
|
|
63
|
-
i0.ɵɵtextInterpolate1("Order: ",
|
|
61
|
+
i0.ɵɵtextInterpolate1("Order: ", appEntity_r6.Sequence, "");
|
|
64
62
|
} }
|
|
65
|
-
function
|
|
66
|
-
i0.ɵɵtemplate(0,
|
|
63
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
64
|
+
i0.ɵɵtemplate(0, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template, 7, 3, "div", 79);
|
|
67
65
|
} if (rf & 2) {
|
|
68
66
|
let tmp_23_0;
|
|
69
|
-
const
|
|
67
|
+
const appEntity_r6 = ctx.$implicit;
|
|
70
68
|
const ctx_r1 = i0.ɵɵnextContext(5);
|
|
71
|
-
i0.ɵɵconditional((tmp_23_0 = ctx_r1.getEntityInfo(
|
|
69
|
+
i0.ɵɵconditional((tmp_23_0 = ctx_r1.getEntityInfo(appEntity_r6.EntityID)) ? 0 : -1, tmp_23_0);
|
|
72
70
|
} }
|
|
73
|
-
function
|
|
74
|
-
i0.ɵɵelementStart(0, "div",
|
|
75
|
-
i0.ɵɵrepeaterCreate(1,
|
|
71
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_Template(rf, ctx) { if (rf & 1) {
|
|
72
|
+
i0.ɵɵelementStart(0, "div", 77);
|
|
73
|
+
i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template, 1, 1, null, null, _forTrack0);
|
|
76
74
|
i0.ɵɵelementEnd();
|
|
77
75
|
} if (rf & 2) {
|
|
78
76
|
const app_r4 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -80,92 +78,120 @@ function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Cond
|
|
|
80
78
|
i0.ɵɵadvance();
|
|
81
79
|
i0.ɵɵrepeater(ctx_r1.getAppEntities(app_r4.ID));
|
|
82
80
|
} }
|
|
83
|
-
function
|
|
84
|
-
i0.ɵɵelementStart(0, "p",
|
|
81
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_39_Template(rf, ctx) { if (rf & 1) {
|
|
82
|
+
i0.ɵɵelementStart(0, "p", 78);
|
|
85
83
|
i0.ɵɵtext(1, "No entities configured for this application");
|
|
86
84
|
i0.ɵɵelementEnd();
|
|
87
85
|
} }
|
|
88
|
-
function
|
|
89
|
-
|
|
90
|
-
i0.ɵɵ
|
|
91
|
-
i0.ɵɵ
|
|
92
|
-
i0.ɵɵ
|
|
86
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
87
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
88
|
+
i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
|
|
89
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
90
|
+
i0.ɵɵelementStart(2, "span", 57);
|
|
91
|
+
i0.ɵɵtext(3);
|
|
93
92
|
i0.ɵɵelementEnd();
|
|
94
|
-
i0.ɵɵelementStart(
|
|
95
|
-
i0.ɵɵ
|
|
93
|
+
i0.ɵɵelementStart(4, "div", 67)(5, "button", 59);
|
|
94
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
|
|
95
|
+
i0.ɵɵelement(6, "i", 60);
|
|
96
|
+
i0.ɵɵelementStart(7, "span", 68);
|
|
97
|
+
i0.ɵɵtext(8, "Edit");
|
|
98
|
+
i0.ɵɵelementEnd()();
|
|
99
|
+
i0.ɵɵelementStart(9, "button", 61);
|
|
100
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
|
|
101
|
+
i0.ɵɵelement(10, "i", 62);
|
|
102
|
+
i0.ɵɵelementStart(11, "span", 68);
|
|
103
|
+
i0.ɵɵtext(12, "Delete");
|
|
104
|
+
i0.ɵɵelementEnd()()()();
|
|
105
|
+
i0.ɵɵelementStart(13, "div", 69)(14, "div", 70);
|
|
106
|
+
i0.ɵɵelement(15, "i", 71);
|
|
107
|
+
i0.ɵɵelementStart(16, "span", 14);
|
|
108
|
+
i0.ɵɵtext(17, "Entities:");
|
|
109
|
+
i0.ɵɵelementEnd();
|
|
110
|
+
i0.ɵɵelementStart(18, "span", 72);
|
|
111
|
+
i0.ɵɵtext(19);
|
|
96
112
|
i0.ɵɵelementEnd()();
|
|
97
|
-
i0.ɵɵelementStart(
|
|
98
|
-
i0.ɵɵelement(
|
|
99
|
-
i0.ɵɵelementStart(
|
|
100
|
-
i0.ɵɵtext(
|
|
113
|
+
i0.ɵɵelementStart(20, "div", 70);
|
|
114
|
+
i0.ɵɵelement(21, "i", 73);
|
|
115
|
+
i0.ɵɵelementStart(22, "span", 14);
|
|
116
|
+
i0.ɵɵtext(23, "Created:");
|
|
101
117
|
i0.ɵɵelementEnd();
|
|
102
|
-
i0.ɵɵelementStart(
|
|
103
|
-
i0.ɵɵtext(
|
|
104
|
-
i0.ɵɵpipe(
|
|
118
|
+
i0.ɵɵelementStart(24, "span", 72);
|
|
119
|
+
i0.ɵɵtext(25);
|
|
120
|
+
i0.ɵɵpipe(26, "date");
|
|
105
121
|
i0.ɵɵelementEnd()();
|
|
106
|
-
i0.ɵɵelementStart(
|
|
107
|
-
i0.ɵɵelement(
|
|
108
|
-
i0.ɵɵelementStart(
|
|
109
|
-
i0.ɵɵtext(
|
|
122
|
+
i0.ɵɵelementStart(27, "div", 70);
|
|
123
|
+
i0.ɵɵelement(28, "i", 74);
|
|
124
|
+
i0.ɵɵelementStart(29, "span", 14);
|
|
125
|
+
i0.ɵɵtext(30, "Updated:");
|
|
110
126
|
i0.ɵɵelementEnd();
|
|
111
|
-
i0.ɵɵelementStart(
|
|
112
|
-
i0.ɵɵtext(
|
|
113
|
-
i0.ɵɵpipe(
|
|
127
|
+
i0.ɵɵelementStart(31, "span", 72);
|
|
128
|
+
i0.ɵɵtext(32);
|
|
129
|
+
i0.ɵɵpipe(33, "date");
|
|
114
130
|
i0.ɵɵelementEnd()()();
|
|
115
|
-
i0.ɵɵelementStart(
|
|
116
|
-
i0.ɵɵelement(
|
|
117
|
-
i0.ɵɵtext(
|
|
131
|
+
i0.ɵɵelementStart(34, "div", 75)(35, "h4", 76);
|
|
132
|
+
i0.ɵɵelement(36, "i", 71);
|
|
133
|
+
i0.ɵɵtext(37, " Application Entities ");
|
|
118
134
|
i0.ɵɵelementEnd();
|
|
119
|
-
i0.ɵɵtemplate(
|
|
135
|
+
i0.ɵɵtemplate(38, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_Template, 3, 0, "div", 77)(39, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_39_Template, 2, 0, "p", 78);
|
|
120
136
|
i0.ɵɵelementEnd()();
|
|
121
137
|
} if (rf & 2) {
|
|
122
138
|
const app_r4 = i0.ɵɵnextContext().$implicit;
|
|
123
139
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
124
|
-
i0.ɵɵadvance(
|
|
140
|
+
i0.ɵɵadvance(2);
|
|
141
|
+
i0.ɵɵclassMap(ctx_r1.getAppStatusClass(app_r4));
|
|
142
|
+
i0.ɵɵadvance();
|
|
143
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.getAppStatusLabel(app_r4), " ");
|
|
144
|
+
i0.ɵɵadvance(2);
|
|
145
|
+
i0.ɵɵattribute("aria-label", "Edit " + app_r4.Name);
|
|
146
|
+
i0.ɵɵadvance(4);
|
|
147
|
+
i0.ɵɵattribute("aria-label", "Delete " + app_r4.Name);
|
|
148
|
+
i0.ɵɵadvance(10);
|
|
125
149
|
i0.ɵɵtextInterpolate(ctx_r1.getAppEntities(app_r4.ID).length);
|
|
126
150
|
i0.ɵɵadvance(6);
|
|
127
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(
|
|
151
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(26, 9, app_r4.__mj_CreatedAt, "short"));
|
|
128
152
|
i0.ɵɵadvance(7);
|
|
129
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(
|
|
153
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(33, 12, app_r4.__mj_UpdatedAt, "short"));
|
|
130
154
|
i0.ɵɵadvance(6);
|
|
131
|
-
i0.ɵɵconditional(ctx_r1.getAppEntities(app_r4.ID).length > 0 ?
|
|
155
|
+
i0.ɵɵconditional(ctx_r1.getAppEntities(app_r4.ID).length > 0 ? 38 : 39);
|
|
132
156
|
} }
|
|
133
|
-
function
|
|
157
|
+
function ApplicationManagementComponent_Conditional_62_For_3_Template(rf, ctx) { if (rf & 1) {
|
|
134
158
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
135
|
-
i0.ɵɵelementStart(0, "div",
|
|
136
|
-
i0.ɵɵlistener("click", function
|
|
137
|
-
i0.ɵɵelementStart(2, "div",
|
|
138
|
-
i0.ɵɵelement(4, "i");
|
|
159
|
+
i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
|
|
160
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_div_click_1_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleAppExpansion(app_r4.ID)); });
|
|
161
|
+
i0.ɵɵelementStart(2, "div", 50)(3, "div", 51);
|
|
162
|
+
i0.ɵɵelement(4, "i", 52);
|
|
139
163
|
i0.ɵɵelementEnd();
|
|
140
|
-
i0.ɵɵelementStart(5, "div",
|
|
164
|
+
i0.ɵɵelementStart(5, "div", 53)(6, "h3", 54);
|
|
141
165
|
i0.ɵɵtext(7);
|
|
142
166
|
i0.ɵɵelementEnd();
|
|
143
|
-
i0.ɵɵelementStart(8, "p",
|
|
167
|
+
i0.ɵɵelementStart(8, "p", 55);
|
|
144
168
|
i0.ɵɵtext(9);
|
|
145
169
|
i0.ɵɵelementEnd()()();
|
|
146
|
-
i0.ɵɵelementStart(10, "div",
|
|
170
|
+
i0.ɵɵelementStart(10, "div", 56)(11, "span", 57);
|
|
147
171
|
i0.ɵɵtext(12);
|
|
148
172
|
i0.ɵɵelementEnd();
|
|
149
|
-
i0.ɵɵelementStart(13, "div",
|
|
150
|
-
i0.ɵɵlistener("click", function
|
|
151
|
-
i0.ɵɵelementStart(14, "button",
|
|
152
|
-
i0.ɵɵlistener("click", function
|
|
153
|
-
i0.ɵɵelement(15, "i",
|
|
173
|
+
i0.ɵɵelementStart(13, "div", 58);
|
|
174
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
175
|
+
i0.ɵɵelementStart(14, "button", 59);
|
|
176
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_button_click_14_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
|
|
177
|
+
i0.ɵɵelement(15, "i", 60);
|
|
154
178
|
i0.ɵɵelementEnd();
|
|
155
|
-
i0.ɵɵelementStart(16, "button",
|
|
156
|
-
i0.ɵɵlistener("click", function
|
|
157
|
-
i0.ɵɵelement(17, "i",
|
|
179
|
+
i0.ɵɵelementStart(16, "button", 61);
|
|
180
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_button_click_16_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
|
|
181
|
+
i0.ɵɵelement(17, "i", 62);
|
|
158
182
|
i0.ɵɵelementEnd()();
|
|
159
|
-
i0.ɵɵelementStart(18, "button",
|
|
160
|
-
i0.ɵɵelement(19, "i",
|
|
183
|
+
i0.ɵɵelementStart(18, "button", 63);
|
|
184
|
+
i0.ɵɵelement(19, "i", 64);
|
|
161
185
|
i0.ɵɵelementEnd()()();
|
|
162
|
-
i0.ɵɵtemplate(20,
|
|
186
|
+
i0.ɵɵtemplate(20, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template, 40, 15, "div", 65);
|
|
163
187
|
i0.ɵɵelementEnd();
|
|
164
188
|
} if (rf & 2) {
|
|
165
189
|
const app_r4 = ctx.$implicit;
|
|
166
190
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
167
191
|
i0.ɵɵclassProp("expanded", ctx_r1.isAppExpanded(app_r4.ID));
|
|
168
|
-
i0.ɵɵadvance(
|
|
192
|
+
i0.ɵɵadvance();
|
|
193
|
+
i0.ɵɵattribute("aria-expanded", ctx_r1.isAppExpanded(app_r4.ID));
|
|
194
|
+
i0.ɵɵadvance(3);
|
|
169
195
|
i0.ɵɵclassMap("fa-solid " + ctx_r1.getAppIcon(app_r4));
|
|
170
196
|
i0.ɵɵadvance(3);
|
|
171
197
|
i0.ɵɵtextInterpolate(app_r4.Name);
|
|
@@ -175,23 +201,27 @@ function ApplicationManagementComponent_Conditional_58_For_3_Template(rf, ctx) {
|
|
|
175
201
|
i0.ɵɵclassMap(ctx_r1.getAppStatusClass(app_r4));
|
|
176
202
|
i0.ɵɵadvance();
|
|
177
203
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.getAppStatusLabel(app_r4), " ");
|
|
178
|
-
i0.ɵɵadvance(
|
|
204
|
+
i0.ɵɵadvance(2);
|
|
205
|
+
i0.ɵɵattribute("aria-label", "Edit " + app_r4.Name);
|
|
206
|
+
i0.ɵɵadvance(2);
|
|
207
|
+
i0.ɵɵattribute("aria-label", "Delete " + app_r4.Name);
|
|
208
|
+
i0.ɵɵadvance(4);
|
|
179
209
|
i0.ɵɵconditional(ctx_r1.isAppExpanded(app_r4.ID) ? 20 : -1);
|
|
180
210
|
} }
|
|
181
|
-
function
|
|
182
|
-
i0.ɵɵelementStart(0, "div",
|
|
183
|
-
i0.ɵɵelement(1, "i",
|
|
184
|
-
i0.ɵɵelementStart(2, "p",
|
|
211
|
+
function ApplicationManagementComponent_Conditional_62_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
212
|
+
i0.ɵɵelementStart(0, "div", 47);
|
|
213
|
+
i0.ɵɵelement(1, "i", 84);
|
|
214
|
+
i0.ɵɵelementStart(2, "p", 85);
|
|
185
215
|
i0.ɵɵtext(3, "No applications found");
|
|
186
216
|
i0.ɵɵelementEnd();
|
|
187
|
-
i0.ɵɵelementStart(4, "p",
|
|
217
|
+
i0.ɵɵelementStart(4, "p", 86);
|
|
188
218
|
i0.ɵɵtext(5, "Try adjusting your filters or create a new application");
|
|
189
219
|
i0.ɵɵelementEnd()();
|
|
190
220
|
} }
|
|
191
|
-
function
|
|
192
|
-
i0.ɵɵelementStart(0, "div",
|
|
193
|
-
i0.ɵɵrepeaterCreate(2,
|
|
194
|
-
i0.ɵɵtemplate(4,
|
|
221
|
+
function ApplicationManagementComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
|
|
222
|
+
i0.ɵɵelementStart(0, "div", 36)(1, "div", 45);
|
|
223
|
+
i0.ɵɵrepeaterCreate(2, ApplicationManagementComponent_Conditional_62_For_3_Template, 21, 13, "div", 46, _forTrack0);
|
|
224
|
+
i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_62_Conditional_4_Template, 6, 0, "div", 47);
|
|
195
225
|
i0.ɵɵelementEnd()();
|
|
196
226
|
} if (rf & 2) {
|
|
197
227
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -200,56 +230,55 @@ function ApplicationManagementComponent_Conditional_58_Template(rf, ctx) { if (r
|
|
|
200
230
|
i0.ɵɵadvance(2);
|
|
201
231
|
i0.ɵɵconditional(ctx_r1.filteredApplications.length === 0 ? 4 : -1);
|
|
202
232
|
} }
|
|
203
|
-
function
|
|
204
|
-
i0.ɵɵelement(0, "i",
|
|
233
|
+
function ApplicationManagementComponent_Conditional_64_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
234
|
+
i0.ɵɵelement(0, "i", 100);
|
|
205
235
|
i0.ɵɵtext(1, " Deleting... ");
|
|
206
236
|
} }
|
|
207
|
-
function
|
|
208
|
-
i0.ɵɵelement(0, "i",
|
|
237
|
+
function ApplicationManagementComponent_Conditional_64_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
238
|
+
i0.ɵɵelement(0, "i", 101);
|
|
209
239
|
i0.ɵɵtext(1, " Delete Application ");
|
|
210
240
|
} }
|
|
211
|
-
function
|
|
212
|
-
const
|
|
213
|
-
i0.ɵɵelementStart(0, "div",
|
|
214
|
-
i0.ɵɵlistener("click", function
|
|
215
|
-
i0.ɵɵelementStart(1, "div",
|
|
216
|
-
i0.ɵɵlistener("click", function
|
|
217
|
-
i0.ɵɵelementStart(2, "div",
|
|
218
|
-
i0.ɵɵelement(4, "i",
|
|
241
|
+
function ApplicationManagementComponent_Conditional_64_Template(rf, ctx) { if (rf & 1) {
|
|
242
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
243
|
+
i0.ɵɵelementStart(0, "div", 87);
|
|
244
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
|
|
245
|
+
i0.ɵɵelementStart(1, "div", 88);
|
|
246
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
247
|
+
i0.ɵɵelementStart(2, "div", 89)(3, "h3", 90);
|
|
248
|
+
i0.ɵɵelement(4, "i", 91);
|
|
219
249
|
i0.ɵɵtext(5, " Confirm Delete ");
|
|
220
250
|
i0.ɵɵelementEnd();
|
|
221
|
-
i0.ɵɵelementStart(6, "button",
|
|
222
|
-
i0.ɵɵlistener("click", function
|
|
223
|
-
i0.ɵɵelement(7, "i",
|
|
251
|
+
i0.ɵɵelementStart(6, "button", 92);
|
|
252
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
|
|
253
|
+
i0.ɵɵelement(7, "i", 93);
|
|
224
254
|
i0.ɵɵelementEnd()();
|
|
225
|
-
i0.ɵɵelementStart(8, "div",
|
|
255
|
+
i0.ɵɵelementStart(8, "div", 94)(9, "p");
|
|
226
256
|
i0.ɵɵtext(10, "Are you sure you want to delete the application ");
|
|
227
257
|
i0.ɵɵelementStart(11, "strong");
|
|
228
258
|
i0.ɵɵtext(12);
|
|
229
259
|
i0.ɵɵelementEnd();
|
|
230
260
|
i0.ɵɵtext(13, "?");
|
|
231
261
|
i0.ɵɵelementEnd();
|
|
232
|
-
i0.ɵɵelementStart(14, "p",
|
|
233
|
-
i0.ɵɵelement(15, "i",
|
|
262
|
+
i0.ɵɵelementStart(14, "p", 95);
|
|
263
|
+
i0.ɵɵelement(15, "i", 96);
|
|
234
264
|
i0.ɵɵtext(16, " This will remove all entity associations for this application. ");
|
|
235
265
|
i0.ɵɵelementEnd()();
|
|
236
|
-
i0.ɵɵelementStart(17, "div",
|
|
237
|
-
i0.ɵɵlistener("click", function
|
|
238
|
-
i0.ɵɵ
|
|
239
|
-
i0.ɵɵtext(20, " Cancel ");
|
|
266
|
+
i0.ɵɵelementStart(17, "div", 97)(18, "button", 98);
|
|
267
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteApplication()); });
|
|
268
|
+
i0.ɵɵtemplate(19, ApplicationManagementComponent_Conditional_64_Conditional_19_Template, 2, 0)(20, ApplicationManagementComponent_Conditional_64_Conditional_20_Template, 2, 0);
|
|
240
269
|
i0.ɵɵelementEnd();
|
|
241
|
-
i0.ɵɵelementStart(21, "button",
|
|
242
|
-
i0.ɵɵlistener("click", function
|
|
243
|
-
i0.ɵɵ
|
|
270
|
+
i0.ɵɵelementStart(21, "button", 99);
|
|
271
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
|
|
272
|
+
i0.ɵɵtext(22, " Cancel ");
|
|
244
273
|
i0.ɵɵelementEnd()()()();
|
|
245
274
|
} if (rf & 2) {
|
|
246
275
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
247
276
|
i0.ɵɵadvance(12);
|
|
248
277
|
i0.ɵɵtextInterpolate(ctx_r1.selectedApp.Name);
|
|
249
|
-
i0.ɵɵadvance(
|
|
278
|
+
i0.ɵɵadvance(6);
|
|
250
279
|
i0.ɵɵproperty("disabled", ctx_r1.isLoading);
|
|
251
280
|
i0.ɵɵadvance();
|
|
252
|
-
i0.ɵɵconditional(ctx_r1.isLoading ?
|
|
281
|
+
i0.ɵɵconditional(ctx_r1.isLoading ? 19 : 20);
|
|
253
282
|
} }
|
|
254
283
|
let ApplicationManagementComponent = class ApplicationManagementComponent extends BaseDashboard {
|
|
255
284
|
// State management
|
|
@@ -461,7 +490,52 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
|
|
|
461
490
|
}
|
|
462
491
|
}
|
|
463
492
|
getAppIcon(app) {
|
|
464
|
-
//
|
|
493
|
+
// Map application names to appropriate icons based on their purpose
|
|
494
|
+
const name = (app.Name || '').toLowerCase();
|
|
495
|
+
// Common application type mappings
|
|
496
|
+
if (name.includes('admin') || name.includes('management')) {
|
|
497
|
+
return 'fa-cog';
|
|
498
|
+
}
|
|
499
|
+
if (name.includes('report') || name.includes('analytics') || name.includes('dashboard')) {
|
|
500
|
+
return 'fa-chart-line';
|
|
501
|
+
}
|
|
502
|
+
if (name.includes('user') || name.includes('people') || name.includes('employee')) {
|
|
503
|
+
return 'fa-users';
|
|
504
|
+
}
|
|
505
|
+
if (name.includes('settings') || name.includes('config')) {
|
|
506
|
+
return 'fa-sliders';
|
|
507
|
+
}
|
|
508
|
+
if (name.includes('data') || name.includes('database')) {
|
|
509
|
+
return 'fa-database';
|
|
510
|
+
}
|
|
511
|
+
if (name.includes('file') || name.includes('document')) {
|
|
512
|
+
return 'fa-file-alt';
|
|
513
|
+
}
|
|
514
|
+
if (name.includes('mail') || name.includes('email') || name.includes('message')) {
|
|
515
|
+
return 'fa-envelope';
|
|
516
|
+
}
|
|
517
|
+
if (name.includes('search') || name.includes('explorer')) {
|
|
518
|
+
return 'fa-search';
|
|
519
|
+
}
|
|
520
|
+
if (name.includes('calendar') || name.includes('schedule') || name.includes('event')) {
|
|
521
|
+
return 'fa-calendar';
|
|
522
|
+
}
|
|
523
|
+
if (name.includes('security') || name.includes('auth') || name.includes('permission')) {
|
|
524
|
+
return 'fa-shield-alt';
|
|
525
|
+
}
|
|
526
|
+
if (name.includes('integration') || name.includes('api') || name.includes('connect')) {
|
|
527
|
+
return 'fa-plug';
|
|
528
|
+
}
|
|
529
|
+
if (name.includes('workflow') || name.includes('process') || name.includes('automation')) {
|
|
530
|
+
return 'fa-project-diagram';
|
|
531
|
+
}
|
|
532
|
+
if (name.includes('ai') || name.includes('intelligence') || name.includes('machine')) {
|
|
533
|
+
return 'fa-brain';
|
|
534
|
+
}
|
|
535
|
+
if (name.includes('home') || name.includes('main') || name.includes('default')) {
|
|
536
|
+
return 'fa-home';
|
|
537
|
+
}
|
|
538
|
+
// Default icon for applications
|
|
465
539
|
return 'fa-grid-2';
|
|
466
540
|
}
|
|
467
541
|
getAppStatusClass(app) {
|
|
@@ -476,85 +550,89 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
|
|
|
476
550
|
this.loadInitialData();
|
|
477
551
|
}
|
|
478
552
|
static ɵfac = function ApplicationManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationManagementComponent)(); };
|
|
479
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
480
|
-
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "
|
|
481
|
-
i0.ɵɵlistener("click", function
|
|
482
|
-
i0.ɵɵelement(
|
|
483
|
-
i0.ɵɵ
|
|
484
|
-
i0.ɵɵ
|
|
485
|
-
i0.ɵɵelementStart(5, "button", 4);
|
|
486
|
-
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_5_listener() { return ctx.createNewApplication(); });
|
|
487
|
-
i0.ɵɵelement(6, "i", 5);
|
|
488
|
-
i0.ɵɵtext(7, " Add Application ");
|
|
553
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 65, vars: 23, consts: [[1, "application-management-container"], [1, "sticky-header"], ["role", "toolbar", "aria-label", "Application management actions", 1, "action-buttons"], ["aria-label", "Refresh applications", 1, "mj-btn", "mj-btn-secondary", "mj-btn-icon-mobile", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "btn-text"], ["aria-label", "Add new application", 1, "mj-btn", "mj-btn-primary", "mj-btn-icon-mobile", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["role", "region", "aria-label", "Application statistics", 1, "mj-grid-4"], [1, "mj-card"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-cubes"], [1, "stat-content"], ["aria-label", "Total applications count", 1, "stat-value"], [1, "stat-label"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], ["aria-label", "Active applications count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-entities"], [1, "fa-solid", "fa-database"], ["aria-label", "Total entities count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-public"], [1, "fa-solid", "fa-globe"], ["aria-label", "Public entities count", 1, "stat-value"], ["role", "search", "aria-label", "Filter applications", 1, "filters-section"], [1, "filters-row"], [1, "mj-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search applications by name or description...", "aria-label", "Search applications", 1, "mj-search-input", 3, "input", "value"], [1, "mj-filter-group"], ["id", "status-filter-label", 1, "mj-filter-label"], ["role", "group", "aria-labelledby", "status-filter-label", 1, "mj-filter-buttons"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "scrollable-content"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["role", "alert", 1, "error-container"], [1, "content-area"], [3, "result", "visible", "data"], ["role", "presentation", 1, "modal-backdrop"], ["text", "Loading applications..."], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fa-solid", "fa-refresh"], ["role", "list", 1, "applications-list"], ["role", "listitem", 1, "app-card", 3, "expanded"], [1, "empty-state"], ["role", "listitem", 1, "app-card"], ["role", "button", 1, "app-header", 3, "click"], [1, "app-info"], [1, "app-icon-wrapper"], ["aria-hidden", "true"], [1, "app-details"], [1, "app-name"], [1, "app-description"], [1, "app-meta"], [1, "status-badge"], [1, "app-actions", 3, "click"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "app-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "app-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "entities-section"], [1, "section-title"], [1, "entities-grid"], [1, "no-entities"], [1, "entity-item"], [1, "entity-name"], [1, "entity-meta"], [1, "entity-badge", "public"], [1, "entity-sequence"], ["aria-hidden", "true", 1, "fa-solid", "fa-cubes", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-description", 1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["id", "delete-dialog-description", 1, "modal-body"], [1, "text-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "mj-btn", "mj-btn-danger", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"]], template: function ApplicationManagementComponent_Template(rf, ctx) { if (rf & 1) {
|
|
554
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
|
|
555
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_3_listener() { return ctx.refreshData(); });
|
|
556
|
+
i0.ɵɵelement(4, "i", 4);
|
|
557
|
+
i0.ɵɵelementStart(5, "span", 5);
|
|
558
|
+
i0.ɵɵtext(6, "Refresh");
|
|
489
559
|
i0.ɵɵelementEnd()();
|
|
490
|
-
i0.ɵɵelementStart(
|
|
491
|
-
i0.ɵɵ
|
|
560
|
+
i0.ɵɵelementStart(7, "button", 6);
|
|
561
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_7_listener() { return ctx.createNewApplication(); });
|
|
562
|
+
i0.ɵɵelement(8, "i", 7);
|
|
563
|
+
i0.ɵɵelementStart(9, "span", 5);
|
|
564
|
+
i0.ɵɵtext(10, "Add Application");
|
|
565
|
+
i0.ɵɵelementEnd()()();
|
|
566
|
+
i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
|
|
567
|
+
i0.ɵɵelement(14, "i", 11);
|
|
492
568
|
i0.ɵɵelementEnd();
|
|
493
|
-
i0.ɵɵelementStart(
|
|
494
|
-
i0.ɵɵtext(
|
|
569
|
+
i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
|
|
570
|
+
i0.ɵɵtext(17);
|
|
495
571
|
i0.ɵɵelementEnd();
|
|
496
|
-
i0.ɵɵelementStart(
|
|
497
|
-
i0.ɵɵtext(
|
|
572
|
+
i0.ɵɵelementStart(18, "div", 14);
|
|
573
|
+
i0.ɵɵtext(19, "Total Applications");
|
|
498
574
|
i0.ɵɵelementEnd()()();
|
|
499
|
-
i0.ɵɵelementStart(
|
|
500
|
-
i0.ɵɵelement(
|
|
575
|
+
i0.ɵɵelementStart(20, "div", 9)(21, "div", 15);
|
|
576
|
+
i0.ɵɵelement(22, "i", 16);
|
|
501
577
|
i0.ɵɵelementEnd();
|
|
502
|
-
i0.ɵɵelementStart(
|
|
503
|
-
i0.ɵɵtext(
|
|
578
|
+
i0.ɵɵelementStart(23, "div", 12)(24, "div", 17);
|
|
579
|
+
i0.ɵɵtext(25);
|
|
504
580
|
i0.ɵɵelementEnd();
|
|
505
|
-
i0.ɵɵelementStart(
|
|
506
|
-
i0.ɵɵtext(
|
|
581
|
+
i0.ɵɵelementStart(26, "div", 14);
|
|
582
|
+
i0.ɵɵtext(27, "Active Applications");
|
|
507
583
|
i0.ɵɵelementEnd()()();
|
|
508
|
-
i0.ɵɵelementStart(
|
|
509
|
-
i0.ɵɵelement(
|
|
584
|
+
i0.ɵɵelementStart(28, "div", 9)(29, "div", 18);
|
|
585
|
+
i0.ɵɵelement(30, "i", 19);
|
|
510
586
|
i0.ɵɵelementEnd();
|
|
511
|
-
i0.ɵɵelementStart(
|
|
512
|
-
i0.ɵɵtext(
|
|
587
|
+
i0.ɵɵelementStart(31, "div", 12)(32, "div", 20);
|
|
588
|
+
i0.ɵɵtext(33);
|
|
513
589
|
i0.ɵɵelementEnd();
|
|
514
|
-
i0.ɵɵelementStart(
|
|
515
|
-
i0.ɵɵtext(
|
|
590
|
+
i0.ɵɵelementStart(34, "div", 14);
|
|
591
|
+
i0.ɵɵtext(35, "Total Entities");
|
|
516
592
|
i0.ɵɵelementEnd()()();
|
|
517
|
-
i0.ɵɵelementStart(
|
|
518
|
-
i0.ɵɵelement(
|
|
593
|
+
i0.ɵɵelementStart(36, "div", 9)(37, "div", 21);
|
|
594
|
+
i0.ɵɵelement(38, "i", 22);
|
|
519
595
|
i0.ɵɵelementEnd();
|
|
520
|
-
i0.ɵɵelementStart(
|
|
521
|
-
i0.ɵɵtext(
|
|
596
|
+
i0.ɵɵelementStart(39, "div", 12)(40, "div", 23);
|
|
597
|
+
i0.ɵɵtext(41);
|
|
522
598
|
i0.ɵɵelementEnd();
|
|
523
|
-
i0.ɵɵelementStart(
|
|
524
|
-
i0.ɵɵtext(
|
|
599
|
+
i0.ɵɵelementStart(42, "div", 14);
|
|
600
|
+
i0.ɵɵtext(43, "Public Entities");
|
|
525
601
|
i0.ɵɵelementEnd()()()();
|
|
526
|
-
i0.ɵɵelementStart(
|
|
527
|
-
i0.ɵɵelement(
|
|
528
|
-
i0.ɵɵelementStart(
|
|
529
|
-
i0.ɵɵlistener("input", function
|
|
602
|
+
i0.ɵɵelementStart(44, "div", 24)(45, "div", 25)(46, "div", 26);
|
|
603
|
+
i0.ɵɵelement(47, "i", 27);
|
|
604
|
+
i0.ɵɵelementStart(48, "input", 28);
|
|
605
|
+
i0.ɵɵlistener("input", function ApplicationManagementComponent_Template_input_input_48_listener($event) { return ctx.onSearchChange($event); });
|
|
530
606
|
i0.ɵɵelementEnd()();
|
|
531
|
-
i0.ɵɵelementStart(
|
|
532
|
-
i0.ɵɵtext(
|
|
607
|
+
i0.ɵɵelementStart(49, "div", 29)(50, "label", 30);
|
|
608
|
+
i0.ɵɵtext(51, "Status");
|
|
609
|
+
i0.ɵɵelementEnd();
|
|
610
|
+
i0.ɵɵelementStart(52, "div", 31)(53, "button", 32);
|
|
611
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_53_listener() { return ctx.onStatusFilterChange("all"); });
|
|
612
|
+
i0.ɵɵtext(54, " All ");
|
|
533
613
|
i0.ɵɵelementEnd();
|
|
534
|
-
i0.ɵɵelementStart(
|
|
535
|
-
i0.ɵɵlistener("click", function
|
|
536
|
-
i0.ɵɵtext(
|
|
614
|
+
i0.ɵɵelementStart(55, "button", 32);
|
|
615
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_55_listener() { return ctx.onStatusFilterChange("active"); });
|
|
616
|
+
i0.ɵɵtext(56, " Active ");
|
|
537
617
|
i0.ɵɵelementEnd();
|
|
538
|
-
i0.ɵɵelementStart(
|
|
539
|
-
i0.ɵɵlistener("click", function
|
|
540
|
-
i0.ɵɵtext(
|
|
618
|
+
i0.ɵɵelementStart(57, "button", 32);
|
|
619
|
+
i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_57_listener() { return ctx.onStatusFilterChange("inactive"); });
|
|
620
|
+
i0.ɵɵtext(58, " Inactive ");
|
|
621
|
+
i0.ɵɵelementEnd()()()()()();
|
|
622
|
+
i0.ɵɵelementStart(59, "div", 33);
|
|
623
|
+
i0.ɵɵtemplate(60, ApplicationManagementComponent_Conditional_60_Template, 2, 0, "div", 34)(61, ApplicationManagementComponent_Conditional_61_Template, 8, 1, "div", 35)(62, ApplicationManagementComponent_Conditional_62_Template, 5, 1, "div", 36);
|
|
541
624
|
i0.ɵɵelementEnd();
|
|
542
|
-
i0.ɵɵelementStart(
|
|
543
|
-
i0.ɵɵlistener("
|
|
544
|
-
i0.ɵɵtext(55, " Inactive ");
|
|
545
|
-
i0.ɵɵelementEnd()()()()();
|
|
546
|
-
i0.ɵɵtemplate(56, ApplicationManagementComponent_Conditional_56_Template, 7, 0, "div", 28)(57, ApplicationManagementComponent_Conditional_57_Template, 8, 1, "div", 29)(58, ApplicationManagementComponent_Conditional_58_Template, 5, 1, "div", 30);
|
|
547
|
-
i0.ɵɵelementStart(59, "mj-application-dialog", 31);
|
|
548
|
-
i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_59_listener($event) { return ctx.onApplicationDialogResult($event); });
|
|
625
|
+
i0.ɵɵelementStart(63, "mj-application-dialog", 37);
|
|
626
|
+
i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_63_listener($event) { return ctx.onApplicationDialogResult($event); });
|
|
549
627
|
i0.ɵɵelementEnd();
|
|
550
|
-
i0.ɵɵtemplate(
|
|
628
|
+
i0.ɵɵtemplate(64, ApplicationManagementComponent_Conditional_64_Template, 23, 3, "div", 38);
|
|
551
629
|
i0.ɵɵelementEnd();
|
|
552
630
|
} if (rf & 2) {
|
|
553
|
-
i0.ɵɵadvance(
|
|
631
|
+
i0.ɵɵadvance(3);
|
|
554
632
|
i0.ɵɵproperty("disabled", ctx.isLoading);
|
|
555
633
|
i0.ɵɵadvance();
|
|
556
634
|
i0.ɵɵclassProp("fa-spin", ctx.isLoading);
|
|
557
|
-
i0.ɵɵadvance(
|
|
635
|
+
i0.ɵɵadvance(13);
|
|
558
636
|
i0.ɵɵtextInterpolate(ctx.stats.totalApplications);
|
|
559
637
|
i0.ɵɵadvance(8);
|
|
560
638
|
i0.ɵɵtextInterpolate(ctx.stats.activeApplications);
|
|
@@ -566,21 +644,24 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
|
|
|
566
644
|
i0.ɵɵproperty("value", ctx.filters$.value.search);
|
|
567
645
|
i0.ɵɵadvance(5);
|
|
568
646
|
i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "all");
|
|
647
|
+
i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "all");
|
|
569
648
|
i0.ɵɵadvance(2);
|
|
570
649
|
i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "active");
|
|
650
|
+
i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "active");
|
|
571
651
|
i0.ɵɵadvance(2);
|
|
572
652
|
i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "inactive");
|
|
573
|
-
i0.ɵɵ
|
|
574
|
-
i0.ɵɵ
|
|
653
|
+
i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "inactive");
|
|
654
|
+
i0.ɵɵadvance(3);
|
|
655
|
+
i0.ɵɵconditional(ctx.isLoading ? 60 : -1);
|
|
575
656
|
i0.ɵɵadvance();
|
|
576
|
-
i0.ɵɵconditional(ctx.error && !ctx.isLoading ?
|
|
657
|
+
i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 61 : -1);
|
|
577
658
|
i0.ɵɵadvance();
|
|
578
|
-
i0.ɵɵconditional(!ctx.isLoading && !ctx.error ?
|
|
659
|
+
i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 62 : -1);
|
|
579
660
|
i0.ɵɵadvance();
|
|
580
661
|
i0.ɵɵproperty("visible", ctx.showApplicationDialog)("data", ctx.applicationDialogData);
|
|
581
662
|
i0.ɵɵadvance();
|
|
582
|
-
i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ?
|
|
583
|
-
} }, dependencies: [i1.ApplicationDialogComponent, i2.DatePipe], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n.application-management-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n position: relative;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n margin-bottom: 1.5rem;\n}\n@media (max-width: 768px) {\n .action-buttons[_ngcontent-%COMP%] {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-primary[_ngcontent-%COMP%]:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #ffffff;\n color: #374151;\n border: 1px solid #e5e7eb;\n}\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-secondary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background-color: #f9fafb;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #f44336;\n color: white;\n}\n.btn-danger[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-danger[_ngcontent-%COMP%]:hover {\n background-color: #d32f2f;\n}\n\n.stats-grid[_ngcontent-%COMP%] {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n width: 100%;\n}\n@media (max-width: 768px) {\n .stats-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n display: flex;\n margin-right: 10px;\n align-items: center;\n gap: 1rem;\n transition: all 0.3s ease;\n min-width: 0;\n}\n.stat-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n}\n.stat-icon-total[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.1);\n color: #2196f3;\n}\n.stat-icon-active[_ngcontent-%COMP%] {\n background: rgba(76, 175, 80, 0.1);\n color: #4caf50;\n}\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: rgba(156, 39, 176, 0.1);\n color: #9c27b0;\n}\n.stat-icon-public[_ngcontent-%COMP%] {\n background: rgba(255, 152, 0, 0.1);\n color: #ff9800;\n}\n\n.stat-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 2rem;\n font-weight: 700;\n color: #1f2937;\n line-height: 1;\n}\n.stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n}\n\n.filters-section[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 1.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n.search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n.search-container[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n}\n.search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n}\n.search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #2196f3;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 500;\n color: #374151;\n}\n.filter-group[_ngcontent-%COMP%] .filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: #f3f4f6;\n border-radius: 8px;\n padding: 4px;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn[_ngcontent-%COMP%] {\n padding: 0.5rem 1rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn[_ngcontent-%COMP%]:hover {\n color: #374151;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n padding: 1.5rem;\n}\n\n.applications-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-height: calc(100vh - 450px);\n overflow-y: auto;\n padding-right: 0.5rem;\n}\n\n.app-card[_ngcontent-%COMP%] {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n.app-card.expanded[_ngcontent-%COMP%] .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.app-header[_ngcontent-%COMP%] {\n padding: 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: #f9fafb;\n transition: background-color 0.2s;\n}\n.app-header[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n}\n\n.app-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n}\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(33, 150, 243, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2196f3;\n font-size: 1.25rem;\n}\n\n.app-details[_ngcontent-%COMP%] {\n flex: 1;\n}\n.app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.25rem 0;\n}\n.app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: #6b7280;\n margin: 0;\n}\n\n.app-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 0.375rem 0.75rem;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: rgba(244, 67, 54, 0.1);\n color: #d32f2f;\n}\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.action-btn[_ngcontent-%COMP%]:hover {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n color: #f44336;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transition: transform 0.3s ease;\n}\n\n.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: #1f2937;\n font-weight: 500;\n}\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: #f9fafb;\n border-radius: 8px;\n}\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 1rem 0;\n}\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n padding: 0.75rem;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n transition: all 0.2s;\n}\n.entity-item[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 500;\n color: #1f2937;\n margin-bottom: 0.25rem;\n}\n.entity-item[_ngcontent-%COMP%] .entity-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n color: #6b7280;\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.625rem;\n font-weight: 600;\n}\n.entity-badge.public[_ngcontent-%COMP%] {\n background: rgba(255, 152, 0, 0.1);\n color: #f57c00;\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: #9ca3af;\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.875rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n color: #e5e7eb;\n margin-bottom: 1rem;\n}\n.empty-state[_ngcontent-%COMP%] .empty-text[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5rem 0;\n}\n.empty-state[_ngcontent-%COMP%] .empty-subtext[_ngcontent-%COMP%] {\n color: #6b7280;\n margin: 0;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n margin-bottom: 1rem;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n border-color: transparent #9c27b0 transparent transparent;\n animation-delay: -0.3s;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.loading-text[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n.error-container[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n.error-container[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n}\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n color: #374151;\n margin-bottom: 1.5rem;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n\n.modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.3s ease;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid #e5e7eb;\n}\n.modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0;\n}\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n}\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n color: #374151;\n}\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n.modal-body[_ngcontent-%COMP%] .text-warning[_ngcontent-%COMP%] {\n color: #f57c00;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 800px;\n }\n}\n.text-danger[_ngcontent-%COMP%] {\n color: #f44336;\n}"] });
|
|
663
|
+
i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ? 64 : -1);
|
|
664
|
+
} }, dependencies: [i1.LoadingComponent, i2.ApplicationDialogComponent, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n \n\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n\n\n\n\n.application-management-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n background: var(--mat-sys-surface);\n}\n\n\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mat-sys-surface);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n box-shadow: var(--mat-sys-elevation-1);\n z-index: 10;\n}\n\n\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mat-sys-surface-container-lowest);\n}\n\n@media (min-width: 768px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem 2.5rem;\n }\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 768px) {\n .action-buttons[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons[_ngcontent-%COMP%] {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n}\n\n.mj-card[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-medium);\n padding: 1rem;\n box-shadow: none;\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem;\n }\n}\n\n\n\n\n\n.stat-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mat-sys-corner-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon[_ngcontent-%COMP%] {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: var(--mat-sys-secondary-container);\n color: #B5751A;\n}\n\n.stat-icon-public[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n\n\n\n\n.stat-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mat-sys-on-surface);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 2rem;\n }\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface-variant);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mat-sys-surface-container);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mat-sys-corner-small);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 0.875rem 1rem;\n }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row[_ngcontent-%COMP%] {\n gap: 1.5rem;\n }\n}\n\n\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font-size: 1rem;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n box-shadow: var(--mat-sys-elevation-1);\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:hover {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-surface-container-lowest);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n box-shadow: var(--mat-sys-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within .mj-search-icon[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n}\n\n\n\n\n\n.mj-filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-group[_ngcontent-%COMP%] .mj-filter-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface);\n}\n\n.mj-filter-group[_ngcontent-%COMP%] .mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: #EDF0F4;\n border-radius: var(--mat-sys-corner-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-ghost[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-full);\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n box-shadow: var(--mat-sys-elevation-1);\n padding: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\n}\n\n\n\n\n\n.applications-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n\n\n\n\n.app-card[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-large);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mat-sys-elevation-2);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mat-sys-elevation-3);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.app-header[_ngcontent-%COMP%] {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mat-sys-surface-container-lowest);\n transition: background-color 0.2s ease;\n}\n\n.app-header[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-low);\n}\n\n.app-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mat-sys-corner-medium);\n background: var(--mat-sys-primary-container);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mat-sys-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n color: var(--mat-sys-on-surface-variant);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mat-sys-corner-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n border: 1px solid var(--mat-sys-error);\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n}\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--mat-sys-corner-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: var(--mat-sys-surface);\n border-top: 1px solid var(--mat-sys-outline-variant);\n animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n display: none;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n font-weight: 600;\n}\n\n\n\n\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item[_ngcontent-%COMP%] {\n padding: 0.75rem;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-small);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mat-sys-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin-bottom: 0.25rem;\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n color: var(--mat-sys-outline-variant);\n margin-bottom: 1.5rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-text[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-subtext[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mat-sys-on-surface-variant);\n margin: 0;\n}\n\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 padding: 4rem 2rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3.5rem;\n color: var(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1.5rem 0;\n}\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n padding: 1rem;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-extra-large);\n box-shadow: var(--mat-sys-elevation-5);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.modal-body[_ngcontent-%COMP%] .text-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mat-sys-secondary-container);\n color: var(--mat-sys-secondary);\n border-radius: var(--mat-sys-corner-small);\n font-weight: 500;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n}\n\n\n\n\n\n.mj-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 0.875rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mat-sys-corner-full);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n}\n\n.mj-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n\n\n.mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #3395C8;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #4BA5D4;\n transform: scale(0.98);\n}\n\n\n\n.mj-btn-secondary[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n color: var(--mat-sys-primary);\n border: 1px solid var(--mat-sys-outline);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border-color: var(--mat-sys-primary);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #005A8C;\n border-color: #005A8C;\n}\n\n\n\n.mj-btn-ghost[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #005A8C;\n}\n\n\n\n.mj-btn-danger[_ngcontent-%COMP%] {\n background: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #E57373;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #EF9A9A;\n transform: scale(0.98);\n}\n\n\n\n.mj-btn-sm[_ngcontent-%COMP%] {\n padding: 0.5rem 0.875rem;\n font-size: 0.8125rem;\n min-height: 36px;\n}\n\n\n\n.mj-btn-icon-only[_ngcontent-%COMP%] {\n padding: 0.625rem;\n min-width: 44px;\n min-height: 44px;\n}\n\n\n\n.mj-btn-icon-mobile[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile[_ngcontent-%COMP%] .btn-text[_ngcontent-%COMP%] {\n display: inline;\n}\n\n\n\n\n\n.text-danger[_ngcontent-%COMP%] {\n color: var(--mat-sys-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n color: var(--mat-sys-secondary);\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n .application-management-container[_ngcontent-%COMP%] {\n max-width: 1920px;\n margin: 0 auto;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n padding: 1rem 2rem;\n }\n\n .mj-grid-4[_ngcontent-%COMP%] {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 2rem 1rem 2rem;\n padding: 1rem 1.25rem;\n }\n\n .content-area[_ngcontent-%COMP%] {\n padding: 2rem;\n }\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n\n\n\n\n.mj-search-input[_ngcontent-%COMP%]:focus-visible, \nbutton[_ngcontent-%COMP%]:focus-visible, \n.mj-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n \n\n .sticky-header[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n \n\n .action-buttons[_ngcontent-%COMP%] {\n padding: 0.5rem 0.75rem;\n gap: 0.5rem;\n justify-content: flex-end;\n }\n\n \n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] .btn-text[_ngcontent-%COMP%] {\n display: none;\n }\n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n\n \n\n .mj-grid-4[_ngcontent-%COMP%] {\n display: none !important;\n }\n\n \n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 0.5rem 0.5rem 0.5rem;\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-small);\n }\n\n .filters-row[_ngcontent-%COMP%] {\n gap: 0.5rem;\n flex-direction: column;\n align-items: stretch;\n }\n\n \n\n .mj-search[_ngcontent-%COMP%] {\n min-width: 100%;\n }\n\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 0.625rem 1rem 0.625rem 2.5rem;\n min-height: 40px;\n font-size: 0.9375rem;\n border-width: 2px;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n left: 0.75rem;\n font-size: 0.875rem;\n }\n\n \n\n .mj-filter-group[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .mj-filter-group[_ngcontent-%COMP%] .mj-filter-label[_ngcontent-%COMP%] {\n display: none;\n }\n\n .mj-filter-group[_ngcontent-%COMP%] .mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n width: 100%;\n justify-content: stretch;\n }\n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 0.375rem 0.75rem;\n min-height: 36px;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: var(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n \n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%]:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n }\n\n \n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn.mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary) !important;\n color: var(--mat-sys-on-primary) !important;\n box-shadow: var(--mat-sys-elevation-1);\n }\n\n \n\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n \n\n .content-area[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-small);\n }\n\n \n\n .modal-backdrop[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-extra-large);\n max-height: 95vh;\n }\n\n .modal-footer[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .modal-footer[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n border-radius: var(--mat-sys-corner-full);\n }\n\n \n\n .applications-list[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n\n .app-card[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-small);\n overflow: hidden;\n }\n\n .app-header[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mat-sys-corner-small);\n }\n\n .app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n }\n\n .app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n \n\n .app-meta[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n display: none;\n }\n\n .app-meta[_ngcontent-%COMP%] .app-actions[_ngcontent-%COMP%] {\n display: none;\n }\n\n .expand-btn[_ngcontent-%COMP%] {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n }\n\n \n\n .mobile-actions-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n\n .app-stats[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n\n \n\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n \n\n .empty-state[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n\n .empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n }\n\n \n\n .loading-container[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n}\n\n\n\n@media (max-width: 374px) {\n .action-buttons[_ngcontent-%COMP%] {\n padding: 0.375rem 0.5rem;\n }\n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 0.375rem 0.375rem 0.375rem;\n padding: 0.375rem;\n }\n\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.375rem;\n }\n\n .content-area[_ngcontent-%COMP%] {\n padding: 0.375rem;\n }\n\n .app-header[_ngcontent-%COMP%] {\n padding: 0.625rem;\n }\n}"] });
|
|
584
665
|
};
|
|
585
666
|
ApplicationManagementComponent = __decorate([
|
|
586
667
|
RegisterClass(BaseDashboard, 'ApplicationManagement')
|
|
@@ -588,7 +669,7 @@ ApplicationManagementComponent = __decorate([
|
|
|
588
669
|
export { ApplicationManagementComponent };
|
|
589
670
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationManagementComponent, [{
|
|
590
671
|
type: Component,
|
|
591
|
-
args: [{ selector: 'mj-application-management', template: "<div class=\"application-management-container\">\n <!-- Action Buttons -->\n <div class=\"action-buttons\">\n <button class=\"mj-btn mj-btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n Refresh\n </button>\n <button class=\"mj-btn mj-btn-primary\" (click)=\"createNewApplication()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Application\n </button>\n </div>\n\n <!-- Stats Cards -->\n <div class=\"mj-grid mj-grid-4\">\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-total\">\n <i class=\"fa-solid fa-grid-2\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ stats.totalApplications }}</div>\n <div class=\"stat-label\">Total Applications</div>\n </div>\n </div>\n \n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-active\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ stats.activeApplications }}</div>\n <div class=\"stat-label\">Active Applications</div>\n </div>\n </div>\n \n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-entities\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ stats.totalEntities }}</div>\n <div class=\"stat-label\">Total Entities</div>\n </div>\n </div>\n \n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-public\">\n <i class=\"fa-solid fa-globe\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ stats.publicEntities }}</div>\n <div class=\"stat-label\">Public Entities</div>\n </div>\n </div>\n </div>\n\n <!-- Filters Section -->\n <div class=\"filters-section\">\n <div class=\"filters-row\">\n <!-- Search -->\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\"></i>\n <input \n type=\"text\" \n class=\"mj-search-input\" \n placeholder=\"Search applications by name or description...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"filters$.value.search\"\n />\n </div>\n \n <!-- Status Filter -->\n <div class=\"mj-filter-group\">\n <label class=\"mj-filter-label\">Status</label>\n <div class=\"mj-filter-buttons\">\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n (click)=\"onStatusFilterChange('all')\"\n >\n All\n </button>\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n (click)=\"onStatusFilterChange('active')\"\n >\n Active\n </button>\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\n (click)=\"onStatusFilterChange('inactive')\"\n >\n Inactive\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading applications...</div>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"mj-btn mj-btn-primary\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Content Area -->\n @if (!isLoading && !error) {\n <div class=\"content-area\">\n <div class=\"applications-list\">\n @for (app of filteredApplications; track app.ID) {\n <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\">\n <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\">\n <div class=\"app-info\">\n <div class=\"app-icon-wrapper\">\n <i [class]=\"'fa-solid ' + getAppIcon(app)\"></i>\n </div>\n <div class=\"app-details\">\n <h3 class=\"app-name\">{{ app.Name }}</h3>\n <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n </div>\n </div>\n \n <div class=\"app-meta\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editApplication(app)\" title=\"Edit\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n <button class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\" (click)=\"confirmDeleteApplication(app)\" title=\"Delete\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n <button class=\"expand-btn\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n </div>\n \n @if (isAppExpanded(app.ID)) {\n <div class=\"app-content\">\n <div class=\"app-stats\">\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-database\"></i>\n <span class=\"stat-label\">Entities:</span>\n <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n <span class=\"stat-label\">Created:</span>\n <span class=\"stat-value\">{{ app.__mj_CreatedAt | date:'short' }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span class=\"stat-label\">Updated:</span>\n <span class=\"stat-value\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n </div>\n </div>\n \n <div class=\"entities-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-database\"></i>\n Application Entities\n </h4>\n \n @if (getAppEntities(app.ID).length > 0) {\n <div class=\"entities-grid\">\n @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n @if (getEntityInfo(appEntity.EntityID); as entity) {\n <div class=\"entity-item\">\n <div class=\"entity-name\">{{ entity.Name }}</div>\n <div class=\"entity-meta\">\n @if (appEntity.DefaultForNewUser) {\n <span class=\"entity-badge public\">Public</span>\n }\n <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <p class=\"no-entities\">No entities configured for this application</p>\n }\n </div>\n </div>\n }\n </div>\n }\n \n @if (filteredApplications.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-grid-2 empty-icon\"></i>\n <p class=\"empty-text\">No applications found</p>\n <p class=\"empty-subtext\">Try adjusting your filters or create a new application</p>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Application Dialog -->\n <mj-application-dialog\n [visible]=\"showApplicationDialog\"\n [data]=\"applicationDialogData\"\n (result)=\"onApplicationDialogResult($event)\"\n ></mj-application-dialog>\n\n <!-- Delete Confirmation Dialog -->\n @if (showDeleteConfirm && selectedApp) {\n <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3 class=\"modal-title\">\n <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n Confirm Delete\n </h3>\n <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n <p class=\"text-warning\">\n <i class=\"fa-solid fa-warning\"></i>\n This will remove all entity associations for this application.\n </p>\n </div>\n <div class=\"modal-footer\">\n <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n <button class=\"mj-btn mj-btn-danger\" (click)=\"deleteApplication()\" [disabled]=\"isLoading\">\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Deleting...\n } @else {\n <i class=\"fa-solid fa-trash\"></i>\n Delete Application\n }\n </button>\n </div>\n </div>\n </div>\n }\n</div>", styles: ["@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n.application-management-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n position: relative;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.action-buttons {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n margin-bottom: 1.5rem;\n}\n@media (max-width: 768px) {\n .action-buttons {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n.btn-primary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-primary i {\n font-size: 0.875rem;\n}\n.btn-primary:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #ffffff;\n color: #374151;\n border: 1px solid #e5e7eb;\n}\n.btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-secondary i {\n font-size: 0.875rem;\n}\n.btn-secondary:hover {\n background-color: #f9fafb;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.btn-danger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #f44336;\n color: white;\n}\n.btn-danger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-danger i {\n font-size: 0.875rem;\n}\n.btn-danger:hover {\n background-color: #d32f2f;\n}\n\n.stats-grid {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n width: 100%;\n}\n@media (max-width: 768px) {\n .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n}\n\n.stat-card {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n display: flex;\n margin-right: 10px;\n align-items: center;\n gap: 1rem;\n transition: all 0.3s ease;\n min-width: 0;\n}\n.stat-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.stat-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n}\n.stat-icon-total {\n background: rgba(33, 150, 243, 0.1);\n color: #2196f3;\n}\n.stat-icon-active {\n background: rgba(76, 175, 80, 0.1);\n color: #4caf50;\n}\n.stat-icon-entities {\n background: rgba(156, 39, 176, 0.1);\n color: #9c27b0;\n}\n.stat-icon-public {\n background: rgba(255, 152, 0, 0.1);\n color: #ff9800;\n}\n\n.stat-content {\n flex: 1;\n}\n.stat-content .stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: #1f2937;\n line-height: 1;\n}\n.stat-content .stat-label {\n color: #6b7280;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n}\n\n.filters-section {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row {\n display: flex;\n gap: 1.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n.search-container {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n.search-container .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n}\n.search-container .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n}\n.search-container .search-input:focus {\n outline: none;\n border-color: #2196f3;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n.filter-group .filter-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: #374151;\n}\n.filter-group .filter-buttons {\n display: flex;\n background: #f3f4f6;\n border-radius: 8px;\n padding: 4px;\n}\n.filter-group .filter-btn {\n padding: 0.5rem 1rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.filter-group .filter-btn:hover {\n color: #374151;\n}\n.filter-group .filter-btn.active {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n padding: 1.5rem;\n}\n\n.applications-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-height: calc(100vh - 450px);\n overflow-y: auto;\n padding-right: 0.5rem;\n}\n\n.app-card {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n.app-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.app-card.expanded {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n.app-card.expanded .expand-btn i {\n transform: rotate(180deg);\n}\n\n.app-header {\n padding: 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: #f9fafb;\n transition: background-color 0.2s;\n}\n.app-header:hover {\n background: #f3f4f6;\n}\n\n.app-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n}\n\n.app-icon-wrapper {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(33, 150, 243, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2196f3;\n font-size: 1.25rem;\n}\n\n.app-details {\n flex: 1;\n}\n.app-details .app-name {\n font-size: 1.125rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.25rem 0;\n}\n.app-details .app-description {\n font-size: 0.875rem;\n color: #6b7280;\n margin: 0;\n}\n\n.app-meta {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.status-badge {\n padding: 0.375rem 0.75rem;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n.status-badge.status-active {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n.status-badge.status-inactive {\n background: rgba(244, 67, 54, 0.1);\n color: #d32f2f;\n}\n\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.action-btn {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.action-btn:hover {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.action-btn-danger:hover {\n color: #f44336;\n}\n\n.expand-btn {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n.expand-btn i {\n transition: transform 0.3s ease;\n}\n\n.app-content {\n padding: 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n animation: slideDown 0.3s ease-out;\n}\n\n.app-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n.app-stats .stat-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n.app-stats .stat-item i {\n color: #6b7280;\n}\n.app-stats .stat-item .stat-label {\n color: #6b7280;\n}\n.app-stats .stat-item .stat-value {\n color: #1f2937;\n font-weight: 500;\n}\n\n.entities-section {\n padding: 1rem;\n background: #f9fafb;\n border-radius: 8px;\n}\n.entities-section .section-title {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 1rem 0;\n}\n.entities-section .section-title i {\n color: #2196f3;\n}\n\n.entities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n.entity-item {\n padding: 0.75rem;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n transition: all 0.2s;\n}\n.entity-item:hover {\n border-color: #2196f3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n.entity-item .entity-name {\n font-size: 0.875rem;\n font-weight: 500;\n color: #1f2937;\n margin-bottom: 0.25rem;\n}\n.entity-item .entity-meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n color: #6b7280;\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.625rem;\n font-weight: 600;\n}\n.entity-badge.public {\n background: rgba(255, 152, 0, 0.1);\n color: #f57c00;\n}\n\n.entity-sequence {\n font-size: 0.75rem;\n color: #9ca3af;\n}\n\n.no-entities {\n color: #6b7280;\n font-size: 0.875rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n.empty-state {\n text-align: center;\n padding: 4rem 2rem;\n}\n.empty-state .empty-icon {\n font-size: 4rem;\n color: #e5e7eb;\n margin-bottom: 1rem;\n}\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5rem 0;\n}\n.empty-state .empty-subtext {\n color: #6b7280;\n margin: 0;\n}\n\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n margin-bottom: 1rem;\n}\n.loading-spinner .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner .spinner-ring:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n}\n.loading-spinner .spinner-ring:nth-child(2) {\n border-color: transparent #9c27b0 transparent transparent;\n animation-delay: -0.3s;\n}\n.loading-spinner .spinner-ring:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.loading-text {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n.error-container {\n text-align: center;\n padding: 4rem 2rem;\n}\n.error-container .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n}\n.error-container .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n}\n.error-container .retry-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.error-container .retry-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.error-container .retry-button i {\n font-size: 0.875rem;\n}\n\n.modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n overflow: hidden;\n animation: slideUp 0.3s ease;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid #e5e7eb;\n}\n.modal-header .modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0;\n}\n.modal-header .modal-close {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n.modal-header .modal-close:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n.modal-body p {\n margin: 0 0 1rem 0;\n color: #374151;\n}\n.modal-body p:last-child {\n margin-bottom: 0;\n}\n.modal-body .text-warning {\n color: #f57c00;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 800px;\n }\n}\n.text-danger {\n color: #f44336;\n}\n"] }]
|
|
672
|
+
args: [{ selector: 'mj-application-management', template: "<div class=\"application-management-container\">\n <!-- Sticky Header Section -->\n <div class=\"sticky-header\">\n <!-- Action Buttons -->\n <div class=\"action-buttons\" role=\"toolbar\" aria-label=\"Application management actions\">\n <button\n class=\"mj-btn mj-btn-secondary mj-btn-icon-mobile\"\n (click)=\"refreshData()\"\n [disabled]=\"isLoading\"\n aria-label=\"Refresh applications\"\n >\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\" aria-hidden=\"true\"></i>\n <span class=\"btn-text\">Refresh</span>\n </button>\n <button class=\"mj-btn mj-btn-primary mj-btn-icon-mobile\" (click)=\"createNewApplication()\" aria-label=\"Add new application\">\n <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n <span class=\"btn-text\">Add Application</span>\n </button>\n </div>\n\n <!-- Stats Cards -->\n <div class=\"mj-grid-4\" role=\"region\" aria-label=\"Application statistics\">\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-total\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cubes\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Total applications count\">{{ stats.totalApplications }}</div>\n <div class=\"stat-label\">Total Applications</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-active\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Active applications count\">{{ stats.activeApplications }}</div>\n <div class=\"stat-label\">Active Applications</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-entities\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Total entities count\">{{ stats.totalEntities }}</div>\n <div class=\"stat-label\">Total Entities</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-public\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-globe\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Public entities count\">{{ stats.publicEntities }}</div>\n <div class=\"stat-label\">Public Entities</div>\n </div>\n </div>\n </div>\n\n <!-- Filters Section -->\n <div class=\"filters-section\" role=\"search\" aria-label=\"Filter applications\">\n <div class=\"filters-row\">\n <!-- Search - Enhanced prominent search box -->\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\" aria-hidden=\"true\"></i>\n <input\n type=\"text\"\n class=\"mj-search-input\"\n placeholder=\"Search applications by name or description...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"filters$.value.search\"\n aria-label=\"Search applications\"\n />\n </div>\n\n <!-- Status Filter -->\n <div class=\"mj-filter-group\">\n <label class=\"mj-filter-label\" id=\"status-filter-label\">Status</label>\n <div class=\"mj-filter-buttons\" role=\"group\" aria-labelledby=\"status-filter-label\">\n <button\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n (click)=\"onStatusFilterChange('all')\"\n [attr.aria-pressed]=\"filters$.value.status === 'all'\"\n >\n All\n </button>\n <button\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n (click)=\"onStatusFilterChange('active')\"\n [attr.aria-pressed]=\"filters$.value.status === 'active'\"\n >\n Active\n </button>\n <button\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\n (click)=\"onStatusFilterChange('inactive')\"\n [attr.aria-pressed]=\"filters$.value.status === 'inactive'\"\n >\n Inactive\n </button>\n </div>\n </div>\n </div>\n </div>\n </div><!-- End Sticky Header -->\n\n <!-- Scrollable Content Section -->\n <div class=\"scrollable-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading applications...\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\" role=\"alert\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"mj-btn mj-btn-primary\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Content Area -->\n @if (!isLoading && !error) {\n <div class=\"content-area\">\n <div class=\"applications-list\" role=\"list\">\n @for (app of filteredApplications; track app.ID) {\n <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\" role=\"listitem\">\n <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\" role=\"button\" [attr.aria-expanded]=\"isAppExpanded(app.ID)\">\n <div class=\"app-info\">\n <div class=\"app-icon-wrapper\">\n <i [class]=\"'fa-solid ' + getAppIcon(app)\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"app-details\">\n <h3 class=\"app-name\">{{ app.Name }}</h3>\n <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n </div>\n </div>\n\n <div class=\"app-meta\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n <button\n class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n <button\n class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n <button class=\"expand-btn\" aria-label=\"Toggle details\">\n <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n\n @if (isAppExpanded(app.ID)) {\n <div class=\"app-content\">\n <!-- Mobile-only actions bar -->\n <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"mobile-action-buttons\">\n <button\n class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"btn-label\">Edit</span>\n </button>\n <button\n class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n <span class=\"btn-label\">Delete</span>\n </button>\n </div>\n </div>\n\n <div class=\"app-stats\">\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Entities:</span>\n <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-calendar\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Created:</span>\n <span class=\"stat-value\">{{ app.__mj_CreatedAt | date:'short' }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Updated:</span>\n <span class=\"stat-value\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n </div>\n </div>\n\n <div class=\"entities-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n Application Entities\n </h4>\n\n @if (getAppEntities(app.ID).length > 0) {\n <div class=\"entities-grid\">\n @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n @if (getEntityInfo(appEntity.EntityID); as entity) {\n <div class=\"entity-item\">\n <div class=\"entity-name\">{{ entity.Name }}</div>\n <div class=\"entity-meta\">\n @if (appEntity.DefaultForNewUser) {\n <span class=\"entity-badge public\">Public</span>\n }\n <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <p class=\"no-entities\">No entities configured for this application</p>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (filteredApplications.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-cubes empty-icon\" aria-hidden=\"true\"></i>\n <p class=\"empty-text\">No applications found</p>\n <p class=\"empty-subtext\">Try adjusting your filters or create a new application</p>\n </div>\n }\n </div>\n </div>\n }\n </div><!-- End Scrollable Content -->\n\n <!-- Application Dialog -->\n <mj-application-dialog\n [visible]=\"showApplicationDialog\"\n [data]=\"applicationDialogData\"\n (result)=\"onApplicationDialogResult($event)\"\n ></mj-application-dialog>\n\n <!-- Delete Confirmation Dialog -->\n @if (showDeleteConfirm && selectedApp) {\n <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\" role=\"presentation\">\n <div\n class=\"modal-dialog\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"delete-dialog-title\"\n aria-describedby=\"delete-dialog-description\"\n >\n <div class=\"modal-header\">\n <h3 class=\"modal-title\" id=\"delete-dialog-title\">\n <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n Confirm Delete\n </h3>\n <button\n class=\"modal-close\"\n (click)=\"showDeleteConfirm = false\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"modal-body\" id=\"delete-dialog-description\">\n <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n <p class=\"text-warning\">\n <i class=\"fa-solid fa-warning\" aria-hidden=\"true\"></i>\n This will remove all entity associations for this application.\n </p>\n </div>\n <div class=\"modal-footer\">\n <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n <button class=\"mj-btn mj-btn-danger\" (click)=\"deleteApplication()\" [disabled]=\"isLoading\">\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n Deleting...\n } @else {\n <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n Delete Application\n }\n </button>\n <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["/* =============================================================================\n Application Management Component - MD3 Design System\n Following Material Design 3 color palette and design tokens\n ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n Host Element - Using shared MD3 tokens from _md3-theme.scss\n ----------------------------------------------------------------------------- */\n:host {\n /* Host element fills container but doesn't scroll itself */\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n Container & Layout\n ----------------------------------------------------------------------------- */\n.application-management-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n background: var(--mat-sys-surface);\n}\n\n/* -----------------------------------------------------------------------------\n Sticky Header - Always visible controls\n ----------------------------------------------------------------------------- */\n.sticky-header {\n flex-shrink: 0;\n background: var(--mat-sys-surface);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n box-shadow: var(--mat-sys-elevation-1);\n z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n Scrollable Content - Application list area\n ----------------------------------------------------------------------------- */\n.scrollable-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mat-sys-surface-container-lowest);\n}\n\n@media (min-width: 768px) {\n .scrollable-content {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content {\n padding: 2rem 2.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Action Buttons (In Sticky Header)\n ----------------------------------------------------------------------------- */\n.action-buttons {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 768px) {\n .action-buttons {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Statistics Cards - Static Display (Non-interactive)\n ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4 {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4 {\n gap: 1rem;\n }\n}\n\n.mj-card {\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-medium);\n padding: 1rem;\n box-shadow: none;\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card {\n padding: 1rem 1.25rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Stat Icon Containers\n ----------------------------------------------------------------------------- */\n.stat-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--mat-sys-corner-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.stat-icon-active {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n.stat-icon-entities {\n background: var(--mat-sys-secondary-container);\n color: #B5751A;\n}\n\n.stat-icon-public {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n/* -----------------------------------------------------------------------------\n Stat Content Typography\n ----------------------------------------------------------------------------- */\n.stat-content {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content .stat-value {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mat-sys-on-surface);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-value {\n font-size: 2rem;\n }\n}\n\n.stat-content .stat-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface-variant);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-label {\n font-size: 0.8125rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Filters Section\n ----------------------------------------------------------------------------- */\n.filters-section {\n flex-shrink: 0;\n background: var(--mat-sys-surface-container);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mat-sys-corner-small);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .filters-section {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 0.875rem 1rem;\n }\n}\n\n.filters-row {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row {\n gap: 1.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Search Input\n ----------------------------------------------------------------------------- */\n.mj-search {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search .mj-search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-icon {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search .mj-search-input {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font-size: 1rem;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-input {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n box-shadow: var(--mat-sys-elevation-1);\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search .mj-search-input {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search .mj-search-input::placeholder {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-search .mj-search-input:hover {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-surface-container-lowest);\n}\n\n.mj-search .mj-search-input:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-input:focus {\n box-shadow: var(--mat-sys-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n.mj-search:focus-within .mj-search-icon {\n color: var(--mat-sys-primary);\n}\n\n/* -----------------------------------------------------------------------------\n Filter Button Group\n ----------------------------------------------------------------------------- */\n.mj-filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-group .mj-filter-label {\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface);\n}\n\n.mj-filter-group .mj-filter-buttons {\n display: flex;\n background: #EDF0F4;\n border-radius: var(--mat-sys-corner-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons .mj-btn-ghost {\n border-radius: var(--mat-sys-corner-full);\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.mj-filter-buttons .mj-btn-ghost:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-filter-buttons .mj-btn-primary {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n/* -----------------------------------------------------------------------------\n Content Area - Inside scrollable section\n ----------------------------------------------------------------------------- */\n.content-area {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n box-shadow: var(--mat-sys-elevation-1);\n padding: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .content-area {\n padding: 1.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Applications List\n ----------------------------------------------------------------------------- */\n.applications-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Card - Interactive\n ----------------------------------------------------------------------------- */\n.app-card {\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-large);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card:hover {\n box-shadow: var(--mat-sys-elevation-2);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded {\n box-shadow: var(--mat-sys-elevation-3);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded .expand-btn i {\n transform: rotate(180deg);\n}\n\n.app-header {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mat-sys-surface-container-lowest);\n transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n background: var(--mat-sys-surface-container-low);\n}\n\n.app-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper {\n width: 48px;\n height: 48px;\n border-radius: var(--mat-sys-corner-medium);\n background: var(--mat-sys-primary-container);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mat-sys-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details {\n flex: 1;\n min-width: 0;\n}\n\n.app-details .app-name {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details .app-description {\n font-size: 0.9375rem;\n color: var(--mat-sys-on-surface-variant);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details .app-description {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Status Badge\n ----------------------------------------------------------------------------- */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mat-sys-corner-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n background: var(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.status-badge.status-inactive {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n border: 1px solid var(--mat-sys-error);\n}\n\n.status-badge i {\n font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Actions\n ----------------------------------------------------------------------------- */\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.expand-btn {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--mat-sys-corner-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.expand-btn:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.expand-btn i {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n Application Content (Expanded)\n ----------------------------------------------------------------------------- */\n.app-content {\n padding: 1.5rem;\n background: var(--mat-sys-surface);\n border-top: 1px solid var(--mat-sys-outline-variant);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mobile-actions-bar {\n display: none;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.app-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats .stat-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats .stat-item i {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats .stat-item .stat-label {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats .stat-item .stat-value {\n color: var(--mat-sys-on-surface);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Entities Section\n ----------------------------------------------------------------------------- */\n.entities-section {\n padding: 1rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\n}\n\n.entities-section .section-title {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n color: var(--mat-sys-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item {\n padding: 0.75rem;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-small);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n border-color: var(--mat-sys-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.entity-item .entity-name {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin-bottom: 0.25rem;\n}\n\n.entity-item .entity-meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public {\n background: var(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.entity-sequence {\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.no-entities {\n color: var(--mat-sys-on-surface-variant);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Empty State\n ----------------------------------------------------------------------------- */\n.empty-state {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n font-size: 4rem;\n color: var(--mat-sys-outline-variant);\n margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n font-size: 1rem;\n color: var(--mat-sys-on-surface-variant);\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Loading State\n ----------------------------------------------------------------------------- */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n Error State\n ----------------------------------------------------------------------------- */\n.error-container {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container .error-icon {\n font-size: 3.5rem;\n color: var(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n Modal Dialog\n ----------------------------------------------------------------------------- */\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n padding: 1rem;\n}\n\n.modal-dialog {\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-extra-large);\n box-shadow: var(--mat-sys-elevation-5);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.modal-header .modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0;\n}\n\n.modal-header .modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n\n.modal-body p {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.modal-body p:last-child {\n margin-bottom: 0;\n}\n\n.modal-body .text-warning {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mat-sys-secondary-container);\n color: var(--mat-sys-secondary);\n border-radius: var(--mat-sys-corner-small);\n font-weight: 500;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n}\n\n/* -----------------------------------------------------------------------------\n Button System\n ----------------------------------------------------------------------------- */\n.mj-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 0.875rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mat-sys-corner-full);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: nowrap;\n min-height: 44px;\n}\n\n.mj-btn:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n/* Primary Button - Dark, lightens on hover */\n.mj-btn-primary {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n background: #3395C8;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n background: #4BA5D4;\n transform: scale(0.98);\n}\n\n/* Secondary Button - Light, darkens on hover */\n.mj-btn-secondary {\n background: var(--mat-sys-surface);\n color: var(--mat-sys-primary);\n border: 1px solid var(--mat-sys-outline);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border-color: var(--mat-sys-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n background: #005A8C;\n border-color: #005A8C;\n}\n\n/* Ghost Button - Transparent, fills on hover */\n.mj-btn-ghost {\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-btn-ghost:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-btn-ghost:active:not(:disabled) {\n background: #005A8C;\n}\n\n/* Danger Button - Dark red, lightens on hover */\n.mj-btn-danger {\n background: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-danger:hover:not(:disabled) {\n background: #E57373;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-danger:active:not(:disabled) {\n background: #EF9A9A;\n transform: scale(0.98);\n}\n\n/* Small Button */\n.mj-btn-sm {\n padding: 0.5rem 0.875rem;\n font-size: 0.8125rem;\n min-height: 36px;\n}\n\n/* Icon-only Button */\n.mj-btn-icon-only {\n padding: 0.625rem;\n min-width: 44px;\n min-height: 44px;\n}\n\n/* Icon-mobile buttons show text on larger screens */\n.mj-btn-icon-mobile {\n gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile .btn-text {\n display: inline;\n}\n\n/* -----------------------------------------------------------------------------\n Utility Classes\n ----------------------------------------------------------------------------- */\n.text-danger {\n color: var(--mat-sys-error);\n}\n\n.text-warning {\n color: var(--mat-sys-secondary);\n}\n\n/* -----------------------------------------------------------------------------\n Desktop (1440px+) - Large Screen Optimizations\n ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n .application-management-container {\n max-width: 1920px;\n margin: 0 auto;\n }\n\n .action-buttons {\n padding: 1rem 2rem;\n }\n\n .mj-grid-4 {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n\n .filters-section {\n margin: 0 2rem 1rem 2rem;\n padding: 1rem 1.25rem;\n }\n\n .content-area {\n padding: 2rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Animations\n ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible,\n.mj-btn:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Reduced Motion\n ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Mobile-specific adjustments (< 640px)\n ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n /* Compact sticky header for mobile */\n .sticky-header {\n padding: 0;\n }\n\n /* Compact action buttons row */\n .action-buttons {\n padding: 0.5rem 0.75rem;\n gap: 0.5rem;\n justify-content: flex-end;\n }\n\n /* Icon-only buttons on mobile - keep pill shape */\n .mj-btn-icon-mobile {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mj-btn-icon-mobile .btn-text {\n display: none;\n }\n\n .mj-btn-icon-mobile i {\n font-size: 1.125rem;\n }\n\n /* Hide stats cards on mobile to save space */\n .mj-grid-4 {\n display: none !important;\n }\n\n /* Compact filters section */\n .filters-section {\n margin: 0 0.5rem 0.5rem 0.5rem;\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-small);\n }\n\n .filters-row {\n gap: 0.5rem;\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Full-width compact search on mobile */\n .mj-search {\n min-width: 100%;\n }\n\n .mj-search .mj-search-input {\n padding: 0.625rem 1rem 0.625rem 2.5rem;\n min-height: 40px;\n font-size: 0.9375rem;\n border-width: 2px;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mj-search .mj-search-icon {\n left: 0.75rem;\n font-size: 0.875rem;\n }\n\n /* Horizontal scrollable filter buttons */\n .mj-filter-group {\n width: 100%;\n }\n\n .mj-filter-group .mj-filter-label {\n display: none;\n }\n\n .mj-filter-group .mj-filter-buttons {\n display: flex;\n width: 100%;\n justify-content: stretch;\n }\n\n .mj-filter-buttons .mj-btn {\n flex: 1;\n padding: 0.375rem 0.75rem;\n min-height: 36px;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: var(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n /* Hover state for filter buttons on mobile */\n .mj-filter-buttons .mj-btn:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n }\n\n /* Active/selected state for filter buttons on mobile */\n .mj-filter-buttons .mj-btn.mj-btn-primary {\n background: var(--mat-sys-primary) !important;\n color: var(--mat-sys-on-primary) !important;\n box-shadow: var(--mat-sys-elevation-1);\n }\n\n /* More compact scrollable content */\n .scrollable-content {\n padding: 0.5rem;\n }\n\n /* Compact content area */\n .content-area {\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-small);\n }\n\n /* Modal styles */\n .modal-backdrop {\n padding: 0.5rem;\n }\n\n .modal-dialog {\n border-radius: var(--mat-sys-corner-extra-large);\n max-height: 95vh;\n }\n\n .modal-footer {\n flex-direction: column;\n }\n\n .modal-footer .mj-btn {\n width: 100%;\n justify-content: center;\n border-radius: var(--mat-sys-corner-full);\n }\n\n /* App Card Mobile Layout */\n .applications-list {\n gap: 0.5rem;\n }\n\n .app-card {\n border-radius: var(--mat-sys-corner-small);\n overflow: hidden;\n }\n\n .app-header {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mat-sys-corner-small);\n }\n\n .app-details {\n flex: 1;\n min-width: 0;\n }\n\n .app-details .app-name {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details .app-description {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n /* On mobile: hide status and actions in header, show only expand button */\n .app-meta {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta .status-badge {\n display: none;\n }\n\n .app-meta .app-actions {\n display: none;\n }\n\n .expand-btn {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .expand-btn i {\n font-size: 1rem;\n }\n\n /* Mobile actions bar - visible on mobile only */\n .mobile-actions-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar .status-badge {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons .mj-btn-sm {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mobile-action-buttons .mj-btn-sm i {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons .btn-label {\n font-size: 0.8125rem;\n }\n\n .app-stats {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content {\n padding: 0.75rem;\n }\n\n /* Entities grid in expanded view */\n .entities-grid {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item {\n padding: 0.5rem;\n }\n\n .entity-item .entity-name {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n /* Empty state compact */\n .empty-state {\n padding: 2rem 1rem;\n }\n\n .empty-state .empty-icon {\n font-size: 2.5rem;\n }\n\n /* Loading container compact */\n .loading-container {\n padding: 2rem 1rem;\n }\n}\n\n/* Small mobile (< 375px) - Extra compact */\n@media (max-width: 374px) {\n .action-buttons {\n padding: 0.375rem 0.5rem;\n }\n\n .filters-section {\n margin: 0 0.375rem 0.375rem 0.375rem;\n padding: 0.375rem;\n }\n\n .scrollable-content {\n padding: 0.375rem;\n }\n\n .content-area {\n padding: 0.375rem;\n }\n\n .app-header {\n padding: 0.625rem;\n }\n}\n"] }]
|
|
592
673
|
}], () => [], null); })();
|
|
593
674
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationManagementComponent, { className: "ApplicationManagementComponent", filePath: "src/lib/application-management/application-management.component.ts", lineNumber: 28 }); })();
|
|
594
675
|
//# sourceMappingURL=application-management.component.js.map
|