@memberjunction/ng-explorer-core 3.2.0 → 3.4.0

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

@@ -7,49 +7,45 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@progress/kendo-angular-inputs";
-import * as i7 from "@progress/kendo-angular-listview";
-import * as i8 from "@progress/kendo-angular-dropdowns";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/common";
 const _c0 = ["allRadio"];
 const _c1 = ["unreadRadio"];
 const _c2 = ["readRadio"];
-const _c3 = () => ({ ID: null, Name: "All Types" });
-function UserNotificationsComponent_div_8_button_1_Template(rf, ctx) { if (rf & 1) {
+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", 18);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_div_8_button_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", 19);
-    i0.ɵɵelementStart(2, "span", 20);
+    i0.ɵɵelementStart(0, "button", 16);
+    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.ɵɵtext(3, "Mark All Read");
     i0.ɵɵelementEnd()();
 } }
-function UserNotificationsComponent_div_8_button_2_Template(rf, ctx) { if (rf & 1) {
+function UserNotificationsComponent_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_div_8_button_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", 22);
-    i0.ɵɵelementStart(2, "span", 20);
+    i0.ɵɵelementStart(0, "button", 19);
+    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.ɵɵtext(3, "Mark All Unread");
     i0.ɵɵelementEnd()();
 } }
-function UserNotificationsComponent_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵtemplate(1, UserNotificationsComponent_div_8_button_1_Template, 4, 0, "button", 16)(2, UserNotificationsComponent_div_8_button_2_Template, 4, 0, "button", 17);
+function UserNotificationsComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtemplate(1, UserNotificationsComponent_Conditional_8_Conditional_1_Template, 4, 0, "button", 14)(2, UserNotificationsComponent_Conditional_8_Conditional_2_Template, 4, 0, "button", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.UnreadNotifications.length > 0);
+    i0.ɵɵconditional(ctx_r1.UnreadNotifications.length > 0 ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ReadNotifications.length > 0);
+    i0.ɵɵconditional(ctx_r1.ReadNotifications.length > 0 ? 2 : -1);
 } }
-function UserNotificationsComponent_div_9_button_10_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", 25);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_div_9_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectReadOption("Unread")); });
+    i0.ɵɵelementStart(0, "button", 38);
+    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.ɵɵtext(2, "Unread");
     i0.ɵɵelementEnd();
@@ -59,15 +55,16 @@ function UserNotificationsComponent_div_9_button_10_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("active", ctx_r1.radioSelected === "Unread")("has-unread", ctx_r1.UnreadNotifications.length > 0);
+    i0.ɵɵattribute("aria-pressed", ctx_r1.radioSelected === "Unread");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("unread-count", ctx_r1.UnreadNotifications.length > 0);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.UnreadNotifications.length, " ");
 } }
-function UserNotificationsComponent_div_9_button_13_Template(rf, ctx) { if (rf & 1) {
+function UserNotificationsComponent_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_div_9_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectReadOption("Read")); });
+    i0.ɵɵelementStart(0, "button", 39);
+    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.ɵɵtext(2, "Read");
     i0.ɵɵelementEnd();
@@ -77,61 +74,42 @@ function UserNotificationsComponent_div_9_button_13_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("active", ctx_r1.radioSelected === "Read");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.radioSelected === "Read");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.ReadNotifications.length);
 } }
-function UserNotificationsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "input", 24, 0);
-    i0.ɵɵlistener("change", function UserNotificationsComponent_div_9_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReadRadioChanged($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 25);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_div_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectReadOption("All")); });
-    i0.ɵɵelementStart(4, "span", 26);
-    i0.ɵɵtext(5, "All");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 27);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "input", 28, 1);
-    i0.ɵɵlistener("change", function UserNotificationsComponent_div_9_Template_input_change_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReadRadioChanged($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, UserNotificationsComponent_div_9_button_10_Template, 5, 7, "button", 29);
-    i0.ɵɵelementStart(11, "input", 30, 2);
-    i0.ɵɵlistener("change", function UserNotificationsComponent_div_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.ɵɵtemplate(13, UserNotificationsComponent_div_9_button_13_Template, 5, 3, "button", 31);
+function UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 41);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.radioSelected === "All");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.AllNotifications.length);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.UnreadNotifications.length > 0 || ctx_r1.ReadNotifications.length === 0);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.ReadNotifications.length > 0 || ctx_r1.UnreadNotifications.length === 0);
+    const type_r8 = ctx.$implicit;
+    i0.ɵɵproperty("value", type_r8.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(type_r8.Name);
 } }
-function UserNotificationsComponent_div_10_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39)(1, "kendo-dropdownlist", 40);
-    i0.ɵɵtwoWayListener("ngModelChange", function UserNotificationsComponent_div_10_div_2_Template_kendo_dropdownlist_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedTypeFilter, $event) || (ctx_r1.selectedTypeFilter = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function UserNotificationsComponent_div_10_div_2_Template_kendo_dropdownlist_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTypeFilterChange($event)); });
+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.ɵɵ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.ɵɵtext(3, "All Types");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, UserNotificationsComponent_Conditional_9_Conditional_17_For_5_Template, 2, 2, "option", 41, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("data", ctx_r1.notificationTypes)("valuePrimitive", true);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedTypeFilter);
-    i0.ɵɵproperty("defaultItem", i0.ɵɵpureFunction0(4, _c3));
-} }
-function UserNotificationsComponent_div_10_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 41);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.notificationTypes);
 } }
-function UserNotificationsComponent_div_10_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "span", 43);
-    i0.ɵɵelement(2, "i", 44);
+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.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -139,26 +117,58 @@ function UserNotificationsComponent_div_10_div_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate2(" Showing ", ctx_r1.NotificationsToShow.length, " of ", ctx_r1.AllNotifications.length, " ");
 } }
-function UserNotificationsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33);
-    i0.ɵɵtemplate(2, UserNotificationsComponent_div_10_div_2_Template, 2, 5, "div", 34);
-    i0.ɵɵelementStart(3, "div", 35)(4, "kendo-textbox", 36);
-    i0.ɵɵlistener("valueChange", function UserNotificationsComponent_div_10_Template_kendo_textbox_valueChange_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChanged($event)); });
-    i0.ɵɵtemplate(5, UserNotificationsComponent_div_10_ng_template_5_Template, 1, 0, "ng-template", 37);
+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.ɵɵ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.ɵɵ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.ɵɵtext(8, "All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 27);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "input", 28, 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.ɵɵtemplate(13, UserNotificationsComponent_Conditional_9_Conditional_13_Template, 5, 8, "button", 29);
+    i0.ɵɵelementStart(14, "input", 30, 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.ɵɵtemplate(16, UserNotificationsComponent_Conditional_9_Conditional_16_Template, 5, 4, "button", 31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, UserNotificationsComponent_Conditional_9_Conditional_17_Template, 6, 2, "div", 32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 33)(19, "div", 34);
+    i0.ɵɵelement(20, "i", 35);
+    i0.ɵɵelementStart(21, "input", 36);
+    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.ɵɵtemplate(6, UserNotificationsComponent_div_10_div_6_Template, 4, 2, "div", 38);
+    i0.ɵɵtemplate(22, UserNotificationsComponent_Conditional_9_Conditional_22_Template, 4, 2, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.notificationTypes.length > 0);
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("active", ctx_r1.radioSelected === "All");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.radioSelected === "All");
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r1.NotificationsToShow.length !== ctx_r1.AllNotifications.length);
+    i0.ɵɵtextInterpolate(ctx_r1.AllNotifications.length);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.UnreadNotifications.length > 0 || ctx_r1.ReadNotifications.length === 0 ? 13 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.ReadNotifications.length > 0 || ctx_r1.UnreadNotifications.length === 0 ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.notificationTypes.length > 0 ? 17 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.currentFilter);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.NotificationsToShow.length !== ctx_r1.AllNotifications.length ? 22 : -1);
 } }
-function UserNotificationsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 45);
-    i0.ɵɵelement(2, "i", 46);
+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");
@@ -167,9 +177,9 @@ function UserNotificationsComponent_Conditional_12_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(6, "You're all caught up! New notifications will appear here.");
     i0.ɵɵelementEnd()();
 } }
-function UserNotificationsComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 45);
-    i0.ɵɵelement(2, "i", 47);
+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");
@@ -178,83 +188,92 @@ function UserNotificationsComponent_Conditional_13_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(6, "Try adjusting your filters to see more notifications.");
     i0.ɵɵelementEnd()();
 } }
-function UserNotificationsComponent_Conditional_14_ng_template_1_button_18_Template(rf, ctx) { if (rf & 1) {
+function UserNotificationsComponent_Conditional_13_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_14_ng_template_1_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const dataItem_r10 = i0.ɵɵnextContext().dataItem; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAsRead(dataItem_r10, true, null)); });
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵelementStart(2, "span", 65);
+    i0.ɵɵelementStart(0, "button", 62);
+    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.ɵɵtext(3, "Read");
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const notification_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("aria-label", "Mark " + notification_r10.Title + " as read");
 } }
-function UserNotificationsComponent_Conditional_14_ng_template_1_button_19_Template(rf, ctx) { if (rf & 1) {
+function UserNotificationsComponent_Conditional_13_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_14_ng_template_1_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const dataItem_r10 = i0.ɵɵnextContext().dataItem; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.markAsRead(dataItem_r10, false, null)); });
-    i0.ɵɵelement(1, "i", 22);
-    i0.ɵɵelementStart(2, "span", 65);
+    i0.ɵɵelementStart(0, "button", 65);
+    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.ɵɵtext(3, "Unread");
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const notification_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("aria-label", "Mark " + notification_r10.Title + " as unread");
 } }
-function UserNotificationsComponent_Conditional_14_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function UserNotificationsComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "div", 50);
-    i0.ɵɵelementStart(2, "div", 51);
+    i0.ɵɵelementStart(0, "article", 48);
+    i0.ɵɵelement(1, "div", 49);
+    i0.ɵɵelementStart(2, "div", 50);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 52);
-    i0.ɵɵlistener("click", function UserNotificationsComponent_Conditional_14_ng_template_1_Template_div_click_4_listener() { const dataItem_r10 = i0.ɵɵrestoreView(_r9).dataItem; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.notificationClicked(dataItem_r10)); });
-    i0.ɵɵelementStart(5, "div", 53)(6, "h3", 54);
+    i0.ɵɵelementStart(4, "div", 51);
+    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.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 55);
-    i0.ɵɵelement(9, "i", 56);
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "date");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 57)(13, "span", 58);
-    i0.ɵɵtext(14);
+    i0.ɵɵelementStart(8, "span", 54);
+    i0.ɵɵelement(9, "i", 55);
+    i0.ɵɵelementStart(10, "time");
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "date");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 56)(14, "span", 57);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "p", 59);
-    i0.ɵɵtext(16);
+    i0.ɵɵelementStart(16, "p", 58);
+    i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 60);
-    i0.ɵɵtemplate(18, UserNotificationsComponent_Conditional_14_ng_template_1_button_18_Template, 4, 0, "button", 61)(19, UserNotificationsComponent_Conditional_14_ng_template_1_button_19_Template, 4, 0, "button", 62);
+    i0.ɵɵelementStart(18, "div", 59);
+    i0.ɵɵtemplate(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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const dataItem_r10 = ctx.dataItem;
+    const notification_r10 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("unread", dataItem_r10.Unread)("clickable", ctx_r1.isNotificationClickable(dataItem_r10));
+    i0.ɵɵclassProp("unread", notification_r10.Unread)("clickable", ctx_r1.isNotificationClickable(notification_r10));
+    i0.ɵɵattribute("aria-label", notification_r10.Title);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(dataItem_r10) + "15");
+    i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(notification_r10) + "15");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("fa-solid " + ctx_r1.getTypeIcon(dataItem_r10));
-    i0.ɵɵstyleProp("color", ctx_r1.getTypeColor(dataItem_r10));
+    i0.ɵɵclassMap("fa-solid " + ctx_r1.getTypeIcon(notification_r10));
+    i0.ɵɵstyleProp("color", ctx_r1.getTypeColor(notification_r10));
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("card-title-unread", dataItem_r10.Unread);
+    i0.ɵɵclassProp("card-title-unread", notification_r10.Unread);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", dataItem_r10.Title, " ");
+    i0.ɵɵtextInterpolate1(" ", notification_r10.Title, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(11, 22, dataItem_r10.__mj_CreatedAt, "MMM d, h:mm a"), " ");
+    i0.ɵɵattribute("datetime", notification_r10.__mj_CreatedAt);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(12, 23, notification_r10.__mj_CreatedAt, "MMM d, h:mm a"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(dataItem_r10) + "15")("color", ctx_r1.getTypeColor(dataItem_r10));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(notification_r10) + "15")("color", ctx_r1.getTypeColor(notification_r10));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTypeName(dataItem_r10), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTypeName(notification_r10), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(dataItem_r10.Message);
+    i0.ɵɵtextInterpolate(notification_r10.Message);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", dataItem_r10.Unread);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !dataItem_r10.Unread);
+    i0.ɵɵconditional(notification_r10.Unread ? 19 : 20);
 } }
-function UserNotificationsComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-listview", 14);
-    i0.ɵɵtemplate(1, UserNotificationsComponent_Conditional_14_ng_template_1_Template, 20, 25, "ng-template", 48);
+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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("data", ctx_r1.NotificationsToShow);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.NotificationsToShow);
 } }
 export class UserNotificationsComponent {
     sharedService;
@@ -548,34 +567,32 @@ export class UserNotificationsComponent {
             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);
-        } }, decls: 15, vars: 4, consts: [["allRadio", ""], ["unreadRadio", ""], ["readRadio", ""], [1, "notifications-container"], [1, "notifications-header"], [1, "header-top"], [1, "header-title"], [1, "title-icon"], [1, "fa-solid", "fa-bell"], ["class", "header-actions", 4, "ngIf"], ["class", "header-stats", 4, "ngIf"], ["class", "header-toolbar", 4, "ngIf"], [1, "notifications-content"], [1, "empty-state"], [1, "notifications-list", 3, "data"], [1, "header-actions"], ["kendoButton", "", "class", "action-btn action-btn-primary", 3, "click", 4, "ngIf"], ["kendoButton", "", "class", "action-btn", 3, "click", 4, "ngIf"], ["kendoButton", "", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-check-double"], [1, "btn-text"], ["kendoButton", "", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-envelope"], [1, "header-stats"], ["type", "radio", "name", "UnreadStatus", "value", "All", "checked", "", 1, "hidden-radio", 3, "change"], [1, "stat-pill", 3, "click"], [1, "stat-label"], [1, "stat-count"], ["type", "radio", "name", "UnreadStatus", "value", "Unread", 1, "hidden-radio", 3, "change"], ["class", "stat-pill", 3, "active", "has-unread", "click", 4, "ngIf"], ["type", "radio", "name", "UnreadStatus", "value", "Read", 1, "hidden-radio", 3, "change"], ["class", "stat-pill", 3, "active", "click", 4, "ngIf"], [1, "header-toolbar"], [1, "toolbar-filters"], ["class", "filter-item type-filter", 4, "ngIf"], [1, "filter-item", "search-filter"], ["placeholder", "Search notifications...", 1, "search-input", 3, "valueChange"], ["kendoTextBoxSuffixTemplate", ""], ["class", "toolbar-info", 4, "ngIf"], [1, "filter-item", "type-filter"], ["textField", "Name", "valueField", "ID", 1, "type-dropdown", 3, "ngModelChange", "valueChange", "data", "valuePrimitive", "ngModel", "defaultItem"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], [1, "toolbar-info"], [1, "filter-badge"], [1, "fa-solid", "fa-filter"], [1, "empty-icon"], [1, "fa-solid", "fa-bell-slash"], [1, "fa-solid", "fa-filter-circle-xmark"], ["kendoListViewItemTemplate", ""], [1, "notification-card"], [1, "card-indicator"], [1, "card-icon"], [1, "card-content", 3, "click"], [1, "card-header"], [1, "card-title"], [1, "card-time"], [1, "fa-regular", "fa-clock"], [1, "card-meta"], [1, "card-type"], [1, "card-message"], [1, "card-actions"], ["kendoButton", "", "class", "card-action-btn", "title", "Mark as Read", 3, "click", 4, "ngIf"], ["kendoButton", "", "class", "card-action-btn", "title", "Mark as Unread", 3, "click", 4, "ngIf"], ["kendoButton", "", "title", "Mark as Read", 1, "card-action-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "action-text"], ["kendoButton", "", "title", "Mark as Unread", 1, "card-action-btn", 3, "click"]], template: function UserNotificationsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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) {
             i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div", 5)(3, "div", 6)(4, "div", 7);
             i0.ɵɵelement(5, "i", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "h1");
             i0.ɵɵtext(7, "Notifications");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(8, UserNotificationsComponent_div_8_Template, 3, 2, "div", 9);
+            i0.ɵɵtemplate(8, UserNotificationsComponent_Conditional_8_Template, 3, 2, "div", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(9, UserNotificationsComponent_div_9_Template, 14, 5, "div", 10)(10, UserNotificationsComponent_div_10_Template, 7, 2, "div", 11);
+            i0.ɵɵtemplate(9, UserNotificationsComponent_Conditional_9_Template, 23, 9, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "div", 12);
-            i0.ɵɵtemplate(12, UserNotificationsComponent_Conditional_12_Template, 7, 0, "div", 13)(13, UserNotificationsComponent_Conditional_13_Template, 7, 0, "div", 13)(14, UserNotificationsComponent_Conditional_14_Template, 2, 1, "kendo-listview", 14);
+            i0.ɵɵelementStart(10, "div", 11);
+            i0.ɵɵtemplate(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.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngIf", ctx.AllNotifications.length > 0);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.AllNotifications.length > 0);
+            i0.ɵɵconditional(ctx.AllNotifications.length > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.AllNotifications.length > 0);
+            i0.ɵɵconditional(ctx.AllNotifications.length > 0 ? 9 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.NotificationsToShow.length === 0 && ctx.AllNotifications.length === 0 ? 12 : ctx.NotificationsToShow.length === 0 ? 13 : 14);
-        } }, dependencies: [i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.ButtonComponent, i6.TextBoxComponent, i6.TextBoxSuffixTemplateDirective, i7.ItemTemplateDirective, i7.ListViewComponent, i8.DropDownListComponent, i3.DatePipe], styles: ["\n\n\n\n\n\n\n.notifications-container[_ngcontent-%COMP%] {\n  height: 100%;\n  max-height: 800px;\n  display: flex;\n  flex-direction: column;\n  background: var(--white-color);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: linear-gradient(to bottom, var(--white-color), var(--gray-600));\n  border-bottom: 1px solid var(--gray-700);\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: 20px 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: 44px;\n  height: 44px;\n  background: linear-gradient(135deg, var(--mj-blue) 0%, #0091d5 100%);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.3);\n}\n\n.title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: white;\n}\n\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--navy);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--navy);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--gray-600);\n  border-color: var(--gray-800);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-blue);\n  border-color: var(--mj-blue);\n  color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: #005a8c;\n  border-color: #005a8c;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 24px 16px;\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 18px;\n  border-radius: 100px;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-family: inherit;\n}\n\n.stat-pill[_ngcontent-%COMP%]:hover:not(.active) {\n  background: var(--gray-600);\n  border-color: var(--gray-800);\n}\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--navy);\n  border-color: var(--navy);\n  color: white;\n  box-shadow: 0 2px 8px rgba(9, 35, 64, 0.25);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.stat-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 100px;\n  background: var(--gray-700);\n  color: var(--navy);\n  min-width: 24px;\n  text-align: center;\n}\n\n.stat-pill.active[_ngcontent-%COMP%]   .stat-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n\n.stat-count.unread-count[_ngcontent-%COMP%] {\n  background: var(--mj-blue);\n  color: white;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-blue);\n}\n\n\n\n\n\n\n.header-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 24px 16px;\n  gap: 16px;\n  background: var(--gray-600);\n  border-top: 1px solid var(--gray-700);\n}\n\n.toolbar-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.filter-item[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.type-filter[_ngcontent-%COMP%] {\n  min-width: 160px;\n}\n\n.type-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-filter[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 280px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  color: var(--gray-800);\n  font-size: 14px;\n}\n\n.toolbar-info[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--light-blue);\n  color: var(--mj-blue);\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.filter-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n\n\n\n.notifications-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\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: 60px 24px;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  background: var(--gray-600);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--gray-800);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--navy);\n  margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--gray-800);\n  margin: 0;\n  max-width: 280px;\n}\n\n\n\n\n\n\n.notifications-list[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n}\n\n.notifications-list[_ngcontent-%COMP%]   .k-listview-content[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 4px 48px 1fr auto;\n  gap: 16px;\n  align-items: start;\n  padding: 20px 24px;\n  background: var(--white-color);\n  border-bottom: 1px solid var(--gray-700);\n  transition: all 0.2s ease;\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(--gray-600);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:hover {\n  box-shadow: inset 0 0 0 1px var(--gray-700);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.4) 0%, var(--white-color) 50%);\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.5) 0%, var(--gray-600) 50%);\n}\n\n\n\n.card-indicator[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 100%;\n  min-height: 60px;\n  border-radius: 4px;\n  background: transparent;\n  transition: background 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread[_ngcontent-%COMP%]   .card-indicator[_ngcontent-%COMP%] {\n  background: var(--mj-blue);\n  box-shadow: 0 0 8px rgba(0, 118, 182, 0.4);\n}\n\n\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\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: 20px;\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: 15px;\n  font-weight: 500;\n  color: var(--navy);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-blue);\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: 12px;\n  color: var(--gray-800);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\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: 3px 10px;\n  border-radius: 100px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n\n\n.card-message[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--gray-900);\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: 4px;\n}\n\n.card-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--navy);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.card-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--gray-600);\n  border-color: var(--mj-blue);\n  color: var(--mj-blue);\n}\n\n.card-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .notifications-container[_ngcontent-%COMP%] {\n    border-radius: 0;\n    max-height: none;\n    height: 100%;\n  }\n\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: center;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n  }\n\n  .header-toolbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px 16px;\n    gap: 12px;\n  }\n\n  .toolbar-filters[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .type-filter[_ngcontent-%COMP%], \n   .search-filter[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: none;\n  }\n\n  .toolbar-info[_ngcontent-%COMP%] {\n    text-align: center;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 4px 40px 1fr;\n    gap: 12px;\n    padding: 16px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n    padding-top: 12px;\n    justify-content: flex-start;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .card-time[_ngcontent-%COMP%] {\n    order: -1;\n  }\n\n  .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n  }\n}\n\n@media (max-width: 480px) {\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.25rem;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 6px 12px;\n  }\n\n  .stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .stat-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 2px 6px;\n    min-width: 20px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 3px 36px 1fr;\n    gap: 10px;\n    padding: 14px 12px;\n  }\n\n  .card-indicator[_ngcontent-%COMP%] {\n    width: 3px;\n    min-height: 50px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 10px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .card-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .card-message[_ngcontent-%COMP%] {\n    font-size: 13px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 2px 8px;\n  }\n\n  .action-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .card-action-btn[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 40px 16px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%] {\n    width: 64px;\n    height: 64px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 26px;\n  }\n}\n\n\n\n\n\n\n.notifications-list.k-listview[_ngcontent-%COMP%] {\n  font-family: inherit;\n  border: none;\n  background: transparent;\n}\n\n.type-dropdown.k-dropdownlist[_ngcontent-%COMP%] {\n  border-radius: 8px;\n  border-color: var(--gray-700);\n}\n\n.type-dropdown.k-dropdownlist[_ngcontent-%COMP%]:hover {\n  border-color: var(--gray-800);\n}\n\n.type-dropdown.k-dropdownlist.k-focus[_ngcontent-%COMP%] {\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);\n}\n\n.search-input.k-textbox[_ngcontent-%COMP%] {\n  border-radius: 8px;\n  border-color: var(--gray-700);\n}\n\n.search-input.k-textbox[_ngcontent-%COMP%]:hover {\n  border-color: var(--gray-800);\n}\n\n.search-input.k-textbox.k-focus[_ngcontent-%COMP%] {\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);\n}"] });
+            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\n\n[_nghost-%COMP%] {\n  \n\n  --mj-blue: #0076B6;\n  --mj-blue-hover: #3395C8;\n  --mj-blue-active: #4BA5D4;\n  --mj-blue-light: #AAE7FD;\n\n  \n\n  --surface: #FAFCFF;\n  --surface-container: #EDF0F4;\n  --surface-container-low: #F3F5F9;\n  --on-surface: #191C20;\n  --on-surface-variant: #43474E;\n  --outline: #74777F;\n  --outline-variant: #C4C6D0;\n\n  \n\n  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n\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(--surface);\n  border-radius: 12px;\n  box-shadow: var(--elevation-1);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: linear-gradient(to bottom, #FFFFFF, var(--surface-container-low));\n  border-bottom: 1px solid var(--outline-variant);\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: linear-gradient(135deg, var(--mj-blue) 0%, #0091d5 100%);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.3);\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(--on-surface);\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-blue);\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: white;\n  color: var(--mj-blue);\n  border-color: var(--mj-blue);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:hover {\n  background: var(--mj-blue);\n  color: white;\n  border-color: var(--mj-blue);\n  box-shadow: var(--elevation-2);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:active {\n  background: var(--mj-blue-active);\n  transform: scale(0.98);\n}\n\n\n\n.action-btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  color: var(--mj-blue);\n  border-color: var(--mj-blue);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-blue);\n  color: white;\n  border-color: var(--mj-blue);\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(--surface-container-low);\n  border-top: 1px solid var(--outline-variant);\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-blue);\n  background: white;\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(--surface-container-low);\n  border-color: var(--mj-blue-hover);\n  transform: translateY(-1px);\n}\n\n\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--mj-blue);\n  border-color: var(--mj-blue);\n  color: white;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.35);\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(--surface-container);\n  color: var(--on-surface);\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: var(--mj-blue-light);\n  color: var(--mj-blue);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-blue);\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-blue);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--on-surface);\n  background: white;\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-blue-hover);\n  background-color: var(--surface-container-low);\n}\n\n.type-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.15);\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(--on-surface-variant);\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-blue);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  background: white;\n  color: var(--on-surface);\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(--on-surface-variant);\n}\n\n.search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-blue-hover);\n  background: var(--surface-container-low);\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.15);\n  background: white;\n}\n\n.search-container[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-blue);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: var(--mj-blue-light);\n  color: var(--mj-blue);\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-blue);\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(--surface-container-low);\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--outline-variant);\n  border-radius: 4px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--outline);\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(--surface-container);\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(--outline);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--on-surface);\n  margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--on-surface-variant);\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: white;\n  border-bottom: 1px solid var(--outline-variant);\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(--surface-container-low);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:active {\n  background: var(--surface-container);\n  transform: scale(0.995);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.3) 0%, white 60%);\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.4) 0%, var(--surface-container-low) 60%);\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-blue);\n  box-shadow: 0 0 8px rgba(0, 118, 182, 0.5);\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(--on-surface);\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(--on-surface);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-blue);\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(--on-surface-variant);\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(--on-surface-variant);\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-blue);\n  background: white;\n  color: var(--mj-blue);\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-blue);\n  border-color: var(--mj-blue);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--elevation-2);\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-blue);\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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserNotificationsComponent, [{
         type: Component,
-        args: [{ 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      <div class=\"header-actions\" *ngIf=\"AllNotifications.length > 0\">\n        <button *ngIf=\"UnreadNotifications.length > 0\"\n                kendoButton\n                class=\"action-btn action-btn-primary\"\n                (click)=\"markAllAsRead()\">\n          <i class=\"fa-solid fa-check-double\"></i>\n          <span class=\"btn-text\">Mark All Read</span>\n        </button>\n        <button *ngIf=\"ReadNotifications.length > 0\"\n                kendoButton\n                class=\"action-btn\"\n                (click)=\"markAllAsUnread()\">\n          <i class=\"fa-solid fa-envelope\"></i>\n          <span class=\"btn-text\">Mark All Unread</span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Stats Pills (replaces radio buttons - same functionality) -->\n    <div class=\"header-stats\" *ngIf=\"AllNotifications.length > 0\">\n      <input #allRadio type=\"radio\" name=\"UnreadStatus\" value=\"All\"\n             (change)=\"onReadRadioChanged($event)\" checked class=\"hidden-radio\" />\n      <button class=\"stat-pill\"\n              [class.active]=\"radioSelected === 'All'\"\n              (click)=\"selectReadOption('All')\">\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      <button class=\"stat-pill\"\n              *ngIf=\"UnreadNotifications.length > 0 || ReadNotifications.length === 0\"\n              [class.active]=\"radioSelected === 'Unread'\"\n              [class.has-unread]=\"UnreadNotifications.length > 0\"\n              (click)=\"selectReadOption('Unread')\">\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      <input #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\"\n             (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\" />\n      <button class=\"stat-pill\"\n              *ngIf=\"ReadNotifications.length > 0 || UnreadNotifications.length === 0\"\n              [class.active]=\"radioSelected === 'Read'\"\n              (click)=\"selectReadOption('Read')\">\n        <span class=\"stat-label\">Read</span>\n        <span class=\"stat-count\">{{ReadNotifications.length}}</span>\n      </button>\n    </div>\n\n    <!-- Filter Toolbar -->\n    <div class=\"header-toolbar\" *ngIf=\"AllNotifications.length > 0\">\n      <div class=\"toolbar-filters\">\n        <!-- Type Filter Dropdown -->\n        <div class=\"filter-item type-filter\" *ngIf=\"notificationTypes.length > 0\">\n          <kendo-dropdownlist\n            [data]=\"notificationTypes\"\n            textField=\"Name\"\n            valueField=\"ID\"\n            [valuePrimitive]=\"true\"\n            [(ngModel)]=\"selectedTypeFilter\"\n            (valueChange)=\"onTypeFilterChange($event)\"\n            [defaultItem]=\"{ ID: null, Name: 'All Types' }\"\n            class=\"type-dropdown\">\n          </kendo-dropdownlist>\n        </div>\n\n        <!-- Search Filter -->\n        <div class=\"filter-item search-filter\">\n          <kendo-textbox\n            placeholder=\"Search notifications...\"\n            (valueChange)=\"onFilterChanged($event)\"\n            class=\"search-input\">\n            <ng-template kendoTextBoxSuffixTemplate>\n              <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n            </ng-template>\n          </kendo-textbox>\n        </div>\n      </div>\n\n      <div class=\"toolbar-info\" *ngIf=\"NotificationsToShow.length !== AllNotifications.length\">\n        <span class=\"filter-badge\">\n          <i class=\"fa-solid fa-filter\"></i>\n          Showing {{NotificationsToShow.length}} of {{AllNotifications.length}}\n        </span>\n      </div>\n    </div>\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    }\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    }\n    @else {\n      <!-- Notifications List -->\n      <kendo-listview [data]=\"NotificationsToShow\" class=\"notifications-list\">\n        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n          <div class=\"notification-card\"\n               [class.unread]=\"dataItem.Unread\"\n               [class.clickable]=\"isNotificationClickable(dataItem)\">\n\n            <!-- Unread Indicator Bar -->\n            <div class=\"card-indicator\"></div>\n\n            <!-- Type Icon -->\n            <div class=\"card-icon\"\n                 [style.background-color]=\"getTypeColor(dataItem) + '15'\">\n              <i [class]=\"'fa-solid ' + getTypeIcon(dataItem)\"\n                 [style.color]=\"getTypeColor(dataItem)\"></i>\n            </div>\n\n            <!-- Content -->\n            <div class=\"card-content\" (click)=\"notificationClicked(dataItem)\">\n              <div class=\"card-header\">\n                <h3 class=\"card-title\" [class.card-title-unread]=\"dataItem.Unread\">\n                  {{dataItem.Title}}\n                </h3>\n                <span class=\"card-time\">\n                  <i class=\"fa-regular fa-clock\"></i>\n                  {{dataItem.__mj_CreatedAt | date:'MMM d, h:mm a'}}\n                </span>\n              </div>\n\n              <div class=\"card-meta\">\n                <span class=\"card-type\"\n                      [style.background-color]=\"getTypeColor(dataItem) + '15'\"\n                      [style.color]=\"getTypeColor(dataItem)\">\n                  {{getTypeName(dataItem)}}\n                </span>\n              </div>\n\n              <p class=\"card-message\">{{dataItem.Message}}</p>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"card-actions\">\n              <button kendoButton\n                      class=\"card-action-btn\"\n                      *ngIf=\"dataItem.Unread\"\n                      (click)=\"markAsRead(dataItem, true, null)\"\n                      title=\"Mark as Read\">\n                <i class=\"fa-solid fa-check\"></i>\n                <span class=\"action-text\">Read</span>\n              </button>\n              <button kendoButton\n                      class=\"card-action-btn\"\n                      *ngIf=\"!dataItem.Unread\"\n                      (click)=\"markAsRead(dataItem, false, null)\"\n                      title=\"Mark as Unread\">\n                <i class=\"fa-solid fa-envelope\"></i>\n                <span class=\"action-text\">Unread</span>\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-listview>\n    }\n  </div>\n</div>\n", styles: ["/* ===================================\n   USER NOTIFICATIONS - MODERN UI\n   =================================== */\n\n/* Container */\n.notifications-container {\n  height: 100%;\n  max-height: 800px;\n  display: flex;\n  flex-direction: column;\n  background: var(--white-color);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n}\n\n/* ===================================\n   HEADER SECTION\n   =================================== */\n\n.notifications-header {\n  background: linear-gradient(to bottom, var(--white-color), var(--gray-600));\n  border-bottom: 1px solid var(--gray-700);\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: 20px 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: 44px;\n  height: 44px;\n  background: linear-gradient(135deg, var(--mj-blue) 0%, #0091d5 100%);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.3);\n}\n\n.title-icon i {\n  font-size: 20px;\n  color: white;\n}\n\n.header-title h1 {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--navy);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n/* Header Actions */\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--navy);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n  background: var(--gray-600);\n  border-color: var(--gray-800);\n}\n\n.action-btn-primary {\n  background: var(--mj-blue);\n  border-color: var(--mj-blue);\n  color: white;\n}\n\n.action-btn-primary:hover {\n  background: #005a8c;\n  border-color: #005a8c;\n}\n\n.action-btn i {\n  font-size: 14px;\n}\n\n/* ===================================\n   STATS PILLS (Filter Tabs)\n   =================================== */\n\n.header-stats {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 24px 16px;\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 18px;\n  border-radius: 100px;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-family: inherit;\n}\n\n.stat-pill:hover:not(.active) {\n  background: var(--gray-600);\n  border-color: var(--gray-800);\n}\n\n.stat-pill.active {\n  background: var(--navy);\n  border-color: var(--navy);\n  color: white;\n  box-shadow: 0 2px 8px rgba(9, 35, 64, 0.25);\n}\n\n.stat-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.stat-count {\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 100px;\n  background: var(--gray-700);\n  color: var(--navy);\n  min-width: 24px;\n  text-align: center;\n}\n\n.stat-pill.active .stat-count {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n\n.stat-count.unread-count {\n  background: var(--mj-blue);\n  color: white;\n}\n\n.stat-pill.has-unread:not(.active) {\n  border-color: var(--mj-blue);\n}\n\n/* ===================================\n   FILTER TOOLBAR\n   =================================== */\n\n.header-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 24px 16px;\n  gap: 16px;\n  background: var(--gray-600);\n  border-top: 1px solid var(--gray-700);\n}\n\n.toolbar-filters {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.filter-item {\n  flex-shrink: 0;\n}\n\n.type-filter {\n  min-width: 160px;\n}\n\n.type-dropdown {\n  width: 100%;\n}\n\n.search-filter {\n  flex: 1;\n  max-width: 280px;\n}\n\n.search-input {\n  width: 100%;\n}\n\n.search-icon {\n  color: var(--gray-800);\n  font-size: 14px;\n}\n\n.toolbar-info {\n  flex-shrink: 0;\n}\n\n.filter-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--light-blue);\n  color: var(--mj-blue);\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.filter-badge i {\n  font-size: 11px;\n}\n\n/* ===================================\n   NOTIFICATIONS CONTENT\n   =================================== */\n\n.notifications-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  background: var(--gray-600);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\n.empty-icon i {\n  font-size: 32px;\n  color: var(--gray-800);\n}\n\n.empty-state h3 {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--navy);\n  margin: 0 0 8px;\n}\n\n.empty-state p {\n  font-size: 14px;\n  color: var(--gray-800);\n  margin: 0;\n  max-width: 280px;\n}\n\n/* ===================================\n   NOTIFICATIONS LIST\n   =================================== */\n\n.notifications-list {\n  border: none;\n  background: transparent;\n}\n\n.notifications-list .k-listview-content {\n  padding: 0;\n}\n\n/* ===================================\n   NOTIFICATION CARD\n   =================================== */\n\n.notification-card {\n  display: grid;\n  grid-template-columns: 4px 48px 1fr auto;\n  gap: 16px;\n  align-items: start;\n  padding: 20px 24px;\n  background: var(--white-color);\n  border-bottom: 1px solid var(--gray-700);\n  transition: all 0.2s ease;\n  position: relative;\n}\n\n.notification-card:last-child {\n  border-bottom: none;\n}\n\n.notification-card:hover {\n  background: var(--gray-600);\n}\n\n.notification-card.clickable {\n  cursor: pointer;\n}\n\n.notification-card.clickable:hover {\n  box-shadow: inset 0 0 0 1px var(--gray-700);\n}\n\n/* Unread State */\n.notification-card.unread {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.4) 0%, var(--white-color) 50%);\n}\n\n.notification-card.unread:hover {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.5) 0%, var(--gray-600) 50%);\n}\n\n/* Card Indicator */\n.card-indicator {\n  width: 4px;\n  height: 100%;\n  min-height: 60px;\n  border-radius: 4px;\n  background: transparent;\n  transition: background 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread .card-indicator {\n  background: var(--mj-blue);\n  box-shadow: 0 0 8px rgba(0, 118, 182, 0.4);\n}\n\n/* Card Icon */\n.card-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\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: 20px;\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: 15px;\n  font-weight: 500;\n  color: var(--navy);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread {\n  font-weight: 600;\n}\n\n.notification-card.clickable .card-title {\n  color: var(--mj-blue);\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: 12px;\n  color: var(--gray-800);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time i {\n  font-size: 11px;\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: 3px 10px;\n  border-radius: 100px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* Card Message */\n.card-message {\n  font-size: 14px;\n  color: var(--gray-900);\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 */\n.card-actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 4px;\n}\n\n.card-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--navy);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.card-action-btn:hover {\n  background: var(--gray-600);\n  border-color: var(--mj-blue);\n  color: var(--mj-blue);\n}\n\n.card-action-btn i {\n  font-size: 12px;\n}\n\n/* ===================================\n   ANIMATIONS\n   =================================== */\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card {\n  animation: fadeIn 0.3s ease;\n}\n\n/* ===================================\n   RESPONSIVE DESIGN\n   =================================== */\n\n@media (max-width: 768px) {\n  .notifications-container {\n    border-radius: 0;\n    max-height: none;\n    height: 100%;\n  }\n\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: center;\n  }\n\n  .header-actions {\n    justify-content: center;\n  }\n\n  .header-stats {\n    padding: 0 16px 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  .stat-pill {\n    padding: 8px 14px;\n  }\n\n  .header-toolbar {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px 16px;\n    gap: 12px;\n  }\n\n  .toolbar-filters {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .type-filter,\n  .search-filter {\n    width: 100%;\n    max-width: none;\n  }\n\n  .toolbar-info {\n    text-align: center;\n  }\n\n  .notification-card {\n    grid-template-columns: 4px 40px 1fr;\n    gap: 12px;\n    padding: 16px;\n  }\n\n  .card-actions {\n    grid-column: 2 / -1;\n    padding-top: 12px;\n    justify-content: flex-start;\n  }\n\n  .card-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .card-icon i {\n    font-size: 18px;\n  }\n\n  .card-header {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .card-time {\n    order: -1;\n  }\n\n  .btn-text {\n    display: none;\n  }\n\n  .action-btn {\n    padding: 8px 10px;\n  }\n}\n\n@media (max-width: 480px) {\n  .header-title h1 {\n    font-size: 1.25rem;\n  }\n\n  .title-icon {\n    width: 38px;\n    height: 38px;\n  }\n\n  .title-icon i {\n    font-size: 18px;\n  }\n\n  .stat-pill {\n    padding: 6px 12px;\n  }\n\n  .stat-label {\n    font-size: 12px;\n  }\n\n  .stat-count {\n    font-size: 11px;\n    padding: 2px 6px;\n    min-width: 20px;\n  }\n\n  .notification-card {\n    grid-template-columns: 3px 36px 1fr;\n    gap: 10px;\n    padding: 14px 12px;\n  }\n\n  .card-indicator {\n    width: 3px;\n    min-height: 50px;\n  }\n\n  .card-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 10px;\n  }\n\n  .card-icon i {\n    font-size: 16px;\n  }\n\n  .card-title {\n    font-size: 14px;\n  }\n\n  .card-message {\n    font-size: 13px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type {\n    font-size: 10px;\n    padding: 2px 8px;\n  }\n\n  .action-text {\n    display: none;\n  }\n\n  .card-action-btn {\n    padding: 8px;\n  }\n\n  .empty-state {\n    padding: 40px 16px;\n  }\n\n  .empty-icon {\n    width: 64px;\n    height: 64px;\n  }\n\n  .empty-icon i {\n    font-size: 26px;\n  }\n}\n\n/* ===================================\n   KENDO OVERRIDES\n   =================================== */\n\n.notifications-list.k-listview {\n  font-family: inherit;\n  border: none;\n  background: transparent;\n}\n\n.type-dropdown.k-dropdownlist {\n  border-radius: 8px;\n  border-color: var(--gray-700);\n}\n\n.type-dropdown.k-dropdownlist:hover {\n  border-color: var(--gray-800);\n}\n\n.type-dropdown.k-dropdownlist.k-focus {\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);\n}\n\n.search-input.k-textbox {\n  border-radius: 8px;\n  border-color: var(--gray-700);\n}\n\n.search-input.k-textbox:hover {\n  border-color: var(--gray-800);\n}\n\n.search-input.k-textbox.k-focus {\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);\n}\n"] }]
+        args: [{ 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/* MD3 Color Tokens */\n:host {\n  /* Primary - MJ Blue */\n  --mj-blue: #0076B6;\n  --mj-blue-hover: #3395C8;\n  --mj-blue-active: #4BA5D4;\n  --mj-blue-light: #AAE7FD;\n\n  /* Surface Colors */\n  --surface: #FAFCFF;\n  --surface-container: #EDF0F4;\n  --surface-container-low: #F3F5F9;\n  --on-surface: #191C20;\n  --on-surface-variant: #43474E;\n  --outline: #74777F;\n  --outline-variant: #C4C6D0;\n\n  /* Elevation */\n  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n\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(--surface);\n  border-radius: 12px;\n  box-shadow: var(--elevation-1);\n  overflow: hidden;\n}\n\n/* ===================================\n   HEADER SECTION\n   =================================== */\n\n.notifications-header {\n  background: linear-gradient(to bottom, #FFFFFF, var(--surface-container-low));\n  border-bottom: 1px solid var(--outline-variant);\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: linear-gradient(135deg, var(--mj-blue) 0%, #0091d5 100%);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.3);\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(--on-surface);\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-blue);\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: white;\n  color: var(--mj-blue);\n  border-color: var(--mj-blue);\n}\n\n.action-btn-ghost:hover {\n  background: var(--mj-blue);\n  color: white;\n  border-color: var(--mj-blue);\n  box-shadow: var(--elevation-2);\n}\n\n.action-btn-ghost:active {\n  background: var(--mj-blue-active);\n  transform: scale(0.98);\n}\n\n/* Secondary Button */\n.action-btn-secondary {\n  background: white;\n  color: var(--mj-blue);\n  border-color: var(--mj-blue);\n}\n\n.action-btn-secondary:hover {\n  background: var(--mj-blue);\n  color: white;\n  border-color: var(--mj-blue);\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(--surface-container-low);\n  border-top: 1px solid var(--outline-variant);\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-blue);\n  background: white;\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(--surface-container-low);\n  border-color: var(--mj-blue-hover);\n  transform: translateY(-1px);\n}\n\n/* Active State - MJ Blue */\n.stat-pill.active {\n  background: var(--mj-blue);\n  border-color: var(--mj-blue);\n  color: white;\n  box-shadow: 0 4px 12px rgba(0, 118, 182, 0.35);\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(--surface-container);\n  color: var(--on-surface);\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: var(--mj-blue-light);\n  color: var(--mj-blue);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread:not(.active) {\n  border-color: var(--mj-blue);\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-blue);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--on-surface);\n  background: white;\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-blue-hover);\n  background-color: var(--surface-container-low);\n}\n\n.type-select:focus {\n  outline: none;\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.15);\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(--on-surface-variant);\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-blue);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  background: white;\n  color: var(--on-surface);\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(--on-surface-variant);\n}\n\n.search-input:hover {\n  border-color: var(--mj-blue-hover);\n  background: var(--surface-container-low);\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-blue);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.15);\n  background: white;\n}\n\n.search-container:focus-within .search-icon {\n  color: var(--mj-blue);\n}\n\n.filter-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: var(--mj-blue-light);\n  color: var(--mj-blue);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-blue);\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(--surface-container-low);\n}\n\n.notifications-content::-webkit-scrollbar-thumb {\n  background: var(--outline-variant);\n  border-radius: 4px;\n}\n\n.notifications-content::-webkit-scrollbar-thumb:hover {\n  background: var(--outline);\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(--surface-container);\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(--outline);\n}\n\n.empty-state h3 {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--on-surface);\n  margin: 0 0 8px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  color: var(--on-surface-variant);\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: white;\n  border-bottom: 1px solid var(--outline-variant);\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(--surface-container-low);\n}\n\n.notification-card.clickable {\n  cursor: pointer;\n}\n\n.notification-card.clickable:active {\n  background: var(--surface-container);\n  transform: scale(0.995);\n}\n\n/* Unread State with Blue Highlight */\n.notification-card.unread {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.3) 0%, white 60%);\n}\n\n.notification-card.unread:hover {\n  background: linear-gradient(90deg, rgba(170, 231, 253, 0.4) 0%, var(--surface-container-low) 60%);\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-blue);\n  box-shadow: 0 0 8px rgba(0, 118, 182, 0.5);\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(--on-surface);\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(--on-surface);\n}\n\n.notification-card.clickable .card-title {\n  color: var(--mj-blue);\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(--on-surface-variant);\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(--on-surface-variant);\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-blue);\n  background: white;\n  color: var(--mj-blue);\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-blue);\n  border-color: var(--mj-blue);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--elevation-2);\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-blue);\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"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.Router }], { allRadio: [{
             type: ViewChild,
             args: ['allRadio']