@memberjunction/ng-explorer-settings 2.50.0 → 2.52.0

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

@@ -4,257 +4,491 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component } from '@angular/core';
-import { NavigationEnd } from '@angular/router';
-import { Metadata } from '@memberjunction/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { RegisterClass } from '@memberjunction/global';
-import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { SharedSettingsModule } from '../shared/shared-settings.module';
+import { SqlLoggingComponent } from '../sql-logging/sql-logging.component';
+import { UserManagementComponent } from '../user-management/user-management.component';
+import { RoleManagementComponent } from '../role-management/role-management.component';
+import { ApplicationManagementComponent } from '../application-management/application-management.component';
+import { EntityPermissionsComponent } from '../entity-permissions/entity-permissions.component';
 import { BaseNavigationComponent } from '@memberjunction/ng-shared';
-import { filter } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/router";
-import * as i2 from "@angular/common";
-import * as i3 from "@memberjunction/ng-container-directives";
-import * as i4 from "@memberjunction/ng-entity-permissions";
-import * as i5 from "@memberjunction/ng-simple-record-list";
-import * as i6 from "../single-role/single-role.component";
-import * as i7 from "../single-user/single-user.component";
-import * as i8 from "../single-application/single-application.component";
-const _c0 = () => ["Name", "Email", "IsActive", "Type"];
-const _c1 = () => ["Name", "Description"];
-function SettingsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+import * as i1 from "../shared/settings-card.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);
+    i0.ɵɵelement(3, "div", 13)(4, "div", 13)(5, "div", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 14);
+    i0.ɵɵtext(7, "Loading settings...");
+    i0.ɵɵelementEnd()()();
+} }
+function SettingsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵlistener("click", function SettingsComponent_div_2_Template_div_click_0_listener() { const o_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectItem(o_r2.value)); });
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 15);
+    i0.ɵɵelement(2, "i", 16);
+    i0.ɵɵelementStart(3, "p", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 18);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
+    i0.ɵɵelement(6, "i", 19);
+    i0.ɵɵtext(7, " Try Again ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    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.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const o_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("selected", ctx_r2.leftNavItemSelected(o_r2));
+    const tab_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("badge-" + (tab_r4.badgeColor || "primary"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(o_r2.label);
+    i0.ɵɵtextInterpolate1(" ", tab_r4.badgeCount, " ");
 } }
-function SettingsComponent_Case_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-entity-permissions-selector-with-grid");
+function SettingsComponent_Conditional_12_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 33);
+    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.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template, 2, 3, "span", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r4.id);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(tab_r4.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tab_r4.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r4.badgeCount && tab_r4.badgeCount > 0 ? 4 : -1);
 } }
-function SettingsComponent_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-simple-record-list", 11);
-    i0.ɵɵlistener("RecordSelected", function SettingsComponent_Case_5_Template_mj_simple_record_list_RecordSelected_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectUser($event)); })("CustomActionConfirmed", function SettingsComponent_Case_5_Template_mj_simple_record_list_CustomActionConfirmed_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleUserActivation($event)); });
+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.ɵɵtext(2, "General Settings");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 38)(4, "mj-settings-card", 39);
+    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)(6, "p");
+    i0.ɵɵtext(7, "Manage your profile information and preferences.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "mj-settings-card", 41);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("preferences")); });
+    i0.ɵɵelementStart(9, "div", 40)(10, "p");
+    i0.ɵɵtext(11, "Customize your experience with display and behavior preferences.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "mj-settings-card", 42);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("notifications")); });
+    i0.ɵɵelementStart(13, "div", 40)(14, "p");
+    i0.ɵɵtext(15, "Configure how and when you receive notifications.");
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(8, _c0))("AllowDelete", false)("AllowCustomAction", true)("CustomActionIconFunction", ctx_r2.getUserToggleIcon)("CustomActionTooltipFunction", ctx_r2.getUserToggleTooltip)("CustomActionDialogTitle", "Toggle User Activation")("CustomActionDialogMessage", "Are you sure you want to toggle activation for this user?")("CustomActionDialogInfo", "Active users can log in to the system. Inactive users cannot log in.");
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("profile"));
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("preferences"));
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("notifications"));
 } }
-function SettingsComponent_Case_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-single-user", 5);
+function SettingsComponent_Conditional_12_Conditional_1_Case_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 37);
+    i0.ɵɵtext(2, "User Management");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
+    i0.ɵɵelementEnd();
+    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);
+    i0.ɵɵtext(2, "Role Management");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵtext(4, "Define and manage security roles.");
+    i0.ɵɵelementEnd();
+    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);
+    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);
+    i0.ɵɵelement(1, "mj-entity-permissions");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_12_Conditional_1_Case_12_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) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "h3");
+    i0.ɵɵtext(2, "Performance Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    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) {
+    i0.ɵɵelementStart(0, "div", 53)(1, "h3");
+    i0.ɵɵtext(2, "Developer Tools");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Advanced developer options coming soon.");
+    i0.ɵɵelementEnd()();
+} }
+function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "h2", 37);
+    i0.ɵɵtext(2, "Advanced Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 44);
+    i0.ɵɵelement(4, "i", 45);
+    i0.ɵɵelementStart(5, "span");
+    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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("UserID", ctx_r2.selectedUserID);
+    let tmp_6_0;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(8);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "sql-logging");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "performance");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "developer");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.advancedActiveTab) === "sql-logging" ? 18 : tmp_6_0 === "performance" ? 19 : tmp_6_0 === "developer" ? 20 : -1);
 } }
-function SettingsComponent_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-simple-record-list", 12);
-    i0.ɵɵlistener("RecordSelected", function SettingsComponent_Case_7_Template_mj_simple_record_list_RecordSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectRole($event)); });
+function SettingsComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "nav", 22)(2, "ul", 23);
+    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, 16, 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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+} }
+function SettingsComponent_Conditional_12_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 37);
+    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.ɵɵtext(2, "User Management");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-user-management");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_12_Conditional_2_For_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(1, _c1));
+    const tab_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("badge-" + (tab_r8.badgeColor || "primary"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", tab_r8.badgeCount, " ");
 } }
-function SettingsComponent_Case_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-single-role", 7);
+function SettingsComponent_Conditional_12_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_2_For_7_Template_button_click_0_listener() { const tab_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r8.id)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵtemplate(2, SettingsComponent_Conditional_12_Conditional_2_For_7_Conditional_2_Template, 2, 3, "span", 60);
+    i0.ɵɵelementStart(3, "span", 61);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("RoleID", ctx_r2.selectedRoleID);
+    const tab_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r8.id);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(tab_r8.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r8.badgeCount && tab_r8.badgeCount > 0 ? 2 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tab_r8.label);
 } }
-function SettingsComponent_Case_9_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-simple-record-list", 13);
-    i0.ɵɵlistener("RecordSelected", function SettingsComponent_Case_9_Template_mj_simple_record_list_RecordSelected_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectApplication($event)); });
+function SettingsComponent_Conditional_12_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(2, "span", 61);
+    i0.ɵɵtext(3, "More");
+    i0.ɵɵelementEnd()();
+} }
+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.ɵɵ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);
+    i0.ɵɵtemplate(8, SettingsComponent_Conditional_12_Conditional_2_Conditional_8_Template, 4, 0, "button", 58);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(1, _c1));
+    let tmp_2_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_2_0 = ctx_r1.activeTab) === "general" ? 2 : tmp_2_0 === "users" ? 3 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.tabs.slice(0, 5));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.tabs.length > 5 ? 8 : -1);
 } }
-function SettingsComponent_Case_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-single-application", 9);
+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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ApplicationID", ctx_r2.selectedApplicationID);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isMobile ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isMobile ? 2 : -1);
 } }
-export var SettingsItem;
-(function (SettingsItem) {
-    SettingsItem["EntityPermissions"] = "EntityPermissions";
-    SettingsItem["Users"] = "Users";
-    SettingsItem["User"] = "User";
-    SettingsItem["Roles"] = "Roles";
-    SettingsItem["Role"] = "Role";
-    SettingsItem["Applications"] = "Applications";
-    SettingsItem["Application"] = "Application";
-})(SettingsItem || (SettingsItem = {}));
 let SettingsComponent = class SettingsComponent extends BaseNavigationComponent {
-    router;
-    activatedRoute;
-    currentItem = SettingsItem.Users;
-    baseRoute = '/settings';
-    selectedRoleID = '';
-    selectedUserID = "";
-    selectedApplicationName = '';
-    selectedApplicationID = '';
-    options = [
-        { label: 'Users', value: SettingsItem.Users },
-        { label: 'Roles', value: SettingsItem.Roles },
-        { label: 'Applications', value: SettingsItem.Applications },
-        { label: 'Entity Permissions', value: SettingsItem.EntityPermissions }
+    stateChange = new EventEmitter();
+    // State management
+    activeTab = 'general';
+    advancedActiveTab = 'sql-logging';
+    searchTerm$ = new BehaviorSubject('');
+    isLoading = false;
+    error = null;
+    // Tab configuration
+    tabs = [
+        {
+            id: 'general',
+            label: 'General',
+            icon: 'fa-solid fa-cog',
+            badgeCount: 0
+        },
+        {
+            id: 'users',
+            label: 'Users',
+            icon: 'fa-solid fa-users',
+            badgeCount: 0
+        },
+        {
+            id: 'roles',
+            label: 'Roles',
+            icon: 'fa-solid fa-shield-halved',
+            badgeCount: 0
+        },
+        {
+            id: 'applications',
+            label: 'Applications',
+            icon: 'fa-solid fa-grid-2',
+            badgeCount: 0
+        },
+        {
+            id: 'permissions',
+            label: 'Permissions',
+            icon: 'fa-solid fa-lock',
+            badgeCount: 0
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            icon: 'fa-solid fa-flask',
+            badgeCount: 1,
+            badgeColor: 'warning'
+        }
     ];
-    selectItem(item, changeRoute = true) {
-        if (typeof item === 'string')
-            this.currentItem = SettingsItem[item];
-        else
-            this.currentItem = item;
-        if (changeRoute)
-            this.changeRoute(item.toLowerCase());
-    }
-    changeRoute(subPath) {
-        // Constructs a navigation path relative to the /settings base route
-        this.router.navigate([this.baseRoute, subPath]);
-    }
-    constructor(router, activatedRoute) {
+    // Section expansion state
+    expandedSections = ['profile', 'preferences'];
+    // Mobile state
+    isMobile = window.innerWidth < 768;
+    destroy$ = new Subject();
+    constructor() {
+        // Listen for window resize
         super();
-        this.router = router;
-        this.activatedRoute = activatedRoute;
+        window.addEventListener('resize', this.handleResize.bind(this));
     }
     ngOnInit() {
-        // manually update the first time
-        this.updateComponentStateBasedOnPath();
-        // Listen to changes in the route
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-            this.updateComponentStateBasedOnPath();
+        this.setupSearchFilter();
+        this.loadInitialData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    setupSearchFilter() {
+        this.searchTerm$
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe(term => {
+            this.filterContent(term);
+            this.emitStateChange();
         });
     }
-    updateComponentStateBasedOnPath() {
-        // On each navigation end, access the current URL from window.location
-        const fullPath = window.location.pathname + window.location.search;
-        // Split the fullPath into segments and query string as needed
-        const [path, queryString] = fullPath.split('?');
-        const segments = path.split('/').filter(segment => segment.length > 0);
-        const firstSegment = segments.length > 1 ? segments[1] : '';
-        switch (firstSegment.trim().toLowerCase()) {
-            case 'entitypermissions':
-                this.selectItem(SettingsItem.EntityPermissions, false);
-                break;
-            case 'applications':
-                this.selectItem(SettingsItem.Applications, false);
-                break;
-            case 'application':
-                this.selectedApplicationName = segments.length > 2 ? segments[2] : '';
-                const md = new Metadata();
-                this.selectedApplicationID = md.Applications.find(a => a.Name === this.selectedApplicationName)?.ID ?? '';
-                this.selectItem(SettingsItem.Application, false);
-                break;
-            case 'users':
-                this.selectItem(SettingsItem.Users, false);
-                break;
-            case 'user':
-                this.selectedUserID = segments.length > 2 ? segments[2] : "";
-                this.selectItem(SettingsItem.User, false);
-                break;
-            case 'roles':
-                this.selectItem(SettingsItem.Roles, false);
-                break;
-            case 'role':
-                this.selectedRoleID = segments.length > 2 ? segments[2] : '';
-                this.selectItem(SettingsItem.Role, false);
-                break;
-            default:
-                break;
+    async loadInitialData() {
+        try {
+            this.isLoading = true;
+            // TODO: Load user settings, roles, applications data
+            await this.simulateDataLoad();
+            this.isLoading = false;
+        }
+        catch (error) {
+            this.error = 'Failed to load settings data';
+            this.isLoading = false;
         }
     }
-    selectApplication(a) {
-        this.selectRoute('/settings/application', a.Name);
+    async simulateDataLoad() {
+        return new Promise(resolve => setTimeout(resolve, 500));
     }
-    selectRole(r) {
-        this.selectRoute('/settings/role', r.ID);
+    onTabChange(tabId) {
+        this.activeTab = tabId;
+        this.emitStateChange();
     }
-    selectUser(u) {
-        this.selectRoute('/settings/user', u.ID);
+    onSearchChange(event) {
+        const term = event.target.value;
+        this.searchTerm$.next(term);
     }
-    /**
-     * Function that returns the appropriate Font Awesome icon for the user toggle button
-     * based on the user's IsActive status
-     */
-    getUserToggleIcon(record) {
-        const user = record;
-        return user.IsActive ? 'fa-user-lock' : 'fa-user-check';
+    toggleSection(sectionId) {
+        const index = this.expandedSections.indexOf(sectionId);
+        if (index === -1) {
+            this.expandedSections.push(sectionId);
+        }
+        else {
+            this.expandedSections.splice(index, 1);
+        }
+        this.emitStateChange();
     }
-    /**
-     * Function that returns the appropriate tooltip text for the user toggle button
-     * based on the user's IsActive status
-     */
-    getUserToggleTooltip(record) {
-        const user = record;
-        return user.IsActive ? 'Deactivate user' : 'Activate user';
+    isSectionExpanded(sectionId) {
+        return this.expandedSections.includes(sectionId);
     }
-    /**
-     * Handles toggling a user's activation status when the custom action is confirmed
-     */
-    async toggleUserActivation(record) {
-        try {
-            const user = record;
-            // Get current status
-            const currentlyActive = user.IsActive;
-            const userName = user.Name;
-            // Toggle the IsActive flag
-            user.IsActive = !currentlyActive;
-            if (await user.Save()) {
-                MJNotificationService.Instance.CreateSimpleNotification(`User ${userName} has been ${currentlyActive ? 'deactivated' : 'activated'} successfully.`, 'success', 3000);
-                // Refresh the user list
-                this.selectItem(SettingsItem.Users);
-            }
-            else {
-                MJNotificationService.Instance.CreateSimpleNotification(`Error ${currentlyActive ? 'deactivating' : 'activating'} user ${userName}`, 'error', 5000);
-            }
+    setAdvancedTab(tabId) {
+        this.advancedActiveTab = tabId;
+    }
+    filterContent(term) {
+        // TODO: Implement content filtering based on search term
+        console.log('Filtering content with term:', term);
+    }
+    handleResize() {
+        this.isMobile = window.innerWidth < 768;
+    }
+    emitStateChange() {
+        const state = {
+            activeTab: this.activeTab,
+            searchTerm: this.searchTerm$.value,
+            expandedSections: [...this.expandedSections]
+        };
+        this.stateChange.emit(state);
+    }
+    loadUserState(state) {
+        if (state.activeTab) {
+            this.activeTab = state.activeTab;
         }
-        catch (error) {
-            console.error('Error toggling user activation:', error);
-            MJNotificationService.Instance.CreateSimpleNotification('An error occurred while toggling user activation.', 'error', 5000);
+        if (state.searchTerm !== undefined) {
+            this.searchTerm$.next(state.searchTerm);
+        }
+        if (state.expandedSections) {
+            this.expandedSections = [...state.expandedSections];
         }
     }
-    selectRoute(route, value) {
-        this.router.navigate([route, value]);
+    getTabIcon(tab) {
+        return tab.icon;
     }
-    leftNavItemSelected(option) {
-        // if the currentItem matches it directly or if adding an S to the current item matches it, then return true
-        // for example for Application/Applications we want to match so the left nav item is highlighted
-        return option.value === this.currentItem || option.value === this.currentItem + 's';
+    getTabClass(tab) {
+        const classes = ['settings-tab'];
+        if (this.activeTab === tab.id) {
+            classes.push('active');
+        }
+        if (tab.badgeCount && tab.badgeCount > 0) {
+            classes.push('has-badge');
+        }
+        return classes.join(' ');
     }
-    static ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 6, consts: [["mjFillContainer", "", 1, "container", 3, "bottomMargin", "rightMargin"], ["mjFillContainer", "", 1, "options-container", 3, "fillWidth"], ["class", "option-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], ["mjFillContainer", "", 1, "display-container", 3, "fillWidth"], ["EntityName", "Users", "SortBy", "Name", 3, "Columns", "AllowDelete", "AllowCustomAction", "CustomActionIconFunction", "CustomActionTooltipFunction", "CustomActionDialogTitle", "CustomActionDialogMessage", "CustomActionDialogInfo"], [3, "UserID"], ["EntityName", "Roles", "SortBy", "Name", 3, "Columns"], ["mjFillContainer", "", 3, "RoleID"], ["EntityName", "Applications", "SortBy", "Name", 3, "Columns"], [3, "ApplicationID"], [1, "option-item", 3, "click"], ["EntityName", "Users", "SortBy", "Name", 3, "RecordSelected", "CustomActionConfirmed", "Columns", "AllowDelete", "AllowCustomAction", "CustomActionIconFunction", "CustomActionTooltipFunction", "CustomActionDialogTitle", "CustomActionDialogMessage", "CustomActionDialogInfo"], ["EntityName", "Roles", "SortBy", "Name", 3, "RecordSelected", "Columns"], ["EntityName", "Applications", "SortBy", "Name", 3, "RecordSelected", "Columns"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, SettingsComponent_div_2_Template, 2, 3, "div", 2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 3);
-            i0.ɵɵtemplate(4, SettingsComponent_Case_4_Template, 1, 0, "mj-entity-permissions-selector-with-grid")(5, SettingsComponent_Case_5_Template, 1, 9, "mj-simple-record-list", 4)(6, SettingsComponent_Case_6_Template, 1, 1, "mj-single-user", 5)(7, SettingsComponent_Case_7_Template, 1, 2, "mj-simple-record-list", 6)(8, SettingsComponent_Case_8_Template, 1, 1, "mj-single-role", 7)(9, SettingsComponent_Case_9_Template, 1, 2, "mj-simple-record-list", 8)(10, SettingsComponent_Case_10_Template, 1, 1, "mj-single-application", 9);
+    static ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 13, vars: 4, consts: [[1, "settings-container"], [1, "settings-header"], [1, "header-content"], [1, "header-title"], [1, "fa-solid", "fa-cog", "header-icon"], [1, "header-search"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search settings...", 1, "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, "settings-grid"], ["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) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(5, "h1");
+            i0.ɵɵtext(6, "Settings");
             i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "div", 5);
+            i0.ɵɵelement(8, "i", 6);
+            i0.ɵɵelementStart(9, "input", 7);
+            i0.ɵɵlistener("input", function SettingsComponent_Template_input_input_9_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(10, SettingsComponent_Conditional_10_Template, 8, 0, "div", 8)(11, SettingsComponent_Conditional_11_Template, 8, 1, "div", 9)(12, SettingsComponent_Conditional_12_Template, 3, 2, "div", 10);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            let tmp_5_0;
-            i0.ɵɵproperty("bottomMargin", 5)("rightMargin", 0);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("fillWidth", false);
+            i0.ɵɵadvance(9);
+            i0.ɵɵproperty("value", ctx.searchTerm$.value);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.options);
+            i0.ɵɵconditional(ctx.isLoading ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("fillWidth", false);
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_5_0 = ctx.currentItem) === "EntityPermissions" ? 4 : tmp_5_0 === "Users" ? 5 : tmp_5_0 === "User" ? 6 : tmp_5_0 === "Roles" ? 7 : tmp_5_0 === "Role" ? 8 : tmp_5_0 === "Applications" ? 9 : tmp_5_0 === "Application" ? 10 : -1);
-        } }, dependencies: [i2.NgForOf, i3.FillContainer, i4.EntityPermissionsSelectorWithGridComponent, i5.SimpleRecordListComponent, i6.SingleRoleComponent, i7.SingleUserComponent, i8.SingleApplicationComponent], styles: [".container[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  overflow: hidden;  \n}\n\n.options-container[_ngcontent-%COMP%] {\n  float: left; \n\n  width: 150px; \n\n  flex: 0 0 150px;\n  padding: 10px;\n  border-right: solid 1px lightgray;\n  box-sizing: border-box; \n\n}\n\n.option-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n  margin-bottom: 10px; \n\n  padding: 5px 10px; \n\n  border-radius: 4px; \n\n}\n\n.display-container[_ngcontent-%COMP%] {\n  display: block; \n\n  margin-left: 160px; \n\n  padding: 10px;\n  box-sizing: border-box; \n\n}\n\n.selected[_ngcontent-%COMP%] {\n  background-color: #007bff; \n\n  color: white; \n\n  padding: 5px 10px; \n\n  border-radius: 4px; \n\n}"] });
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 12 : -1);
+        } }, dependencies: [CommonModule,
+            SharedSettingsModule, i1.SettingsCardComponent, SqlLoggingComponent,
+            UserManagementComponent,
+            RoleManagementComponent,
+            ApplicationManagementComponent,
+            EntityPermissionsComponent], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f5f7fa;\n  overflow: hidden;\n  position: relative;\n}\n\n//[_ngcontent-%COMP%]   Header[_ngcontent-%COMP%]   Section\n.settings-header[_ngcontent-%COMP%] {\n  background-color: #ffffff;\n  border-bottom: 1px solid #e5e7eb;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n  z-index: 10;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  padding: 1.5rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 2rem;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n  }\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n\n  .header-icon {\n    font-size: 1.75rem;\n    color: #2196f3;\n  }\n\n  h1 {\n    margin: 0;\n    font-size: 1.75rem;\n    font-weight: 600;\n    color: #1f2937;\n  }\n}\n\n.header-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n    background-color: #f9fafb;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      background-color: #ffffff;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    &::placeholder {\n      color: #9ca3af;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%]   Error[_ngcontent-%COMP%]   State\n.error-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n  text-align: center;\n  max-width: 400px;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n    font-size: 1rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n    padding: 0.75rem 1.5rem;\n    font-size: 0.95rem;\n    border-radius: 8px;\n    transition: all 0.2s;\n\n    &:hover {\n      background-color: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n    }\n\n    i {\n      margin-right: 0.5rem;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Main[_ngcontent-%COMP%]   Content\n.settings-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n//[_ngcontent-%COMP%]   Desktop[_ngcontent-%COMP%]   Layout\n.desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n//[_ngcontent-%COMP%]   More[_ngcontent-%COMP%]   specific[_ngcontent-%COMP%]   selector[_ngcontent-%COMP%]   to[_ngcontent-%COMP%]   ensure[_ngcontent-%COMP%]   it[_ngcontent-%COMP%]   applies\n.settings-content[_ngcontent-%COMP%]   .desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n//   Deep   selector   for   Angular   ViewEncapsulation\n[_nghost-%COMP%]     .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.side-navigation[_ngcontent-%COMP%] {\n  width: 260px;\n  background-color: #ffffff;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  flex-shrink: 0;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: #4b5563;\n  font-size: 0.95rem;\n\n  &:hover {\n    background-color: #f3f4f6;\n    color: #1f2937;\n  }\n\n  &.active {\n    background-color: #eff6ff;\n    color: #2196f3;\n    font-weight: 500;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background-color: #2196f3;\n    }\n  }\n\n  i {\n    width: 20px;\n    margin-right: 0.75rem;\n    font-size: 1.1rem;\n  }\n\n  .nav-label {\n    flex: 1;\n  }\n\n  .nav-badge {\n    padding: 0.125rem 0.5rem;\n    border-radius: 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    \n    &.badge-primary {\n      background-color: #dbeafe;\n      color: #1e40af;\n    }\n\n    &.badge-danger {\n      background-color: #fee2e2;\n      color: #991b1b;\n    }\n\n    &.badge-warning {\n      background-color: #fef3c7;\n      color: #92400e;\n    }\n\n    &.badge-success {\n      background-color: #d1fae5;\n      color: #065f46;\n    }\n  }\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0; // Important for proper flex sizing\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  min-height: 0; // Important for proper flex sizing\n}\n\n//[_ngcontent-%COMP%]   Section[_ngcontent-%COMP%]   Styles\n.section-title[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1f2937;\n  margin: 0 0 0.5rem 0;\n}\n\n.section-description[_ngcontent-%COMP%] {\n  color: #6b7280;\n  margin: 0 0 2rem 0;\n  font-size: 0.95rem;\n}\n\n.settings-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n}\n\n.card-content[_ngcontent-%COMP%] {\n  padding: 1rem;\n  color: #4b5563;\n  font-size: 0.95rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    line-height: 1.6;\n  }\n}\n\n//[_ngcontent-%COMP%]   Beta[_ngcontent-%COMP%]   Warning\n.beta-warning[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background-color: #fef3c7;\n  color: #92400e;\n  border-radius: 6px;\n  font-size: 0.875rem;\n  margin-bottom: 1.5rem;\n\n  i {\n    font-size: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Mobile[_ngcontent-%COMP%]   Layout\n.mobile-layout[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.mobile-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: #ffffff;\n  border-top: 1px solid #e5e7eb;\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n}\n\n.nav-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  padding: 0.5rem 0;\n}\n\n.nav-tab[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  background: none;\n  border: none;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-size: 0.75rem;\n  min-width: 60px;\n\n  &.active {\n    color: #2196f3;\n\n    i {\n      transform: scale(1.1);\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  i {\n    font-size: 1.25rem;\n    transition: transform 0.2s;\n  }\n\n  .tab-badge {\n    position: absolute;\n    top: 0.25rem;\n    right: 0.25rem;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    font-size: 0.625rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    &.badge-primary {\n      background-color: #2196f3;\n      color: white;\n    }\n\n    &.badge-warning {\n      background-color: #ff9800;\n      color: white;\n    }\n  }\n\n  .tab-label {\n    margin-top: 0.125rem;\n  }\n}\n\n.more-tab[_ngcontent-%COMP%] {\n  color: #6b7280;\n}\n\n//[_ngcontent-%COMP%]   Advanced[_ngcontent-%COMP%]   Settings[_ngcontent-%COMP%]   Tabs\n.advanced-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid #e5e7eb;\n  margin-bottom: 2rem;\n  margin-top: 1.5rem;\n\n  .tab-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.75rem 1.5rem;\n    background: transparent;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #6b7280;\n    font-size: 0.95rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n\n    &:hover {\n      color: #374151;\n      background: #f9fafb;\n    }\n\n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #eff6ff;\n\n      i {\n        color: #2196f3;\n      }\n    }\n\n    i {\n      font-size: 1.125rem;\n    }\n  }\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  padding: 0;\n  min-height: 500px;\n  max-height: calc(100vh - 350px);\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n  padding: 2rem;\n  \n  h3 {\n    margin: 0 0 1rem 0;\n    color: #1f2937;\n    font-size: 1.25rem;\n  }\n  \n  p {\n    color: #6b7280;\n    font-size: 0.95rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n  animation: fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0; // Important for proper flex sizing\n  overflow: hidden;\n  \n  // Direct child components should handle their own scrolling\n  > * {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n}"] });
 };
 SettingsComponent = __decorate([
-    RegisterClass(BaseNavigationComponent, 'Settings')
+    RegisterClass(BaseNavigationComponent, "Settings")
 ], SettingsComponent);
 export { SettingsComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-settings', template: "<div class=\"container\" mjFillContainer [bottomMargin]=\"5\" [rightMargin]=\"0\">\n    <!-- Options container -->\n    <div class=\"options-container\" mjFillContainer [fillWidth]=\"false\">\n        <div *ngFor=\"let o of options\"\n            class=\"option-item\"\n            [class.selected]=\"leftNavItemSelected(o)\"\n            (click)=\"selectItem(o.value)\"\n        >{{o.label}}</div>\n    </div>\n\n    <!-- Display container -->\n    <div class=\"display-container\" mjFillContainer [fillWidth]=\"false\">\n        <!-- <mj-join-grid\n            RowsEntityName=\"Entities\"\n            RowsEntityDisplayField=\"Name\"\n            RowsEntityDataSource=\"FullEntity\"\n            RowsExtraFilter=\"SchemaName <> '__mj' AND (Name like 'a%' or Name like 'p%')\"\n            RowsOrderBy=\"Name\"\n            ColumnsEntityName=\"Actions\"\n            ColumnsEntityDisplayField=\"Name\"\n            ColumnsEntityDataSource= \"FullEntity\"\n            ColumnsMode=\"Entity\"\n            ColumnsExtraFilter=\"Name like 'v%' or Name like 'd%' or Name like 'test%'\"\n            ColumnsOrderBy=\"Name\"\n            JoinEntityName=\"Entity Actions\"\n            JoinEntityRowForeignKey=\"EntityID\"\n            JoinEntityColumnForeignKey=\"ActionID\"\n            CheckBoxValueMode=\"RecordExists\"\n            \n            style=\"height: 750px; width: 800px;\"\n        >\n\n        </mj-join-grid> -->\n        @switch (currentItem) {\n            @case ('EntityPermissions') {\n                <mj-entity-permissions-selector-with-grid></mj-entity-permissions-selector-with-grid>\n            }\n            @case ('Users') {\n                <mj-simple-record-list\n                    EntityName=\"Users\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Email', 'IsActive', 'Type']\" \n                    [AllowDelete]=\"false\"\n                    [AllowCustomAction]=\"true\"\n                    [CustomActionIconFunction]=\"getUserToggleIcon\"\n                    [CustomActionTooltipFunction]=\"getUserToggleTooltip\"\n                    [CustomActionDialogTitle]=\"'Toggle User Activation'\"\n                    [CustomActionDialogMessage]=\"'Are you sure you want to toggle activation for this user?'\"\n                    [CustomActionDialogInfo]=\"'Active users can log in to the system. Inactive users cannot log in.'\"\n                    (RecordSelected)=\"selectUser($event)\"\n                    (CustomActionConfirmed)=\"toggleUserActivation($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('User') {\n                <mj-single-user [UserID]=\"selectedUserID\"></mj-single-user>\n            }\n            @case ('Roles') {\n                <mj-simple-record-list\n                    EntityName=\"Roles\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectRole($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Role') {\n                <mj-single-role [RoleID]=\"selectedRoleID\" mjFillContainer></mj-single-role>\n            }\n            @case ('Applications') {\n                <mj-simple-record-list\n                    EntityName=\"Applications\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectApplication($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Application') {\n                <mj-single-application [ApplicationID]=\"selectedApplicationID\"></mj-single-application>\n            }\n        }\n    </div>\n</div>", styles: [".container {\n  display: block;\n  width: 100%;\n  overflow: hidden;  \n}\n\n.options-container {\n  float: left; /* Float to the left */\n  width: 150px; /* Fixed width as specified */\n  flex: 0 0 150px;\n  padding: 10px;\n  border-right: solid 1px lightgray;\n  box-sizing: border-box; /* Ensures padding is included in the width */\n}\n\n.option-item {\n  cursor: pointer;\n  margin-bottom: 10px; /* Adds space between the options for better readability */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\n\n.display-container {\n  display: block; /* Ensures it's treated as a block-level element */\n  margin-left: 160px; /* Width of the options-container plus its padding */\n  padding: 10px;\n  box-sizing: border-box; /* Ensures padding doesn't add to the width */\n}\n\n.selected {\n  background-color: #007bff; /* A blue background for selected item */\n  color: white; /* White text color for better contrast */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\n"] }]
-    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 26 }); })();
+        args: [{ selector: 'mj-settings', standalone: true, imports: [
+                    CommonModule,
+                    SharedSettingsModule,
+                    SqlLoggingComponent,
+                    UserManagementComponent,
+                    RoleManagementComponent,
+                    ApplicationManagementComponent,
+                    EntityPermissionsComponent
+                ], template: "<div class=\"settings-container\">\n  <!-- Header Section -->\n  <div class=\"settings-header\">\n    <div class=\"header-content\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-cog header-icon\"></i>\n        <h1>Settings</h1>\n      </div>\n      \n      <div class=\"header-search\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"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=\"settings-grid\">\n                      <mj-settings-card \n                        title=\"Profile Information\"\n                        icon=\"fa-solid fa-user\"\n                        [expanded]=\"isSectionExpanded('profile')\"\n                        (toggle)=\"toggleSection('profile')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Manage your profile information and preferences.</p>\n                          <!-- Profile settings content will go here -->\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card \n                        title=\"Preferences\"\n                        icon=\"fa-solid fa-sliders\"\n                        [expanded]=\"isSectionExpanded('preferences')\"\n                        (toggle)=\"toggleSection('preferences')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Customize your experience with display and behavior preferences.</p>\n                          <!-- Preferences content will go here -->\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card \n                        title=\"Notifications\"\n                        icon=\"fa-solid fa-bell\"\n                        [expanded]=\"isSectionExpanded('notifications')\"\n                        (toggle)=\"toggleSection('notifications')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Configure how and when you receive notifications.</p>\n                          <!-- Notification settings will go here -->\n                        </div>\n                      </mj-settings-card>\n                    </div>\n                  </div>\n                }\n                \n                @case ('users') {\n                  <div class=\"users-settings\">\n                    <h2 class=\"section-title\">User Management</h2>\n                    <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                    <mj-user-management></mj-user-management>\n                  </div>\n                }\n                \n                @case ('roles') {\n                  <div class=\"roles-settings\">\n                    <h2 class=\"section-title\">Role Management</h2>\n                    <p class=\"section-description\">Define and manage security roles.</p>\n                    <mj-role-management></mj-role-management>\n                  </div>\n                }\n                \n                @case ('applications') {\n                  <div class=\"applications-settings\">\n                    <mj-application-management></mj-application-management>\n                  </div>\n                }\n                \n                @case ('permissions') {\n                  <div class=\"permissions-settings\">\n                    <mj-entity-permissions></mj-entity-permissions>\n                  </div>\n                }\n                \n                @case ('advanced') {\n                  <div class=\"advanced-settings\">\n                    <h2 class=\"section-title\">Advanced Settings</h2>\n                    <div class=\"beta-warning\">\n                      <i class=\"fa-solid fa-flask\"></i>\n                      <span>Beta features - Use with caution</span>\n                    </div>\n                    \n                    <!-- Tab Navigation -->\n                    <div class=\"advanced-tabs\">\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'sql-logging'\"\n                        (click)=\"setAdvancedTab('sql-logging')\"\n                      >\n                        <i class=\"fa-solid fa-database\"></i>\n                        SQL Logging\n                      </button>\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'performance'\"\n                        (click)=\"setAdvancedTab('performance')\"\n                      >\n                        <i class=\"fa-solid fa-gauge-high\"></i>\n                        Performance\n                      </button>\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'developer'\"\n                        (click)=\"setAdvancedTab('developer')\"\n                      >\n                        <i class=\"fa-solid fa-code\"></i>\n                        Developer Tools\n                      </button>\n                    </div>\n                    \n                    <!-- Tab Content -->\n                    <div class=\"advanced-tab-content\">\n                      @switch (advancedActiveTab) {\n                        @case ('sql-logging') {\n                          <mj-sql-logging></mj-sql-logging>\n                        }\n                        @case ('performance') {\n                          <div class=\"performance-settings\">\n                            <h3>Performance Settings</h3>\n                            <p>Performance monitoring and optimization tools coming soon.</p>\n                          </div>\n                        }\n                        @case ('developer') {\n                          <div class=\"developer-settings\">\n                            <h3>Developer Tools</h3>\n                            <p>Advanced developer options coming soon.</p>\n                          </div>\n                        }\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Mobile Layout -->\n      @if (isMobile) {\n        <div class=\"mobile-layout\">\n          <!-- Mobile Content -->\n          <div class=\"mobile-content\">\n            @switch (activeTab) {\n              @case ('general') {\n                <div class=\"general-settings\">\n                  <h2 class=\"section-title\">General Settings</h2>\n                  <!-- Same content as desktop but responsive -->\n                </div>\n              }\n              @case ('users') {\n                <div class=\"users-settings\">\n                  <h2 class=\"section-title\">User Management</h2>\n                  <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                  <mj-user-management></mj-user-management>\n                </div>\n              }\n              <!-- Other cases similar to desktop -->\n            }\n          </div>\n\n          <!-- Mobile Bottom Navigation -->\n          <nav class=\"mobile-navigation\">\n            <div class=\"nav-tabs\">\n              @for (tab of tabs.slice(0, 5); track tab.id) {\n                <button \n                  class=\"nav-tab\"\n                  [class.active]=\"activeTab === tab.id\"\n                  (click)=\"onTabChange(tab.id)\"\n                >\n                  <i [class]=\"tab.icon\"></i>\n                  @if (tab.badgeCount && tab.badgeCount > 0) {\n                    <span class=\"tab-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n                      {{ tab.badgeCount }}\n                    </span>\n                  }\n                  <span class=\"tab-label\">{{ tab.label }}</span>\n                </button>\n              }\n              @if (tabs.length > 5) {\n                <button class=\"nav-tab more-tab\">\n                  <i class=\"fa-solid fa-ellipsis\"></i>\n                  <span class=\"tab-label\">More</span>\n                </button>\n              }\n            </div>\n          </nav>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.settings-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f5f7fa;\n  overflow: hidden;\n  position: relative;\n}\n\n// Header Section\n.settings-header {\n  background-color: #ffffff;\n  border-bottom: 1px solid #e5e7eb;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n  z-index: 10;\n}\n\n.header-content {\n  padding: 1.5rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 2rem;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n  }\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n\n  .header-icon {\n    font-size: 1.75rem;\n    color: #2196f3;\n  }\n\n  h1 {\n    margin: 0;\n    font-size: 1.75rem;\n    font-weight: 600;\n    color: #1f2937;\n  }\n}\n\n.header-search {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n    background-color: #f9fafb;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      background-color: #ffffff;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    &::placeholder {\n      color: #9ca3af;\n    }\n  }\n}\n\n// Loading State\n.loading-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content {\n  text-align: center;\n  max-width: 400px;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n    font-size: 1rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n    padding: 0.75rem 1.5rem;\n    font-size: 0.95rem;\n    border-radius: 8px;\n    transition: all 0.2s;\n\n    &:hover {\n      background-color: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n    }\n\n    i {\n      margin-right: 0.5rem;\n    }\n  }\n}\n\n// Main Content\n.settings-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n// Desktop Layout\n.desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n// More specific selector to ensure it applies\n.settings-content .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n// Deep selector for Angular ViewEncapsulation\n:host ::ng-deep .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.side-navigation {\n  width: 260px;\n  background-color: #ffffff;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  flex-shrink: 0;\n}\n\n.nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: #4b5563;\n  font-size: 0.95rem;\n\n  &:hover {\n    background-color: #f3f4f6;\n    color: #1f2937;\n  }\n\n  &.active {\n    background-color: #eff6ff;\n    color: #2196f3;\n    font-weight: 500;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background-color: #2196f3;\n    }\n  }\n\n  i {\n    width: 20px;\n    margin-right: 0.75rem;\n    font-size: 1.1rem;\n  }\n\n  .nav-label {\n    flex: 1;\n  }\n\n  .nav-badge {\n    padding: 0.125rem 0.5rem;\n    border-radius: 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    \n    &.badge-primary {\n      background-color: #dbeafe;\n      color: #1e40af;\n    }\n\n    &.badge-danger {\n      background-color: #fee2e2;\n      color: #991b1b;\n    }\n\n    &.badge-warning {\n      background-color: #fef3c7;\n      color: #92400e;\n    }\n\n    &.badge-success {\n      background-color: #d1fae5;\n      color: #065f46;\n    }\n  }\n}\n\n.content-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0; // Important for proper flex sizing\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.tab-content {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  min-height: 0; // Important for proper flex sizing\n}\n\n// Section Styles\n.section-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1f2937;\n  margin: 0 0 0.5rem 0;\n}\n\n.section-description {\n  color: #6b7280;\n  margin: 0 0 2rem 0;\n  font-size: 0.95rem;\n}\n\n.settings-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n}\n\n.card-content {\n  padding: 1rem;\n  color: #4b5563;\n  font-size: 0.95rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    line-height: 1.6;\n  }\n}\n\n// Beta Warning\n.beta-warning {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background-color: #fef3c7;\n  color: #92400e;\n  border-radius: 6px;\n  font-size: 0.875rem;\n  margin-bottom: 1.5rem;\n\n  i {\n    font-size: 1rem;\n  }\n}\n\n// Mobile Layout\n.mobile-layout {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.mobile-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  padding-bottom: 80px; // Space for bottom nav\n}\n\n.mobile-navigation {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: #ffffff;\n  border-top: 1px solid #e5e7eb;\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n}\n\n.nav-tabs {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  padding: 0.5rem 0;\n}\n\n.nav-tab {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  background: none;\n  border: none;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-size: 0.75rem;\n  min-width: 60px;\n\n  &.active {\n    color: #2196f3;\n\n    i {\n      transform: scale(1.1);\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  i {\n    font-size: 1.25rem;\n    transition: transform 0.2s;\n  }\n\n  .tab-badge {\n    position: absolute;\n    top: 0.25rem;\n    right: 0.25rem;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    font-size: 0.625rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    &.badge-primary {\n      background-color: #2196f3;\n      color: white;\n    }\n\n    &.badge-warning {\n      background-color: #ff9800;\n      color: white;\n    }\n  }\n\n  .tab-label {\n    margin-top: 0.125rem;\n  }\n}\n\n.more-tab {\n  color: #6b7280;\n}\n\n// Advanced Settings Tabs\n.advanced-tabs {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid #e5e7eb;\n  margin-bottom: 2rem;\n  margin-top: 1.5rem;\n\n  .tab-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.75rem 1.5rem;\n    background: transparent;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #6b7280;\n    font-size: 0.95rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n\n    &:hover {\n      color: #374151;\n      background: #f9fafb;\n    }\n\n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #eff6ff;\n\n      i {\n        color: #2196f3;\n      }\n    }\n\n    i {\n      font-size: 1.125rem;\n    }\n  }\n}\n\n.advanced-tab-content {\n  @include scrollable-content;\n  background: white;\n  border-radius: 12px;\n  padding: 0;\n  min-height: 500px;\n  max-height: calc(100vh - 350px);\n}\n\n.performance-settings,\n.developer-settings {\n  padding: 2rem;\n  \n  h3 {\n    margin: 0 0 1rem 0;\n    color: #1f2937;\n    font-size: 1.25rem;\n  }\n  \n  p {\n    color: #6b7280;\n    font-size: 0.95rem;\n  }\n}\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n  animation: fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0; // Important for proper flex sizing\n  overflow: hidden;\n  \n  // Direct child components should handle their own scrolling\n  > * {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n}"] }]
+    }], () => [], { stateChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 45 }); })();
 //# sourceMappingURL=settings.component.js.map