@memberjunction/ng-explorer-settings 3.1.1 → 3.2.0

package/dist/lib/settings/settings.component.js

@@ -17,6 +17,7 @@ import * as i4 from "../role-management/role-management.component";
 import * as i5 from "../application-management/application-management.component";
 import * as i6 from "../entity-permissions/entity-permissions.component";
 import * as i7 from "../user-profile-settings/user-profile-settings.component";
+import * as i8 from "../notification-preferences/notification-preferences.component";
 const _forTrack0 = ($index, $item) => $item.id;
 function SettingsComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8)(1, "div", 11)(2, "div", 12);
@@ -44,7 +45,7 @@ function SettingsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
 function SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵelementStart(0, "span", 37);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -55,13 +56,13 @@ function SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Temp
 } }
 function SettingsComponent_Conditional_12_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 33);
+    i0.ɵɵelementStart(0, "li", 34);
     i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_For_4_Template_li_click_0_listener() { const tab_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r4.id)); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 34);
+    i0.ɵɵelementStart(2, "span", 35);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template, 2, 3, "span", 35);
+    i0.ɵɵtemplate(4, SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template, 2, 3, "span", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r4 = ctx.$implicit;
@@ -76,23 +77,18 @@ function SettingsComponent_Conditional_12_Conditional_1_For_4_Template(rf, ctx)
 } }
 function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 37);
+    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 38);
     i0.ɵɵtext(2, "General Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 38)(4, "mj-settings-card", 39);
+    i0.ɵɵelementStart(3, "div", 39)(4, "mj-settings-card", 40);
     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")); });
-    i0.ɵɵelementStart(5, "div", 40);
+    i0.ɵɵelementStart(5, "div", 41);
     i0.ɵɵelement(6, "mj-user-profile-settings");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "mj-settings-card", 41);
+    i0.ɵɵelementStart(7, "mj-settings-card", 42);
     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")); });
-    i0.ɵɵelementStart(8, "div", 40)(9, "p");
+    i0.ɵɵelementStart(8, "div", 41)(9, "p");
     i0.ɵɵtext(10, "Customize your experience with display and behavior preferences.");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "mj-settings-card", 42);
-    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")); });
-    i0.ɵɵelementStart(12, "div", 40)(13, "p");
-    i0.ɵɵtext(14, "Configure how and when you receive notifications.");
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -100,11 +96,19 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template(rf, ctx)
     i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("profile"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("preferences"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("notifications"));
 } }
 function SettingsComponent_Conditional_12_Conditional_1_Case_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 37);
+    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 38);
+    i0.ɵɵtext(2, "Notification Preferences");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵtext(4, "Manage how you receive notifications for different types of events");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-notification-preferences");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_12_Conditional_1_Case_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "h2", 38);
     i0.ɵɵtext(2, "User Management");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 43);
@@ -113,8 +117,8 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_8_Template(rf, ctx)
     i0.ɵɵelement(5, "mj-user-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "h2", 37);
+function SettingsComponent_Conditional_12_Conditional_1_Case_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "h2", 38);
     i0.ɵɵtext(2, "Role Management");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 43);
@@ -123,20 +127,20 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_9_Template(rf, ctx)
     i0.ɵɵelement(5, "mj-role-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
+function SettingsComponent_Conditional_12_Conditional_1_Case_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
     i0.ɵɵelement(1, "mj-application-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
+function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵelement(1, "mj-entity-permissions");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_18_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-sql-logging");
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 52)(1, "h3");
     i0.ɵɵtext(2, "Performance Settings");
     i0.ɵɵelementEnd();
@@ -144,7 +148,7 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template
     i0.ɵɵtext(4, "Performance monitoring and optimization tools coming soon.");
     i0.ɵɵelementEnd()();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 53)(1, "h3");
     i0.ɵɵtext(2, "Developer Tools");
     i0.ɵɵelementEnd();
@@ -152,9 +156,9 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template
     i0.ɵɵtext(4, "Advanced developer options coming soon.");
     i0.ɵɵelementEnd()();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_12_Conditional_1_Case_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "h2", 37);
+    i0.ɵɵelementStart(0, "div", 33)(1, "h2", 38);
     i0.ɵɵtext(2, "Advanced Settings");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 44);
@@ -163,22 +167,22 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template(rf, ctx
     i0.ɵɵtext(6, "Beta features - Use with caution");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 46)(8, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("sql-logging")); });
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_13_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("sql-logging")); });
     i0.ɵɵelement(9, "i", 48);
     i0.ɵɵtext(10, " SQL Logging ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("performance")); });
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_13_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("performance")); });
     i0.ɵɵelement(12, "i", 49);
     i0.ɵɵtext(13, " Performance ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("developer")); });
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_13_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("developer")); });
     i0.ɵɵelement(15, "i", 50);
     i0.ɵɵtext(16, " Developer Tools ");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(17, "div", 51);
-    i0.ɵɵtemplate(18, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_18_Template, 1, 0, "mj-sql-logging")(19, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template, 5, 0, "div", 52)(20, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template, 5, 0, "div", 53);
+    i0.ɵɵtemplate(18, SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_18_Template, 1, 0, "mj-sql-logging")(19, SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_19_Template, 5, 0, "div", 52)(20, SettingsComponent_Conditional_12_Conditional_1_Case_13_Case_20_Template, 5, 0, "div", 53);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_6_0;
@@ -197,7 +201,7 @@ function SettingsComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (
     i0.ɵɵrepeaterCreate(3, SettingsComponent_Conditional_12_Conditional_1_For_4_Template, 5, 6, "li", 24, _forTrack0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 25)(6, "div", 26);
-    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);
+    i0.ɵɵtemplate(7, SettingsComponent_Conditional_12_Conditional_1_Case_7_Template, 11, 2, "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, 6, 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, 2, 0, "div", 32)(13, SettingsComponent_Conditional_12_Conditional_1_Case_13_Template, 21, 7, "div", 33);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_3_0;
@@ -205,15 +209,15 @@ function SettingsComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.tabs);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional((tmp_3_0 = ctx_r1.activeTab) === "general" ? 7 : tmp_3_0 === "users" ? 8 : tmp_3_0 === "roles" ? 9 : tmp_3_0 === "applications" ? 10 : tmp_3_0 === "permissions" ? 11 : tmp_3_0 === "advanced" ? 12 : -1);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r1.activeTab) === "general" ? 7 : tmp_3_0 === "notifications" ? 8 : tmp_3_0 === "users" ? 9 : tmp_3_0 === "roles" ? 10 : tmp_3_0 === "applications" ? 11 : tmp_3_0 === "permissions" ? 12 : tmp_3_0 === "advanced" ? 13 : -1);
 } }
 function SettingsComponent_Conditional_12_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 37);
+    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 38);
     i0.ɵɵtext(2, "General Settings");
     i0.ɵɵelementEnd()();
 } }
 function SettingsComponent_Conditional_12_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 37);
+    i0.ɵɵelementStart(0, "div", 29)(1, "h2", 38);
     i0.ɵɵtext(2, "User Management");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 43);
@@ -261,7 +265,7 @@ function SettingsComponent_Conditional_12_Conditional_2_Conditional_8_Template(r
 } }
 function SettingsComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21)(1, "div", 54);
-    i0.ɵɵtemplate(2, SettingsComponent_Conditional_12_Conditional_2_Case_2_Template, 3, 0, "div", 27)(3, SettingsComponent_Conditional_12_Conditional_2_Case_3_Template, 6, 0, "div", 28);
+    i0.ɵɵtemplate(2, SettingsComponent_Conditional_12_Conditional_2_Case_2_Template, 3, 0, "div", 27)(3, SettingsComponent_Conditional_12_Conditional_2_Case_3_Template, 6, 0, "div", 29);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "nav", 55)(5, "div", 56);
     i0.ɵɵrepeaterCreate(6, SettingsComponent_Conditional_12_Conditional_2_For_7_Template, 5, 6, "button", 57, _forTrack0);
@@ -279,7 +283,7 @@ function SettingsComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (
 } }
 function SettingsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵtemplate(1, SettingsComponent_Conditional_12_Conditional_1_Template, 13, 1, "div", 20)(2, SettingsComponent_Conditional_12_Conditional_2_Template, 9, 2, "div", 21);
+    i0.ɵɵtemplate(1, SettingsComponent_Conditional_12_Conditional_1_Template, 14, 1, "div", 20)(2, SettingsComponent_Conditional_12_Conditional_2_Template, 9, 2, "div", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -304,6 +308,12 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             icon: 'fa-solid fa-cog',
             badgeCount: 0
         },
+        {
+            id: 'notifications',
+            label: 'Notifications',
+            icon: 'fa-solid fa-bell',
+            badgeCount: 0
+        },
         {
             id: 'users',
             label: 'Users',
@@ -442,7 +452,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         return classes.join(' ');
     }
     static ɵfac = function SettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SettingsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 4, consts: [[1, "mj-page-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fa-solid", "fa-cog"], [1, "mj-header-actions"], [1, "mj-search"], [1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search settings...", 1, "mj-search-input", 3, "input", "value"], [1, "loading-container"], [1, "error-container"], [1, "settings-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "desktop-layout", 2, "display", "flex"], [1, "mobile-layout"], [1, "side-navigation"], [1, "nav-list"], [1, "nav-item", 3, "active"], [1, "content-area"], [1, "tab-content"], [1, "general-settings"], [1, "users-settings"], [1, "roles-settings"], [1, "applications-settings"], [1, "permissions-settings"], [1, "advanced-settings"], [1, "nav-item", 3, "click"], [1, "nav-label"], [1, "nav-badge", 3, "class"], [1, "nav-badge"], [1, "section-title"], [1, "mj-grid", "mj-grid-responsive"], ["title", "Profile Information", "icon", "fa-solid fa-user", 3, "toggle", "expanded"], [1, "card-content"], ["title", "Preferences", "icon", "fa-solid fa-sliders", 3, "toggle", "expanded"], ["title", "Notifications", "icon", "fa-solid fa-bell", 3, "toggle", "expanded"], [1, "section-description"], [1, "beta-warning"], [1, "fa-solid", "fa-flask"], [1, "advanced-tabs"], [1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-gauge-high"], [1, "fa-solid", "fa-code"], [1, "advanced-tab-content"], [1, "performance-settings"], [1, "developer-settings"], [1, "mobile-content"], [1, "mobile-navigation"], [1, "nav-tabs"], [1, "nav-tab", 3, "active"], [1, "nav-tab", "more-tab"], [1, "nav-tab", 3, "click"], [1, "tab-badge", 3, "class"], [1, "tab-label"], [1, "tab-badge"], [1, "fa-solid", "fa-ellipsis"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 4, consts: [[1, "mj-page-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fa-solid", "fa-cog"], [1, "mj-header-actions"], [1, "mj-search"], [1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search settings...", 1, "mj-search-input", 3, "input", "value"], [1, "loading-container"], [1, "error-container"], [1, "settings-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "desktop-layout", 2, "display", "flex"], [1, "mobile-layout"], [1, "side-navigation"], [1, "nav-list"], [1, "nav-item", 3, "active"], [1, "content-area"], [1, "tab-content"], [1, "general-settings"], [1, "notifications-settings"], [1, "users-settings"], [1, "roles-settings"], [1, "applications-settings"], [1, "permissions-settings"], [1, "advanced-settings"], [1, "nav-item", 3, "click"], [1, "nav-label"], [1, "nav-badge", 3, "class"], [1, "nav-badge"], [1, "section-title"], [1, "mj-grid", "mj-grid-responsive"], ["title", "Profile Information", "icon", "fa-solid fa-user", 3, "toggle", "expanded"], [1, "card-content"], ["title", "Preferences", "icon", "fa-solid fa-sliders", 3, "toggle", "expanded"], [1, "section-description"], [1, "beta-warning"], [1, "fa-solid", "fa-flask"], [1, "advanced-tabs"], [1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-gauge-high"], [1, "fa-solid", "fa-code"], [1, "advanced-tab-content"], [1, "performance-settings"], [1, "developer-settings"], [1, "mobile-content"], [1, "mobile-navigation"], [1, "nav-tabs"], [1, "nav-tab", 3, "active"], [1, "nav-tab", "more-tab"], [1, "nav-tab", 3, "click"], [1, "tab-badge", 3, "class"], [1, "tab-label"], [1, "tab-badge"], [1, "fa-solid", "fa-ellipsis"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵelementStart(4, "h1");
@@ -464,7 +474,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 12 : -1);
-        } }, dependencies: [i1.SettingsCardComponent, i2.SqlLoggingComponent, i3.UserManagementComponent, i4.RoleManagementComponent, i5.ApplicationManagementComponent, i6.EntityPermissionsComponent, i7.UserProfileSettingsComponent], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\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.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  .header-content[_ngcontent-%COMP%] {\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-title[_ngcontent-%COMP%]   .header-icon[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 1rem 0.75rem 2.75rem;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 0.95rem;\n  transition: all 0.2s;\n  background-color: #f9fafb;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]: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.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\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.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container[_ngcontent-%COMP%] {\n  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-content[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n.settings-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%]   .desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\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.nav-item[_ngcontent-%COMP%]:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active[_ngcontent-%COMP%] {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-label[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge[_ngcontent-%COMP%] {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-danger[_ngcontent-%COMP%] {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-success[_ngcontent-%COMP%] {\n  background-color: #d1fae5;\n  color: #065f46;\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;\n}\n@media (max-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\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;\n}\n\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  .settings-grid[_ngcontent-%COMP%] {\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.card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\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.beta-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\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;\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.nav-tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.nav-tab.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n.nav-tab[_ngcontent-%COMP%]:active {\n  transform: scale(0.95);\n}\n.nav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\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.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n  margin-top: 0.125rem;\n}\n\n.more-tab[_ngcontent-%COMP%] {\n  color: #6b7280;\n}\n\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.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\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.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  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.performance-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\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: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n.general-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}"] });
+        } }, dependencies: [i1.SettingsCardComponent, i2.SqlLoggingComponent, i3.UserManagementComponent, i4.RoleManagementComponent, i5.ApplicationManagementComponent, i6.EntityPermissionsComponent, i7.UserProfileSettingsComponent, i8.NotificationPreferencesComponent], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\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.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  .header-content[_ngcontent-%COMP%] {\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-title[_ngcontent-%COMP%]   .header-icon[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 1rem 0.75rem 2.75rem;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 0.95rem;\n  transition: all 0.2s;\n  background-color: #f9fafb;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]: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.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\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.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container[_ngcontent-%COMP%] {\n  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-content[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n.settings-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%]   .desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\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.nav-item[_ngcontent-%COMP%]:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active[_ngcontent-%COMP%] {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-label[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge[_ngcontent-%COMP%] {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-danger[_ngcontent-%COMP%] {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-success[_ngcontent-%COMP%] {\n  background-color: #d1fae5;\n  color: #065f46;\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;\n}\n@media (max-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\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;\n}\n\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  .settings-grid[_ngcontent-%COMP%] {\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.card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\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.beta-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\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;\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.nav-tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.nav-tab.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n.nav-tab[_ngcontent-%COMP%]:active {\n  transform: scale(0.95);\n}\n.nav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\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.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n  margin-top: 0.125rem;\n}\n\n.more-tab[_ngcontent-%COMP%] {\n  color: #6b7280;\n}\n\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.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\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.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  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.performance-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\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: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n.general-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}"] });
 };
 SettingsComponent = __decorate([
     RegisterClass(BaseNavigationComponent, 'Settings')
@@ -472,7 +482,7 @@ SettingsComponent = __decorate([
 export { SettingsComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-settings', 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: ["@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\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.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  .header-content {\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-title .header-icon {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title h1 {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search .search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search .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.header-search .search-input: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.header-search .search-input::placeholder {\n  color: #9ca3af;\n}\n\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.loading-spinner .spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner .spinner-ring:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner .spinner-ring:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner .spinner-ring:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container {\n  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-content .error-icon {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content .error-message {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content .retry-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content .retry-button i {\n  font-size: 0.875rem;\n}\n.error-content .retry-button:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content .retry-button i {\n  margin-right: 0.5rem;\n}\n\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  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\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.nav-item:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item i {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item .nav-label {\n  flex: 1;\n}\n.nav-item .nav-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item .nav-badge.badge-primary {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item .nav-badge.badge-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item .nav-badge.badge-warning {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item .nav-badge.badge-success {\n  background-color: #d1fae5;\n  color: #065f46;\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;\n}\n@media (max-width: 768px) {\n  .content-area {\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;\n}\n\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  .settings-grid {\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.card-content p {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\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.beta-warning i {\n  font-size: 1rem;\n}\n\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;\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.nav-tab.active {\n  color: #2196f3;\n}\n.nav-tab.active i {\n  transform: scale(1.1);\n}\n.nav-tab:active {\n  transform: scale(0.95);\n}\n.nav-tab i {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab .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.nav-tab .tab-badge.badge-primary {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab .tab-badge.badge-warning {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab .tab-label {\n  margin-top: 0.125rem;\n}\n\n.more-tab {\n  color: #6b7280;\n}\n\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.advanced-tabs .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.advanced-tabs .tab-btn:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs .tab-btn.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs .tab-btn.active i {\n  color: #2196f3;\n}\n.advanced-tabs .tab-btn i {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  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.performance-settings h3,\n.developer-settings h3 {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings p,\n.developer-settings p {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\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.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;\n  overflow: hidden;\n}\n.general-settings > *,\n.users-settings > *,\n.roles-settings > *,\n.applications-settings > *,\n.permissions-settings > *,\n.advanced-settings > * {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n"] }]
+        args: [{ selector: 'mj-settings', 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                    </div>\n                  </div>\n                }\n\n                @case ('notifications') {\n                  <div class=\"notifications-settings\">\n                    <h2 class=\"section-title\">Notification Preferences</h2>\n                    <p class=\"section-description\">Manage how you receive notifications for different types of events</p>\n                    <mj-notification-preferences></mj-notification-preferences>\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: ["@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\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.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  .header-content {\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-title .header-icon {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title h1 {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search .search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search .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.header-search .search-input: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.header-search .search-input::placeholder {\n  color: #9ca3af;\n}\n\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.loading-spinner .spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner .spinner-ring:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner .spinner-ring:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner .spinner-ring:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container {\n  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-content .error-icon {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content .error-message {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content .retry-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content .retry-button i {\n  font-size: 0.875rem;\n}\n.error-content .retry-button:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content .retry-button i {\n  margin-right: 0.5rem;\n}\n\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  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\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.nav-item:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item i {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item .nav-label {\n  flex: 1;\n}\n.nav-item .nav-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item .nav-badge.badge-primary {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item .nav-badge.badge-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item .nav-badge.badge-warning {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item .nav-badge.badge-success {\n  background-color: #d1fae5;\n  color: #065f46;\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;\n}\n@media (max-width: 768px) {\n  .content-area {\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;\n}\n\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  .settings-grid {\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.card-content p {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\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.beta-warning i {\n  font-size: 1rem;\n}\n\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;\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.nav-tab.active {\n  color: #2196f3;\n}\n.nav-tab.active i {\n  transform: scale(1.1);\n}\n.nav-tab:active {\n  transform: scale(0.95);\n}\n.nav-tab i {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab .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.nav-tab .tab-badge.badge-primary {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab .tab-badge.badge-warning {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab .tab-label {\n  margin-top: 0.125rem;\n}\n\n.more-tab {\n  color: #6b7280;\n}\n\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.advanced-tabs .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.advanced-tabs .tab-btn:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs .tab-btn.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs .tab-btn.active i {\n  color: #2196f3;\n}\n.advanced-tabs .tab-btn i {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  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.performance-settings h3,\n.developer-settings h3 {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings p,\n.developer-settings p {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\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.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;\n  overflow: hidden;\n}\n.general-settings > *,\n.users-settings > *,\n.roles-settings > *,\n.applications-settings > *,\n.permissions-settings > *,\n.advanced-settings > * {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n"] }]
     }], () => [], { stateChange: [{
             type: Output
         }] }); })();

package/dist/lib/settings/settings.component.js.map

@@ -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,CAAC;AACvD,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,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;ICsB5D,AADF,AADF,8BAA+B,cACA,cACE;IAG3B,AADA,AADA,0BAAgC,cACA,cACA;IAClC,iBAAM;IACN,+BAA0B;IAAA,mCAAmB;IAEjD,AADE,AAD+C,iBAAM,EAC/C,EACF;;;;IAMJ,AADF,8BAA6B,cACA;IACzB,wBAA2D;IAC3D,6BAAyB;IAAA,YAAW;IAAA,iBAAI;IACxC,kCAAyD;IAA5B,sLAAS,wBAAiB,KAAC;IACtD,wBAAmC;IACnC,2BACF;IAEJ,AADE,AADE,iBAAS,EACL,EACF;;;IANuB,eAAW;IAAX,kCAAW;;;IA2BxB,gCAA2E;IACzE,YACF;IAAA,iBAAO;;;IAFiB,0DAAkD;IACxE,cACF;IADE,kDACF;;;;IAVJ,8BAIC;IADC,gOAAS,6BAAmB,KAAC;IAE7B,oBAA0B;IAC1B,gCAAwB;IAAA,YAAe;IAAA,iBAAO;IAC9C,+GAA4C;IAK9C,iBAAK;;;;IAVH,wDAAqC;IAGlC,cAAkB;IAAlB,0BAAkB;IACG,eAAe;IAAf,kCAAe;IACvC,cAIC;IAJD,qEAIC;;;;IAYC,AADF,+BAA8B,aACF;IAAA,gCAAgB;IAAA,iBAAK;IAE7C,AADF,+BAAwC,2BAMrC;IADC,wNAAU,qBAAc,SAAS,CAAC,KAAC;IAEnC,+BAA0B;IACxB,2CAAqD;IAEzD,AADE,iBAAM,EACW;IAEnB,4CAKC;IADC,wNAAU,qBAAc,aAAa,CAAC,KAAC;IAGrC,AADF,+BAA0B,QACrB;IAAA,iFAAgE;IAGvE,AADE,AAFqE,iBAAI,EAEnE,EACW;IAEnB,6CAKC;IADC,yNAAU,qBAAc,eAAe,CAAC,KAAC;IAGvC,AADF,gCAA0B,SACrB;IAAA,kEAAiD;IAK5D,AADE,AADE,AADE,AAFsD,iBAAI,EAEpD,EACW,EACf,EACF;;;IAhCA,eAAyC;IAAzC,8DAAyC;IAWzC,eAA6C;IAA7C,kEAA6C;IAY7C,eAA+C;IAA/C,oEAA+C;;;IAcnD,AADF,+BAA4B,aACA;IAAA,+BAAe;IAAA,iBAAK;IAC9C,6BAA+B;IAAA,4DAA4C;IAAA,iBAAI;IAC/E,qCAAyC;IAC3C,iBAAM;;;IAKJ,AADF,+BAA4B,aACA;IAAA,+BAAe;IAAA,iBAAK;IAC9C,6BAA+B;IAAA,iDAAiC;IAAA,iBAAI;IACpE,qCAAyC;IAC3C,iBAAM;;;IAIN,+BAAmC;IACjC,4CAAuD;IACzD,iBAAM;;;IAIN,+BAAkC;IAChC,wCAA+C;IACjD,iBAAM;;;IA2CE,iCAAiC;;;IAI/B,AADF,+BAAkC,SAC5B;IAAA,oCAAoB;IAAA,iBAAK;IAC7B,yBAAG;IAAA,0EAA0D;IAC/D,AAD+D,iBAAI,EAC7D;;;IAIJ,AADF,+BAAgC,SAC1B;IAAA,+BAAe;IAAA,iBAAK;IACxB,yBAAG;IAAA,uDAAuC;IAC5C,AAD4C,iBAAI,EAC1C;;;;IAlDZ,AADF,+BAA+B,aACH;IAAA,iCAAiB;IAAA,iBAAK;IAChD,+BAA0B;IACxB,wBAAiC;IACjC,4BAAM;IAAA,gDAAgC;IACxC,AADwC,iBAAO,EACzC;IAIJ,AADF,+BAA2B,iBAKxB;IADC,6MAAS,sBAAe,aAAa,CAAC,KAAC;IAEvC,wBAAoC;IACpC,8BACF;IAAA,iBAAS;IACT,mCAIC;IADC,8MAAS,sBAAe,aAAa,CAAC,KAAC;IAEvC,yBAAsC;IACtC,8BACF;IAAA,iBAAS;IACT,mCAIC;IADC,8MAAS,sBAAe,WAAW,CAAC,KAAC;IAErC,yBAAgC;IAChC,kCACF;IACF,AADE,iBAAS,EACL;IAGN,gCAAkC;IAW9B,AANA,AAHA,kHAAuB,8FAGA,8FAMF;IAQ3B,AADE,iBAAM,EACF;;;;IA5CA,eAAoD;IAApD,oEAAoD;IAQpD,eAAoD;IAApD,oEAAoD;IAQpD,eAAkD;IAAlD,kEAAkD;IAUpD,eAgBC;IAhBD,0DAAA,aAAa,oBAAb,aAAa,oBAAb,WAAW,WAgBV;;;IAnJX,AADF,AAFF,+BAAmD,cAEpB,aACN;IACnB,iHAcC;IAEL,AADE,iBAAK,EACD;IAIJ,AADF,+BAA0B,cACC;IAwErB,AANA,AANA,AARA,AARA,AA1CA,kGAAmB,oFA0CF,oFAQA,sFAQO,sFAMD,uFAMH;IA6D5B,AADE,AADE,iBAAM,EACF,EACF;;;;IAzJA,eAcC;IAdD,0BAcC;IAOD,eAiIC;IAjID,kDAAA,SAAS,mBAAT,OAAO,mBAAP,OAAO,mBAAP,cAAc,oBAAd,aAAa,oBAAb,UAAU,WAiIT;;;IAcG,AADF,+BAA8B,aACF;IAAA,gCAAgB;IAE5C,AAF4C,iBAAK,EAE3C;;;IAIJ,AADF,+BAA4B,aACA;IAAA,+BAAe;IAAA,iBAAK;IAC9C,6BAA+B;IAAA,4DAA4C;IAAA,iBAAI;IAC/E,qCAAyC;IAC3C,iBAAM;;;IAiBF,gCAA2E;IACzE,YACF;IAAA,iBAAO;;;IAFiB,0DAAkD;IACxE,cACF;IADE,kDACF;;;;IATJ,kCAIC;IADC,oOAAS,6BAAmB,KAAC;IAE7B,oBAA0B;IAC1B,+GAA4C;IAK5C,gCAAwB;IAAA,YAAe;IACzC,AADyC,iBAAO,EACvC;;;;IAVP,wDAAqC;IAGlC,cAAkB;IAAlB,0BAAkB;IACrB,cAIC;IAJD,qEAIC;IACuB,eAAe;IAAf,kCAAe;;;IAIzC,kCAAiC;IAC/B,wBAAoC;IACpC,gCAAwB;IAAA,oBAAI;IAC9B,AAD8B,iBAAO,EAC5B;;;IAzCf,AAFF,+BAA2B,cAEG;IAQxB,AANA,iGAAmB,oFAMF;IASrB,iBAAM;IAIJ,AADF,+BAA+B,cACP;IACpB,qHAcC;IACD,2GAAuB;IAQ7B,AADE,AADE,iBAAM,EACF,EACF;;;;IA5CF,eAeC;IAfD,kDAAA,SAAS,mBAAT,OAAO,UAeN;IAMC,eAcC;IAdD,cAAA,kBAAW,CAAC,EAAE,CAAC,CAAC,CAcf;IACD,eAKC;IALD,iDAKC;;;IAjNX,+BAA8B;IAoK5B,AAlKA,2FAAiB,6EAkKD;IAkDlB,iBAAM;;;IApNJ,cA+JC;IA/JD,2CA+JC;IAGD,cAiDC;IAjDD,0CAiDC;;AD9OA,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,uBAAuB;IAClD,WAAW,GAAG,IAAI,YAAY,EAA0B,CAAC;IAEnE,mBAAmB;IACZ,SAAS,GAAG,SAAS,CAAC;IACtB,iBAAiB,GAAG,aAAa,CAAC;IAClC,WAAW,GAAG,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;IAC9C,SAAS,GAAG,KAAK,CAAC;IAClB,KAAK,GAAkB,IAAI,CAAC;IAEnC,oBAAoB;IACb,IAAI,GAAkB;QAC3B;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,iBAAiB;YACvB,UAAU,EAAE,CAAC;SACd;QACD;YACE,EAAE,EAAE,OAAO;YACX,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,mBAAmB;YACzB,UAAU,EAAE,CAAC;SACd;QACD;YACE,EAAE,EAAE,OAAO;YACX,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,2BAA2B;YACjC,UAAU,EAAE,CAAC;SACd;QACD;YACE,EAAE,EAAE,cAAc;YAClB,KAAK,EAAE,cAAc;YACrB,IAAI,EAAE,sBAAsB;YAC5B,UAAU,EAAE,CAAC;SACd;QACD;YACE,EAAE,EAAE,aAAa;YACjB,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,kBAAkB;YACxB,UAAU,EAAE,CAAC;SACd;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,mBAAmB;YACzB,UAAU,EAAE,CAAC;YACb,UAAU,EAAE,SAAS;SACtB;KACF,CAAC;IAEF,0BAA0B;IACnB,gBAAgB,GAAa,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAE/D,eAAe;IACR,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;IAElC,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;IAEvC;QACE,2BAA2B;QAC3B,KAAK,EAAE,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACzB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,WAAW;aACb,IAAI,CACH,YAAY,CAAC,GAAG,CAAC,EACjB,oBAAoB,EAAE,EACtB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;aACA,SAAS,CAAC,IAAI,CAAC,EAAE;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,KAAK,CAAC,eAAe;QAC1B,IAAI,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,qDAAqD;YACrD,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,8BAA8B,CAAC;YAC5C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAC1D,CAAC;IAEM,WAAW,CAAC,KAAa;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,cAAc,CAAC,KAAY;QAChC,MAAM,IAAI,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAEM,aAAa,CAAC,SAAiB;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACvD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,iBAAiB,CAAC,SAAiB;QACxC,OAAO,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;IAEM,cAAc,CAAC,KAAa;QACjC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IACjC,CAAC;IAEO,aAAa,CAAC,IAAY;QAChC,yDAAyD;QACzD,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;IAC1C,CAAC;IAEO,eAAe;QACrB,MAAM,KAAK,GAA2B;YACpC,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;YAClC,gBAAgB,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC;SAC7C,CAAC;QACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEM,aAAa,CAAC,KAAsC;QACzD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;QACnC,CAAC;QACD,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QACD,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEM,UAAU,CAAC,GAAgB;QAChC,OAAO,GAAG,CAAC,IAAI,CAAC;IAClB,CAAC;IAEM,WAAW,CAAC,GAAgB;QACjC,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;QACD,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;YACzC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,CAAC;QACD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;2GAhLU,iBAAiB;6DAAjB,iBAAiB;YCxB1B,AADF,AAFF,8BAA+B,aAEN,aACQ;YAC3B,uBAA+B;YAC/B,0BAAI;YAAA,wBAAQ;YACd,AADc,iBAAK,EACb;YAGJ,AADF,8BAA+B,aACN;YACrB,uBAAiD;YACjD,gCAME;YAFA,mGAAS,0BAAsB,IAAC;YAKxC,AADE,AADE,AAPE,iBAME,EACE,EACF,EACF;YA+BN,AAdA,AAdA,4EAAiB,+DAcU,gEAcC;YAyN9B,iBAAM;;YA5PI,eAA2B;YAA3B,6CAA2B;YAOnC,cAWC;YAXD,yCAWC;YAGD,cAWC;YAXD,uDAWC;YAGD,cAwNC;YAxND,wDAwNC;;;ADhPU,iBAAiB;IAD7B,aAAa,CAAC,uBAAuB,EAAE,UAAU,CAAC;GACtC,iBAAiB,CAiL7B;;iFAjLY,iBAAiB;cAN7B,SAAS;2BACE,aAAa;oBAMb,WAAW;kBAApB,MAAM;;kFADI,iBAAiB"}
+{"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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"}

package/dist/lib/sql-logging/sql-logging.component.d.ts

@@ -72,6 +72,14 @@ export declare class SqlLoggingComponent extends BaseDashboard implements OnDest
     refreshInterval: number;
     /** Whether the start session dialog is currently visible */
     showStartSessionDialog: boolean;
+    /** Whether the log viewer is in expanded (fullscreen) mode */
+    isLogViewerExpanded: boolean;
+    /** Whether the stop session confirmation dialog is visible */
+    showStopConfirmDialog: boolean;
+    /** Session pending stop confirmation (single session or null for all) */
+    sessionToStop: SqlLoggingSession | null;
+    /** Whether stopping all sessions (vs single session) */
+    isStoppingAll: boolean;
     /** Options for creating a new SQL logging session */
     newSessionOptions: {
         /** Custom filename for the log file */
@@ -86,12 +94,22 @@ export declare class SqlLoggingComponent extends BaseDashboard implements OnDest
         prettyPrint: boolean;
         /** Human-readable name for the session */
         sessionName: string;
+        /** Regex filter options */
+        filterPatterns: string;
+        filterType: "exclude" | "include";
+        verboseOutput: boolean;
+        defaultSchemaName: string;
     };
     /** Available options for SQL statement type filtering */
     statementTypeOptions: {
         text: string;
         value: string;
     }[];
+    /** Options for Regex filter */
+    filterTypeOptions: {
+        text: string;
+        value: string;
+    }[];
     constructor(sharedService: SharedService);
     GetResourceDisplayName(data: ResourceData): Promise<string>;
     protected initDashboard(): void;
@@ -122,17 +140,17 @@ export declare class SqlLoggingComponent extends BaseDashboard implements OnDest
      */
     startNewSession(): Promise<void>;
     /**
-     * Stops a specific SQL logging session.
+     * Executes the stop operation for a specific SQL logging session.
+     * Called after user confirms via the confirmation dialog.
      *
      * @param session - The session object to stop
-     * @param event - Optional event to stop propagation
      */
-    stopSession(session: any, event?: Event): Promise<void>;
+    private executeStopSession;
     /**
-     * Stops all currently active SQL logging sessions.
-     * Prompts for confirmation before proceeding.
+     * Executes the stop operation for all active SQL logging sessions.
+     * Called after user confirms via the confirmation dialog.
      */
-    stopAllSessions(): Promise<void>;
+    private executeStopAllSessions;
     /**
      * Selects a session for viewing and loads its log content.
      *
@@ -182,10 +200,43 @@ export declare class SqlLoggingComponent extends BaseDashboard implements OnDest
     getFileName(filePath: string): string;
     /**
      * Calculates the total number of SQL statements across all active sessions.
-     *
      * @returns Total statement count
      */
     getTotalStatementCount(): number;
+    /**
+     * Parses a string of filter patterns (comma or newline separated) into an array
+     * @param patternsString - Comma or newline separated patterns
+     * @returns Array of pattern strings, or undefined if empty
+     */
+    private parseFilterPatterns;
+    /**
+     * Toggles the log viewer between normal and expanded (fullscreen) mode.
+     */
+    toggleLogViewerExpand(): void;
+    /**
+     * Handles keyboard events for the component.
+     * Closes expanded log viewer or confirmation dialog when Escape is pressed.
+     */
+    onEscapeKey(): void;
+    /**
+     * Opens the confirmation dialog for stopping a single session.
+     *
+     * @param session - The session to stop
+     * @param event - Optional event to stop propagation
+     */
+    openStopSessionConfirm(session: SqlLoggingSession, event?: Event): void;
+    /**
+     * Opens the confirmation dialog for stopping all sessions.
+     */
+    openStopAllSessionsConfirm(): void;
+    /**
+     * Closes the stop confirmation dialog without taking action.
+     */
+    cancelStopConfirm(): void;
+    /**
+     * Confirms and executes the stop action (single session or all sessions).
+     */
+    confirmStopSession(): Promise<void>;
     /**
      * Debug method to test contextUser flow for SQL filtering.
      * This shows how the new architecture handles user context without storing email in provider.

package/dist/lib/sql-logging/sql-logging.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sql-logging.component.d.ts","sourceRoot":"","sources":["../../../src/lib/sql-logging/sql-logging.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sql-logging.component.d.ts","sourceRoot":"","sources":["../../../src/lib/sql-logging/sql-logging.component.ts"],"names":[],"mappings":"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"}