@memberjunction/ng-explorer-core 5.42.0 → 5.44.0

package/dist/lib/user-notifications/user-notifications.component.js

@@ -9,33 +9,34 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@memberjunction/ng-base-application";
 import * as i3 from "@angular/forms";
-import * as i4 from "@angular/common";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@angular/common";
 const _c0 = ["allRadio"];
 const _c1 = ["unreadRadio"];
 const _c2 = ["readRadio"];
 const _forTrack0 = ($index, $item) => $item.ID;
 function UserNotificationsComponent_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵelementStart(0, "button", 17);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_8_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAllAsRead()); });
-    i0.ɵɵelement(1, "i", 17);
-    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span", 19);
     i0.ɵɵtext(3, "Mark All Read");
     i0.ɵɵelementEnd()();
 } }
 function UserNotificationsComponent_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 20);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_8_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAllAsUnread()); });
-    i0.ɵɵelement(1, "i", 20);
-    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementStart(2, "span", 19);
     i0.ɵɵtext(3, "Mark All Unread");
     i0.ɵɵelementEnd()();
 } }
 function UserNotificationsComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵconditionalCreate(1, UserNotificationsComponent_Conditional_8_Conditional_1_Template, 4, 0, "button", 14);
-    i0.ɵɵconditionalCreate(2, UserNotificationsComponent_Conditional_8_Conditional_2_Template, 4, 0, "button", 15);
+    i0.ɵɵconditionalCreate(1, UserNotificationsComponent_Conditional_8_Conditional_1_Template, 4, 0, "button", 15);
+    i0.ɵɵconditionalCreate(2, UserNotificationsComponent_Conditional_8_Conditional_2_Template, 4, 0, "button", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -46,12 +47,12 @@ function UserNotificationsComponent_Conditional_8_Template(rf, ctx) { if (rf & 1
 } }
 function UserNotificationsComponent_Conditional_9_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 39);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_9_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectReadOption("Unread")); });
-    i0.ɵɵelementStart(1, "span", 26);
+    i0.ɵɵelementStart(1, "span", 27);
     i0.ɵɵtext(2, "Unread");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵelementStart(3, "span", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -65,12 +66,12 @@ function UserNotificationsComponent_Conditional_9_Conditional_13_Template(rf, ct
 } }
 function UserNotificationsComponent_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵelementStart(0, "button", 40);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_9_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectReadOption("Read")); });
-    i0.ɵɵelementStart(1, "span", 26);
+    i0.ɵɵelementStart(1, "span", 27);
     i0.ɵɵtext(2, "Read");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵelementStart(3, "span", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -81,7 +82,7 @@ function UserNotificationsComponent_Conditional_9_Conditional_16_Template(rf, ct
     i0.ɵɵtextInterpolate(ctx_r1.ReadNotifications.length);
 } }
 function UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 41);
+    i0.ɵɵelementStart(0, "option", 42);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -92,13 +93,13 @@ function UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template(
 } }
 function UserNotificationsComponent_Conditional_9_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "select", 40);
+    i0.ɵɵelementStart(0, "div", 33)(1, "select", 41);
     i0.ɵɵtwoWayListener("ngModelChange", function UserNotificationsComponent_Conditional_9_Conditional_17_Template_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedTypeFilter, $event) || (ctx_r1.selectedTypeFilter = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("change", function UserNotificationsComponent_Conditional_9_Conditional_17_Template_select_change_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTypeFilterChange(ctx_r1.selectedTypeFilter)); });
-    i0.ɵɵelementStart(2, "option", 41);
+    i0.ɵɵelementStart(2, "option", 42);
     i0.ɵɵtext(3, "All Types");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(4, UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template, 2, 2, "option", 41, _forTrack0);
+    i0.ɵɵrepeaterCreate(4, UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template, 2, 2, "option", 42, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -110,8 +111,8 @@ function UserNotificationsComponent_Conditional_9_Conditional_17_Template(rf, ct
     i0.ɵɵrepeater(ctx_r1.notificationTypes);
 } }
 function UserNotificationsComponent_Conditional_9_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37)(1, "span", 42);
-    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵelementStart(0, "div", 38)(1, "span", 43);
+    i0.ɵɵelement(2, "i", 44);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -121,34 +122,34 @@ function UserNotificationsComponent_Conditional_9_Conditional_22_Template(rf, ct
 } }
 function UserNotificationsComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "input", 24, 0);
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 22)(2, "div", 23)(3, "div", 24)(4, "input", 25, 0);
     i0.ɵɵlistener("change", function UserNotificationsComponent_Conditional_9_Template_input_change_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReadRadioChanged($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 25);
+    i0.ɵɵelementStart(6, "button", 26);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectReadOption("All")); });
-    i0.ɵɵelementStart(7, "span", 26);
+    i0.ɵɵelementStart(7, "span", 27);
     i0.ɵɵtext(8, "All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 27);
+    i0.ɵɵelementStart(9, "span", 28);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "input", 28, 1);
+    i0.ɵɵelementStart(11, "input", 29, 1);
     i0.ɵɵlistener("change", function UserNotificationsComponent_Conditional_9_Template_input_change_11_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReadRadioChanged($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, UserNotificationsComponent_Conditional_9_Conditional_13_Template, 5, 8, "button", 29);
-    i0.ɵɵelementStart(14, "input", 30, 2);
+    i0.ɵɵconditionalCreate(13, UserNotificationsComponent_Conditional_9_Conditional_13_Template, 5, 8, "button", 30);
+    i0.ɵɵelementStart(14, "input", 31, 2);
     i0.ɵɵlistener("change", function UserNotificationsComponent_Conditional_9_Template_input_change_14_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReadRadioChanged($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, UserNotificationsComponent_Conditional_9_Conditional_16_Template, 5, 4, "button", 31);
+    i0.ɵɵconditionalCreate(16, UserNotificationsComponent_Conditional_9_Conditional_16_Template, 5, 4, "button", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, UserNotificationsComponent_Conditional_9_Conditional_17_Template, 6, 2, "div", 32);
+    i0.ɵɵconditionalCreate(17, UserNotificationsComponent_Conditional_9_Conditional_17_Template, 6, 2, "div", 33);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 33)(19, "div", 34);
-    i0.ɵɵelement(20, "i", 35);
-    i0.ɵɵelementStart(21, "input", 36);
+    i0.ɵɵelementStart(18, "div", 34)(19, "div", 35);
+    i0.ɵɵelement(20, "i", 36);
+    i0.ɵɵelementStart(21, "input", 37);
     i0.ɵɵlistener("input", function UserNotificationsComponent_Conditional_9_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChanged($event.target.value)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(22, UserNotificationsComponent_Conditional_9_Conditional_22_Template, 4, 2, "div", 37);
+    i0.ɵɵconditionalCreate(22, UserNotificationsComponent_Conditional_9_Conditional_22_Template, 4, 2, "div", 38);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -169,33 +170,17 @@ function UserNotificationsComponent_Conditional_9_Template(rf, ctx) { if (rf & 1
     i0.ɵɵconditional(ctx_r1.NotificationsToShow.length !== ctx_r1.AllNotifications.length ? 22 : -1);
 } }
 function UserNotificationsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 44);
-    i0.ɵɵelement(2, "i", 45);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵtext(4, "No Notifications");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p");
-    i0.ɵɵtext(6, "You're all caught up! New notifications will appear here.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 12);
 } }
 function UserNotificationsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 44);
-    i0.ɵɵelement(2, "i", 46);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵtext(4, "No Matching Notifications");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p");
-    i0.ɵɵtext(6, "Try adjusting your filters to see more notifications.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 13);
 } }
 function UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵelementStart(0, "button", 60);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const notification_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAsRead(notification_r10, true, null)); });
-    i0.ɵɵelement(1, "i", 63);
-    i0.ɵɵelementStart(2, "span", 64);
+    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵelementStart(2, "span", 62);
     i0.ɵɵtext(3, "Read");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -204,10 +189,10 @@ function UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template
 } }
 function UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵelementStart(0, "button", 63);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const notification_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAsRead(notification_r10, false, null)); });
-    i0.ɵɵelement(1, "i", 20);
-    i0.ɵɵelementStart(2, "span", 64);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementStart(2, "span", 62);
     i0.ɵɵtext(3, "Unread");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -216,30 +201,30 @@ function UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template
 } }
 function UserNotificationsComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "article", 48);
-    i0.ɵɵelement(1, "div", 49);
-    i0.ɵɵelementStart(2, "div", 50);
+    i0.ɵɵelementStart(0, "article", 46);
+    i0.ɵɵelement(1, "div", 47);
+    i0.ɵɵelementStart(2, "div", 48);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 51);
+    i0.ɵɵelementStart(4, "div", 49);
     i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_13_For_2_Template_div_click_4_listener() { const notification_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.notificationClicked(notification_r10)); });
-    i0.ɵɵelementStart(5, "div", 52)(6, "h3", 53);
+    i0.ɵɵelementStart(5, "div", 50)(6, "h3", 51);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 54);
-    i0.ɵɵelement(9, "i", 55);
+    i0.ɵɵelementStart(8, "span", 52);
+    i0.ɵɵelement(9, "i", 53);
     i0.ɵɵelementStart(10, "time");
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 56)(14, "span", 57);
+    i0.ɵɵelementStart(13, "div", 54)(14, "span", 55);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "p", 58);
+    i0.ɵɵelementStart(16, "p", 56);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 59);
-    i0.ɵɵconditionalCreate(19, UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template, 4, 1, "button", 60)(20, UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template, 4, 1, "button", 61);
+    i0.ɵɵelementStart(18, "div", 57);
+    i0.ɵɵconditionalCreate(19, UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template, 4, 1, "button", 58)(20, UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template, 4, 1, "button", 59);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const notification_r10 = ctx.$implicit;
@@ -269,8 +254,8 @@ function UserNotificationsComponent_Conditional_13_For_2_Template(rf, ctx) { if
     i0.ɵɵconditional(notification_r10.Unread ? 19 : 20);
 } }
 function UserNotificationsComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵrepeaterCreate(1, UserNotificationsComponent_Conditional_13_For_2_Template, 21, 26, "article", 47, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵrepeaterCreate(1, UserNotificationsComponent_Conditional_13_For_2_Template, 21, 26, "article", 45, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -701,7 +686,7 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.allRadio = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.unreadRadio = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.readRadio = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 3, consts: [["allRadio", ""], ["unreadRadio", ""], ["readRadio", ""], [1, "notifications-container"], [1, "notifications-header"], [1, "header-top"], [1, "header-title"], [1, "title-icon"], [1, "fa-solid", "fa-bell"], [1, "header-actions"], [1, "filters-section"], [1, "notifications-content"], [1, "empty-state"], [1, "notifications-list"], ["type", "button", "aria-label", "Mark all notifications as read", 1, "action-btn", "action-btn-ghost"], ["type", "button", "aria-label", "Mark all notifications as unread", 1, "action-btn", "action-btn-secondary"], ["type", "button", "aria-label", "Mark all notifications as read", 1, "action-btn", "action-btn-ghost", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-double"], [1, "btn-text"], ["type", "button", "aria-label", "Mark all notifications as unread", 1, "action-btn", "action-btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-envelope"], [1, "filters-slider"], [1, "slider-content"], ["role", "group", "aria-label", "Filter notifications by read status", 1, "header-stats"], ["type", "radio", "name", "UnreadStatus", "value", "All", "checked", "", "id", "filter-all", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show all notifications", 1, "stat-pill", 3, "click"], [1, "stat-label"], [1, "stat-count"], ["type", "radio", "name", "UnreadStatus", "value", "Unread", "id", "filter-unread", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show unread notifications", 1, "stat-pill", 3, "active", "has-unread"], ["type", "radio", "name", "UnreadStatus", "value", "Read", "id", "filter-read", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show read notifications", 1, "stat-pill", 3, "active"], [1, "filter-item", "type-filter-slider"], [1, "search-section"], [1, "search-container"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "placeholder", "Search notifications...", "aria-label", "Search notifications", 1, "search-input", 3, "input", "value"], [1, "filter-info"], ["type", "button", "aria-label", "Show unread notifications", 1, "stat-pill", 3, "click"], ["type", "button", "aria-label", "Show read notifications", 1, "stat-pill", 3, "click"], ["aria-label", "Filter by notification type", 1, "type-select", 3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "filter-badge"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "empty-icon"], [1, "fa-solid", "fa-bell-slash"], [1, "fa-solid", "fa-filter-circle-xmark"], ["role", "article", 1, "notification-card", 3, "unread", "clickable"], ["role", "article", 1, "notification-card"], ["aria-hidden", "true", 1, "card-indicator"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-content", 3, "click"], [1, "card-header"], [1, "card-title"], [1, "card-time"], ["aria-hidden", "true", 1, "fa-regular", "fa-clock"], [1, "card-meta"], [1, "card-type"], [1, "card-message"], [1, "card-actions"], ["type", "button", "title", "Mark as Read", 1, "card-action-btn"], ["type", "button", "title", "Mark as Unread", 1, "card-action-btn"], ["type", "button", "title", "Mark as Read", 1, "card-action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], [1, "action-text"], ["type", "button", "title", "Mark as Unread", 1, "card-action-btn", 3, "click"]], template: function UserNotificationsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 3, consts: [["allRadio", ""], ["unreadRadio", ""], ["readRadio", ""], [1, "notifications-container"], [1, "notifications-header"], [1, "header-top"], [1, "header-title"], [1, "title-icon"], [1, "fa-solid", "fa-bell"], [1, "header-actions"], [1, "filters-section"], [1, "notifications-content"], ["Variant", "success", "Icon", "fa-solid fa-bell-slash", "Title", "No Notifications", "Message", "You're all caught up! New notifications will appear here."], ["Variant", "no-results", "Icon", "fa-solid fa-filter-circle-xmark", "Title", "No Matching Notifications", "Message", "Try adjusting your filters to see more notifications."], [1, "notifications-list"], ["type", "button", "aria-label", "Mark all notifications as read", 1, "action-btn", "action-btn-ghost"], ["type", "button", "aria-label", "Mark all notifications as unread", 1, "action-btn", "action-btn-secondary"], ["type", "button", "aria-label", "Mark all notifications as read", 1, "action-btn", "action-btn-ghost", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-double"], [1, "btn-text"], ["type", "button", "aria-label", "Mark all notifications as unread", 1, "action-btn", "action-btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-envelope"], [1, "filters-slider"], [1, "slider-content"], ["role", "group", "aria-label", "Filter notifications by read status", 1, "header-stats"], ["type", "radio", "name", "UnreadStatus", "value", "All", "checked", "", "id", "filter-all", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show all notifications", 1, "stat-pill", 3, "click"], [1, "stat-label"], [1, "stat-count"], ["type", "radio", "name", "UnreadStatus", "value", "Unread", "id", "filter-unread", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show unread notifications", 1, "stat-pill", 3, "active", "has-unread"], ["type", "radio", "name", "UnreadStatus", "value", "Read", "id", "filter-read", 1, "hidden-radio", 3, "change"], ["type", "button", "aria-label", "Show read notifications", 1, "stat-pill", 3, "active"], [1, "filter-item", "type-filter-slider"], [1, "search-section"], [1, "search-container"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "placeholder", "Search notifications...", "aria-label", "Search notifications", 1, "search-input", 3, "input", "value"], [1, "filter-info"], ["type", "button", "aria-label", "Show unread notifications", 1, "stat-pill", 3, "click"], ["type", "button", "aria-label", "Show read notifications", 1, "stat-pill", 3, "click"], ["aria-label", "Filter by notification type", 1, "type-select", 3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "filter-badge"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], ["role", "article", 1, "notification-card", 3, "unread", "clickable"], ["role", "article", 1, "notification-card"], ["aria-hidden", "true", 1, "card-indicator"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-content", 3, "click"], [1, "card-header"], [1, "card-title"], [1, "card-time"], ["aria-hidden", "true", 1, "fa-regular", "fa-clock"], [1, "card-meta"], [1, "card-type"], [1, "card-message"], [1, "card-actions"], ["type", "button", "title", "Mark as Read", 1, "card-action-btn"], ["type", "button", "title", "Mark as Unread", 1, "card-action-btn"], ["type", "button", "title", "Mark as Read", 1, "card-action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], [1, "action-text"], ["type", "button", "title", "Mark as Unread", 1, "card-action-btn", 3, "click"]], template: function UserNotificationsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div", 5)(3, "div", 6)(4, "div", 7);
             i0.ɵɵelement(5, "i", 8);
             i0.ɵɵelementEnd();
@@ -713,7 +698,7 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(9, UserNotificationsComponent_Conditional_9_Template, 23, 9, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "div", 11);
-            i0.ɵɵconditionalCreate(11, UserNotificationsComponent_Conditional_11_Template, 7, 0, "div", 12)(12, UserNotificationsComponent_Conditional_12_Template, 7, 0, "div", 12)(13, UserNotificationsComponent_Conditional_13_Template, 3, 0, "div", 13);
+            i0.ɵɵconditionalCreate(11, UserNotificationsComponent_Conditional_11_Template, 1, 0, "mj-empty-state", 12)(12, UserNotificationsComponent_Conditional_12_Template, 1, 0, "mj-empty-state", 13)(13, UserNotificationsComponent_Conditional_13_Template, 3, 0, "div", 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(8);
@@ -722,11 +707,11 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.AllNotifications.length > 0 ? 9 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.NotificationsToShow.length === 0 && ctx.AllNotifications.length === 0 ? 11 : ctx.NotificationsToShow.length === 0 ? 12 : 13);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n.notifications-container[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n\n\n.header-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n\n\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n\n\n.action-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n\n\n.action-btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}\n\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n\n\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio[_ngcontent-%COMP%] {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill[_ngcontent-%COMP%]:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active[_ngcontent-%COMP%]   .stat-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.type-filter-slider[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n\n\n\n\n\n.search-section[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n}\n\n\n\n\n\n\n.filter-info[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n\n\n.type-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.notifications-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  \n\n}\n\n\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 32px;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 96px;\n  height: 96px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n\n\n\n\n\n.notifications-list[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n\n\n.card-indicator[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread[_ngcontent-%COMP%]   .card-indicator[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover   .card-icon[_ngcontent-%COMP%] {\n  transform: scale(1.05);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:hover   .card-title[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.card-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.card-meta[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.card-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  \n\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n\n\n.card-message[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_ngcontent-%COMP%]:focus-visible, \nselect[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .notifications-container[_ngcontent-%COMP%] {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top[_ngcontent-%COMP%] {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 22px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .header-top[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.375rem;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .stat-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 140px;\n  }\n\n  .type-select[_ngcontent-%COMP%], \n   .search-input[_ngcontent-%COMP%] {\n    font-size: 16px;  \n\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator[_ngcontent-%COMP%] {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .card-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .card-message[_ngcontent-%COMP%] {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .card-action-btn[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 60px 20px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text[_ngcontent-%COMP%] {\n    display: inline;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n  \n\n}"] });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJEmptyStateComponent, i5.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n.notifications-container[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n\n\n.header-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n\n\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n\n\n.action-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n\n\n.action-btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}\n\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n\n\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio[_ngcontent-%COMP%] {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill[_ngcontent-%COMP%]:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active[_ngcontent-%COMP%]   .stat-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.type-filter-slider[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n\n\n\n\n\n.search-section[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n}\n\n\n\n\n\n\n.filter-info[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n\n\n.type-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.notifications-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  \n\n}\n\n\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.notifications-list[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n\n\n.card-indicator[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread[_ngcontent-%COMP%]   .card-indicator[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover   .card-icon[_ngcontent-%COMP%] {\n  transform: scale(1.05);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:hover   .card-title[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.card-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.card-meta[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.card-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  \n\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n\n\n.card-message[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_ngcontent-%COMP%]:focus-visible, \nselect[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .notifications-container[_ngcontent-%COMP%] {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top[_ngcontent-%COMP%] {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 22px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .header-top[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.375rem;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .stat-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 140px;\n  }\n\n  .type-select[_ngcontent-%COMP%], \n   .search-input[_ngcontent-%COMP%] {\n    font-size: 16px;  \n\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator[_ngcontent-%COMP%] {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .card-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .card-message[_ngcontent-%COMP%] {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .card-action-btn[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n}\n\n\n\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text[_ngcontent-%COMP%] {\n    display: inline;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n  \n\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserNotificationsComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-user-notifications', template: "<div class=\"notifications-container\">\n  <!-- Header Section -->\n  <div class=\"notifications-header\">\n    <div class=\"header-top\">\n      <div class=\"header-title\">\n        <div class=\"title-icon\">\n          <i class=\"fa-solid fa-bell\"></i>\n        </div>\n        <h1>Notifications</h1>\n      </div>\n\n      @if (AllNotifications.length > 0) {\n        <div class=\"header-actions\">\n          @if (UnreadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-ghost\"\n                    type=\"button\"\n                    (click)=\"markAllAsRead()\"\n                    aria-label=\"Mark all notifications as read\">\n              <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Read</span>\n            </button>\n          }\n          @if (ReadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-secondary\"\n                    type=\"button\"\n                    (click)=\"markAllAsUnread()\"\n                    aria-label=\"Mark all notifications as unread\">\n              <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Unread</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Filters Section -->\n    @if (AllNotifications.length > 0) {\n      <div class=\"filters-section\">\n        <!-- Horizontal Slider for Filters (Mobile) -->\n        <div class=\"filters-slider\">\n          <div class=\"slider-content\">\n            <!-- Stats Pills (Filter Tabs) -->\n            <div class=\"header-stats\" role=\"group\" aria-label=\"Filter notifications by read status\">\n              <input #allRadio type=\"radio\" name=\"UnreadStatus\" value=\"All\"\n                     (change)=\"onReadRadioChanged($event)\" checked class=\"hidden-radio\"\n                     id=\"filter-all\" />\n              <button class=\"stat-pill\"\n                      type=\"button\"\n                      [class.active]=\"radioSelected === 'All'\"\n                      (click)=\"selectReadOption('All')\"\n                      [attr.aria-pressed]=\"radioSelected === 'All'\"\n                      aria-label=\"Show all notifications\">\n                <span class=\"stat-label\">All</span>\n                <span class=\"stat-count\">{{AllNotifications.length}}</span>\n              </button>\n\n              <input #unreadRadio type=\"radio\" name=\"UnreadStatus\" value=\"Unread\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-unread\" />\n              @if (UnreadNotifications.length > 0 || ReadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Unread'\"\n                        [class.has-unread]=\"UnreadNotifications.length > 0\"\n                        (click)=\"selectReadOption('Unread')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Unread'\"\n                        aria-label=\"Show unread notifications\">\n                  <span class=\"stat-label\">Unread</span>\n                  <span class=\"stat-count\" [class.unread-count]=\"UnreadNotifications.length > 0\">\n                    {{UnreadNotifications.length}}\n                  </span>\n                </button>\n              }\n\n              <input #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-read\" />\n              @if (ReadNotifications.length > 0 || UnreadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Read'\"\n                        (click)=\"selectReadOption('Read')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Read'\"\n                        aria-label=\"Show read notifications\">\n                  <span class=\"stat-label\">Read</span>\n                  <span class=\"stat-count\">{{ReadNotifications.length}}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Native Type Filter Dropdown (in slider on mobile) -->\n            @if (notificationTypes.length > 0) {\n              <div class=\"filter-item type-filter-slider\">\n                <select class=\"type-select\"\n                        [(ngModel)]=\"selectedTypeFilter\"\n                        (change)=\"onTypeFilterChange(selectedTypeFilter)\"\n                        aria-label=\"Filter by notification type\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of notificationTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{type.Name}}</option>\n                  }\n                </select>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Search Filter (separate, full-width on mobile) -->\n        <div class=\"search-section\">\n          <div class=\"search-container\">\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   placeholder=\"Search notifications...\"\n                   [value]=\"currentFilter\"\n                   (input)=\"onFilterChanged($any($event.target).value)\"\n                   aria-label=\"Search notifications\" />\n          </div>\n        </div>\n\n        <!-- Filter Info Badge -->\n        @if (NotificationsToShow.length !== AllNotifications.length) {\n          <div class=\"filter-info\">\n            <span class=\"filter-badge\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              Showing {{NotificationsToShow.length}} of {{AllNotifications.length}}\n            </span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Notifications Content -->\n  <div class=\"notifications-content\">\n    @if (NotificationsToShow.length === 0 && AllNotifications.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-bell-slash\"></i>\n        </div>\n        <h3>No Notifications</h3>\n        <p>You're all caught up! New notifications will appear here.</p>\n      </div>\n    } @else if (NotificationsToShow.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n        </div>\n        <h3>No Matching Notifications</h3>\n        <p>Try adjusting your filters to see more notifications.</p>\n      </div>\n    } @else {\n      <!-- Notifications List -->\n      <div class=\"notifications-list\">\n        @for (notification of NotificationsToShow; track notification.ID) {\n          <article class=\"notification-card\"\n                   [class.unread]=\"notification.Unread\"\n                   [class.clickable]=\"isNotificationClickable(notification)\"\n                   role=\"article\"\n                   [attr.aria-label]=\"notification.Title\">\n\n            <!-- Unread Indicator Bar -->\n            <div class=\"card-indicator\" aria-hidden=\"true\"></div>\n\n            <!-- Type Icon -->\n            <div class=\"card-icon\"\n                 [style.background-color]=\"getTypeColor(notification) + '15'\"\n                 aria-hidden=\"true\">\n              <i [class]=\"'fa-solid ' + getTypeIcon(notification)\"\n                 [style.color]=\"getTypeColor(notification)\"></i>\n            </div>\n\n            <!-- Content -->\n            <div class=\"card-content\" (click)=\"notificationClicked(notification)\">\n              <div class=\"card-header\">\n                <h3 class=\"card-title\" [class.card-title-unread]=\"notification.Unread\">\n                  {{notification.Title}}\n                </h3>\n                <span class=\"card-time\">\n                  <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>\n                  <time [attr.datetime]=\"notification.__mj_CreatedAt\">\n                    {{notification.__mj_CreatedAt | date:'MMM d, h:mm a'}}\n                  </time>\n                </span>\n              </div>\n\n              <div class=\"card-meta\">\n                <span class=\"card-type\"\n                      [style.background-color]=\"getTypeColor(notification) + '15'\"\n                      [style.color]=\"getTypeColor(notification)\">\n                  {{getTypeName(notification)}}\n                </span>\n              </div>\n\n              <p class=\"card-message\">{{notification.Message}}</p>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"card-actions\">\n              @if (notification.Unread) {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, true, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as read'\"\n                        title=\"Mark as Read\">\n                  <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Read</span>\n                </button>\n              } @else {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, false, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as unread'\"\n                        title=\"Mark as Unread\">\n                  <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Unread</span>\n                </button>\n              }\n            </div>\n          </article>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ===================================\n   USER NOTIFICATIONS - MD3 DESIGN\n   iPhone-inspired UX with Circular Buttons\n   =================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* ===================================\n   CONTAINER\n   =================================== */\n\n.notifications-container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n/* ===================================\n   HEADER SECTION\n   =================================== */\n\n.notifications-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Header Top Row */\n.header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon:hover {\n  transform: scale(1.05);\n}\n\n.title-icon i {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title h1 {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n/* ===================================\n   HEADER ACTIONS - Circular Buttons\n   =================================== */\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn i {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn:hover i {\n  transform: scale(1.1);\n}\n\n/* Ghost Button - White Background (Mark All Read) */\n.action-btn-ghost {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n/* Secondary Button */\n.action-btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:active {\n  transform: scale(0.98);\n}\n\n/* ===================================\n   FILTERS SECTION\n   =================================== */\n\n.filters-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n/* ===================================\n   STATS PILLS (Filter Tabs) - Circular with mj-blue Active\n   =================================== */\n\n.header-stats {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n/* Active State - MJ Blue */\n.stat-pill.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active .stat-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n/* ===================================\n   TYPE FILTER IN SLIDER\n   =================================== */\n\n.type-filter-slider {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n/* ===================================\n   SEARCH SECTION\n   =================================== */\n\n.search-section {\n  padding: 0 24px 16px;\n}\n\n/* ===================================\n   FILTER INFO\n   =================================== */\n\n.filter-info {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n/* Native Select Dropdown Styling */\n.type-select {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container:focus-within .search-icon {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge i {\n  font-size: 12px;\n}\n\n/* ===================================\n   NOTIFICATIONS CONTENT\n   =================================== */\n\n.notifications-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  /* iPhone smooth scrolling */\n}\n\n/* Custom Scrollbar */\n.notifications-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* ===================================\n   EMPTY STATE\n   =================================== */\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 32px;\n  text-align: center;\n}\n\n.empty-icon {\n  width: 96px;\n  height: 96px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state h3 {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n/* ===================================\n   NOTIFICATIONS LIST\n   =================================== */\n\n.notifications-list {\n  background: transparent;\n}\n\n/* ===================================\n   NOTIFICATION CARD - iPhone UX Style\n   =================================== */\n\n.notification-card {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card:last-child {\n  border-bottom: none;\n}\n\n.notification-card:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable {\n  cursor: pointer;\n}\n\n.notification-card.clickable:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n/* Unread State with Blue Highlight */\n.notification-card.unread {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n/* Card Indicator - Blue Bar for Unread */\n.card-indicator {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread .card-indicator {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Card Icon - Larger and More Prominent */\n.card-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card:hover .card-icon {\n  transform: scale(1.05);\n}\n\n.card-icon i {\n  font-size: 24px;\n}\n\n/* Card Content */\n.card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable .card-title {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable:hover .card-title {\n  text-decoration: underline;\n}\n\n.card-time {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time i {\n  font-size: 12px;\n}\n\n/* Card Meta */\n.card-meta {\n  margin-bottom: 8px;\n}\n\n.card-type {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* Card Message */\n.card-message {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Card Actions - Circular Buttons */\n.card-actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn i {\n  font-size: 13px;\n}\n\n/* ===================================\n   ANIMATIONS\n   =================================== */\n\n@keyframes slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card {\n  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===================================\n   ACCESSIBILITY\n   =================================== */\n\nbutton:focus-visible,\ninput:focus-visible,\nselect:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ===================================\n   RESPONSIVE DESIGN - iPhone UX\n   =================================== */\n\n/* iPad and smaller */\n@media (max-width: 768px) {\n  .notifications-container {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon i {\n    font-size: 20px;\n  }\n\n  .header-title h1 {\n    font-size: 1.5rem;\n  }\n\n  /* Horizontal Slider on Mobile */\n  .slider-content {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider {\n    min-width: 160px;\n  }\n\n  .search-section {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon i {\n    font-size: 22px;\n  }\n}\n\n/* iPhone SE and smaller */\n@media (max-width: 480px) {\n  .header-top {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title {\n    justify-content: flex-start;\n  }\n\n  .title-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon i {\n    font-size: 18px;\n  }\n\n  .header-title h1 {\n    font-size: 1.375rem;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text {\n    display: none;\n  }\n\n  /* Horizontal Slider - iPhone */\n  .slider-content {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats {\n    gap: 8px;\n  }\n\n  .stat-pill {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label {\n    font-size: 13px;\n  }\n\n  .stat-count {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider {\n    min-width: 140px;\n  }\n\n  .type-select,\n  .search-input {\n    font-size: 16px;  /* Prevent iOS zoom on focus */\n  }\n\n  .search-section {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon i {\n    font-size: 20px;\n  }\n\n  .card-title {\n    font-size: 15px;\n  }\n\n  .card-time {\n    font-size: 12px;\n  }\n\n  .card-message {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text {\n    display: none;\n  }\n\n  .card-action-btn {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n  .empty-state {\n    padding: 60px 20px;\n  }\n\n  .empty-icon {\n    width: 80px;\n    height: 80px;\n  }\n\n  .empty-icon i {\n    font-size: 32px;\n  }\n\n  .empty-state h3 {\n    font-size: 18px;\n  }\n\n  .empty-state p {\n    font-size: 14px;\n  }\n}\n\n/* iPhone 12/13/14 Pro Max and similar */\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text {\n    display: inline;\n  }\n\n  .action-btn {\n    font-size: 14px;\n  }\n}\n\n/* Dark mode support (if needed in future) */\n@media (prefers-color-scheme: dark) {\n  /* Dark mode styles would go here */\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-user-notifications', template: "<div class=\"notifications-container\">\n  <!-- Header Section -->\n  <div class=\"notifications-header\">\n    <div class=\"header-top\">\n      <div class=\"header-title\">\n        <div class=\"title-icon\">\n          <i class=\"fa-solid fa-bell\"></i>\n        </div>\n        <h1>Notifications</h1>\n      </div>\n\n      @if (AllNotifications.length > 0) {\n        <div class=\"header-actions\">\n          @if (UnreadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-ghost\"\n                    type=\"button\"\n                    (click)=\"markAllAsRead()\"\n                    aria-label=\"Mark all notifications as read\">\n              <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Read</span>\n            </button>\n          }\n          @if (ReadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-secondary\"\n                    type=\"button\"\n                    (click)=\"markAllAsUnread()\"\n                    aria-label=\"Mark all notifications as unread\">\n              <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Unread</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Filters Section -->\n    @if (AllNotifications.length > 0) {\n      <div class=\"filters-section\">\n        <!-- Horizontal Slider for Filters (Mobile) -->\n        <div class=\"filters-slider\">\n          <div class=\"slider-content\">\n            <!-- Stats Pills (Filter Tabs) -->\n            <div class=\"header-stats\" role=\"group\" aria-label=\"Filter notifications by read status\">\n              <input #allRadio type=\"radio\" name=\"UnreadStatus\" value=\"All\"\n                     (change)=\"onReadRadioChanged($event)\" checked class=\"hidden-radio\"\n                     id=\"filter-all\" />\n              <button class=\"stat-pill\"\n                      type=\"button\"\n                      [class.active]=\"radioSelected === 'All'\"\n                      (click)=\"selectReadOption('All')\"\n                      [attr.aria-pressed]=\"radioSelected === 'All'\"\n                      aria-label=\"Show all notifications\">\n                <span class=\"stat-label\">All</span>\n                <span class=\"stat-count\">{{AllNotifications.length}}</span>\n              </button>\n\n              <input #unreadRadio type=\"radio\" name=\"UnreadStatus\" value=\"Unread\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-unread\" />\n              @if (UnreadNotifications.length > 0 || ReadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Unread'\"\n                        [class.has-unread]=\"UnreadNotifications.length > 0\"\n                        (click)=\"selectReadOption('Unread')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Unread'\"\n                        aria-label=\"Show unread notifications\">\n                  <span class=\"stat-label\">Unread</span>\n                  <span class=\"stat-count\" [class.unread-count]=\"UnreadNotifications.length > 0\">\n                    {{UnreadNotifications.length}}\n                  </span>\n                </button>\n              }\n\n              <input #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-read\" />\n              @if (ReadNotifications.length > 0 || UnreadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Read'\"\n                        (click)=\"selectReadOption('Read')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Read'\"\n                        aria-label=\"Show read notifications\">\n                  <span class=\"stat-label\">Read</span>\n                  <span class=\"stat-count\">{{ReadNotifications.length}}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Native Type Filter Dropdown (in slider on mobile) -->\n            @if (notificationTypes.length > 0) {\n              <div class=\"filter-item type-filter-slider\">\n                <select class=\"type-select\"\n                        [(ngModel)]=\"selectedTypeFilter\"\n                        (change)=\"onTypeFilterChange(selectedTypeFilter)\"\n                        aria-label=\"Filter by notification type\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of notificationTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{type.Name}}</option>\n                  }\n                </select>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Search Filter (separate, full-width on mobile) -->\n        <div class=\"search-section\">\n          <div class=\"search-container\">\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   placeholder=\"Search notifications...\"\n                   [value]=\"currentFilter\"\n                   (input)=\"onFilterChanged($any($event.target).value)\"\n                   aria-label=\"Search notifications\" />\n          </div>\n        </div>\n\n        <!-- Filter Info Badge -->\n        @if (NotificationsToShow.length !== AllNotifications.length) {\n          <div class=\"filter-info\">\n            <span class=\"filter-badge\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              Showing {{NotificationsToShow.length}} of {{AllNotifications.length}}\n            </span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Notifications Content -->\n  <div class=\"notifications-content\">\n    @if (NotificationsToShow.length === 0 && AllNotifications.length === 0) {\n      <mj-empty-state\n        Variant=\"success\"\n        Icon=\"fa-solid fa-bell-slash\"\n        Title=\"No Notifications\"\n        Message=\"You're all caught up! New notifications will appear here.\" />\n    } @else if (NotificationsToShow.length === 0) {\n      <mj-empty-state\n        Variant=\"no-results\"\n        Icon=\"fa-solid fa-filter-circle-xmark\"\n        Title=\"No Matching Notifications\"\n        Message=\"Try adjusting your filters to see more notifications.\" />\n    } @else {\n      <!-- Notifications List -->\n      <div class=\"notifications-list\">\n        @for (notification of NotificationsToShow; track notification.ID) {\n          <article class=\"notification-card\"\n                   [class.unread]=\"notification.Unread\"\n                   [class.clickable]=\"isNotificationClickable(notification)\"\n                   role=\"article\"\n                   [attr.aria-label]=\"notification.Title\">\n\n            <!-- Unread Indicator Bar -->\n            <div class=\"card-indicator\" aria-hidden=\"true\"></div>\n\n            <!-- Type Icon -->\n            <div class=\"card-icon\"\n                 [style.background-color]=\"getTypeColor(notification) + '15'\"\n                 aria-hidden=\"true\">\n              <i [class]=\"'fa-solid ' + getTypeIcon(notification)\"\n                 [style.color]=\"getTypeColor(notification)\"></i>\n            </div>\n\n            <!-- Content -->\n            <div class=\"card-content\" (click)=\"notificationClicked(notification)\">\n              <div class=\"card-header\">\n                <h3 class=\"card-title\" [class.card-title-unread]=\"notification.Unread\">\n                  {{notification.Title}}\n                </h3>\n                <span class=\"card-time\">\n                  <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>\n                  <time [attr.datetime]=\"notification.__mj_CreatedAt\">\n                    {{notification.__mj_CreatedAt | date:'MMM d, h:mm a'}}\n                  </time>\n                </span>\n              </div>\n\n              <div class=\"card-meta\">\n                <span class=\"card-type\"\n                      [style.background-color]=\"getTypeColor(notification) + '15'\"\n                      [style.color]=\"getTypeColor(notification)\">\n                  {{getTypeName(notification)}}\n                </span>\n              </div>\n\n              <p class=\"card-message\">{{notification.Message}}</p>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"card-actions\">\n              @if (notification.Unread) {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, true, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as read'\"\n                        title=\"Mark as Read\">\n                  <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Read</span>\n                </button>\n              } @else {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, false, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as unread'\"\n                        title=\"Mark as Unread\">\n                  <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Unread</span>\n                </button>\n              }\n            </div>\n          </article>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ===================================\n   USER NOTIFICATIONS - MD3 DESIGN\n   iPhone-inspired UX with Circular Buttons\n   =================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* ===================================\n   CONTAINER\n   =================================== */\n\n.notifications-container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n/* ===================================\n   HEADER SECTION\n   =================================== */\n\n.notifications-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Header Top Row */\n.header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon:hover {\n  transform: scale(1.05);\n}\n\n.title-icon i {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title h1 {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n/* ===================================\n   HEADER ACTIONS - Circular Buttons\n   =================================== */\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn i {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn:hover i {\n  transform: scale(1.1);\n}\n\n/* Ghost Button - White Background (Mark All Read) */\n.action-btn-ghost {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n/* Secondary Button */\n.action-btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:active {\n  transform: scale(0.98);\n}\n\n/* ===================================\n   FILTERS SECTION\n   =================================== */\n\n.filters-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n/* ===================================\n   STATS PILLS (Filter Tabs) - Circular with mj-blue Active\n   =================================== */\n\n.header-stats {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n/* Active State - MJ Blue */\n.stat-pill.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active .stat-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n/* ===================================\n   TYPE FILTER IN SLIDER\n   =================================== */\n\n.type-filter-slider {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n/* ===================================\n   SEARCH SECTION\n   =================================== */\n\n.search-section {\n  padding: 0 24px 16px;\n}\n\n/* ===================================\n   FILTER INFO\n   =================================== */\n\n.filter-info {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n/* Native Select Dropdown Styling */\n.type-select {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container:focus-within .search-icon {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge i {\n  font-size: 12px;\n}\n\n/* ===================================\n   NOTIFICATIONS CONTENT\n   =================================== */\n\n.notifications-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  /* iPhone smooth scrolling */\n}\n\n/* Custom Scrollbar */\n.notifications-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* ===================================\n   NOTIFICATIONS LIST\n   =================================== */\n\n.notifications-list {\n  background: transparent;\n}\n\n/* ===================================\n   NOTIFICATION CARD - iPhone UX Style\n   =================================== */\n\n.notification-card {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card:last-child {\n  border-bottom: none;\n}\n\n.notification-card:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable {\n  cursor: pointer;\n}\n\n.notification-card.clickable:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n/* Unread State with Blue Highlight */\n.notification-card.unread {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n/* Card Indicator - Blue Bar for Unread */\n.card-indicator {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread .card-indicator {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Card Icon - Larger and More Prominent */\n.card-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card:hover .card-icon {\n  transform: scale(1.05);\n}\n\n.card-icon i {\n  font-size: 24px;\n}\n\n/* Card Content */\n.card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable .card-title {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable:hover .card-title {\n  text-decoration: underline;\n}\n\n.card-time {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time i {\n  font-size: 12px;\n}\n\n/* Card Meta */\n.card-meta {\n  margin-bottom: 8px;\n}\n\n.card-type {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* Card Message */\n.card-message {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Card Actions - Circular Buttons */\n.card-actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn i {\n  font-size: 13px;\n}\n\n/* ===================================\n   ANIMATIONS\n   =================================== */\n\n@keyframes slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card {\n  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===================================\n   ACCESSIBILITY\n   =================================== */\n\nbutton:focus-visible,\ninput:focus-visible,\nselect:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ===================================\n   RESPONSIVE DESIGN - iPhone UX\n   =================================== */\n\n/* iPad and smaller */\n@media (max-width: 768px) {\n  .notifications-container {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon i {\n    font-size: 20px;\n  }\n\n  .header-title h1 {\n    font-size: 1.5rem;\n  }\n\n  /* Horizontal Slider on Mobile */\n  .slider-content {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider {\n    min-width: 160px;\n  }\n\n  .search-section {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon i {\n    font-size: 22px;\n  }\n}\n\n/* iPhone SE and smaller */\n@media (max-width: 480px) {\n  .header-top {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title {\n    justify-content: flex-start;\n  }\n\n  .title-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon i {\n    font-size: 18px;\n  }\n\n  .header-title h1 {\n    font-size: 1.375rem;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text {\n    display: none;\n  }\n\n  /* Horizontal Slider - iPhone */\n  .slider-content {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats {\n    gap: 8px;\n  }\n\n  .stat-pill {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label {\n    font-size: 13px;\n  }\n\n  .stat-count {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider {\n    min-width: 140px;\n  }\n\n  .type-select,\n  .search-input {\n    font-size: 16px;  /* Prevent iOS zoom on focus */\n  }\n\n  .search-section {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon i {\n    font-size: 20px;\n  }\n\n  .card-title {\n    font-size: 15px;\n  }\n\n  .card-time {\n    font-size: 12px;\n  }\n\n  .card-message {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text {\n    display: none;\n  }\n\n  .card-action-btn {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n}\n\n/* iPhone 12/13/14 Pro Max and similar */\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text {\n    display: inline;\n  }\n\n  .action-btn {\n    font-size: 14px;\n  }\n}\n\n/* Dark mode support (if needed in future) */\n@media (prefers-color-scheme: dark) {\n  /* Dark mode styles would go here */\n}\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i1.NavigationService }, { type: i2.ApplicationManager }], { allRadio: [{
             type: ViewChild,
             args: ['allRadio']