@memberjunction/ng-explorer-settings 2.109.0 → 2.110.1
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/module.d.ts.map +1 -1
- package/dist/lib/module.js +1 -1
- package/dist/lib/module.js.map +1 -1
- package/dist/lib/settings/settings.component.d.ts.map +1 -1
- package/dist/lib/settings/settings.component.js +20 -17
- package/dist/lib/settings/settings.component.js.map +1 -1
- package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts +86 -0
- package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts.map +1 -0
- package/dist/lib/user-profile-settings/user-profile-settings.component.js +696 -0
- package/dist/lib/user-profile-settings/user-profile-settings.component.js.map +1 -0
- package/package.json +12 -11
package/dist/lib/module.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,
|
|
1
|
+
{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,qBA6Ba,sBAAsB;yCAAtB,sBAAsB;0CAAtB,sBAAsB;0CAAtB,sBAAsB;CAAI"}
|
package/dist/lib/module.js
CHANGED
package/dist/lib/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,2BAA2B;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;;
|
|
1
|
+
{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,2BAA2B;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;;AA+B1E,MAAM,OAAO,sBAAsB;gFAAtB,sBAAsB;4DAAtB,sBAAsB;gEAzB/B,YAAY;YACZ,UAAU;YACV,WAAW;YACX,aAAa;YACb,iBAAiB;YACjB,oBAAoB;YACpB,yBAAyB;YACzB,aAAa;YACb,eAAe;YACf,uBAAuB;YACvB,gBAAgB;YAChB,aAAa;YACb,sBAAsB;YACtB,gBAAgB;YAChB,kBAAkB;YAClB,sBAAsB;YACtB,cAAc;YACd,iBAAiB;YACjB,mBAAmB;;iFAOV,sBAAsB;cA7BlC,QAAQ;eAAC;gBACR,YAAY,EAAE,EACb;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,UAAU;oBACV,WAAW;oBACX,aAAa;oBACb,iBAAiB;oBACjB,oBAAoB;oBACpB,yBAAyB;oBACzB,aAAa;oBACb,eAAe;oBACf,uBAAuB;oBACvB,gBAAgB;oBAChB,aAAa;oBACb,sBAAsB;oBACtB,gBAAgB;oBAChB,kBAAkB;oBAClB,sBAAsB;oBACtB,cAAc;oBACd,iBAAiB;oBACjB,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,iBAAiB;oBACjB,mBAAmB;iBACpB;aACF;;wFACY,sBAAsB,cAzB/B,YAAY;QACZ,UAAU;QACV,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,oBAAoB;QACpB,yBAAyB;QACzB,aAAa;QACb,eAAe;QACf,uBAAuB;QACvB,gBAAgB;QAChB,aAAa;QACb,sBAAsB;QACtB,gBAAgB;QAChB,kBAAkB;QAClB,sBAAsB;QACtB,cAAc;QACd,iBAAiB;QACjB,mBAAmB,aAGnB,iBAAiB;QACjB,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;AAShD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;;AAEnE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,qBAiBa,iBAAkB,SAAQ,uBAAwB,YAAW,MAAM,EAAE,SAAS;IAC/E,WAAW,uCAA8C;IAG5D,SAAS,SAAa;IACtB,iBAAiB,SAAiB;IAClC,WAAW,0BAAmC;IAC9C,SAAS,UAAS;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5B,IAAI,EAAE,WAAW,EAAE,CAsCxB;IAGK,gBAAgB,EAAE,MAAM,EAAE,CAA8B;IAGxD,QAAQ,UAA2B;IAE1C,OAAO,CAAC,QAAQ,CAAuB;;IAQvC,QAAQ,IAAI,IAAI;IAKhB,WAAW,IAAI,IAAI;IAMnB,OAAO,CAAC,iBAAiB;IAaZ,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;YAY/B,gBAAgB;IAIvB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKlC,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAUtC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAI7C,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAShB,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAAG,IAAI;IAY3D,UAAU,CAAC,GAAG,EAAE,WAAW,GAAG,MAAM;IAIpC,WAAW,CAAC,GAAG,EAAE,WAAW,GAAG,MAAM;yCAvKjC,iBAAiB;2CAAjB,iBAAiB;CAiL7B"}
|
|
@@ -15,6 +15,7 @@ import { UserManagementComponent } from '../user-management/user-management.comp
|
|
|
15
15
|
import { RoleManagementComponent } from '../role-management/role-management.component';
|
|
16
16
|
import { ApplicationManagementComponent } from '../application-management/application-management.component';
|
|
17
17
|
import { EntityPermissionsComponent } from '../entity-permissions/entity-permissions.component';
|
|
18
|
+
import { UserProfileSettingsComponent } from '../user-profile-settings/user-profile-settings.component';
|
|
18
19
|
import { BaseNavigationComponent } from '@memberjunction/ng-shared';
|
|
19
20
|
import * as i0 from "@angular/core";
|
|
20
21
|
import * as i1 from "../shared/settings-card.component";
|
|
@@ -82,24 +83,24 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template(rf, ctx)
|
|
|
82
83
|
i0.ɵɵelementEnd();
|
|
83
84
|
i0.ɵɵelementStart(3, "div", 38)(4, "mj-settings-card", 39);
|
|
84
85
|
i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("profile")); });
|
|
85
|
-
i0.ɵɵelementStart(5, "div", 40)
|
|
86
|
-
i0.ɵɵ
|
|
87
|
-
i0.ɵɵelementEnd()()
|
|
88
|
-
i0.ɵɵelementStart(
|
|
89
|
-
i0.ɵɵlistener("toggle", function
|
|
90
|
-
i0.ɵɵelementStart(
|
|
91
|
-
i0.ɵɵtext(
|
|
86
|
+
i0.ɵɵelementStart(5, "div", 40);
|
|
87
|
+
i0.ɵɵelement(6, "mj-user-profile-settings");
|
|
88
|
+
i0.ɵɵelementEnd()();
|
|
89
|
+
i0.ɵɵelementStart(7, "mj-settings-card", 41);
|
|
90
|
+
i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("preferences")); });
|
|
91
|
+
i0.ɵɵelementStart(8, "div", 40)(9, "p");
|
|
92
|
+
i0.ɵɵtext(10, "Customize your experience with display and behavior preferences.");
|
|
92
93
|
i0.ɵɵelementEnd()()();
|
|
93
|
-
i0.ɵɵelementStart(
|
|
94
|
-
i0.ɵɵlistener("toggle", function
|
|
95
|
-
i0.ɵɵelementStart(
|
|
96
|
-
i0.ɵɵtext(
|
|
94
|
+
i0.ɵɵelementStart(11, "mj-settings-card", 42);
|
|
95
|
+
i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_11_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("notifications")); });
|
|
96
|
+
i0.ɵɵelementStart(12, "div", 40)(13, "p");
|
|
97
|
+
i0.ɵɵtext(14, "Configure how and when you receive notifications.");
|
|
97
98
|
i0.ɵɵelementEnd()()()()();
|
|
98
99
|
} if (rf & 2) {
|
|
99
100
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
100
101
|
i0.ɵɵadvance(4);
|
|
101
102
|
i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("profile"));
|
|
102
|
-
i0.ɵɵadvance(
|
|
103
|
+
i0.ɵɵadvance(3);
|
|
103
104
|
i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("preferences"));
|
|
104
105
|
i0.ɵɵadvance(4);
|
|
105
106
|
i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("notifications"));
|
|
@@ -198,7 +199,7 @@ function SettingsComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (
|
|
|
198
199
|
i0.ɵɵrepeaterCreate(3, SettingsComponent_Conditional_12_Conditional_1_For_4_Template, 5, 6, "li", 24, _forTrack0);
|
|
199
200
|
i0.ɵɵelementEnd()();
|
|
200
201
|
i0.ɵɵelementStart(5, "div", 25)(6, "div", 26);
|
|
201
|
-
i0.ɵɵtemplate(7, SettingsComponent_Conditional_12_Conditional_1_Case_7_Template,
|
|
202
|
+
i0.ɵɵtemplate(7, SettingsComponent_Conditional_12_Conditional_1_Case_7_Template, 15, 3, "div", 27)(8, SettingsComponent_Conditional_12_Conditional_1_Case_8_Template, 6, 0, "div", 28)(9, SettingsComponent_Conditional_12_Conditional_1_Case_9_Template, 6, 0, "div", 29)(10, SettingsComponent_Conditional_12_Conditional_1_Case_10_Template, 2, 0, "div", 30)(11, SettingsComponent_Conditional_12_Conditional_1_Case_11_Template, 2, 0, "div", 31)(12, SettingsComponent_Conditional_12_Conditional_1_Case_12_Template, 21, 7, "div", 32);
|
|
202
203
|
i0.ɵɵelementEnd()()();
|
|
203
204
|
} if (rf & 2) {
|
|
204
205
|
let tmp_3_0;
|
|
@@ -470,7 +471,8 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
|
|
|
470
471
|
UserManagementComponent,
|
|
471
472
|
RoleManagementComponent,
|
|
472
473
|
ApplicationManagementComponent,
|
|
473
|
-
EntityPermissionsComponent], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: #f5f7fa;\n overflow: hidden;\n position: relative;\n}\n\n//[_ngcontent-%COMP%] Header[_ngcontent-%COMP%] Section\n.settings-header[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n z-index: 10;\n}\n\n.header-content[_ngcontent-%COMP%] {\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2rem;\n\n @media (max-width: 768px) {\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n .header-icon {\n font-size: 1.75rem;\n color: #2196f3;\n }\n\n h1 {\n margin: 0;\n font-size: 1.75rem;\n font-weight: 600;\n color: #1f2937;\n }\n}\n\n.header-search[_ngcontent-%COMP%] {\n position: relative;\n width: 100%;\n max-width: 400px;\n\n .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n }\n\n .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n background-color: #f9fafb;\n\n &:focus {\n outline: none;\n border-color: #2196f3;\n background-color: #ffffff;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n }\n\n &::placeholder {\n color: #9ca3af;\n }\n }\n}\n\n//[_ngcontent-%COMP%] Loading[_ngcontent-%COMP%] State\n.loading-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n\n .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n &:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n }\n\n &:nth-child(2) {\n border-color: transparent #4caf50 transparent transparent;\n animation-delay: -0.3s;\n }\n\n &:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n }\n }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%] Error[_ngcontent-%COMP%] State\n.error-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n text-align: center;\n max-width: 400px;\n\n .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n }\n\n .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n font-size: 1rem;\n }\n\n .retry-button {\n @include button-base;\n background-color: #2196f3;\n color: white;\n padding: 0.75rem 1.5rem;\n font-size: 0.95rem;\n border-radius: 8px;\n transition: all 0.2s;\n\n &:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n }\n\n i {\n margin-right: 0.5rem;\n }\n }\n}\n\n//[_ngcontent-%COMP%] Main[_ngcontent-%COMP%] Content\n.settings-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow: hidden;\n flex-direction: column;\n width: 100%;\n}\n\n//[_ngcontent-%COMP%] Desktop[_ngcontent-%COMP%] Layout\n.desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n//[_ngcontent-%COMP%] More[_ngcontent-%COMP%] specific[_ngcontent-%COMP%] selector[_ngcontent-%COMP%] to[_ngcontent-%COMP%] ensure[_ngcontent-%COMP%] it[_ngcontent-%COMP%] applies\n.settings-content[_ngcontent-%COMP%] .desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// Deep selector for Angular ViewEncapsulation\n[_nghost-%COMP%] .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.side-navigation[_ngcontent-%COMP%] {\n width: 260px;\n background-color: #ffffff;\n border-right: 1px solid #e5e7eb;\n overflow-y: auto;\n flex-shrink: 0;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1.5rem;\n cursor: pointer;\n transition: all 0.2s;\n color: #4b5563;\n font-size: 0.95rem;\n\n &:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n &.active {\n background-color: #eff6ff;\n color: #2196f3;\n font-weight: 500;\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #2196f3;\n }\n }\n\n i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n }\n\n .nav-label {\n flex: 1;\n }\n\n .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 600;\n \n &.badge-primary {\n background-color: #dbeafe;\n color: #1e40af;\n }\n\n &.badge-danger {\n background-color: #fee2e2;\n color: #991b1b;\n }\n\n &.badge-warning {\n background-color: #fef3c7;\n color: #92400e;\n }\n\n &.badge-success {\n background-color: #d1fae5;\n color: #065f46;\n }\n }\n}\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0; // Important for proper flex sizing\n\n @media (max-width: 768px) {\n padding: 1rem;\n }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n min-height: 0; // Important for proper flex sizing\n}\n\n//[_ngcontent-%COMP%] Section[_ngcontent-%COMP%] Styles\n.section-title[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.5rem 0;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6b7280;\n margin: 0 0 2rem 0;\n font-size: 0.95rem;\n}\n\n.settings-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n}\n\n.card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n color: #4b5563;\n font-size: 0.95rem;\n\n p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n }\n}\n\n//[_ngcontent-%COMP%] Beta[_ngcontent-%COMP%] Warning\n.beta-warning[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n background-color: #fef3c7;\n color: #92400e;\n border-radius: 6px;\n font-size: 0.875rem;\n margin-bottom: 1.5rem;\n\n i {\n font-size: 1rem;\n }\n}\n\n//[_ngcontent-%COMP%] Mobile[_ngcontent-%COMP%] Layout\n.mobile-layout[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.mobile-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #ffffff;\n border-top: 1px solid #e5e7eb;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n z-index: 100;\n}\n\n.nav-tabs[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 0.5rem 0;\n}\n\n.nav-tab[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n padding: 0.5rem;\n background: none;\n border: none;\n color: #9ca3af;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.75rem;\n min-width: 60px;\n\n &.active {\n color: #2196f3;\n\n i {\n transform: scale(1.1);\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n i {\n font-size: 1.25rem;\n transition: transform 0.2s;\n }\n\n .tab-badge {\n position: absolute;\n top: 0.25rem;\n right: 0.25rem;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 0.625rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &.badge-primary {\n background-color: #2196f3;\n color: white;\n }\n\n &.badge-warning {\n background-color: #ff9800;\n color: white;\n }\n }\n\n .tab-label {\n margin-top: 0.125rem;\n }\n}\n\n.more-tab[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n\n//[_ngcontent-%COMP%] Advanced[_ngcontent-%COMP%] Settings[_ngcontent-%COMP%] Tabs\n.advanced-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid #e5e7eb;\n margin-bottom: 2rem;\n margin-top: 1.5rem;\n\n .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6b7280;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n\n &:hover {\n color: #374151;\n background: #f9fafb;\n }\n\n &.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: #eff6ff;\n\n i {\n color: #2196f3;\n }\n }\n\n i {\n font-size: 1.125rem;\n }\n }\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n @include scrollable-content;\n background: white;\n border-radius: 12px;\n padding: 0;\n min-height: 500px;\n max-height: calc(100vh - 350px);\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n padding: 2rem;\n \n h3 {\n margin: 0 0 1rem 0;\n color: #1f2937;\n font-size: 1.25rem;\n }\n \n p {\n color: #6b7280;\n font-size: 0.95rem;\n }\n}\n\n//[_ngcontent-%COMP%] Animations\n@keyframes[_ngcontent-%COMP%] fadeIn[_ngcontent-%COMP%] {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0; // Important for proper flex sizing\n overflow: hidden;\n \n // Direct child components should handle their own scrolling\n > * {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n}"] });
|
|
474
|
+
EntityPermissionsComponent,
|
|
475
|
+
UserProfileSettingsComponent], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: #f5f7fa;\n overflow: hidden;\n position: relative;\n}\n\n//[_ngcontent-%COMP%] Header[_ngcontent-%COMP%] Section\n.settings-header[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n z-index: 10;\n}\n\n.header-content[_ngcontent-%COMP%] {\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2rem;\n\n @media (max-width: 768px) {\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n .header-icon {\n font-size: 1.75rem;\n color: #2196f3;\n }\n\n h1 {\n margin: 0;\n font-size: 1.75rem;\n font-weight: 600;\n color: #1f2937;\n }\n}\n\n.header-search[_ngcontent-%COMP%] {\n position: relative;\n width: 100%;\n max-width: 400px;\n\n .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n }\n\n .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n background-color: #f9fafb;\n\n &:focus {\n outline: none;\n border-color: #2196f3;\n background-color: #ffffff;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n }\n\n &::placeholder {\n color: #9ca3af;\n }\n }\n}\n\n//[_ngcontent-%COMP%] Loading[_ngcontent-%COMP%] State\n.loading-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n\n .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n &:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n }\n\n &:nth-child(2) {\n border-color: transparent #4caf50 transparent transparent;\n animation-delay: -0.3s;\n }\n\n &:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n }\n }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%] Error[_ngcontent-%COMP%] State\n.error-container[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n text-align: center;\n max-width: 400px;\n\n .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n }\n\n .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n font-size: 1rem;\n }\n\n .retry-button {\n @include button-base;\n background-color: #2196f3;\n color: white;\n padding: 0.75rem 1.5rem;\n font-size: 0.95rem;\n border-radius: 8px;\n transition: all 0.2s;\n\n &:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n }\n\n i {\n margin-right: 0.5rem;\n }\n }\n}\n\n//[_ngcontent-%COMP%] Main[_ngcontent-%COMP%] Content\n.settings-content[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow: hidden;\n flex-direction: column;\n width: 100%;\n}\n\n//[_ngcontent-%COMP%] Desktop[_ngcontent-%COMP%] Layout\n.desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n//[_ngcontent-%COMP%] More[_ngcontent-%COMP%] specific[_ngcontent-%COMP%] selector[_ngcontent-%COMP%] to[_ngcontent-%COMP%] ensure[_ngcontent-%COMP%] it[_ngcontent-%COMP%] applies\n.settings-content[_ngcontent-%COMP%] .desktop-layout[_ngcontent-%COMP%] {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// Deep selector for Angular ViewEncapsulation\n[_nghost-%COMP%] .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.side-navigation[_ngcontent-%COMP%] {\n width: 260px;\n background-color: #ffffff;\n border-right: 1px solid #e5e7eb;\n overflow-y: auto;\n flex-shrink: 0;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1.5rem;\n cursor: pointer;\n transition: all 0.2s;\n color: #4b5563;\n font-size: 0.95rem;\n\n &:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n &.active {\n background-color: #eff6ff;\n color: #2196f3;\n font-weight: 500;\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #2196f3;\n }\n }\n\n i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n }\n\n .nav-label {\n flex: 1;\n }\n\n .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 600;\n \n &.badge-primary {\n background-color: #dbeafe;\n color: #1e40af;\n }\n\n &.badge-danger {\n background-color: #fee2e2;\n color: #991b1b;\n }\n\n &.badge-warning {\n background-color: #fef3c7;\n color: #92400e;\n }\n\n &.badge-success {\n background-color: #d1fae5;\n color: #065f46;\n }\n }\n}\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0; // Important for proper flex sizing\n\n @media (max-width: 768px) {\n padding: 1rem;\n }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n min-height: 0; // Important for proper flex sizing\n}\n\n//[_ngcontent-%COMP%] Section[_ngcontent-%COMP%] Styles\n.section-title[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.5rem 0;\n}\n\n.section-description[_ngcontent-%COMP%] {\n color: #6b7280;\n margin: 0 0 2rem 0;\n font-size: 0.95rem;\n}\n\n.settings-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n}\n\n.card-content[_ngcontent-%COMP%] {\n padding: 1rem;\n color: #4b5563;\n font-size: 0.95rem;\n\n p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n }\n}\n\n//[_ngcontent-%COMP%] Beta[_ngcontent-%COMP%] Warning\n.beta-warning[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n background-color: #fef3c7;\n color: #92400e;\n border-radius: 6px;\n font-size: 0.875rem;\n margin-bottom: 1.5rem;\n\n i {\n font-size: 1rem;\n }\n}\n\n//[_ngcontent-%COMP%] Mobile[_ngcontent-%COMP%] Layout\n.mobile-layout[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.mobile-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #ffffff;\n border-top: 1px solid #e5e7eb;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n z-index: 100;\n}\n\n.nav-tabs[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 0.5rem 0;\n}\n\n.nav-tab[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n padding: 0.5rem;\n background: none;\n border: none;\n color: #9ca3af;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.75rem;\n min-width: 60px;\n\n &.active {\n color: #2196f3;\n\n i {\n transform: scale(1.1);\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n i {\n font-size: 1.25rem;\n transition: transform 0.2s;\n }\n\n .tab-badge {\n position: absolute;\n top: 0.25rem;\n right: 0.25rem;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 0.625rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &.badge-primary {\n background-color: #2196f3;\n color: white;\n }\n\n &.badge-warning {\n background-color: #ff9800;\n color: white;\n }\n }\n\n .tab-label {\n margin-top: 0.125rem;\n }\n}\n\n.more-tab[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n\n//[_ngcontent-%COMP%] Advanced[_ngcontent-%COMP%] Settings[_ngcontent-%COMP%] Tabs\n.advanced-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid #e5e7eb;\n margin-bottom: 2rem;\n margin-top: 1.5rem;\n\n .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6b7280;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n\n &:hover {\n color: #374151;\n background: #f9fafb;\n }\n\n &.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: #eff6ff;\n\n i {\n color: #2196f3;\n }\n }\n\n i {\n font-size: 1.125rem;\n }\n }\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n @include scrollable-content;\n background: white;\n border-radius: 12px;\n padding: 0;\n min-height: 500px;\n max-height: calc(100vh - 350px);\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n padding: 2rem;\n \n h3 {\n margin: 0 0 1rem 0;\n color: #1f2937;\n font-size: 1.25rem;\n }\n \n p {\n color: #6b7280;\n font-size: 0.95rem;\n }\n}\n\n//[_ngcontent-%COMP%] Animations\n@keyframes[_ngcontent-%COMP%] fadeIn[_ngcontent-%COMP%] {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0; // Important for proper flex sizing\n overflow: hidden;\n \n // Direct child components should handle their own scrolling\n > * {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n}"] });
|
|
474
476
|
};
|
|
475
477
|
SettingsComponent = __decorate([
|
|
476
478
|
RegisterClass(BaseNavigationComponent, "Settings")
|
|
@@ -485,10 +487,11 @@ export { SettingsComponent };
|
|
|
485
487
|
UserManagementComponent,
|
|
486
488
|
RoleManagementComponent,
|
|
487
489
|
ApplicationManagementComponent,
|
|
488
|
-
EntityPermissionsComponent
|
|
489
|
-
], template: "<div class=\"mj-page-container\">\n <!-- Header Section -->\n <div class=\"mj-header\">\n <div class=\"mj-header-title\">\n <i class=\"fa-solid fa-cog\"></i>\n <h1>Settings</h1>\n </div>\n \n <div class=\"mj-header-actions\">\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\"></i>\n <input \n type=\"text\" \n class=\"mj-search-input\" \n placeholder=\"Search settings...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"searchTerm$.value\"\n />\n </div>\n </div>\n </div>\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading settings...</div>\n </div>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"retry-button\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Main Content -->\n @if (!isLoading && !error) {\n <div class=\"settings-content\">\n <!-- Desktop Layout -->\n @if (!isMobile) {\n <div class=\"desktop-layout\" style=\"display: flex;\">\n <!-- Side Navigation -->\n <nav class=\"side-navigation\">\n <ul class=\"nav-list\">\n @for (tab of tabs; track tab.id) {\n <li \n class=\"nav-item\"\n [class.active]=\"activeTab === tab.id\"\n (click)=\"onTabChange(tab.id)\"\n >\n <i [class]=\"tab.icon\"></i>\n <span class=\"nav-label\">{{ tab.label }}</span>\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </li>\n }\n </ul>\n </nav>\n\n <!-- Content Area -->\n <div class=\"content-area\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <div class=\"general-settings\">\n <h2 class=\"section-title\">General Settings</h2>\n <div class=\"mj-grid mj-grid-responsive\">\n <mj-settings-card \n title=\"Profile Information\"\n icon=\"fa-solid fa-user\"\n [expanded]=\"isSectionExpanded('profile')\"\n (toggle)=\"toggleSection('profile')\"\n >\n <div class=\"card-content\">\n <p>Manage your profile information and preferences.</p>\n <!-- Profile settings content will go here -->\n </div>\n </mj-settings-card>\n\n <mj-settings-card \n title=\"Preferences\"\n icon=\"fa-solid fa-sliders\"\n [expanded]=\"isSectionExpanded('preferences')\"\n (toggle)=\"toggleSection('preferences')\"\n >\n <div class=\"card-content\">\n <p>Customize your experience with display and behavior preferences.</p>\n <!-- Preferences content will go here -->\n </div>\n </mj-settings-card>\n\n <mj-settings-card \n title=\"Notifications\"\n icon=\"fa-solid fa-bell\"\n [expanded]=\"isSectionExpanded('notifications')\"\n (toggle)=\"toggleSection('notifications')\"\n >\n <div class=\"card-content\">\n <p>Configure how and when you receive notifications.</p>\n <!-- Notification settings will go here -->\n </div>\n </mj-settings-card>\n </div>\n </div>\n }\n \n @case ('users') {\n <div class=\"users-settings\">\n <h2 class=\"section-title\">User Management</h2>\n <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n <mj-user-management></mj-user-management>\n </div>\n }\n \n @case ('roles') {\n <div class=\"roles-settings\">\n <h2 class=\"section-title\">Role Management</h2>\n <p class=\"section-description\">Define and manage security roles.</p>\n <mj-role-management></mj-role-management>\n </div>\n }\n \n @case ('applications') {\n <div class=\"applications-settings\">\n <mj-application-management></mj-application-management>\n </div>\n }\n \n @case ('permissions') {\n <div class=\"permissions-settings\">\n <mj-entity-permissions></mj-entity-permissions>\n </div>\n }\n \n @case ('advanced') {\n <div class=\"advanced-settings\">\n <h2 class=\"section-title\">Advanced Settings</h2>\n <div class=\"beta-warning\">\n <i class=\"fa-solid fa-flask\"></i>\n <span>Beta features - Use with caution</span>\n </div>\n \n <!-- Tab Navigation -->\n <div class=\"advanced-tabs\">\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'sql-logging'\"\n (click)=\"setAdvancedTab('sql-logging')\"\n >\n <i class=\"fa-solid fa-database\"></i>\n SQL Logging\n </button>\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'performance'\"\n (click)=\"setAdvancedTab('performance')\"\n >\n <i class=\"fa-solid fa-gauge-high\"></i>\n Performance\n </button>\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'developer'\"\n (click)=\"setAdvancedTab('developer')\"\n >\n <i class=\"fa-solid fa-code\"></i>\n Developer Tools\n </button>\n </div>\n \n <!-- Tab Content -->\n <div class=\"advanced-tab-content\">\n @switch (advancedActiveTab) {\n @case ('sql-logging') {\n <mj-sql-logging></mj-sql-logging>\n }\n @case ('performance') {\n <div class=\"performance-settings\">\n <h3>Performance Settings</h3>\n <p>Performance monitoring and optimization tools coming soon.</p>\n </div>\n }\n @case ('developer') {\n <div class=\"developer-settings\">\n <h3>Developer Tools</h3>\n <p>Advanced developer options coming soon.</p>\n </div>\n }\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Mobile Layout -->\n @if (isMobile) {\n <div class=\"mobile-layout\">\n <!-- Mobile Content -->\n <div class=\"mobile-content\">\n @switch (activeTab) {\n @case ('general') {\n <div class=\"general-settings\">\n <h2 class=\"section-title\">General Settings</h2>\n <!-- Same content as desktop but responsive -->\n </div>\n }\n @case ('users') {\n <div class=\"users-settings\">\n <h2 class=\"section-title\">User Management</h2>\n <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n <mj-user-management></mj-user-management>\n </div>\n }\n <!-- Other cases similar to desktop -->\n }\n </div>\n\n <!-- Mobile Bottom Navigation -->\n <nav class=\"mobile-navigation\">\n <div class=\"nav-tabs\">\n @for (tab of tabs.slice(0, 5); track tab.id) {\n <button \n class=\"nav-tab\"\n [class.active]=\"activeTab === tab.id\"\n (click)=\"onTabChange(tab.id)\"\n >\n <i [class]=\"tab.icon\"></i>\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"tab-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n @if (tabs.length > 5) {\n <button class=\"nav-tab more-tab\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n <span class=\"tab-label\">More</span>\n </button>\n }\n </div>\n </nav>\n </div>\n }\n </div>\n }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: #f5f7fa;\n overflow: hidden;\n position: relative;\n}\n\n// Header Section\n.settings-header {\n background-color: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n z-index: 10;\n}\n\n.header-content {\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2rem;\n\n @media (max-width: 768px) {\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n .header-icon {\n font-size: 1.75rem;\n color: #2196f3;\n }\n\n h1 {\n margin: 0;\n font-size: 1.75rem;\n font-weight: 600;\n color: #1f2937;\n }\n}\n\n.header-search {\n position: relative;\n width: 100%;\n max-width: 400px;\n\n .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n }\n\n .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n background-color: #f9fafb;\n\n &:focus {\n outline: none;\n border-color: #2196f3;\n background-color: #ffffff;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n }\n\n &::placeholder {\n color: #9ca3af;\n }\n }\n}\n\n// Loading State\n.loading-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n\n .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n &:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n }\n\n &:nth-child(2) {\n border-color: transparent #4caf50 transparent transparent;\n animation-delay: -0.3s;\n }\n\n &:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content {\n text-align: center;\n max-width: 400px;\n\n .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n }\n\n .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n font-size: 1rem;\n }\n\n .retry-button {\n @include button-base;\n background-color: #2196f3;\n color: white;\n padding: 0.75rem 1.5rem;\n font-size: 0.95rem;\n border-radius: 8px;\n transition: all 0.2s;\n\n &:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n }\n\n i {\n margin-right: 0.5rem;\n }\n }\n}\n\n// Main Content\n.settings-content {\n display: flex;\n flex: 1;\n overflow: hidden;\n flex-direction: column;\n width: 100%;\n}\n\n// Desktop Layout\n.desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// More specific selector to ensure it applies\n.settings-content .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// Deep selector for Angular ViewEncapsulation\n:host ::ng-deep .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.side-navigation {\n width: 260px;\n background-color: #ffffff;\n border-right: 1px solid #e5e7eb;\n overflow-y: auto;\n flex-shrink: 0;\n}\n\n.nav-list {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1.5rem;\n cursor: pointer;\n transition: all 0.2s;\n color: #4b5563;\n font-size: 0.95rem;\n\n &:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n &.active {\n background-color: #eff6ff;\n color: #2196f3;\n font-weight: 500;\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #2196f3;\n }\n }\n\n i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n }\n\n .nav-label {\n flex: 1;\n }\n\n .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 600;\n \n &.badge-primary {\n background-color: #dbeafe;\n color: #1e40af;\n }\n\n &.badge-danger {\n background-color: #fee2e2;\n color: #991b1b;\n }\n\n &.badge-warning {\n background-color: #fef3c7;\n color: #92400e;\n }\n\n &.badge-success {\n background-color: #d1fae5;\n color: #065f46;\n }\n }\n}\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0; // Important for proper flex sizing\n\n @media (max-width: 768px) {\n padding: 1rem;\n }\n}\n\n.tab-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n min-height: 0; // Important for proper flex sizing\n}\n\n// Section Styles\n.section-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.5rem 0;\n}\n\n.section-description {\n color: #6b7280;\n margin: 0 0 2rem 0;\n font-size: 0.95rem;\n}\n\n.settings-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n}\n\n.card-content {\n padding: 1rem;\n color: #4b5563;\n font-size: 0.95rem;\n\n p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n }\n}\n\n// Beta Warning\n.beta-warning {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n background-color: #fef3c7;\n color: #92400e;\n border-radius: 6px;\n font-size: 0.875rem;\n margin-bottom: 1.5rem;\n\n i {\n font-size: 1rem;\n }\n}\n\n// Mobile Layout\n.mobile-layout {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.mobile-content {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #ffffff;\n border-top: 1px solid #e5e7eb;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n z-index: 100;\n}\n\n.nav-tabs {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 0.5rem 0;\n}\n\n.nav-tab {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n padding: 0.5rem;\n background: none;\n border: none;\n color: #9ca3af;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.75rem;\n min-width: 60px;\n\n &.active {\n color: #2196f3;\n\n i {\n transform: scale(1.1);\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n i {\n font-size: 1.25rem;\n transition: transform 0.2s;\n }\n\n .tab-badge {\n position: absolute;\n top: 0.25rem;\n right: 0.25rem;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 0.625rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &.badge-primary {\n background-color: #2196f3;\n color: white;\n }\n\n &.badge-warning {\n background-color: #ff9800;\n color: white;\n }\n }\n\n .tab-label {\n margin-top: 0.125rem;\n }\n}\n\n.more-tab {\n color: #6b7280;\n}\n\n// Advanced Settings Tabs\n.advanced-tabs {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid #e5e7eb;\n margin-bottom: 2rem;\n margin-top: 1.5rem;\n\n .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6b7280;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n\n &:hover {\n color: #374151;\n background: #f9fafb;\n }\n\n &.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: #eff6ff;\n\n i {\n color: #2196f3;\n }\n }\n\n i {\n font-size: 1.125rem;\n }\n }\n}\n\n.advanced-tab-content {\n @include scrollable-content;\n background: white;\n border-radius: 12px;\n padding: 0;\n min-height: 500px;\n max-height: calc(100vh - 350px);\n}\n\n.performance-settings,\n.developer-settings {\n padding: 2rem;\n \n h3 {\n margin: 0 0 1rem 0;\n color: #1f2937;\n font-size: 1.25rem;\n }\n \n p {\n color: #6b7280;\n font-size: 0.95rem;\n }\n}\n\n// Animations\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0; // Important for proper flex sizing\n overflow: hidden;\n \n // Direct child components should handle their own scrolling\n > * {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n}"] }]
|
|
490
|
+
EntityPermissionsComponent,
|
|
491
|
+
UserProfileSettingsComponent
|
|
492
|
+
], template: "<div class=\"mj-page-container\">\n <!-- Header Section -->\n <div class=\"mj-header\">\n <div class=\"mj-header-title\">\n <i class=\"fa-solid fa-cog\"></i>\n <h1>Settings</h1>\n </div>\n \n <div class=\"mj-header-actions\">\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\"></i>\n <input \n type=\"text\" \n class=\"mj-search-input\" \n placeholder=\"Search settings...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"searchTerm$.value\"\n />\n </div>\n </div>\n </div>\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading settings...</div>\n </div>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"retry-button\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Main Content -->\n @if (!isLoading && !error) {\n <div class=\"settings-content\">\n <!-- Desktop Layout -->\n @if (!isMobile) {\n <div class=\"desktop-layout\" style=\"display: flex;\">\n <!-- Side Navigation -->\n <nav class=\"side-navigation\">\n <ul class=\"nav-list\">\n @for (tab of tabs; track tab.id) {\n <li \n class=\"nav-item\"\n [class.active]=\"activeTab === tab.id\"\n (click)=\"onTabChange(tab.id)\"\n >\n <i [class]=\"tab.icon\"></i>\n <span class=\"nav-label\">{{ tab.label }}</span>\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n </li>\n }\n </ul>\n </nav>\n\n <!-- Content Area -->\n <div class=\"content-area\">\n <div class=\"tab-content\">\n @switch (activeTab) {\n @case ('general') {\n <div class=\"general-settings\">\n <h2 class=\"section-title\">General Settings</h2>\n <div class=\"mj-grid mj-grid-responsive\">\n <mj-settings-card\n title=\"Profile Information\"\n icon=\"fa-solid fa-user\"\n [expanded]=\"isSectionExpanded('profile')\"\n (toggle)=\"toggleSection('profile')\"\n >\n <div class=\"card-content\">\n <mj-user-profile-settings></mj-user-profile-settings>\n </div>\n </mj-settings-card>\n\n <mj-settings-card \n title=\"Preferences\"\n icon=\"fa-solid fa-sliders\"\n [expanded]=\"isSectionExpanded('preferences')\"\n (toggle)=\"toggleSection('preferences')\"\n >\n <div class=\"card-content\">\n <p>Customize your experience with display and behavior preferences.</p>\n <!-- Preferences content will go here -->\n </div>\n </mj-settings-card>\n\n <mj-settings-card \n title=\"Notifications\"\n icon=\"fa-solid fa-bell\"\n [expanded]=\"isSectionExpanded('notifications')\"\n (toggle)=\"toggleSection('notifications')\"\n >\n <div class=\"card-content\">\n <p>Configure how and when you receive notifications.</p>\n <!-- Notification settings will go here -->\n </div>\n </mj-settings-card>\n </div>\n </div>\n }\n \n @case ('users') {\n <div class=\"users-settings\">\n <h2 class=\"section-title\">User Management</h2>\n <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n <mj-user-management></mj-user-management>\n </div>\n }\n \n @case ('roles') {\n <div class=\"roles-settings\">\n <h2 class=\"section-title\">Role Management</h2>\n <p class=\"section-description\">Define and manage security roles.</p>\n <mj-role-management></mj-role-management>\n </div>\n }\n \n @case ('applications') {\n <div class=\"applications-settings\">\n <mj-application-management></mj-application-management>\n </div>\n }\n \n @case ('permissions') {\n <div class=\"permissions-settings\">\n <mj-entity-permissions></mj-entity-permissions>\n </div>\n }\n \n @case ('advanced') {\n <div class=\"advanced-settings\">\n <h2 class=\"section-title\">Advanced Settings</h2>\n <div class=\"beta-warning\">\n <i class=\"fa-solid fa-flask\"></i>\n <span>Beta features - Use with caution</span>\n </div>\n \n <!-- Tab Navigation -->\n <div class=\"advanced-tabs\">\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'sql-logging'\"\n (click)=\"setAdvancedTab('sql-logging')\"\n >\n <i class=\"fa-solid fa-database\"></i>\n SQL Logging\n </button>\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'performance'\"\n (click)=\"setAdvancedTab('performance')\"\n >\n <i class=\"fa-solid fa-gauge-high\"></i>\n Performance\n </button>\n <button \n class=\"tab-btn\"\n [class.active]=\"advancedActiveTab === 'developer'\"\n (click)=\"setAdvancedTab('developer')\"\n >\n <i class=\"fa-solid fa-code\"></i>\n Developer Tools\n </button>\n </div>\n \n <!-- Tab Content -->\n <div class=\"advanced-tab-content\">\n @switch (advancedActiveTab) {\n @case ('sql-logging') {\n <mj-sql-logging></mj-sql-logging>\n }\n @case ('performance') {\n <div class=\"performance-settings\">\n <h3>Performance Settings</h3>\n <p>Performance monitoring and optimization tools coming soon.</p>\n </div>\n }\n @case ('developer') {\n <div class=\"developer-settings\">\n <h3>Developer Tools</h3>\n <p>Advanced developer options coming soon.</p>\n </div>\n }\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Mobile Layout -->\n @if (isMobile) {\n <div class=\"mobile-layout\">\n <!-- Mobile Content -->\n <div class=\"mobile-content\">\n @switch (activeTab) {\n @case ('general') {\n <div class=\"general-settings\">\n <h2 class=\"section-title\">General Settings</h2>\n <!-- Same content as desktop but responsive -->\n </div>\n }\n @case ('users') {\n <div class=\"users-settings\">\n <h2 class=\"section-title\">User Management</h2>\n <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n <mj-user-management></mj-user-management>\n </div>\n }\n <!-- Other cases similar to desktop -->\n }\n </div>\n\n <!-- Mobile Bottom Navigation -->\n <nav class=\"mobile-navigation\">\n <div class=\"nav-tabs\">\n @for (tab of tabs.slice(0, 5); track tab.id) {\n <button \n class=\"nav-tab\"\n [class.active]=\"activeTab === tab.id\"\n (click)=\"onTabChange(tab.id)\"\n >\n <i [class]=\"tab.icon\"></i>\n @if (tab.badgeCount && tab.badgeCount > 0) {\n <span class=\"tab-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n {{ tab.badgeCount }}\n </span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n @if (tabs.length > 5) {\n <button class=\"nav-tab more-tab\">\n <i class=\"fa-solid fa-ellipsis\"></i>\n <span class=\"tab-label\">More</span>\n </button>\n }\n </div>\n </nav>\n </div>\n }\n </div>\n }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: #f5f7fa;\n overflow: hidden;\n position: relative;\n}\n\n// Header Section\n.settings-header {\n background-color: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n z-index: 10;\n}\n\n.header-content {\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 2rem;\n\n @media (max-width: 768px) {\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n .header-icon {\n font-size: 1.75rem;\n color: #2196f3;\n }\n\n h1 {\n margin: 0;\n font-size: 1.75rem;\n font-weight: 600;\n color: #1f2937;\n }\n}\n\n.header-search {\n position: relative;\n width: 100%;\n max-width: 400px;\n\n .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n }\n\n .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n background-color: #f9fafb;\n\n &:focus {\n outline: none;\n border-color: #2196f3;\n background-color: #ffffff;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n }\n\n &::placeholder {\n color: #9ca3af;\n }\n }\n}\n\n// Loading State\n.loading-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n\n .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n &:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n }\n\n &:nth-child(2) {\n border-color: transparent #4caf50 transparent transparent;\n animation-delay: -0.3s;\n }\n\n &:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.error-content {\n text-align: center;\n max-width: 400px;\n\n .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n }\n\n .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n font-size: 1rem;\n }\n\n .retry-button {\n @include button-base;\n background-color: #2196f3;\n color: white;\n padding: 0.75rem 1.5rem;\n font-size: 0.95rem;\n border-radius: 8px;\n transition: all 0.2s;\n\n &:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n }\n\n i {\n margin-right: 0.5rem;\n }\n }\n}\n\n// Main Content\n.settings-content {\n display: flex;\n flex: 1;\n overflow: hidden;\n flex-direction: column;\n width: 100%;\n}\n\n// Desktop Layout\n.desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// More specific selector to ensure it applies\n.settings-content .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n// Deep selector for Angular ViewEncapsulation\n:host ::ng-deep .desktop-layout {\n display: flex !important;\n height: 100%;\n width: 100%;\n}\n\n.side-navigation {\n width: 260px;\n background-color: #ffffff;\n border-right: 1px solid #e5e7eb;\n overflow-y: auto;\n flex-shrink: 0;\n}\n\n.nav-list {\n list-style: none;\n margin: 0;\n padding: 1rem 0;\n}\n\n.nav-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1.5rem;\n cursor: pointer;\n transition: all 0.2s;\n color: #4b5563;\n font-size: 0.95rem;\n\n &:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n &.active {\n background-color: #eff6ff;\n color: #2196f3;\n font-weight: 500;\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #2196f3;\n }\n }\n\n i {\n width: 20px;\n margin-right: 0.75rem;\n font-size: 1.1rem;\n }\n\n .nav-label {\n flex: 1;\n }\n\n .nav-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 600;\n \n &.badge-primary {\n background-color: #dbeafe;\n color: #1e40af;\n }\n\n &.badge-danger {\n background-color: #fee2e2;\n color: #991b1b;\n }\n\n &.badge-warning {\n background-color: #fef3c7;\n color: #92400e;\n }\n\n &.badge-success {\n background-color: #d1fae5;\n color: #065f46;\n }\n }\n}\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0; // Important for proper flex sizing\n\n @media (max-width: 768px) {\n padding: 1rem;\n }\n}\n\n.tab-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n min-height: 0; // Important for proper flex sizing\n}\n\n// Section Styles\n.section-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.5rem 0;\n}\n\n.section-description {\n color: #6b7280;\n margin: 0 0 2rem 0;\n font-size: 0.95rem;\n}\n\n.settings-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n}\n\n.card-content {\n padding: 1rem;\n color: #4b5563;\n font-size: 0.95rem;\n\n p {\n margin: 0 0 1rem 0;\n line-height: 1.6;\n }\n}\n\n// Beta Warning\n.beta-warning {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n background-color: #fef3c7;\n color: #92400e;\n border-radius: 6px;\n font-size: 0.875rem;\n margin-bottom: 1.5rem;\n\n i {\n font-size: 1rem;\n }\n}\n\n// Mobile Layout\n.mobile-layout {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.mobile-content {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #ffffff;\n border-top: 1px solid #e5e7eb;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n z-index: 100;\n}\n\n.nav-tabs {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 0.5rem 0;\n}\n\n.nav-tab {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n padding: 0.5rem;\n background: none;\n border: none;\n color: #9ca3af;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.75rem;\n min-width: 60px;\n\n &.active {\n color: #2196f3;\n\n i {\n transform: scale(1.1);\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n i {\n font-size: 1.25rem;\n transition: transform 0.2s;\n }\n\n .tab-badge {\n position: absolute;\n top: 0.25rem;\n right: 0.25rem;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 0.625rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &.badge-primary {\n background-color: #2196f3;\n color: white;\n }\n\n &.badge-warning {\n background-color: #ff9800;\n color: white;\n }\n }\n\n .tab-label {\n margin-top: 0.125rem;\n }\n}\n\n.more-tab {\n color: #6b7280;\n}\n\n// Advanced Settings Tabs\n.advanced-tabs {\n display: flex;\n gap: 0.5rem;\n border-bottom: 2px solid #e5e7eb;\n margin-bottom: 2rem;\n margin-top: 1.5rem;\n\n .tab-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n background: transparent;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6b7280;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n\n &:hover {\n color: #374151;\n background: #f9fafb;\n }\n\n &.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: #eff6ff;\n\n i {\n color: #2196f3;\n }\n }\n\n i {\n font-size: 1.125rem;\n }\n }\n}\n\n.advanced-tab-content {\n @include scrollable-content;\n background: white;\n border-radius: 12px;\n padding: 0;\n min-height: 500px;\n max-height: calc(100vh - 350px);\n}\n\n.performance-settings,\n.developer-settings {\n padding: 2rem;\n \n h3 {\n margin: 0 0 1rem 0;\n color: #1f2937;\n font-size: 1.25rem;\n }\n \n p {\n color: #6b7280;\n font-size: 0.95rem;\n }\n}\n\n// Animations\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n animation: fadeIn 0.3s ease-out;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0; // Important for proper flex sizing\n overflow: hidden;\n \n // Direct child components should handle their own scrolling\n > * {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n}"] }]
|
|
490
493
|
}], () => [], { stateChange: [{
|
|
491
494
|
type: Output
|
|
492
495
|
}] }); })();
|
|
493
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber:
|
|
496
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 47 }); })();
|
|
494
497
|
//# sourceMappingURL=settings.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings.component.js","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts","../../../src/lib/settings/settings.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,8BAA8B,EAAE,MAAM,4DAA4D,CAAC;AAC5G,OAAO,EAAE,0BAA0B,EAAE,MAAM,oDAAoD,CAAC;AAChG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;;;;;
|
|
1
|
+
{"version":3,"file":"settings.component.js","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts","../../../src/lib/settings/settings.component.html"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { OnInit } from '@angular/core';
|
|
2
|
+
import { UserEntity } from '@memberjunction/core-entities';
|
|
3
|
+
import { UserAvatarService } from '@memberjunction/ng-user-avatar';
|
|
4
|
+
import { SharedService } from '@memberjunction/ng-shared';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
interface IconCategory {
|
|
7
|
+
name: string;
|
|
8
|
+
icons: string[];
|
|
9
|
+
}
|
|
10
|
+
export declare class UserProfileSettingsComponent implements OnInit {
|
|
11
|
+
private userAvatarService;
|
|
12
|
+
private sharedService;
|
|
13
|
+
currentUser: UserEntity;
|
|
14
|
+
selectedTab: 'upload' | 'url' | 'icon' | 'provider';
|
|
15
|
+
imageUrlInput: string;
|
|
16
|
+
selectedIconClass: string;
|
|
17
|
+
uploadedImageBase64: string;
|
|
18
|
+
uploadedFileName: string;
|
|
19
|
+
previewUrl: string;
|
|
20
|
+
previewIconClass: string;
|
|
21
|
+
isSaving: boolean;
|
|
22
|
+
showSuccessMessage: boolean;
|
|
23
|
+
errorMessage: string;
|
|
24
|
+
iconCategories: IconCategory[];
|
|
25
|
+
constructor(userAvatarService: UserAvatarService, sharedService: SharedService);
|
|
26
|
+
ngOnInit(): Promise<void>;
|
|
27
|
+
/**
|
|
28
|
+
* Loads the current avatar settings from the user entity
|
|
29
|
+
*/
|
|
30
|
+
private loadCurrentAvatar;
|
|
31
|
+
/**
|
|
32
|
+
* Switches between tabs and updates preview
|
|
33
|
+
*/
|
|
34
|
+
selectTab(tab: 'upload' | 'url' | 'icon' | 'provider'): void;
|
|
35
|
+
/**
|
|
36
|
+
* Handles file selection from native input
|
|
37
|
+
*/
|
|
38
|
+
onFileSelected(event: Event): Promise<void>;
|
|
39
|
+
/**
|
|
40
|
+
* Clears uploaded file
|
|
41
|
+
*/
|
|
42
|
+
clearUpload(): void;
|
|
43
|
+
/**
|
|
44
|
+
* Handles URL input changes
|
|
45
|
+
*/
|
|
46
|
+
onUrlChange(): void;
|
|
47
|
+
/**
|
|
48
|
+
* Handles icon selection
|
|
49
|
+
*/
|
|
50
|
+
selectIcon(iconClass: string): void;
|
|
51
|
+
/**
|
|
52
|
+
* Checks if an icon is currently selected
|
|
53
|
+
*/
|
|
54
|
+
isIconSelected(iconClass: string): boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Syncs avatar from authentication provider
|
|
57
|
+
* NOTE: This is a placeholder - actual implementation should be done
|
|
58
|
+
* in the calling application which has access to auth services
|
|
59
|
+
*/
|
|
60
|
+
syncFromProvider(): Promise<void>;
|
|
61
|
+
/**
|
|
62
|
+
* Reverts avatar to default (clears both fields)
|
|
63
|
+
* This will trigger auto-sync from auth provider on next login
|
|
64
|
+
*/
|
|
65
|
+
revertToDefault(): Promise<void>;
|
|
66
|
+
/**
|
|
67
|
+
* Updates the preview based on current tab
|
|
68
|
+
*/
|
|
69
|
+
private updatePreview;
|
|
70
|
+
/**
|
|
71
|
+
* Saves avatar settings to database
|
|
72
|
+
*/
|
|
73
|
+
save(): Promise<void>;
|
|
74
|
+
/**
|
|
75
|
+
* Cancels changes and reverts to saved state
|
|
76
|
+
*/
|
|
77
|
+
cancel(): void;
|
|
78
|
+
/**
|
|
79
|
+
* Shows success message temporarily
|
|
80
|
+
*/
|
|
81
|
+
private showSuccess;
|
|
82
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<UserProfileSettingsComponent, never>;
|
|
83
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<UserProfileSettingsComponent, "mj-user-profile-settings", never, {}, {}, never, never, true, never>;
|
|
84
|
+
}
|
|
85
|
+
export {};
|
|
86
|
+
//# sourceMappingURL=user-profile-settings.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"user-profile-settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/user-profile-settings/user-profile-settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAIlD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAc,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAEtE,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,qBAOa,4BAA6B,YAAW,MAAM;IAiGvD,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,aAAa;IAjGvB,WAAW,EAAG,UAAU,CAAC;IACzB,WAAW,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAS;IAG5D,aAAa,SAAM;IACnB,iBAAiB,SAAM;IACvB,mBAAmB,SAAM;IACzB,gBAAgB,SAAM;IACtB,UAAU,SAAM;IAChB,gBAAgB,SAAM;IAGtB,QAAQ,UAAS;IACjB,kBAAkB,UAAS;IAC3B,YAAY,SAAM;IAGlB,cAAc,EAAE,YAAY,EAAE,CA4E5B;gBAGQ,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa;IAGhC,QAAQ;IAWd;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAuBzB;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI;IAK5D;;OAEG;IACG,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAsCjD;;OAEG;IACH,WAAW,IAAI,IAAI;IAanB;;OAEG;IACH,WAAW,IAAI,IAAI;IAgBnB;;OAEG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAOnC;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAI1C;;;;OAIG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAOvC;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6CtC;;OAEG;IACH,OAAO,CAAC,aAAa;IAuBrB;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAkE3B;;OAEG;IACH,MAAM,IAAI,IAAI;IAMd;;OAEG;IACH,OAAO,CAAC,WAAW;yCAvZR,4BAA4B;2CAA5B,4BAA4B;CAgaxC"}
|