@memberjunction/ng-explorer-settings 3.3.0 → 4.0.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/account-info/account-info.component.d.ts +23 -0
- package/dist/lib/account-info/account-info.component.d.ts.map +1 -0
- package/dist/lib/account-info/account-info.component.js +157 -0
- package/dist/lib/account-info/account-info.component.js.map +1 -0
- package/dist/lib/appearance-settings/appearance-settings.component.d.ts +15 -0
- package/dist/lib/appearance-settings/appearance-settings.component.d.ts.map +1 -0
- package/dist/lib/appearance-settings/appearance-settings.component.js +79 -0
- package/dist/lib/appearance-settings/appearance-settings.component.js.map +1 -0
- 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 +20 -18
- package/dist/lib/application-management/application-dialog/application-dialog.component.js.map +1 -1
- package/dist/lib/application-management/application-management.component.d.ts +3 -2
- package/dist/lib/application-management/application-management.component.d.ts.map +1 -1
- package/dist/lib/application-management/application-management.component.js +20 -15
- package/dist/lib/application-management/application-management.component.js.map +1 -1
- package/dist/lib/application-settings/application-settings.component.d.ts +113 -0
- package/dist/lib/application-settings/application-settings.component.d.ts.map +1 -0
- package/dist/lib/application-settings/application-settings.component.js +523 -0
- package/dist/lib/application-settings/application-settings.component.js.map +1 -0
- package/dist/lib/entity-permissions/entity-permissions.component.d.ts.map +1 -1
- package/dist/lib/entity-permissions/entity-permissions.component.js +13 -10
- package/dist/lib/entity-permissions/entity-permissions.component.js.map +1 -1
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.d.ts +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 +44 -43
- package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js.map +1 -1
- package/dist/lib/general-settings/general-settings.component.d.ts +14 -0
- package/dist/lib/general-settings/general-settings.component.d.ts.map +1 -0
- package/dist/lib/general-settings/general-settings.component.js +50 -0
- package/dist/lib/general-settings/general-settings.component.js.map +1 -0
- package/dist/lib/module.d.ts +30 -28
- package/dist/lib/module.d.ts.map +1 -1
- package/dist/lib/module.js +64 -37
- package/dist/lib/module.js.map +1 -1
- package/dist/lib/notification-preferences/notification-preferences.component.d.ts.map +1 -1
- package/dist/lib/notification-preferences/notification-preferences.component.js +9 -8
- package/dist/lib/notification-preferences/notification-preferences.component.js.map +1 -1
- package/dist/lib/role-management/role-dialog/role-dialog.component.d.ts +1 -1
- 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 +32 -32
- package/dist/lib/role-management/role-dialog/role-dialog.component.js.map +1 -1
- package/dist/lib/role-management/role-management.component.d.ts.map +1 -1
- package/dist/lib/role-management/role-management.component.js +11 -8
- package/dist/lib/role-management/role-management.component.js.map +1 -1
- package/dist/lib/settings/settings.component.d.ts +5 -14
- package/dist/lib/settings/settings.component.d.ts.map +1 -1
- package/dist/lib/settings/settings.component.js +149 -419
- package/dist/lib/settings/settings.component.js.map +1 -1
- package/dist/lib/shared/components/settings-card/settings-card.component.d.ts +27 -0
- package/dist/lib/shared/components/settings-card/settings-card.component.d.ts.map +1 -0
- package/dist/lib/shared/components/settings-card/settings-card.component.js +170 -0
- package/dist/lib/shared/components/settings-card/settings-card.component.js.map +1 -0
- package/dist/lib/shared/settings-card.component.d.ts.map +1 -1
- package/dist/lib/shared/settings-card.component.js +4 -4
- package/dist/lib/shared/settings-card.component.js.map +1 -1
- package/dist/lib/sql-logging/sql-logging.component.d.ts +2 -2
- package/dist/lib/sql-logging/sql-logging.component.d.ts.map +1 -1
- package/dist/lib/sql-logging/sql-logging.component.js +21 -16
- package/dist/lib/sql-logging/sql-logging.component.js.map +1 -1
- 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 +14 -11
- 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 +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 +37 -36
- package/dist/lib/user-management/user-dialog/user-dialog.component.js.map +1 -1
- package/dist/lib/user-management/user-management.component.d.ts.map +1 -1
- package/dist/lib/user-management/user-management.component.js +23 -19
- package/dist/lib/user-management/user-management.component.js.map +1 -1
- 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 +16 -12
- package/dist/lib/user-profile-settings/user-profile-settings.component.js.map +1 -1
- package/dist/public-api.d.ts +5 -12
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +6 -38
- package/dist/public-api.js.map +1 -1
- package/package.json +35 -37
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAA2C,MAAM,eAAe,CAAC;AAE7J,OAAO,EAAiD,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAEtG,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;;AAE3D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,
|
|
1
|
+
{"version":3,"file":"role-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAA2C,MAAM,eAAe,CAAC;AAE7J,OAAO,EAAiD,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAEtG,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;;AAE3D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,qBAOa,mBAAoB,YAAW,MAAM,EAAE,SAAS,EAAE,SAAS;IAC7D,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IACnC,OAAO,UAAS;IACf,MAAM,iCAAwC;IAExD,OAAO,CAAC,EAAE,CAAuB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAE3B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,UAAS;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAUnC,QAAQ,IAAI,IAAI;IAIhB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAWzC,WAAW,IAAI,IAAI;IAInB,OAAO,CAAC,SAAS;IAUjB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAM/B,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,IAAW,YAAY,IAAI,OAAO,CAIjC;IAED,OAAO,CAAC,YAAY;IAgBP,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAgD/B,QAAQ,IAAI,IAAI;IAIvB,OAAO,CAAC,oBAAoB;yCAzIjB,mBAAmB;2CAAnB,mBAAmB;CA+I/B"}
|
|
@@ -2,9 +2,8 @@ import { Component, Input, Output, EventEmitter, inject, HostListener, ViewEncap
|
|
|
2
2
|
import { FormBuilder, Validators } from '@angular/forms';
|
|
3
3
|
import { Metadata } from '@memberjunction/core';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
-
import * as i1 from "@angular/
|
|
6
|
-
|
|
7
|
-
function RoleDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
5
|
+
import * as i1 from "@angular/forms";
|
|
6
|
+
function RoleDialogComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
8
7
|
i0.ɵɵelementStart(0, "div", 12)(1, "div", 31);
|
|
9
8
|
i0.ɵɵelement(2, "i", 32);
|
|
10
9
|
i0.ɵɵelementStart(3, "div");
|
|
@@ -15,16 +14,17 @@ function RoleDialogComponent_div_0_Conditional_13_Template(rf, ctx) { if (rf & 1
|
|
|
15
14
|
i0.ɵɵadvance(4);
|
|
16
15
|
i0.ɵɵtextInterpolate(ctx_r1.error);
|
|
17
16
|
} }
|
|
18
|
-
function
|
|
17
|
+
function RoleDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
19
18
|
i0.ɵɵtext(0, " Role name is required ");
|
|
20
19
|
} }
|
|
21
|
-
function
|
|
20
|
+
function RoleDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
22
21
|
i0.ɵɵtext(0, " Role name cannot exceed 50 characters ");
|
|
23
22
|
} }
|
|
24
|
-
function
|
|
23
|
+
function RoleDialogComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
25
24
|
i0.ɵɵelementStart(0, "div", 21);
|
|
26
25
|
i0.ɵɵelement(1, "i", 33);
|
|
27
|
-
i0.ɵɵ
|
|
26
|
+
i0.ɵɵconditionalCreate(2, RoleDialogComponent_Conditional_0_Conditional_27_Conditional_2_Template, 1, 0);
|
|
27
|
+
i0.ɵɵconditionalCreate(3, RoleDialogComponent_Conditional_0_Conditional_27_Conditional_3_Template, 1, 0);
|
|
28
28
|
i0.ɵɵelementEnd();
|
|
29
29
|
} if (rf & 2) {
|
|
30
30
|
let tmp_2_0;
|
|
@@ -35,7 +35,7 @@ function RoleDialogComponent_div_0_Conditional_27_Template(rf, ctx) { if (rf & 1
|
|
|
35
35
|
i0.ɵɵadvance();
|
|
36
36
|
i0.ɵɵconditional(((tmp_3_0 = ctx_r1.roleForm.get("name")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["maxlength"]) ? 3 : -1);
|
|
37
37
|
} }
|
|
38
|
-
function
|
|
38
|
+
function RoleDialogComponent_Conditional_0_Conditional_34_Template(rf, ctx) { if (rf & 1) {
|
|
39
39
|
i0.ɵɵelementStart(0, "div", 18)(1, "label", 34);
|
|
40
40
|
i0.ɵɵtext(2, "Directory ID");
|
|
41
41
|
i0.ɵɵelementEnd();
|
|
@@ -44,7 +44,7 @@ function RoleDialogComponent_div_0_Conditional_34_Template(rf, ctx) { if (rf & 1
|
|
|
44
44
|
i0.ɵɵtext(5, " External directory identifier for syncing with Active Directory or other systems. ");
|
|
45
45
|
i0.ɵɵelementEnd()();
|
|
46
46
|
} }
|
|
47
|
-
function
|
|
47
|
+
function RoleDialogComponent_Conditional_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
|
|
48
48
|
i0.ɵɵelementStart(0, "div", 26);
|
|
49
49
|
i0.ɵɵelement(1, "i", 6);
|
|
50
50
|
i0.ɵɵelementStart(2, "div")(3, "strong");
|
|
@@ -54,7 +54,7 @@ function RoleDialogComponent_div_0_Conditional_44_Template(rf, ctx) { if (rf & 1
|
|
|
54
54
|
i0.ɵɵtext(6, "This is a system-defined role. Some properties may be limited for editing to maintain system integrity.");
|
|
55
55
|
i0.ɵɵelementEnd()()();
|
|
56
56
|
} }
|
|
57
|
-
function
|
|
57
|
+
function RoleDialogComponent_Conditional_0_Conditional_45_Template(rf, ctx) { if (rf & 1) {
|
|
58
58
|
i0.ɵɵelementStart(0, "div", 27);
|
|
59
59
|
i0.ɵɵelement(1, "i", 36);
|
|
60
60
|
i0.ɵɵelementStart(2, "div")(3, "strong");
|
|
@@ -64,7 +64,7 @@ function RoleDialogComponent_div_0_Conditional_45_Template(rf, ctx) { if (rf & 1
|
|
|
64
64
|
i0.ɵɵtext(6, "This is a custom role that can be fully configured and modified.");
|
|
65
65
|
i0.ɵɵelementEnd()()();
|
|
66
66
|
} }
|
|
67
|
-
function
|
|
67
|
+
function RoleDialogComponent_Conditional_0_Conditional_46_Template(rf, ctx) { if (rf & 1) {
|
|
68
68
|
i0.ɵɵelementStart(0, "div", 12)(1, "div", 13)(2, "div", 14)(3, "h3", 15);
|
|
69
69
|
i0.ɵɵelement(4, "i", 37);
|
|
70
70
|
i0.ɵɵtext(5, " Permissions ");
|
|
@@ -85,11 +85,11 @@ function RoleDialogComponent_div_0_Conditional_46_Template(rf, ctx) { if (rf & 1
|
|
|
85
85
|
i0.ɵɵtext(18, " tab of the settings dashboard. Use that interface to configure specific access rights for this role.");
|
|
86
86
|
i0.ɵɵelementEnd()()()()()();
|
|
87
87
|
} }
|
|
88
|
-
function
|
|
88
|
+
function RoleDialogComponent_Conditional_0_Conditional_49_Template(rf, ctx) { if (rf & 1) {
|
|
89
89
|
i0.ɵɵelement(0, "i", 39);
|
|
90
90
|
i0.ɵɵtext(1, " Saving... ");
|
|
91
91
|
} }
|
|
92
|
-
function
|
|
92
|
+
function RoleDialogComponent_Conditional_0_Conditional_50_Template(rf, ctx) { if (rf & 1) {
|
|
93
93
|
i0.ɵɵelement(0, "i", 40);
|
|
94
94
|
i0.ɵɵtext(1);
|
|
95
95
|
} if (rf & 2) {
|
|
@@ -97,12 +97,12 @@ function RoleDialogComponent_div_0_Conditional_50_Template(rf, ctx) { if (rf & 1
|
|
|
97
97
|
i0.ɵɵadvance();
|
|
98
98
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update Role" : "Create Role", " ");
|
|
99
99
|
} }
|
|
100
|
-
function
|
|
100
|
+
function RoleDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
101
101
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
102
102
|
i0.ɵɵelementStart(0, "div", 1);
|
|
103
|
-
i0.ɵɵlistener("click", function
|
|
103
|
+
i0.ɵɵlistener("click", function RoleDialogComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
|
|
104
104
|
i0.ɵɵelementStart(1, "div", 2);
|
|
105
|
-
i0.ɵɵlistener("click", function
|
|
105
|
+
i0.ɵɵlistener("click", function RoleDialogComponent_Conditional_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
106
106
|
i0.ɵɵelementStart(2, "div", 3)(3, "div", 4)(4, "h2", 5);
|
|
107
107
|
i0.ɵɵelement(5, "i", 6);
|
|
108
108
|
i0.ɵɵtext(6);
|
|
@@ -111,12 +111,12 @@ function RoleDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
111
111
|
i0.ɵɵtext(8);
|
|
112
112
|
i0.ɵɵelementEnd()();
|
|
113
113
|
i0.ɵɵelementStart(9, "button", 8);
|
|
114
|
-
i0.ɵɵlistener("click", function
|
|
114
|
+
i0.ɵɵlistener("click", function RoleDialogComponent_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
|
|
115
115
|
i0.ɵɵelement(10, "i", 9);
|
|
116
116
|
i0.ɵɵelementEnd()();
|
|
117
117
|
i0.ɵɵelementStart(11, "div", 10)(12, "form", 11);
|
|
118
|
-
i0.ɵɵlistener("ngSubmit", function
|
|
119
|
-
i0.ɵɵ
|
|
118
|
+
i0.ɵɵlistener("ngSubmit", function RoleDialogComponent_Conditional_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
|
|
119
|
+
i0.ɵɵconditionalCreate(13, RoleDialogComponent_Conditional_0_Conditional_13_Template, 5, 1, "div", 12);
|
|
120
120
|
i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "h3", 15);
|
|
121
121
|
i0.ɵɵelement(18, "i", 6);
|
|
122
122
|
i0.ɵɵtext(19, " Role Information ");
|
|
@@ -128,7 +128,7 @@ function RoleDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
128
128
|
i0.ɵɵtext(25, "Role Name");
|
|
129
129
|
i0.ɵɵelementEnd();
|
|
130
130
|
i0.ɵɵelement(26, "input", 20);
|
|
131
|
-
i0.ɵɵ
|
|
131
|
+
i0.ɵɵconditionalCreate(27, RoleDialogComponent_Conditional_0_Conditional_27_Template, 4, 2, "div", 21);
|
|
132
132
|
i0.ɵɵelementEnd();
|
|
133
133
|
i0.ɵɵelementStart(28, "div", 18)(29, "label", 22);
|
|
134
134
|
i0.ɵɵtext(30, "Description");
|
|
@@ -137,7 +137,7 @@ function RoleDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
137
137
|
i0.ɵɵelementStart(32, "div", 24);
|
|
138
138
|
i0.ɵɵtext(33, " Provide a clear description of what this role is for and what permissions it should have. ");
|
|
139
139
|
i0.ɵɵelementEnd()();
|
|
140
|
-
i0.ɵɵ
|
|
140
|
+
i0.ɵɵconditionalCreate(34, RoleDialogComponent_Conditional_0_Conditional_34_Template, 6, 0, "div", 18);
|
|
141
141
|
i0.ɵɵelementEnd()()();
|
|
142
142
|
i0.ɵɵelementStart(35, "div", 12)(36, "div", 13)(37, "div", 14)(38, "h3", 15);
|
|
143
143
|
i0.ɵɵelement(39, "i", 25);
|
|
@@ -147,14 +147,14 @@ function RoleDialogComponent_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
147
147
|
i0.ɵɵtext(42, "System or custom role classification");
|
|
148
148
|
i0.ɵɵelementEnd()();
|
|
149
149
|
i0.ɵɵelementStart(43, "div", 17);
|
|
150
|
-
i0.ɵɵ
|
|
150
|
+
i0.ɵɵconditionalCreate(44, RoleDialogComponent_Conditional_0_Conditional_44_Template, 7, 0, "div", 26)(45, RoleDialogComponent_Conditional_0_Conditional_45_Template, 7, 0, "div", 27);
|
|
151
151
|
i0.ɵɵelementEnd()()();
|
|
152
|
-
i0.ɵɵ
|
|
152
|
+
i0.ɵɵconditionalCreate(46, RoleDialogComponent_Conditional_0_Conditional_46_Template, 19, 0, "div", 12);
|
|
153
153
|
i0.ɵɵelementStart(47, "div", 28)(48, "button", 29);
|
|
154
|
-
i0.ɵɵ
|
|
154
|
+
i0.ɵɵconditionalCreate(49, RoleDialogComponent_Conditional_0_Conditional_49_Template, 2, 0)(50, RoleDialogComponent_Conditional_0_Conditional_50_Template, 2, 1);
|
|
155
155
|
i0.ɵɵelementEnd();
|
|
156
156
|
i0.ɵɵelementStart(51, "button", 30);
|
|
157
|
-
i0.ɵɵlistener("click", function
|
|
157
|
+
i0.ɵɵlistener("click", function RoleDialogComponent_Conditional_0_Template_button_click_51_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
|
|
158
158
|
i0.ɵɵelement(52, "i", 9);
|
|
159
159
|
i0.ɵɵtext(53, " Cancel ");
|
|
160
160
|
i0.ɵɵelementEnd()()()()()();
|
|
@@ -307,16 +307,16 @@ export class RoleDialogComponent {
|
|
|
307
307
|
}
|
|
308
308
|
static ɵfac = function RoleDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RoleDialogComponent)(); };
|
|
309
309
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoleDialogComponent, selectors: [["mj-role-dialog"]], hostBindings: function RoleDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
310
|
-
i0.ɵɵlistener("keydown.escape", function RoleDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); },
|
|
311
|
-
} }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[
|
|
312
|
-
i0.ɵɵ
|
|
310
|
+
i0.ɵɵlistener("keydown.escape", function RoleDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, i0.ɵɵresolveDocument);
|
|
311
|
+
} }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-shield-halved"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "text", "formControlName", "name", "placeholder", "Sales Manager", 1, "field-input"], [1, "field-error"], ["for", "description", 1, "field-label"], ["id", "description", "formControlName", "description", "placeholder", "Describe the role's purpose and responsibilities...", "rows", "4", 1, "field-textarea"], [1, "field-hint"], [1, "fa-solid", "fa-cog"], [1, "alert", "alert-warning"], [1, "alert", "alert-info"], [1, "modal-footer"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-exclamation-circle"], ["for", "directoryId", 1, "field-label"], ["id", "directoryId", "type", "text", "formControlName", "directoryId", "placeholder", "External directory identifier", 1, "field-input"], [1, "fa-solid", "fa-user-tag"], [1, "fa-solid", "fa-key"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function RoleDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
312
|
+
i0.ɵɵconditionalCreate(0, RoleDialogComponent_Conditional_0_Template, 54, 12, "div", 0);
|
|
313
313
|
} if (rf & 2) {
|
|
314
|
-
i0.ɵɵ
|
|
315
|
-
} }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName], styles: ["/* ============================================\n Material Design 3 - Role Dialog Component\n ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n /* Primary Colors (MJ Blue) */\n --md-primary: #0076B6;\n --md-on-primary: #FFFFFF;\n --md-primary-container: #C2E7FF;\n --md-on-primary-container: #001E2F;\n\n /* Secondary Colors (Orange) */\n --md-secondary: #F5A623;\n --md-on-secondary: #FFFFFF;\n --md-secondary-container: #FFE5B4;\n --md-on-secondary-container: #7A4D0C;\n\n /* Tertiary Colors (Green) */\n --md-tertiary: #4CAF50;\n --md-on-tertiary: #FFFFFF;\n --md-tertiary-container: #C8E6C9;\n --md-on-tertiary-container: #1B5E20;\n\n /* Error Colors */\n --md-error: #D32F2F;\n --md-on-error: #FFFFFF;\n --md-error-container: #FFEBEE;\n --md-on-error-container: #5F1313;\n\n /* Surface Colors */\n --md-surface: #FAFAFA;\n --md-on-surface: #1C1B1F;\n --md-surface-variant: #E7E0EC;\n --md-on-surface-variant: #49454F;\n --md-surface-container-lowest: #FFFFFF;\n --md-surface-container-low: #F5F5F5;\n --md-surface-container: #EEEEEE;\n --md-surface-container-high: #E0E0E0;\n\n /* Outline Colors */\n --md-outline: #79747E;\n --md-outline-variant: #CAC4D0;\n\n /* MD3 Elevation System */\n --md-elevation-0: none;\n --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\n --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n /* MD3 Corner Radii */\n --md-corner-none: 0px;\n --md-corner-extra-small: 4px;\n --md-corner-small: 8px;\n --md-corner-medium: 12px;\n --md-corner-large: 16px;\n --md-corner-extra-large: 28px;\n --md-corner-full: 9999px;\n\n /* Typography Scale */\n --md-display-large: 57px;\n --md-display-medium: 45px;\n --md-display-small: 36px;\n --md-headline-large: 32px;\n --md-headline-medium: 28px;\n --md-headline-small: 24px;\n --md-title-large: 22px;\n --md-title-medium: 16px;\n --md-title-small: 14px;\n --md-body-large: 16px;\n --md-body-medium: 14px;\n --md-body-small: 12px;\n --md-label-large: 14px;\n --md-label-medium: 12px;\n --md-label-small: 11px;\n}\n\n/* ============================================\n Modal Backdrop & Container\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 backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1050;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.modal-dialog {\n background: var(--md-surface-container-lowest);\n border-radius: var(--md-corner-extra-large);\n box-shadow: var(--md-elevation-5);\n width: 100%;\n max-width: 850px;\n max-height: calc(100vh - 2rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ============================================\n Modal Header (MJ Blue)\n ============================================ */\n\n.modal-header {\n background: var(--md-primary);\n color: var(--md-on-primary);\n padding: 24px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n flex-shrink: 0;\n}\n\n.dialog-header {\n flex: 1;\n min-width: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--md-headline-small);\n font-weight: 600;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--md-on-primary);\n}\n\n.dialog-title i {\n font-size: 1.25rem;\n opacity: 0.95;\n}\n\n.dialog-subtitle {\n margin: 0.5rem 0 0 0;\n font-size: var(--md-body-medium);\n opacity: 0.9;\n font-weight: 400;\n line-height: 1.4;\n}\n\n.modal-close {\n background: transparent;\n border: none;\n color: var(--md-on-primary);\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--md-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n background: rgba(255, 255, 255, 0.2);\n transform: scale(0.95);\n}\n\n.modal-close i {\n font-size: 1.25rem;\n}\n\n/* ============================================\n Modal Body\n ============================================ */\n\n.modal-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n background: var(--md-outline-variant);\n border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n background: var(--md-outline);\n}\n\n/* ============================================\n Form Structure\n ============================================ */\n\n.content-section {\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n border-bottom: none;\n}\n\n.form-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.section-header {\n margin-bottom: 1rem;\n}\n\n.section-title {\n margin: 0 0 0.5rem 0;\n font-size: var(--md-title-large);\n font-weight: 600;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title i {\n font-size: 1.25rem;\n color: var(--md-primary);\n}\n\n.section-description {\n margin: 0;\n font-size: var(--md-body-medium);\n color: var(--md-on-surface-variant);\n line-height: 1.5;\n}\n\n/* ============================================\n Form Grid Layout\n ============================================ */\n\n.form-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n/* ============================================\n Form Fields (MD3 Input Pattern)\n ============================================ */\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.field-label {\n font-size: var(--md-label-large);\n font-weight: 500;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--md-error);\n margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n border: 2px solid var(--md-outline-variant);\n border-radius: var(--md-corner-small);\n padding: 0.875rem 1rem;\n font-size: var(--md-body-large);\n font-family: inherit;\n color: var(--md-on-surface);\n background: var(--md-surface-container-lowest);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-textarea:hover:not(:disabled) {\n border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n outline: none;\n border-color: var(--md-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.5;\n}\n\n.field-hint {\n font-size: var(--md-body-small);\n color: var(--md-on-surface-variant);\n line-height: 1.4;\n margin-top: 0.25rem;\n}\n\n.field-error {\n font-size: var(--md-body-small);\n color: var(--md-error);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.25rem;\n}\n\n.field-error i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Alert Messages (MD3 Containers)\n ============================================ */\n\n.alert {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1rem 1.25rem;\n border-radius: var(--md-corner-small);\n border: 1px solid;\n font-size: var(--md-body-medium);\n line-height: 1.5;\n}\n\n.alert i {\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.alert > div {\n flex: 1;\n min-width: 0;\n}\n\n.alert strong {\n display: block;\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\n.alert p {\n margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n background: var(--md-error-container);\n border-color: var(--md-error);\n color: var(--md-on-error-container);\n}\n\n.alert-error i {\n color: var(--md-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n background: var(--md-secondary-container);\n border-color: var(--md-secondary);\n color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n background: var(--md-primary-container);\n border-color: var(--md-primary);\n color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n color: var(--md-primary);\n}\n\n/* ============================================\n Modal Footer (Buttons)\n ============================================ */\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 1rem;\n padding: 1.5rem 2rem;\n background: var(--md-surface-container-lowest);\n border-top: 1px solid var(--md-outline-variant);\n flex-shrink: 0;\n}\n\n/* ============================================\n Buttons (MD3 Patterns)\n ============================================ */\n\n.btn {\n padding: 0.75rem 1.5rem;\n font-size: var(--md-label-large);\n font-weight: 500;\n border-radius: var(--md-corner-full);\n border: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n font-family: inherit;\n text-transform: none;\n letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.btn i {\n font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n background: var(--md-primary);\n color: var(--md-on-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n background: var(--md-surface-container-lowest);\n color: var(--md-primary);\n border: 1px solid var(--md-outline);\n box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n color: var(--md-on-primary);\n border-color: var(--md-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n border-color: var(--md-outline-variant);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* ============================================\n Responsive Design\n ============================================ */\n\n@media (max-width: 768px) {\n .modal-backdrop {\n padding: 0;\n }\n\n .modal-dialog {\n max-width: 100%;\n max-height: 100vh;\n border-radius: 0;\n animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes slideInMobile {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-header {\n padding: 20px 16px;\n border-radius: 0;\n }\n\n .dialog-title {\n font-size: 20px;\n }\n\n .dialog-subtitle {\n font-size: 13px;\n }\n\n .content-section {\n padding: 1.25rem 1rem;\n }\n\n .section-title {\n font-size: 18px;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .modal-header {\n padding: 16px 12px;\n }\n\n .dialog-title {\n font-size: 18px;\n gap: 0.5rem;\n }\n\n .dialog-title i {\n font-size: 1rem;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n margin-top: 0.25rem;\n }\n\n .content-section {\n padding: 1rem 0.75rem;\n }\n\n .section-title {\n font-size: 16px;\n gap: 0.5rem;\n }\n\n .field-input,\n .field-textarea {\n padding: 0.75rem;\n font-size: 14px;\n }\n\n .modal-footer {\n padding: 0.75rem;\n }\n\n .btn {\n padding: 0.625rem 1.25rem;\n font-size: 13px;\n }\n}\n\n/* ============================================\n Accessibility\n ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n .modal-dialog {\n border: 2px solid var(--md-outline);\n }\n\n .btn {\n border: 2px solid currentColor;\n }\n\n .field-input,\n .field-textarea {\n border-width: 3px;\n }\n}\n\n/* ============================================\n Print Styles\n ============================================ */\n\n@media print {\n .modal-backdrop {\n display: none;\n }\n}\n"], encapsulation: 2 });
|
|
314
|
+
i0.ɵɵconditional(ctx.visible ? 0 : -1);
|
|
315
|
+
} }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName], styles: ["/* ============================================\n Material Design 3 - Role Dialog Component\n ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n /* Primary Colors (MJ Blue) */\n --md-primary: #0076B6;\n --md-on-primary: #FFFFFF;\n --md-primary-container: #C2E7FF;\n --md-on-primary-container: #001E2F;\n\n /* Secondary Colors (Orange) */\n --md-secondary: #F5A623;\n --md-on-secondary: #FFFFFF;\n --md-secondary-container: #FFE5B4;\n --md-on-secondary-container: #7A4D0C;\n\n /* Tertiary Colors (Green) */\n --md-tertiary: #4CAF50;\n --md-on-tertiary: #FFFFFF;\n --md-tertiary-container: #C8E6C9;\n --md-on-tertiary-container: #1B5E20;\n\n /* Error Colors */\n --md-error: #D32F2F;\n --md-on-error: #FFFFFF;\n --md-error-container: #FFEBEE;\n --md-on-error-container: #5F1313;\n\n /* Surface Colors */\n --md-surface: #FAFAFA;\n --md-on-surface: #1C1B1F;\n --md-surface-variant: #E7E0EC;\n --md-on-surface-variant: #49454F;\n --md-surface-container-lowest: #FFFFFF;\n --md-surface-container-low: #F5F5F5;\n --md-surface-container: #EEEEEE;\n --md-surface-container-high: #E0E0E0;\n\n /* Outline Colors */\n --md-outline: #79747E;\n --md-outline-variant: #CAC4D0;\n\n /* MD3 Elevation System */\n --md-elevation-0: none;\n --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\n --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n /* MD3 Corner Radii */\n --md-corner-none: 0px;\n --md-corner-extra-small: 4px;\n --md-corner-small: 8px;\n --md-corner-medium: 12px;\n --md-corner-large: 16px;\n --md-corner-extra-large: 28px;\n --md-corner-full: 9999px;\n\n /* Typography Scale */\n --md-display-large: 57px;\n --md-display-medium: 45px;\n --md-display-small: 36px;\n --md-headline-large: 32px;\n --md-headline-medium: 28px;\n --md-headline-small: 24px;\n --md-title-large: 22px;\n --md-title-medium: 16px;\n --md-title-small: 14px;\n --md-body-large: 16px;\n --md-body-medium: 14px;\n --md-body-small: 12px;\n --md-label-large: 14px;\n --md-label-medium: 12px;\n --md-label-small: 11px;\n}\n\n/* ============================================\n Modal Backdrop & Container\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 backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1050;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.modal-dialog {\n background: var(--md-surface-container-lowest);\n border-radius: var(--md-corner-extra-large);\n box-shadow: var(--md-elevation-5);\n width: 100%;\n max-width: 850px;\n max-height: calc(100vh - 2rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ============================================\n Modal Header (MJ Blue)\n ============================================ */\n\n.modal-header {\n background: var(--md-primary);\n color: var(--md-on-primary);\n padding: 24px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n flex-shrink: 0;\n}\n\n.dialog-header {\n flex: 1;\n min-width: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--md-headline-small);\n font-weight: 600;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--md-on-primary);\n}\n\n.dialog-title i {\n font-size: 1.25rem;\n opacity: 0.95;\n}\n\n.dialog-subtitle {\n margin: 0.5rem 0 0 0;\n font-size: var(--md-body-medium);\n opacity: 0.9;\n font-weight: 400;\n line-height: 1.4;\n}\n\n.modal-close {\n background: transparent;\n border: none;\n color: var(--md-on-primary);\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--md-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n background: rgba(255, 255, 255, 0.2);\n transform: scale(0.95);\n}\n\n.modal-close i {\n font-size: 1.25rem;\n}\n\n/* ============================================\n Modal Body\n ============================================ */\n\n.modal-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n background: var(--md-outline-variant);\n border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n background: var(--md-outline);\n}\n\n/* ============================================\n Form Structure\n ============================================ */\n\n.content-section {\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n border-bottom: none;\n}\n\n.form-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.section-header {\n margin-bottom: 1rem;\n}\n\n.section-title {\n margin: 0 0 0.5rem 0;\n font-size: var(--md-title-large);\n font-weight: 600;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title i {\n font-size: 1.25rem;\n color: var(--md-primary);\n}\n\n.section-description {\n margin: 0;\n font-size: var(--md-body-medium);\n color: var(--md-on-surface-variant);\n line-height: 1.5;\n}\n\n/* ============================================\n Form Grid Layout\n ============================================ */\n\n.form-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n/* ============================================\n Form Fields (MD3 Input Pattern)\n ============================================ */\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.field-label {\n font-size: var(--md-label-large);\n font-weight: 500;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--md-error);\n margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n border: 2px solid var(--md-outline-variant);\n border-radius: var(--md-corner-small);\n padding: 0.875rem 1rem;\n font-size: var(--md-body-large);\n font-family: inherit;\n color: var(--md-on-surface);\n background: var(--md-surface-container-lowest);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-textarea:hover:not(:disabled) {\n border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n outline: none;\n border-color: var(--md-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.5;\n}\n\n.field-hint {\n font-size: var(--md-body-small);\n color: var(--md-on-surface-variant);\n line-height: 1.4;\n margin-top: 0.25rem;\n}\n\n.field-error {\n font-size: var(--md-body-small);\n color: var(--md-error);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.25rem;\n}\n\n.field-error i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Alert Messages (MD3 Containers)\n ============================================ */\n\n.alert {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1rem 1.25rem;\n border-radius: var(--md-corner-small);\n border: 1px solid;\n font-size: var(--md-body-medium);\n line-height: 1.5;\n}\n\n.alert i {\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.alert > div {\n flex: 1;\n min-width: 0;\n}\n\n.alert strong {\n display: block;\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\n.alert p {\n margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n background: var(--md-error-container);\n border-color: var(--md-error);\n color: var(--md-on-error-container);\n}\n\n.alert-error i {\n color: var(--md-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n background: var(--md-secondary-container);\n border-color: var(--md-secondary);\n color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n background: var(--md-primary-container);\n border-color: var(--md-primary);\n color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n color: var(--md-primary);\n}\n\n/* ============================================\n Modal Footer (Buttons)\n ============================================ */\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 1rem;\n padding: 1.5rem 2rem;\n background: var(--md-surface-container-lowest);\n border-top: 1px solid var(--md-outline-variant);\n flex-shrink: 0;\n}\n\n/* ============================================\n Buttons (MD3 Patterns)\n ============================================ */\n\n.btn {\n padding: 0.75rem 1.5rem;\n font-size: var(--md-label-large);\n font-weight: 500;\n border-radius: var(--md-corner-full);\n border: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n font-family: inherit;\n text-transform: none;\n letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.btn i {\n font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n background: var(--md-primary);\n color: var(--md-on-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n background: var(--md-surface-container-lowest);\n color: var(--md-primary);\n border: 1px solid var(--md-outline);\n box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n color: var(--md-on-primary);\n border-color: var(--md-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n border-color: var(--md-outline-variant);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* ============================================\n Responsive Design\n ============================================ */\n\n@media (max-width: 768px) {\n .modal-backdrop {\n padding: 0;\n }\n\n .modal-dialog {\n max-width: 100%;\n max-height: 100vh;\n border-radius: 0;\n animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes slideInMobile {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-header {\n padding: 20px 16px;\n border-radius: 0;\n }\n\n .dialog-title {\n font-size: 20px;\n }\n\n .dialog-subtitle {\n font-size: 13px;\n }\n\n .content-section {\n padding: 1.25rem 1rem;\n }\n\n .section-title {\n font-size: 18px;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .modal-header {\n padding: 16px 12px;\n }\n\n .dialog-title {\n font-size: 18px;\n gap: 0.5rem;\n }\n\n .dialog-title i {\n font-size: 1rem;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n margin-top: 0.25rem;\n }\n\n .content-section {\n padding: 1rem 0.75rem;\n }\n\n .section-title {\n font-size: 16px;\n gap: 0.5rem;\n }\n\n .field-input,\n .field-textarea {\n padding: 0.75rem;\n font-size: 14px;\n }\n\n .modal-footer {\n padding: 0.75rem;\n }\n\n .btn {\n padding: 0.625rem 1.25rem;\n font-size: 13px;\n }\n}\n\n/* ============================================\n Accessibility\n ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n .modal-dialog {\n border: 2px solid var(--md-outline);\n }\n\n .btn {\n border: 2px solid currentColor;\n }\n\n .field-input,\n .field-textarea {\n border-width: 3px;\n }\n}\n\n/* ============================================\n Print Styles\n ============================================ */\n\n@media print {\n .modal-backdrop {\n display: none;\n }\n}\n"], encapsulation: 2 });
|
|
316
316
|
}
|
|
317
317
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RoleDialogComponent, [{
|
|
318
318
|
type: Component,
|
|
319
|
-
args: [{ selector: 'mj-role-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n<div class=\"modal-backdrop\" *ngIf=\"visible\" (click)=\"onCancel()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n\n <!-- Modal Header with MJ Blue -->\n <div class=\"modal-header\">\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n {{ isEditMode ? 'Edit Role' : 'Create New Role' }}\n </h2>\n <p class=\"dialog-subtitle\">\n {{ isEditMode ? 'Update role information and permissions' : 'Add a new role to the system' }}\n </p>\n </div>\n <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body\">\n <form [formGroup]=\"roleForm\" (ngSubmit)=\"onSubmit()\">\n\n @if (error) {\n <div class=\"content-section\">\n <div class=\"alert alert-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <div>{{ error }}</div>\n </div>\n </div>\n }\n\n <!-- Basic Information Section -->\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n Role Information\n </h3>\n <p class=\"section-description\">Define the role's basic properties and purpose</p>\n </div>\n\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label class=\"field-label required\" for=\"name\">Role Name</label>\n <input\n id=\"name\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"name\"\n placeholder=\"Sales Manager\"\n [class.error]=\"roleForm.get('name')?.invalid && roleForm.get('name')?.touched\"\n />\n @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n @if (roleForm.get('name')?.errors?.['required']) {\n Role name is required\n }\n @if (roleForm.get('name')?.errors?.['maxlength']) {\n Role name cannot exceed 50 characters\n }\n </div>\n }\n </div>\n\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"description\">Description</label>\n <textarea\n id=\"description\"\n class=\"field-textarea\"\n formControlName=\"description\"\n placeholder=\"Describe the role's purpose and responsibilities...\"\n rows=\"4\"\n ></textarea>\n <div class=\"field-hint\">\n Provide a clear description of what this role is for and what permissions it should have.\n </div>\n </div>\n\n @if (isEditMode) {\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"directoryId\">Directory ID</label>\n <input\n id=\"directoryId\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"directoryId\"\n placeholder=\"External directory identifier\"\n />\n <div class=\"field-hint\">\n External directory identifier for syncing with Active Directory or other systems.\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Role Type Section -->\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-cog\"></i>\n Role Type\n </h3>\n <p class=\"section-description\">System or custom role classification</p>\n </div>\n\n <div class=\"form-grid\">\n @if (isSystemRole) {\n <div class=\"alert alert-warning\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n <div>\n <strong>System Role</strong>\n <p>This is a system-defined role. Some properties may be limited for editing to maintain system integrity.</p>\n </div>\n </div>\n } @else {\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-user-tag\"></i>\n <div>\n <strong>Custom Role</strong>\n <p>This is a custom role that can be fully configured and modified.</p>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Permissions Preview Section -->\n @if (isEditMode) {\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-key\"></i>\n Permissions\n </h3>\n <p class=\"section-description\">Manage role permissions and access rights</p>\n </div>\n\n <div class=\"form-grid\">\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <div>\n <strong>Permission Management</strong>\n <p>Role permissions can be managed in the <strong>Permissions</strong> tab of the settings dashboard. Use that interface to configure specific access rights for this role.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button\n type=\"submit\"\n class=\"btn btn-primary\"\n [disabled]=\"roleForm.invalid || isLoading\"\n >\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Saving...\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n {{ isEditMode ? 'Update Role' : 'Create Role' }}\n }\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n </div>\n </form>\n </div>\n </div>\n</div>\n", styles: ["/* ============================================\n Material Design 3 - Role Dialog Component\n ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n /* Primary Colors (MJ Blue) */\n --md-primary: #0076B6;\n --md-on-primary: #FFFFFF;\n --md-primary-container: #C2E7FF;\n --md-on-primary-container: #001E2F;\n\n /* Secondary Colors (Orange) */\n --md-secondary: #F5A623;\n --md-on-secondary: #FFFFFF;\n --md-secondary-container: #FFE5B4;\n --md-on-secondary-container: #7A4D0C;\n\n /* Tertiary Colors (Green) */\n --md-tertiary: #4CAF50;\n --md-on-tertiary: #FFFFFF;\n --md-tertiary-container: #C8E6C9;\n --md-on-tertiary-container: #1B5E20;\n\n /* Error Colors */\n --md-error: #D32F2F;\n --md-on-error: #FFFFFF;\n --md-error-container: #FFEBEE;\n --md-on-error-container: #5F1313;\n\n /* Surface Colors */\n --md-surface: #FAFAFA;\n --md-on-surface: #1C1B1F;\n --md-surface-variant: #E7E0EC;\n --md-on-surface-variant: #49454F;\n --md-surface-container-lowest: #FFFFFF;\n --md-surface-container-low: #F5F5F5;\n --md-surface-container: #EEEEEE;\n --md-surface-container-high: #E0E0E0;\n\n /* Outline Colors */\n --md-outline: #79747E;\n --md-outline-variant: #CAC4D0;\n\n /* MD3 Elevation System */\n --md-elevation-0: none;\n --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\n --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n /* MD3 Corner Radii */\n --md-corner-none: 0px;\n --md-corner-extra-small: 4px;\n --md-corner-small: 8px;\n --md-corner-medium: 12px;\n --md-corner-large: 16px;\n --md-corner-extra-large: 28px;\n --md-corner-full: 9999px;\n\n /* Typography Scale */\n --md-display-large: 57px;\n --md-display-medium: 45px;\n --md-display-small: 36px;\n --md-headline-large: 32px;\n --md-headline-medium: 28px;\n --md-headline-small: 24px;\n --md-title-large: 22px;\n --md-title-medium: 16px;\n --md-title-small: 14px;\n --md-body-large: 16px;\n --md-body-medium: 14px;\n --md-body-small: 12px;\n --md-label-large: 14px;\n --md-label-medium: 12px;\n --md-label-small: 11px;\n}\n\n/* ============================================\n Modal Backdrop & Container\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 backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1050;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.modal-dialog {\n background: var(--md-surface-container-lowest);\n border-radius: var(--md-corner-extra-large);\n box-shadow: var(--md-elevation-5);\n width: 100%;\n max-width: 850px;\n max-height: calc(100vh - 2rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ============================================\n Modal Header (MJ Blue)\n ============================================ */\n\n.modal-header {\n background: var(--md-primary);\n color: var(--md-on-primary);\n padding: 24px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n flex-shrink: 0;\n}\n\n.dialog-header {\n flex: 1;\n min-width: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--md-headline-small);\n font-weight: 600;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--md-on-primary);\n}\n\n.dialog-title i {\n font-size: 1.25rem;\n opacity: 0.95;\n}\n\n.dialog-subtitle {\n margin: 0.5rem 0 0 0;\n font-size: var(--md-body-medium);\n opacity: 0.9;\n font-weight: 400;\n line-height: 1.4;\n}\n\n.modal-close {\n background: transparent;\n border: none;\n color: var(--md-on-primary);\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--md-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n background: rgba(255, 255, 255, 0.2);\n transform: scale(0.95);\n}\n\n.modal-close i {\n font-size: 1.25rem;\n}\n\n/* ============================================\n Modal Body\n ============================================ */\n\n.modal-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n background: var(--md-outline-variant);\n border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n background: var(--md-outline);\n}\n\n/* ============================================\n Form Structure\n ============================================ */\n\n.content-section {\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n border-bottom: none;\n}\n\n.form-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.section-header {\n margin-bottom: 1rem;\n}\n\n.section-title {\n margin: 0 0 0.5rem 0;\n font-size: var(--md-title-large);\n font-weight: 600;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title i {\n font-size: 1.25rem;\n color: var(--md-primary);\n}\n\n.section-description {\n margin: 0;\n font-size: var(--md-body-medium);\n color: var(--md-on-surface-variant);\n line-height: 1.5;\n}\n\n/* ============================================\n Form Grid Layout\n ============================================ */\n\n.form-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n/* ============================================\n Form Fields (MD3 Input Pattern)\n ============================================ */\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.field-label {\n font-size: var(--md-label-large);\n font-weight: 500;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--md-error);\n margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n border: 2px solid var(--md-outline-variant);\n border-radius: var(--md-corner-small);\n padding: 0.875rem 1rem;\n font-size: var(--md-body-large);\n font-family: inherit;\n color: var(--md-on-surface);\n background: var(--md-surface-container-lowest);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-textarea:hover:not(:disabled) {\n border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n outline: none;\n border-color: var(--md-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.5;\n}\n\n.field-hint {\n font-size: var(--md-body-small);\n color: var(--md-on-surface-variant);\n line-height: 1.4;\n margin-top: 0.25rem;\n}\n\n.field-error {\n font-size: var(--md-body-small);\n color: var(--md-error);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.25rem;\n}\n\n.field-error i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Alert Messages (MD3 Containers)\n ============================================ */\n\n.alert {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1rem 1.25rem;\n border-radius: var(--md-corner-small);\n border: 1px solid;\n font-size: var(--md-body-medium);\n line-height: 1.5;\n}\n\n.alert i {\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.alert > div {\n flex: 1;\n min-width: 0;\n}\n\n.alert strong {\n display: block;\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\n.alert p {\n margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n background: var(--md-error-container);\n border-color: var(--md-error);\n color: var(--md-on-error-container);\n}\n\n.alert-error i {\n color: var(--md-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n background: var(--md-secondary-container);\n border-color: var(--md-secondary);\n color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n background: var(--md-primary-container);\n border-color: var(--md-primary);\n color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n color: var(--md-primary);\n}\n\n/* ============================================\n Modal Footer (Buttons)\n ============================================ */\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 1rem;\n padding: 1.5rem 2rem;\n background: var(--md-surface-container-lowest);\n border-top: 1px solid var(--md-outline-variant);\n flex-shrink: 0;\n}\n\n/* ============================================\n Buttons (MD3 Patterns)\n ============================================ */\n\n.btn {\n padding: 0.75rem 1.5rem;\n font-size: var(--md-label-large);\n font-weight: 500;\n border-radius: var(--md-corner-full);\n border: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n font-family: inherit;\n text-transform: none;\n letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.btn i {\n font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n background: var(--md-primary);\n color: var(--md-on-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n background: var(--md-surface-container-lowest);\n color: var(--md-primary);\n border: 1px solid var(--md-outline);\n box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n color: var(--md-on-primary);\n border-color: var(--md-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n border-color: var(--md-outline-variant);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* ============================================\n Responsive Design\n ============================================ */\n\n@media (max-width: 768px) {\n .modal-backdrop {\n padding: 0;\n }\n\n .modal-dialog {\n max-width: 100%;\n max-height: 100vh;\n border-radius: 0;\n animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes slideInMobile {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-header {\n padding: 20px 16px;\n border-radius: 0;\n }\n\n .dialog-title {\n font-size: 20px;\n }\n\n .dialog-subtitle {\n font-size: 13px;\n }\n\n .content-section {\n padding: 1.25rem 1rem;\n }\n\n .section-title {\n font-size: 18px;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .modal-header {\n padding: 16px 12px;\n }\n\n .dialog-title {\n font-size: 18px;\n gap: 0.5rem;\n }\n\n .dialog-title i {\n font-size: 1rem;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n margin-top: 0.25rem;\n }\n\n .content-section {\n padding: 1rem 0.75rem;\n }\n\n .section-title {\n font-size: 16px;\n gap: 0.5rem;\n }\n\n .field-input,\n .field-textarea {\n padding: 0.75rem;\n font-size: 14px;\n }\n\n .modal-footer {\n padding: 0.75rem;\n }\n\n .btn {\n padding: 0.625rem 1.25rem;\n font-size: 13px;\n }\n}\n\n/* ============================================\n Accessibility\n ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n .modal-dialog {\n border: 2px solid var(--md-outline);\n }\n\n .btn {\n border: 2px solid currentColor;\n }\n\n .field-input,\n .field-textarea {\n border-width: 3px;\n }\n}\n\n/* ============================================\n Print Styles\n ============================================ */\n\n@media print {\n .modal-backdrop {\n display: none;\n }\n}\n"] }]
|
|
319
|
+
args: [{ standalone: false, selector: 'mj-role-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <!-- Modal Header with MJ Blue -->\n <div class=\"modal-header\">\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n {{ isEditMode ? 'Edit Role' : 'Create New Role' }}\n </h2>\n <p class=\"dialog-subtitle\">\n {{ isEditMode ? 'Update role information and permissions' : 'Add a new role to the system' }}\n </p>\n </div>\n <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Modal Body -->\n <div class=\"modal-body\">\n <form [formGroup]=\"roleForm\" (ngSubmit)=\"onSubmit()\">\n @if (error) {\n <div class=\"content-section\">\n <div class=\"alert alert-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <div>{{ error }}</div>\n </div>\n </div>\n }\n <!-- Basic Information Section -->\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n Role Information\n </h3>\n <p class=\"section-description\">Define the role's basic properties and purpose</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label class=\"field-label required\" for=\"name\">Role Name</label>\n <input\n id=\"name\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"name\"\n placeholder=\"Sales Manager\"\n [class.error]=\"roleForm.get('name')?.invalid && roleForm.get('name')?.touched\"\n />\n @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n @if (roleForm.get('name')?.errors?.['required']) {\n Role name is required\n }\n @if (roleForm.get('name')?.errors?.['maxlength']) {\n Role name cannot exceed 50 characters\n }\n </div>\n }\n </div>\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"description\">Description</label>\n <textarea\n id=\"description\"\n class=\"field-textarea\"\n formControlName=\"description\"\n placeholder=\"Describe the role's purpose and responsibilities...\"\n rows=\"4\"\n ></textarea>\n <div class=\"field-hint\">\n Provide a clear description of what this role is for and what permissions it should have.\n </div>\n </div>\n @if (isEditMode) {\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"directoryId\">Directory ID</label>\n <input\n id=\"directoryId\"\n type=\"text\"\n class=\"field-input\"\n formControlName=\"directoryId\"\n placeholder=\"External directory identifier\"\n />\n <div class=\"field-hint\">\n External directory identifier for syncing with Active Directory or other systems.\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Role Type Section -->\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-cog\"></i>\n Role Type\n </h3>\n <p class=\"section-description\">System or custom role classification</p>\n </div>\n <div class=\"form-grid\">\n @if (isSystemRole) {\n <div class=\"alert alert-warning\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n <div>\n <strong>System Role</strong>\n <p>This is a system-defined role. Some properties may be limited for editing to maintain system integrity.</p>\n </div>\n </div>\n } @else {\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-user-tag\"></i>\n <div>\n <strong>Custom Role</strong>\n <p>This is a custom role that can be fully configured and modified.</p>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Permissions Preview Section -->\n @if (isEditMode) {\n <div class=\"content-section\">\n <div class=\"form-section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-key\"></i>\n Permissions\n </h3>\n <p class=\"section-description\">Manage role permissions and access rights</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"alert alert-info\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <div>\n <strong>Permission Management</strong>\n <p>Role permissions can be managed in the <strong>Permissions</strong> tab of the settings dashboard. Use that interface to configure specific access rights for this role.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button\n type=\"submit\"\n class=\"btn btn-primary\"\n [disabled]=\"roleForm.invalid || isLoading\"\n >\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Saving...\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n {{ isEditMode ? 'Update Role' : 'Create Role' }}\n }\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n}\n", styles: ["/* ============================================\n Material Design 3 - Role Dialog Component\n ============================================ */\n\n/* MD3 Design Tokens */\n:host {\n /* Primary Colors (MJ Blue) */\n --md-primary: #0076B6;\n --md-on-primary: #FFFFFF;\n --md-primary-container: #C2E7FF;\n --md-on-primary-container: #001E2F;\n\n /* Secondary Colors (Orange) */\n --md-secondary: #F5A623;\n --md-on-secondary: #FFFFFF;\n --md-secondary-container: #FFE5B4;\n --md-on-secondary-container: #7A4D0C;\n\n /* Tertiary Colors (Green) */\n --md-tertiary: #4CAF50;\n --md-on-tertiary: #FFFFFF;\n --md-tertiary-container: #C8E6C9;\n --md-on-tertiary-container: #1B5E20;\n\n /* Error Colors */\n --md-error: #D32F2F;\n --md-on-error: #FFFFFF;\n --md-error-container: #FFEBEE;\n --md-on-error-container: #5F1313;\n\n /* Surface Colors */\n --md-surface: #FAFAFA;\n --md-on-surface: #1C1B1F;\n --md-surface-variant: #E7E0EC;\n --md-on-surface-variant: #49454F;\n --md-surface-container-lowest: #FFFFFF;\n --md-surface-container-low: #F5F5F5;\n --md-surface-container: #EEEEEE;\n --md-surface-container-high: #E0E0E0;\n\n /* Outline Colors */\n --md-outline: #79747E;\n --md-outline-variant: #CAC4D0;\n\n /* MD3 Elevation System */\n --md-elevation-0: none;\n --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\n --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1);\n --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.12);\n --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n /* MD3 Corner Radii */\n --md-corner-none: 0px;\n --md-corner-extra-small: 4px;\n --md-corner-small: 8px;\n --md-corner-medium: 12px;\n --md-corner-large: 16px;\n --md-corner-extra-large: 28px;\n --md-corner-full: 9999px;\n\n /* Typography Scale */\n --md-display-large: 57px;\n --md-display-medium: 45px;\n --md-display-small: 36px;\n --md-headline-large: 32px;\n --md-headline-medium: 28px;\n --md-headline-small: 24px;\n --md-title-large: 22px;\n --md-title-medium: 16px;\n --md-title-small: 14px;\n --md-body-large: 16px;\n --md-body-medium: 14px;\n --md-body-small: 12px;\n --md-label-large: 14px;\n --md-label-medium: 12px;\n --md-label-small: 11px;\n}\n\n/* ============================================\n Modal Backdrop & Container\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 backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1050;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.modal-dialog {\n background: var(--md-surface-container-lowest);\n border-radius: var(--md-corner-extra-large);\n box-shadow: var(--md-elevation-5);\n width: 100%;\n max-width: 850px;\n max-height: calc(100vh - 2rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ============================================\n Modal Header (MJ Blue)\n ============================================ */\n\n.modal-header {\n background: var(--md-primary);\n color: var(--md-on-primary);\n padding: 24px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n flex-shrink: 0;\n}\n\n.dialog-header {\n flex: 1;\n min-width: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--md-headline-small);\n font-weight: 600;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--md-on-primary);\n}\n\n.dialog-title i {\n font-size: 1.25rem;\n opacity: 0.95;\n}\n\n.dialog-subtitle {\n margin: 0.5rem 0 0 0;\n font-size: var(--md-body-medium);\n opacity: 0.9;\n font-weight: 400;\n line-height: 1.4;\n}\n\n.modal-close {\n background: transparent;\n border: none;\n color: var(--md-on-primary);\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--md-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.modal-close:active {\n background: rgba(255, 255, 255, 0.2);\n transform: scale(0.95);\n}\n\n.modal-close i {\n font-size: 1.25rem;\n}\n\n/* ============================================\n Modal Body\n ============================================ */\n\n.modal-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 0;\n background: var(--md-surface-container-lowest);\n}\n\n.modal-body::-webkit-scrollbar {\n width: 8px;\n}\n\n.modal-body::-webkit-scrollbar-track {\n background: var(--md-surface-container-low);\n}\n\n.modal-body::-webkit-scrollbar-thumb {\n background: var(--md-outline-variant);\n border-radius: var(--md-corner-full);\n}\n\n.modal-body::-webkit-scrollbar-thumb:hover {\n background: var(--md-outline);\n}\n\n/* ============================================\n Form Structure\n ============================================ */\n\n.content-section {\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.content-section:last-child {\n border-bottom: none;\n}\n\n.form-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.section-header {\n margin-bottom: 1rem;\n}\n\n.section-title {\n margin: 0 0 0.5rem 0;\n font-size: var(--md-title-large);\n font-weight: 600;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.section-title i {\n font-size: 1.25rem;\n color: var(--md-primary);\n}\n\n.section-description {\n margin: 0;\n font-size: var(--md-body-medium);\n color: var(--md-on-surface-variant);\n line-height: 1.5;\n}\n\n/* ============================================\n Form Grid Layout\n ============================================ */\n\n.form-grid {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n/* ============================================\n Form Fields (MD3 Input Pattern)\n ============================================ */\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.field-label {\n font-size: var(--md-label-large);\n font-weight: 500;\n color: var(--md-on-surface);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--md-error);\n margin-left: 0.25rem;\n}\n\n.field-input,\n.field-textarea {\n border: 2px solid var(--md-outline-variant);\n border-radius: var(--md-corner-small);\n padding: 0.875rem 1rem;\n font-size: var(--md-body-large);\n font-family: inherit;\n color: var(--md-on-surface);\n background: var(--md-surface-container-lowest);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n box-sizing: border-box;\n}\n\n.field-input:hover:not(:disabled),\n.field-textarea:hover:not(:disabled) {\n border-color: var(--md-outline);\n}\n\n.field-input:focus,\n.field-textarea:focus {\n outline: none;\n border-color: var(--md-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n.field-input:disabled,\n.field-textarea:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.field-input.error,\n.field-textarea.error {\n border-color: var(--md-error);\n}\n\n.field-input.error:focus,\n.field-textarea.error:focus {\n box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n}\n\n.field-textarea {\n resize: vertical;\n min-height: 100px;\n line-height: 1.5;\n}\n\n.field-hint {\n font-size: var(--md-body-small);\n color: var(--md-on-surface-variant);\n line-height: 1.4;\n margin-top: 0.25rem;\n}\n\n.field-error {\n font-size: var(--md-body-small);\n color: var(--md-error);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.25rem;\n}\n\n.field-error i {\n font-size: 0.875rem;\n}\n\n/* ============================================\n Alert Messages (MD3 Containers)\n ============================================ */\n\n.alert {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1rem 1.25rem;\n border-radius: var(--md-corner-small);\n border: 1px solid;\n font-size: var(--md-body-medium);\n line-height: 1.5;\n}\n\n.alert i {\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.alert > div {\n flex: 1;\n min-width: 0;\n}\n\n.alert strong {\n display: block;\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\n.alert p {\n margin: 0;\n}\n\n/* Error Alert (Red) */\n.alert-error {\n background: var(--md-error-container);\n border-color: var(--md-error);\n color: var(--md-on-error-container);\n}\n\n.alert-error i {\n color: var(--md-error);\n}\n\n/* Warning Alert (Orange) */\n.alert-warning {\n background: var(--md-secondary-container);\n border-color: var(--md-secondary);\n color: var(--md-on-secondary-container);\n}\n\n.alert-warning i {\n color: var(--md-secondary);\n}\n\n/* Info Alert (Blue) */\n.alert-info {\n background: var(--md-primary-container);\n border-color: var(--md-primary);\n color: var(--md-on-primary-container);\n}\n\n.alert-info i {\n color: var(--md-primary);\n}\n\n/* ============================================\n Modal Footer (Buttons)\n ============================================ */\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 1rem;\n padding: 1.5rem 2rem;\n background: var(--md-surface-container-lowest);\n border-top: 1px solid var(--md-outline-variant);\n flex-shrink: 0;\n}\n\n/* ============================================\n Buttons (MD3 Patterns)\n ============================================ */\n\n.btn {\n padding: 0.75rem 1.5rem;\n font-size: var(--md-label-large);\n font-weight: 500;\n border-radius: var(--md-corner-full);\n border: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n font-family: inherit;\n text-transform: none;\n letter-spacing: 0.01em;\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n.btn:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.btn i {\n font-size: 1rem;\n}\n\n.btn i.fa-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Primary Button (MJ Blue - Dark Button) */\n.btn-primary {\n background: var(--md-primary);\n color: var(--md-on-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-primary:hover:not(:disabled) {\n background: #3395C8; /* Lightens on hover (MD3 rule: dark buttons lighten) */\n box-shadow: var(--md-elevation-2);\n}\n\n.btn-primary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Secondary Button (Light Button) */\n.btn-secondary {\n background: var(--md-surface-container-lowest);\n color: var(--md-primary);\n border: 1px solid var(--md-outline);\n box-shadow: none;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--md-primary); /* Fills with primary on hover (MD3 rule: light buttons darken/fill) */\n color: var(--md-on-primary);\n border-color: var(--md-primary);\n box-shadow: var(--md-elevation-1);\n}\n\n.btn-secondary:disabled {\n background: var(--md-surface-container);\n color: var(--md-on-surface-variant);\n border-color: var(--md-outline-variant);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* ============================================\n Responsive Design\n ============================================ */\n\n@media (max-width: 768px) {\n .modal-backdrop {\n padding: 0;\n }\n\n .modal-dialog {\n max-width: 100%;\n max-height: 100vh;\n border-radius: 0;\n animation: slideInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes slideInMobile {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-header {\n padding: 20px 16px;\n border-radius: 0;\n }\n\n .dialog-title {\n font-size: 20px;\n }\n\n .dialog-subtitle {\n font-size: 13px;\n }\n\n .content-section {\n padding: 1.25rem 1rem;\n }\n\n .section-title {\n font-size: 18px;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .modal-header {\n padding: 16px 12px;\n }\n\n .dialog-title {\n font-size: 18px;\n gap: 0.5rem;\n }\n\n .dialog-title i {\n font-size: 1rem;\n }\n\n .dialog-subtitle {\n font-size: 12px;\n margin-top: 0.25rem;\n }\n\n .content-section {\n padding: 1rem 0.75rem;\n }\n\n .section-title {\n font-size: 16px;\n gap: 0.5rem;\n }\n\n .field-input,\n .field-textarea {\n padding: 0.75rem;\n font-size: 14px;\n }\n\n .modal-footer {\n padding: 0.75rem;\n }\n\n .btn {\n padding: 0.625rem 1.25rem;\n font-size: 13px;\n }\n}\n\n/* ============================================\n Accessibility\n ============================================ */\n\n/* Focus Visible Styles */\n*:focus-visible {\n outline: 2px solid var(--md-primary);\n outline-offset: 2px;\n}\n\n/* Reduced Motion Support */\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/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n .modal-dialog {\n border: 2px solid var(--md-outline);\n }\n\n .btn {\n border: 2px solid currentColor;\n }\n\n .field-input,\n .field-textarea {\n border-width: 3px;\n }\n}\n\n/* ============================================\n Print Styles\n ============================================ */\n\n@media print {\n .modal-backdrop {\n display: none;\n }\n}\n"] }]
|
|
320
320
|
}], () => [], { data: [{
|
|
321
321
|
type: Input
|
|
322
322
|
}], visible: [{
|
|
@@ -327,5 +327,5 @@ export class RoleDialogComponent {
|
|
|
327
327
|
type: HostListener,
|
|
328
328
|
args: ['document:keydown.escape', ['$event']]
|
|
329
329
|
}] }); })();
|
|
330
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleDialogComponent, { className: "RoleDialogComponent", filePath: "src/lib/role-management/role-dialog/role-dialog.component.ts", lineNumber:
|
|
330
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleDialogComponent, { className: "RoleDialogComponent", filePath: "src/lib/role-management/role-dialog/role-dialog.component.ts", lineNumber: 24 }); })();
|
|
331
331
|
//# sourceMappingURL=role-dialog.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts","../../../../src/lib/role-management/role-dialog/role-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAA+C,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE7J,OAAO,EAAoC,WAAW,EAAa,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC
|
|
1
|
+
{"version":3,"file":"role-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/role-management/role-dialog/role-dialog.component.ts","../../../../src/lib/role-management/role-dialog/role-dialog.component.html"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role-management.component.d.ts","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;AAGhD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;;AAEvF,UAAU,SAAS;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,
|
|
1
|
+
{"version":3,"file":"role-management.component.d.ts","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;AAGhD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;;AAEvF,UAAU,SAAS;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAOa,uBAAwB,SAAQ,aAAc,YAAW,SAAS;IAEtE,KAAK,EAAE,UAAU,EAAE,CAAM;IACzB,aAAa,EAAE,UAAU,EAAE,CAAM;IACjC,YAAY,EAAE,UAAU,GAAG,IAAI,CAAQ;IACvC,SAAS,UAAS;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5B,cAAc,UAAS;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAQ;IAG7C,KAAK,EAAE,SAAS,CAKrB;IAGK,QAAQ,iCAGZ;IAGI,gBAAgB,UAAS;IACzB,cAAc,UAAS;IACvB,iBAAiB,UAAS;IAC1B,iBAAiB,UAAS;IAC1B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGrC,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAa;IAE1D,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,QAAQ,CAAkB;;IAM5B,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAIjE,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,QAAQ,IAAI,IAAI;IAIjB,WAAW,IAAI,IAAI;IAMf,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;YAmB/B,SAAS;IAWvB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,cAAc;IAWf,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO;IAOvC,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKlC,kBAAkB,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI;IAI3D,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;IAOnD,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAIzC,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIvC,aAAa,IAAI,IAAI;IAOrB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAQhC,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAKnC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA0BjC,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAOrC,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAI1C,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAI1C,WAAW,IAAI,IAAI;IAInB,kBAAkB,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI;yCA1O9C,uBAAuB;2CAAvB,uBAAuB;CAmPnC"}
|