@memberjunction/ng-explorer-core 5.24.0 → 5.26.0

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

@@ -1,15 +1,14 @@
 import { Component, ViewChild } from '@angular/core';
 import { SharedService } from '@memberjunction/ng-shared';
 import { MJUserNotificationEntity, UserInfoEngine } from '@memberjunction/core-entities';
-import { Metadata, TransactionVariable } from '@memberjunction/core';
+import { Metadata, TransactionVariable, CompositeKey } from '@memberjunction/core';
 import { SafeJSONParse, UUIDsEqual } from '@memberjunction/global';
 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 "@memberjunction/ng-base-application";
-import * as i4 from "@angular/forms";
-import * as i5 from "@angular/common";
+import * as i2 from "@memberjunction/ng-base-application";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/common";
 const _c0 = ["allRadio"];
 const _c1 = ["unreadRadio"];
 const _c2 = ["readRadio"];
@@ -279,7 +278,6 @@ function UserNotificationsComponent_Conditional_13_Template(rf, ctx) { if (rf &
 } }
 export class UserNotificationsComponent {
     sharedService;
-    router;
     navigationService;
     appManager;
     allRadio;
@@ -290,9 +288,8 @@ export class UserNotificationsComponent {
     notificationTypes = [];
     selectedTypeFilter = null;
     loadingTypes = true;
-    constructor(sharedService, router, navigationService, appManager) {
+    constructor(sharedService, navigationService, appManager) {
         this.sharedService = sharedService;
-        this.router = router;
         this.navigationService = navigationService;
         this.appManager = appManager;
     }
@@ -547,14 +544,44 @@ export class UserNotificationsComponent {
             if (this.navigateToConversation(notification)) {
                 return;
             }
-            const info = this.notificationUrl(notification);
-            if (info.queryString && info.queryString.trim().length > 0) {
-                const fullUrl = `${info.urlParts.join('/')}${info.queryString ? '?' + info.queryString : ''}`;
-                this.router.navigateByUrl(fullUrl);
-            }
-            else {
-                this.router.navigate(info.urlParts);
+            this.navigateToResource(notification);
+        }
+    }
+    /**
+     * Navigate to a resource-based notification using NavigationService methods.
+     * Routes to the correct resource based on the notification's ResourceType.
+     */
+    navigateToResource(notification) {
+        if (!notification.ResourceRecordID || !notification.ResourceTypeID)
+            return;
+        const rt = this.sharedService.ResourceTypeByID(notification.ResourceTypeID);
+        if (!rt)
+            return;
+        const recordId = notification.ResourceRecordID.toString();
+        const rtName = rt.Name.trim().toLowerCase();
+        switch (rtName) {
+            case 'records': {
+                const config = SafeJSONParse(notification.ResourceConfiguration || '');
+                if (config?.Entity) {
+                    const key = new CompositeKey();
+                    key.SimpleLoadFromURLSegment(recordId);
+                    this.navigationService.OpenEntityRecord(config.Entity, key);
+                }
+                break;
             }
+            case 'user views':
+            case 'mj: user views':
+                this.navigationService.OpenView(recordId, 'View');
+                break;
+            case 'dashboards':
+                this.navigationService.OpenDashboard(recordId, 'Dashboard');
+                break;
+            case 'reports':
+                this.navigationService.OpenReport(recordId, 'Report');
+                break;
+            default:
+                console.warn(`[UserNotifications] Unhandled resource type for navigation: ${rt.Name}`);
+                break;
         }
     }
     /**
@@ -633,7 +660,7 @@ export class UserNotificationsComponent {
     onTypeFilterChange(typeId) {
         this.selectedTypeFilter = typeId;
     }
-    static ɵfac = function UserNotificationsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserNotificationsComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i3.ApplicationManager)); };
+    static ɵfac = function UserNotificationsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserNotificationsComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i2.ApplicationManager)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserNotificationsComponent, selectors: [["app-user-notifications"]], viewQuery: function UserNotificationsComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5);
         } if (rf & 2) {
@@ -662,12 +689,12 @@ export class UserNotificationsComponent {
             i0.ɵɵconditional(ctx.AllNotifications.length > 0 ? 9 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.NotificationsToShow.length === 0 && ctx.AllNotifications.length === 0 ? 11 : ctx.NotificationsToShow.length === 0 ? 12 : 13);
-        } }, dependencies: [i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i5.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n.notifications-container[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n\n\n.header-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n\n\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n\n\n.action-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n\n\n.action-btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}\n\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n\n\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio[_ngcontent-%COMP%] {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill[_ngcontent-%COMP%]:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active[_ngcontent-%COMP%]   .stat-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.type-filter-slider[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n\n\n\n\n\n.search-section[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n}\n\n\n\n\n\n\n.filter-info[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n\n\n.type-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.notifications-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  \n\n}\n\n\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 32px;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 96px;\n  height: 96px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n\n\n\n\n\n.notifications-list[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n\n\n.card-indicator[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread[_ngcontent-%COMP%]   .card-indicator[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover   .card-icon[_ngcontent-%COMP%] {\n  transform: scale(1.05);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:hover   .card-title[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.card-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.card-meta[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.card-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  \n\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n\n\n.card-message[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_ngcontent-%COMP%]:focus-visible, \nselect[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .notifications-container[_ngcontent-%COMP%] {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top[_ngcontent-%COMP%] {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 22px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .header-top[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.375rem;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .stat-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 140px;\n  }\n\n  .type-select[_ngcontent-%COMP%], \n   .search-input[_ngcontent-%COMP%] {\n    font-size: 16px;  \n\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator[_ngcontent-%COMP%] {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .card-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .card-message[_ngcontent-%COMP%] {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .card-action-btn[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 60px 20px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text[_ngcontent-%COMP%] {\n    display: inline;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n  \n\n}"] });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n.notifications-container[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.notifications-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n\n\n.header-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n.title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n\n\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n\n\n.action-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n\n\n.action-btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}\n\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n\n\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio[_ngcontent-%COMP%] {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  \n\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill[_ngcontent-%COMP%]:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n\n\n.stat-pill.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active[_ngcontent-%COMP%]   .stat-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread[_ngcontent-%COMP%]:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.type-filter-slider[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n\n\n\n\n\n.search-section[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n}\n\n\n\n\n\n\n.filter-info[_ngcontent-%COMP%] {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n\n\n.type-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.notifications-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  \n\n}\n\n\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 32px;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 96px;\n  height: 96px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n\n\n\n\n\n.notifications-list[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.notification-card[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n\n\n.notification-card.unread[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n\n\n.card-indicator[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread[_ngcontent-%COMP%]   .card-indicator[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card[_ngcontent-%COMP%]:hover   .card-icon[_ngcontent-%COMP%] {\n  transform: scale(1.05);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable[_ngcontent-%COMP%]:hover   .card-title[_ngcontent-%COMP%] {\n  text-decoration: underline;\n}\n\n.card-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.card-meta[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.card-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  \n\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n\n\n.card-message[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  \n\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n\n\n\nbutton[_ngcontent-%COMP%]:focus-visible, \ninput[_ngcontent-%COMP%]:focus-visible, \nselect[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .notifications-container[_ngcontent-%COMP%] {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top[_ngcontent-%COMP%] {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 22px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .header-top[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    justify-content: flex-start;\n  }\n\n  .title-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 1.375rem;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .slider-content[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .stat-pill[_ngcontent-%COMP%] {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .stat-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider[_ngcontent-%COMP%] {\n    min-width: 140px;\n  }\n\n  .type-select[_ngcontent-%COMP%], \n   .search-input[_ngcontent-%COMP%] {\n    font-size: 16px;  \n\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info[_ngcontent-%COMP%] {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card[_ngcontent-%COMP%] {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator[_ngcontent-%COMP%] {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .card-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .card-message[_ngcontent-%COMP%] {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .card-action-btn[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 60px 20px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text[_ngcontent-%COMP%] {\n    display: inline;\n  }\n\n  .action-btn[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n  \n\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserNotificationsComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'app-user-notifications', template: "<div class=\"notifications-container\">\n  <!-- Header Section -->\n  <div class=\"notifications-header\">\n    <div class=\"header-top\">\n      <div class=\"header-title\">\n        <div class=\"title-icon\">\n          <i class=\"fa-solid fa-bell\"></i>\n        </div>\n        <h1>Notifications</h1>\n      </div>\n\n      @if (AllNotifications.length > 0) {\n        <div class=\"header-actions\">\n          @if (UnreadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-ghost\"\n                    type=\"button\"\n                    (click)=\"markAllAsRead()\"\n                    aria-label=\"Mark all notifications as read\">\n              <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Read</span>\n            </button>\n          }\n          @if (ReadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-secondary\"\n                    type=\"button\"\n                    (click)=\"markAllAsUnread()\"\n                    aria-label=\"Mark all notifications as unread\">\n              <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Unread</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Filters Section -->\n    @if (AllNotifications.length > 0) {\n      <div class=\"filters-section\">\n        <!-- Horizontal Slider for Filters (Mobile) -->\n        <div class=\"filters-slider\">\n          <div class=\"slider-content\">\n            <!-- Stats Pills (Filter Tabs) -->\n            <div class=\"header-stats\" role=\"group\" aria-label=\"Filter notifications by read status\">\n              <input #allRadio type=\"radio\" name=\"UnreadStatus\" value=\"All\"\n                     (change)=\"onReadRadioChanged($event)\" checked class=\"hidden-radio\"\n                     id=\"filter-all\" />\n              <button class=\"stat-pill\"\n                      type=\"button\"\n                      [class.active]=\"radioSelected === 'All'\"\n                      (click)=\"selectReadOption('All')\"\n                      [attr.aria-pressed]=\"radioSelected === 'All'\"\n                      aria-label=\"Show all notifications\">\n                <span class=\"stat-label\">All</span>\n                <span class=\"stat-count\">{{AllNotifications.length}}</span>\n              </button>\n\n              <input #unreadRadio type=\"radio\" name=\"UnreadStatus\" value=\"Unread\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-unread\" />\n              @if (UnreadNotifications.length > 0 || ReadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Unread'\"\n                        [class.has-unread]=\"UnreadNotifications.length > 0\"\n                        (click)=\"selectReadOption('Unread')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Unread'\"\n                        aria-label=\"Show unread notifications\">\n                  <span class=\"stat-label\">Unread</span>\n                  <span class=\"stat-count\" [class.unread-count]=\"UnreadNotifications.length > 0\">\n                    {{UnreadNotifications.length}}\n                  </span>\n                </button>\n              }\n\n              <input #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\"\n                     (change)=\"onReadRadioChanged($event)\" class=\"hidden-radio\"\n                     id=\"filter-read\" />\n              @if (ReadNotifications.length > 0 || UnreadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Read'\"\n                        (click)=\"selectReadOption('Read')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Read'\"\n                        aria-label=\"Show read notifications\">\n                  <span class=\"stat-label\">Read</span>\n                  <span class=\"stat-count\">{{ReadNotifications.length}}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Native Type Filter Dropdown (in slider on mobile) -->\n            @if (notificationTypes.length > 0) {\n              <div class=\"filter-item type-filter-slider\">\n                <select class=\"type-select\"\n                        [(ngModel)]=\"selectedTypeFilter\"\n                        (change)=\"onTypeFilterChange(selectedTypeFilter)\"\n                        aria-label=\"Filter by notification type\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of notificationTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{type.Name}}</option>\n                  }\n                </select>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Search Filter (separate, full-width on mobile) -->\n        <div class=\"search-section\">\n          <div class=\"search-container\">\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   placeholder=\"Search notifications...\"\n                   [value]=\"currentFilter\"\n                   (input)=\"onFilterChanged($any($event.target).value)\"\n                   aria-label=\"Search notifications\" />\n          </div>\n        </div>\n\n        <!-- Filter Info Badge -->\n        @if (NotificationsToShow.length !== AllNotifications.length) {\n          <div class=\"filter-info\">\n            <span class=\"filter-badge\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              Showing {{NotificationsToShow.length}} of {{AllNotifications.length}}\n            </span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Notifications Content -->\n  <div class=\"notifications-content\">\n    @if (NotificationsToShow.length === 0 && AllNotifications.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-bell-slash\"></i>\n        </div>\n        <h3>No Notifications</h3>\n        <p>You're all caught up! New notifications will appear here.</p>\n      </div>\n    } @else if (NotificationsToShow.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n        </div>\n        <h3>No Matching Notifications</h3>\n        <p>Try adjusting your filters to see more notifications.</p>\n      </div>\n    } @else {\n      <!-- Notifications List -->\n      <div class=\"notifications-list\">\n        @for (notification of NotificationsToShow; track notification.ID) {\n          <article class=\"notification-card\"\n                   [class.unread]=\"notification.Unread\"\n                   [class.clickable]=\"isNotificationClickable(notification)\"\n                   role=\"article\"\n                   [attr.aria-label]=\"notification.Title\">\n\n            <!-- Unread Indicator Bar -->\n            <div class=\"card-indicator\" aria-hidden=\"true\"></div>\n\n            <!-- Type Icon -->\n            <div class=\"card-icon\"\n                 [style.background-color]=\"getTypeColor(notification) + '15'\"\n                 aria-hidden=\"true\">\n              <i [class]=\"'fa-solid ' + getTypeIcon(notification)\"\n                 [style.color]=\"getTypeColor(notification)\"></i>\n            </div>\n\n            <!-- Content -->\n            <div class=\"card-content\" (click)=\"notificationClicked(notification)\">\n              <div class=\"card-header\">\n                <h3 class=\"card-title\" [class.card-title-unread]=\"notification.Unread\">\n                  {{notification.Title}}\n                </h3>\n                <span class=\"card-time\">\n                  <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>\n                  <time [attr.datetime]=\"notification.__mj_CreatedAt\">\n                    {{notification.__mj_CreatedAt | date:'MMM d, h:mm a'}}\n                  </time>\n                </span>\n              </div>\n\n              <div class=\"card-meta\">\n                <span class=\"card-type\"\n                      [style.background-color]=\"getTypeColor(notification) + '15'\"\n                      [style.color]=\"getTypeColor(notification)\">\n                  {{getTypeName(notification)}}\n                </span>\n              </div>\n\n              <p class=\"card-message\">{{notification.Message}}</p>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"card-actions\">\n              @if (notification.Unread) {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, true, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as read'\"\n                        title=\"Mark as Read\">\n                  <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Read</span>\n                </button>\n              } @else {\n                <button class=\"card-action-btn\"\n                        type=\"button\"\n                        (click)=\"markAsRead(notification, false, null)\"\n                        [attr.aria-label]=\"'Mark ' + notification.Title + ' as unread'\"\n                        title=\"Mark as Unread\">\n                  <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n                  <span class=\"action-text\">Unread</span>\n                </button>\n              }\n            </div>\n          </article>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ===================================\n   USER NOTIFICATIONS - MD3 DESIGN\n   iPhone-inspired UX with Circular Buttons\n   =================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* ===================================\n   CONTAINER\n   =================================== */\n\n.notifications-container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n/* ===================================\n   HEADER SECTION\n   =================================== */\n\n.notifications-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Header Top Row */\n.header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 24px 16px;\n  gap: 16px;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.title-icon {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.title-icon:hover {\n  transform: scale(1.05);\n}\n\n.title-icon i {\n  font-size: 22px;\n  color: white;\n}\n\n.header-title h1 {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n/* ===================================\n   HEADER ACTIONS - Circular Buttons\n   =================================== */\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  font-family: inherit;\n}\n\n.action-btn i {\n  font-size: 16px;\n  transition: transform 0.2s ease;\n}\n\n.action-btn:hover i {\n  transform: scale(1.1);\n}\n\n/* Ghost Button - White Background (Mark All Read) */\n.action-btn-ghost {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.action-btn-ghost:active {\n  background: var(--mj-brand-primary);\n  transform: scale(0.98);\n}\n\n/* Secondary Button */\n.action-btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:hover {\n  background: var(--mj-brand-primary);\n  color: white;\n  border-color: var(--mj-brand-primary);\n}\n\n.action-btn-secondary:active {\n  transform: scale(0.98);\n}\n\n/* ===================================\n   FILTERS SECTION\n   =================================== */\n\n.filters-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.filters-slider {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.filters-slider::-webkit-scrollbar {\n  display: none;\n}\n\n.slider-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  min-width: min-content;\n}\n\n/* ===================================\n   STATS PILLS (Filter Tabs) - Circular with mj-blue Active\n   =================================== */\n\n.header-stats {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.hidden-radio {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.stat-pill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 9999px;  /* Circular design */\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  min-height: 44px;\n}\n\n.stat-pill:hover:not(.active) {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n/* Active State - MJ Blue */\n.stat-pill.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transform: translateY(-1px);\n}\n\n.stat-label {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-count {\n  font-size: 13px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 9999px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  min-width: 28px;\n  text-align: center;\n  transition: all 0.2s ease;\n}\n\n.stat-pill.active .stat-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: white;\n}\n\n.stat-count.unread-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: 700;\n}\n\n.stat-pill.has-unread:not(.active) {\n  border-color: var(--mj-brand-primary);\n}\n\n/* ===================================\n   TYPE FILTER IN SLIDER\n   =================================== */\n\n.type-filter-slider {\n  flex-shrink: 0;\n  min-width: 180px;\n}\n\n/* ===================================\n   SEARCH SECTION\n   =================================== */\n\n.search-section {\n  padding: 0 24px 16px;\n}\n\n/* ===================================\n   FILTER INFO\n   =================================== */\n\n.filter-info {\n  padding: 0 24px 16px;\n  display: flex;\n  justify-content: center;\n}\n\n/* Native Select Dropdown Styling */\n.type-select {\n  width: 100%;\n  padding: 10px 16px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230076B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 42px;\n}\n\n.type-select:hover {\n  border-color: var(--mj-brand-primary);\n  background-color: var(--mj-bg-surface-card);\n}\n\n.type-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-container {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n.search-input {\n  width: 100%;\n  padding: 10px 16px 10px 44px;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 14px;\n  font-weight: 500;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  font-family: inherit;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  background: var(--mj-bg-surface);\n}\n\n.search-container:focus-within .search-icon {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.filter-badge i {\n  font-size: 12px;\n}\n\n/* ===================================\n   NOTIFICATIONS CONTENT\n   =================================== */\n\n.notifications-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;  /* iPhone smooth scrolling */\n}\n\n/* Custom Scrollbar */\n.notifications-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.notifications-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n}\n\n.notifications-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.notifications-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* ===================================\n   EMPTY STATE\n   =================================== */\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 32px;\n  text-align: center;\n}\n\n.empty-icon {\n  width: 96px;\n  height: 96px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state h3 {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n/* ===================================\n   NOTIFICATIONS LIST\n   =================================== */\n\n.notifications-list {\n  background: transparent;\n}\n\n/* ===================================\n   NOTIFICATION CARD - iPhone UX Style\n   =================================== */\n\n.notification-card {\n  display: grid;\n  grid-template-columns: 4px 56px 1fr auto;\n  gap: 14px;\n  align-items: start;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n}\n\n.notification-card:last-child {\n  border-bottom: none;\n}\n\n.notification-card:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.notification-card.clickable {\n  cursor: pointer;\n}\n\n.notification-card.clickable:active {\n  background: var(--mj-bg-surface-sunken);\n  transform: scale(0.995);\n}\n\n/* Unread State with Blue Highlight */\n.notification-card.unread {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.notification-card.unread:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-card));\n}\n\n/* Card Indicator - Blue Bar for Unread */\n.card-indicator {\n  width: 4px;\n  height: 100%;\n  min-height: 64px;\n  border-radius: 2px;\n  background: transparent;\n  transition: all 0.2s ease;\n  align-self: stretch;\n}\n\n.notification-card.unread .card-indicator {\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Card Icon - Larger and More Prominent */\n.card-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.notification-card:hover .card-icon {\n  transform: scale(1.05);\n}\n\n.card-icon i {\n  font-size: 24px;\n}\n\n/* Card Content */\n.card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 6px;\n}\n\n.card-title {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  margin: 0;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n\n.card-title-unread {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.notification-card.clickable .card-title {\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable:hover .card-title {\n  text-decoration: underline;\n}\n\n.card-time {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.card-time i {\n  font-size: 12px;\n}\n\n/* Card Meta */\n.card-meta {\n  margin-bottom: 8px;\n}\n\n.card-type {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* Card Message */\n.card-message {\n  font-size: 15px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Card Actions - Circular Buttons */\n.card-actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n.card-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 9999px;  /* Circular design */\n  font-size: 13px;\n  font-weight: 600;\n  border: 2px solid var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  font-family: inherit;\n}\n\n.card-action-btn:hover {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.card-action-btn:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.card-action-btn i {\n  font-size: 13px;\n}\n\n/* ===================================\n   ANIMATIONS\n   =================================== */\n\n@keyframes slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.notification-card {\n  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===================================\n   ACCESSIBILITY\n   =================================== */\n\nbutton:focus-visible,\ninput:focus-visible,\nselect:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ===================================\n   RESPONSIVE DESIGN - iPhone UX\n   =================================== */\n\n/* iPad and smaller */\n@media (max-width: 768px) {\n  .notifications-container {\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  .header-top {\n    padding: 20px 20px 14px;\n  }\n\n  .title-icon {\n    width: 44px;\n    height: 44px;\n  }\n\n  .title-icon i {\n    font-size: 20px;\n  }\n\n  .header-title h1 {\n    font-size: 1.5rem;\n  }\n\n  /* Horizontal Slider on Mobile */\n  .slider-content {\n    padding: 14px 20px;\n    gap: 10px;\n  }\n\n  .stat-pill {\n    padding: 8px 16px;\n    flex-shrink: 0;\n  }\n\n  .type-filter-slider {\n    min-width: 160px;\n  }\n\n  .search-section {\n    padding: 0 20px 14px;\n  }\n\n  .filter-info {\n    padding: 0 20px 14px;\n  }\n\n  .notification-card {\n    grid-template-columns: 4px 52px 1fr;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .card-actions {\n    grid-column: 2 / -1;\n    padding-top: 10px;\n  }\n\n  .card-icon {\n    width: 52px;\n    height: 52px;\n  }\n\n  .card-icon i {\n    font-size: 22px;\n  }\n}\n\n/* iPhone SE and smaller */\n@media (max-width: 480px) {\n  .header-top {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    padding: 16px 16px 12px;\n  }\n\n  .header-title {\n    justify-content: flex-start;\n  }\n\n  .title-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .title-icon i {\n    font-size: 18px;\n  }\n\n  .header-title h1 {\n    font-size: 1.375rem;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n    gap: 8px;\n  }\n\n  .action-btn {\n    flex: 1;\n    justify-content: center;\n    padding: 10px 16px;\n    font-size: 13px;\n  }\n\n  .btn-text {\n    display: none;\n  }\n\n  /* Horizontal Slider - iPhone */\n  .slider-content {\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .header-stats {\n    gap: 8px;\n  }\n\n  .stat-pill {\n    padding: 8px 14px;\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n\n  .stat-label {\n    font-size: 13px;\n  }\n\n  .stat-count {\n    font-size: 12px;\n    padding: 3px 8px;\n    min-width: 24px;\n  }\n\n  .type-filter-slider {\n    min-width: 140px;\n  }\n\n  .type-select,\n  .search-input {\n    font-size: 16px;  /* Prevent iOS zoom on focus */\n  }\n\n  .search-section {\n    padding: 0 16px 12px;\n  }\n\n  .filter-info {\n    padding: 0 16px 12px;\n  }\n\n  .notification-card {\n    grid-template-columns: 3px 48px 1fr;\n    gap: 10px;\n    padding: 12px 12px;\n  }\n\n  .card-indicator {\n    width: 3px;\n    min-height: 56px;\n  }\n\n  .card-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n  }\n\n  .card-icon i {\n    font-size: 20px;\n  }\n\n  .card-title {\n    font-size: 15px;\n  }\n\n  .card-time {\n    font-size: 12px;\n  }\n\n  .card-message {\n    font-size: 14px;\n    -webkit-line-clamp: 2;\n  }\n\n  .card-type {\n    font-size: 11px;\n    padding: 3px 10px;\n  }\n\n  .card-actions {\n    padding-top: 8px;\n    gap: 6px;\n  }\n\n  .action-text {\n    display: none;\n  }\n\n  .card-action-btn {\n    padding: 8px 12px;\n    min-width: 40px;\n    justify-content: center;\n  }\n\n  .empty-state {\n    padding: 60px 20px;\n  }\n\n  .empty-icon {\n    width: 80px;\n    height: 80px;\n  }\n\n  .empty-icon i {\n    font-size: 32px;\n  }\n\n  .empty-state h3 {\n    font-size: 18px;\n  }\n\n  .empty-state p {\n    font-size: 14px;\n  }\n}\n\n/* iPhone 12/13/14 Pro Max and similar */\n@media (min-width: 390px) and (max-width: 480px) {\n  .btn-text {\n    display: inline;\n  }\n\n  .action-btn {\n    font-size: 14px;\n  }\n}\n\n/* Dark mode support (if needed in future) */\n@media (prefers-color-scheme: dark) {\n  /* Dark mode styles would go here */\n}\n"] }]
-    }], () => [{ type: i1.SharedService }, { type: i2.Router }, { type: i1.NavigationService }, { type: i3.ApplicationManager }], { allRadio: [{
+    }], () => [{ type: i1.SharedService }, { type: i1.NavigationService }, { type: i2.ApplicationManager }], { allRadio: [{
             type: ViewChild,
             args: ['allRadio']
         }], unreadRadio: [{
@@ -677,5 +704,5 @@ export class UserNotificationsComponent {
             type: ViewChild,
             args: ['readRadio']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent", filePath: "src/lib/user-notifications/user-notifications.component.ts", lineNumber: 56 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent", filePath: "src/lib/user-notifications/user-notifications.component.ts", lineNumber: 55 }); })();
 //# sourceMappingURL=user-notifications.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"user-notifications.component.js","sourceRoot":"","sources":["../../../src/lib/user-notifications/user-notifications.component.ts","../../../src/lib/user-notifications/user-notifications.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAqC,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,aAAa,EAAqB,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAoD,wBAAwB,EAAgC,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzK,OAAO,EAAE,QAAQ,EAAwB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3F,OAAO,EAAE,aAAa,EAAG,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;;;;;;;;;;;;;ICQ7D,kCAGoD;IAD5C,6MAAS,sBAAe,KAAC;IAE/B,wBAA2D;IAC3D,gCAAuB;IAAA,6BAAa;IACtC,AADsC,iBAAO,EACpC;;;;IAGT,kCAGsD;IAD9C,6MAAS,wBAAiB,KAAC;IAEjC,wBAAuD;IACvD,gCAAuB;IAAA,+BAAe;IACxC,AADwC,iBAAO,EACtC;;;IAjBb,8BAA4B;IAC1B,8GAAsC;IAStC,8GAAoC;IAStC,iBAAM;;;IAlBJ,cAQC;IARD,gEAQC;IACD,cAQC;IARD,8DAQC;;;;IA8BK,kCAM+C;IAFvC,8MAAS,wBAAiB,QAAQ,CAAC,KAAC;IAG1C,gCAAyB;IAAA,sBAAM;IAAA,iBAAO;IACtC,gCAA+E;IAC7E,YACF;IACF,AADE,iBAAO,EACA;;;IARD,AADA,2DAA2C,qDACQ;;IAKhC,eAAqD;IAArD,qEAAqD;IAC5E,cACF;IADE,kEACF;;;;IAQF,kCAK6C;IAFrC,8MAAS,wBAAiB,MAAM,CAAC,KAAC;IAGxC,gCAAyB;IAAA,oBAAI;IAAA,iBAAO;IACpC,gCAAyB;IAAA,YAA4B;IACvD,AADuD,iBAAO,EACrD;;;IAND,yDAAyC;;IAKtB,eAA4B;IAA5B,qDAA4B;;;IAcnD,kCAA0B;IAAA,YAAa;IAAA,iBAAS;;;IAAxC,kCAAiB;IAAC,cAAa;IAAb,kCAAa;;;;IAN3C,AADF,+BAA4C,iBAIO;IAFzC,uVAAgC;IAChC,gNAAU,oDAAsC,KAAC;IAEvD,kCAAuB;IAAA,yBAAS;IAAA,iBAAS;IACzC,8HAEC;IAEL,AADE,iBAAS,EACL;;;IARI,cAAgC;IAAhC,yDAAgC;IAG9B,cAAc;IAAd,4BAAc;IACtB,eAEC;IAFD,uCAEC;;;IAuBP,AADF,+BAAyB,eACI;IACzB,wBAAqD;IACrD,YACF;IACF,AADE,iBAAO,EACH;;;IAFF,eACF;IADE,kHACF;;;;IAnFE,AADF,AAFF,AADF,AAFF,+BAA6B,cAEC,cACE,cAE8D,mBAG7D;IADlB,qMAAU,iCAA0B,KAAC;IAD5C,iBAEyB;IACzB,kCAK4C;IAFpC,8LAAS,wBAAiB,KAAK,CAAC,KAAC;IAGvC,gCAAyB;IAAA,mBAAG;IAAA,iBAAO;IACnC,gCAAyB;IAAA,aAA2B;IACtD,AADsD,iBAAO,EACpD;IAET,qCAE4B;IADrB,sMAAU,iCAA0B,KAAC;IAD5C,iBAE4B;IAC5B,gHAAwE;IAexE,qCAE0B;IADnB,sMAAU,iCAA0B,KAAC;IAD5C,iBAE0B;IAC1B,gHAAwE;IAW1E,iBAAM;IAGN,6GAAoC;IAcxC,AADE,iBAAM,EACF;IAIJ,AADF,gCAA4B,eACI;IAC5B,yBAA2E;IAC3E,kCAK2C;IADpC,oMAAS,2CAA0C,KAAC;IAG/D,AADE,AANE,iBAK2C,EACvC,EACF;IAGN,6GAA8D;IAQhE,iBAAM;;;IAjFU,eAAwC;IAAxC,wDAAwC;;IAKrB,eAA2B;IAA3B,oDAA2B;IAMtD,eAaC;IAbD,0GAaC;IAKD,eAUC;IAVD,0GAUC;IAIH,cAYC;IAZD,+DAYC;IAWM,eAAuB;IAAvB,4CAAuB;IAOlC,cAOC;IAPD,gGAOC;;;IASD,AADF,+BAAyB,cACC;IACtB,wBAAsC;IACxC,iBAAM;IACN,0BAAI;IAAA,gCAAgB;IAAA,iBAAK;IACzB,yBAAG;IAAA,yEAAyD;IAC9D,AAD8D,iBAAI,EAC5D;;;IAGJ,AADF,+BAAyB,cACC;IACtB,wBAA+C;IACjD,iBAAM;IACN,0BAAI;IAAA,yCAAyB;IAAA,iBAAK;IAClC,yBAAG;IAAA,qEAAqD;IAC1D,AAD0D,iBAAI,EACxD;;;;IAkDI,kCAI6B;IAFrB,6QAAS,oCAAyB,IAAI,EAAE,IAAI,CAAC,KAAC;IAGpD,wBAAoD;IACpD,gCAA0B;IAAA,oBAAI;IAChC,AADgC,iBAAO,EAC9B;;;;;;;IAET,kCAI+B;IAFvB,6QAAS,oCAAyB,KAAK,EAAE,IAAI,CAAC,KAAC;IAGrD,wBAAuD;IACvD,gCAA0B;IAAA,sBAAM;IAClC,AADkC,iBAAO,EAChC;;;;;;;IA7Df,mCAIgD;IAG9C,0BAAqD;IAGrD,+BAEwB;IACtB,oBACkD;IACpD,iBAAM;IAGN,+BAAsE;IAA5C,sOAAS,4CAAiC,KAAC;IAEjE,AADF,+BAAyB,aACgD;IACrE,YACF;IAAA,iBAAK;IACL,gCAAwB;IACtB,wBAAsD;IACtD,6BAAoD;IAClD,aACF;;IAEJ,AADE,AADE,iBAAO,EACF,EACH;IAGJ,AADF,gCAAuB,gBAG4B;IAC/C,aACF;IACF,AADE,iBAAO,EACH;IAEN,8BAAwB;IAAA,aAAwB;IAClD,AADkD,iBAAI,EAChD;IAGN,gCAA0B;IAUtB,AATF,uHAA2B,iGASlB;IAWb,AADE,iBAAM,EACE;;;;IA9DD,AADA,iDAAoC,+DACqB;;IAS3D,eAA4D;IAA5D,gFAA4D;IAE5D,cAAiD;IAAjD,iEAAiD;IACjD,8DAA0C;IAMpB,eAA+C;IAA/C,4DAA+C;IACpE,cACF;IADE,uDACF;IAGQ,eAA6C;;IACjD,cACF;IADE,yGACF;IAMI,eAA4D;IAC5D,AADA,gFAA4D,gDAClB;IAC9C,cACF;IADE,qEACF;IAGsB,eAAwB;IAAxB,8CAAwB;IAKhD,eAkBC;IAlBD,mDAkBC;;;IAhET,+BAAgC;IAC9B,mHAkEC;IACH,iBAAM;;;IAnEJ,cAkEC;IAlED,yCAkEC;;ADrKT,MAAM,OAAO,0BAA0B;IAY5B;IACC;IACA;IACA;IAda,QAAQ,CAAgC;IACrC,WAAW,CAAgC;IAC7C,SAAS,CAAgC;IAE1D,aAAa,GAAqB,KAAK,CAAC;IACxC,aAAa,GAAW,EAAE,CAAC;IAC3B,iBAAiB,GAAmC,EAAE,CAAC;IACvD,kBAAkB,GAAkB,IAAI,CAAC;IACzC,YAAY,GAAY,IAAI,CAAC;IAEpC,YACS,aAA4B,EAC3B,MAAc,EACd,iBAAoC,EACpC,UAA8B;QAH/B,kBAAa,GAAb,aAAa,CAAe;QAC3B,WAAM,GAAN,MAAM,CAAQ;QACd,sBAAiB,GAAjB,iBAAiB,CAAmB;QACpC,eAAU,GAAV,UAAU,CAAoB;IACrC,CAAC;IAEJ,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,aAAa,CAAC,kBAAkB,EAAE,CAAC,CAAC,2DAA2D;IACtG,CAAC;IAEO,qBAAqB;QAC3B,uEAAuE;QACvE,8DAA8D;QAC9D,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,cAAc,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpF,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,IAAI,GAAG,CAAC;YACpC,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,IAAI,GAAG,CAAC;YACpC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gBAC5B,OAAO,SAAS,GAAG,SAAS,CAAC;YAC/B,CAAC;YACD,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,IAAW,mBAAmB;QAC5B,IAAI,IAAI,GAA+B,EAAE,CAAC;QAC1C,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3B,KAAK,KAAK;gBACR,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;gBAC7B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACnD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACpD,MAAM;QACV,CAAC;QAED,gCAAgC;QAChC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACrF,CAAC;QAED,uCAAuC;QACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzC,0DAA0D;YAC1D,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;gBACxE,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAC/E,CAAC;QACtB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,uBAAuB,CAAC,YAAsC;QACnE,0EAA0E;QAC1E,IAAI,YAAY,CAAC,qBAAqB,IAAI,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/F,MAAM,MAAM,GAAG,aAAa,CAA6B,YAAY,CAAC,qBAAqB,CAAC,CAAC;YAC7F,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,eAAe,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;gBACxF,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QAChD,OAAO,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IAEM,eAAe,CAAC,YAAsC;QAC3D,MAAM,GAAG,GAAa,EAAE,CAAC;QACzB,IAAI,WAAW,GAAG,EAAE,CAAC;QACrB,IAAI,YAAY,CAAC,gBAAgB,IAAI,YAAY,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC;YACzE,YAAY,CAAC,cAAc,IAAI,YAAY,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1E,yDAAyD;YACzD,0CAA0C;YAC1C,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YAC5E,IAAI,YAAuC,CAAC;YAC5C,IAAI,EAAE;gBACJ,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;YAE/E,IAAI,EAAE,IAAI,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzD,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACrB,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACvB,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACnD,IAAI,YAAY,CAAC,qBAAqB,IAAI,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC/F,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE,CAAC;wBAC/C,+BAA+B;wBAC/B,MAAM,MAAM,GAAG,aAAa,CAAuB,YAAY,CAAC,qBAAqB,CAAC,CAAC;wBACvF,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM;4BACzB,WAAW,GAAG,UAAU,MAAM,CAAC,MAAM,EAAE,CAAC;oBAC5C,CAAC;;wBAEC,WAAW,GAAG,YAAY,CAAC,qBAAqB,CAAC;gBACrD,CAAC;YACH,CAAC;QACH,CAAC;aACI,IAAI,YAAY,CAAC,qBAAqB,IAAI,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpG,+FAA+F;YAC/F,0GAA0G;YAC1G,qCAAqC;YAErC,MAAM,MAAM,GAAG,aAAa,CAA6B,YAAY,CAAC,qBAAqB,CAAC,CAAC;YAC7F,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,cAAc,EAAE,CAAC;gBACnE,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACjB,+DAA+D;gBAC/D,MAAM,WAAW,GAAa,EAAE,CAAC;gBACjC,IAAI,MAAM,CAAC,cAAc;oBAAE,WAAW,CAAC,IAAI,CAAC,kBAAkB,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC;gBACvF,IAAI,MAAM,CAAC,SAAS;oBAAE,WAAW,CAAC,IAAI,CAAC,aAAa,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC;gBACxE,IAAI,MAAM,CAAC,UAAU;oBAAE,WAAW,CAAC,IAAI,CAAC,cAAc,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC3E,IAAI,MAAM,CAAC,aAAa;oBAAE,WAAW,CAAC,IAAI,CAAC,iBAAiB,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;gBACpF,IAAI,MAAM,CAAC,MAAM;oBAAE,WAAW,CAAC,IAAI,CAAC,UAAU,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;gBAC/D,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;QAED,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;IACxC,CAAC;IAED,IAAW,gBAAgB;QACzB,OAAO,aAAa,CAAC,iBAAiB,CAAC;IACzC,CAAC;IAED,IAAW,mBAAmB;QAC5B,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACrD,CAAC;IAED,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;IAED,gBAAgB,CAAC,MAAwB;QACvC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,8CAA8C;QAC9C,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,KAAK;gBACR,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC3C,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9C,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC5C,MAAM;QACV,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,KAAY;QAC7B,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE,CAAC;YAC7C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAyB,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,iBAAiB,CAAC,YAAsC;QACtD,IAAI,YAAY,CAAC,MAAM,EAAE,CAAC;YACxB,OAAO,8CAA8C,CAAC;QACxD,CAAC;QACD,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,mBAAmB,CAAC,YAAsC;QACxD,IAAI,SAAS,GAAG,mBAAmB,CAAC;QAEpC,IAAI,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC;YAC5C,SAAS,IAAI,8BAA8B,CAAC;QAE9C,IAAI,YAAY,CAAC,MAAM;YACrB,SAAS,IAAI,2BAA2B,CAAC;QAE3C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,YAAsC,EAAE,KAAc,EAAE,UAAuC;QAC9G,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC;YACvC,YAAY,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC;YAC7B,IAAI,kBAA4C,CAAC;YACjD,IAAI,YAAY,YAAY,wBAAwB,EAAE,CAAC;gBACrD,6GAA6G;gBAC7G,kBAAkB,GAAG,YAAY,CAAC;YACpC,CAAC;iBACI,CAAC;gBACJ,4EAA4E;gBAC5E,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;gBAC1B,kBAAkB,GAAG,MAAM,EAAE,CAAC,eAAe,CAA2B,wBAAwB,CAAC,CAAC;gBAClG,MAAM,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAC9C,kBAAkB,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC;YACrC,CAAC;YAED,gGAAgG;YAChG,IAAI,UAAU,EAAE,CAAC;gBACf,kBAAkB,CAAC,gBAAgB,GAAG,UAAU,CAAC;gBACjD,MAAM,kBAAkB,CAAC,IAAI,EAAE,CAAA;gBAC/B,OAAO,IAAI,CAAC;YACd,CAAC;iBACI,CAAC;gBACJ,wDAAwD;gBACxD,MAAM,kBAAkB,CAAC,IAAI,EAAE,CAAC;gBAChC,8DAA8D;gBAC9D,qBAAqB,CAAC,6BAA6B,EAAE,CAAC;gBACtD,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;aACI,CAAC;YACJ,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEM,KAAK,CAAC,aAAa;QACxB,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEzB,kHAAkH;QAClH,MAAM,IAAI,CAAC,6BAA6B,EAAE,CAAC;IAC7C,CAAC;IAEM,KAAK,CAAC,6BAA6B;QACxC,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC,sBAAsB,EAAE,CAAC;QAErD,MAAM,YAAY,GAAG,MAAM,EAAE,CAAC,eAAe,CAAuB,mBAAmB,CAAC,CAAC;QACzF,YAAY,CAAC,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;QACxC,YAAY,CAAC,WAAW,GAAG,mBAAmB,CAAC;QAC/C,YAAY,CAAC,gBAAgB,GAAG,UAAU,CAAC;QAC3C,IAAI,CAAC,MAAM,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,+BAA+B,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QAC9F,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,mBAAmB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA;QACpF,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEjC,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC,eAAe,CAA6B,0BAA0B,CAAC,CAAC;QAC5G,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC;QAC5C,kBAAkB,CAAC,IAAI,GAAG,MAAM,CAAC;QACjC,kBAAkB,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC,yKAAyK;QAClN,kBAAkB,CAAC,gBAAgB,GAAG,UAAU,CAAC;QACjD,IAAI,CAAC,MAAM,kBAAkB,CAAC,IAAI,EAAE,EAAE,CAAC;YACrC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,sCAAsC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;QACpG,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAA;QAChG,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,MAAM,UAAU,CAAC,MAAM,EAAE,EAAE,CAAC;YAC9B,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,yCAAyC,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QAC1G,CAAC;aACI,CAAC;YACJ,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,yCAAyC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QACxG,CAAC;IACH,CAAC;IAEM,KAAK,CAAC,eAAe;QAC1B,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,OAAO,CAAC,KAAc;QACjC,uFAAuF;QACvF,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC,sBAAsB,EAAE,CAAC;QAErD,0FAA0F;QAC1F,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,IAAI,YAAY,CAAC,MAAM,IAAI,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnE,+EAA+E;gBAC/E,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,0CAA0C,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;;YAEvG,aAAa,CAAC,wBAAwB,EAAE,CAAC;IAC7C,CAAC;IAED,mBAAmB,CAAC,YAAsC;QACxD,IAAI,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/C,0CAA0C;YAC1C,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAE1C,6EAA6E;YAC7E,IAAI,IAAI,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACT,CAAC;YACD,IAAI,IAAI,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACT,CAAC;YAED,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YAChD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3D,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAC9F,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrC,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,sBAAsB,CAAC,YAAsC;QACnE,IAAI,CAAC,YAAY,CAAC,qBAAqB,IAAI,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClG,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,MAAM,GAAG,aAAa,CAA6B,YAAY,CAAC,qBAAqB,CAAC,CAAC;QAC7F,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1F,OAAO,KAAK,CAAC;QACf,CAAC;QAED,+DAA+D;QAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CACtC,gBAAgB,EAChB,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,EAC/B,KAAK,CAAC,EAAE,CACT,CAAC;YACF,OAAO,IAAI,CAAC;QACd,CAAC;QAED,0EAA0E;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CACtC,eAAe,EACf,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,EAC/B,OAAO,CAAC,EAAE,CACX,CAAC;YACF,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;;OAGG;IACK,sBAAsB,CAAC,YAAsC;QACnE,IAAI,CAAC,YAAY,CAAC,qBAAqB,IAAI,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClG,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,MAAM,GAAG,aAAa,CAA6B,YAAY,CAAC,qBAAqB,CAAC,CAAC;QAC7F,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,cAAc,EAAE,CAAC;YACpE,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,SAAS,GAA2B,EAAE,CAAC;QAC7C,IAAI,MAAM,CAAC,cAAc;YAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,cAAc,CAAC;QAC/E,IAAI,MAAM,CAAC,SAAS;YAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC;QAChE,IAAI,MAAM,CAAC,UAAU;YAAE,SAAS,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC;QACnE,IAAI,MAAM,CAAC,aAAa;YAAE,SAAS,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC;QAC5E,IAAI,MAAM,CAAC,MAAM;YAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QAEvD,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CACtC,eAAe,EACf,SAAS,EACT,OAAO,CAAC,EAAE,CACX,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,mBAAmB,CAAC,MAAqB;QAC9C,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC;IAC5E,CAAC;IAEM,WAAW,CAAC,YAAsC;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvE,OAAO,IAAI,EAAE,IAAI,IAAI,SAAS,CAAC;IACjC,CAAC;IAEM,YAAY,CAAC,YAAsC;QACxD,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvE,OAAO,IAAI,EAAE,KAAK,IAAI,MAAM,CAAC;IAC/B,CAAC;IAEM,WAAW,CAAC,YAAsC;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC;IAC3C,CAAC;IAEM,kBAAkB,CAAC,MAAqB;QAC7C,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;IACnC,CAAC;oHA1ZU,0BAA0B;6DAA1B,0BAA0B;;;;;;;;YClD/B,AADF,AADF,AADF,AAFF,8BAAqC,aAED,aACR,aACI,aACA;YACtB,uBAAgC;YAClC,iBAAM;YACN,0BAAI;YAAA,6BAAa;YACnB,AADmB,iBAAK,EAClB;YAEN,4FAAmC;YAsBrC,iBAAM;YAGN,8FAAmC;YA+FrC,iBAAM;YAGN,gCAAmC;YAiB/B,AARA,AARF,+FAAyE,yEAQ1B,yEAQtC;YAyEb,AADE,iBAAM,EACF;;YArNA,eAqBC;YArBD,0DAqBC;YAIH,cA8FC;YA9FD,0DA8FC;YAKD,eAuFC;YAvFD,iJAuFC;;;iFDvKQ,0BAA0B;cANtC,SAAS;6BACI,KAAK,YACP,wBAAwB;;kBAKjC,SAAS;mBAAC,UAAU;;kBACpB,SAAS;mBAAC,aAAa;;kBACvB,SAAS;mBAAC,WAAW;;kFAHX,0BAA0B","sourcesContent":["import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';\nimport { SharedService, NavigationService } from '@memberjunction/ng-shared';\nimport { MJConversationDetailEntity, MJConversationEntity, MJUserNotificationEntity, MJUserNotificationTypeEntity, UserInfoEngine } from '@memberjunction/core-entities';\nimport { Metadata, TransactionGroupBase, TransactionVariable } from '@memberjunction/core';\nimport { Router } from '@angular/router';\nimport { SafeJSONParse , UUIDsEqual } from '@memberjunction/global';\nimport { MJNotificationService } from '@memberjunction/ng-notifications';\nimport { ApplicationManager } from '@memberjunction/ng-base-application';\n\n/**\n * Radio button filter options for notification read status\n */\ntype ReadFilterOption = 'All' | 'Unread' | 'Read';\n\n/**\n * Configuration for record-type resource navigation\n */\ninterface RecordResourceConfig {\n  Entity?: string;\n}\n\n/**\n * Configuration for conversation-type resource navigation\n */\ninterface ConversationResourceConfig {\n  type: 'conversation';\n  conversationId?: string;\n  messageId?: string;\n  artifactId?: string;\n  versionNumber?: string;\n  taskId?: string;\n}\n\n/**\n * Configuration for agent-request-type resource navigation\n */\ninterface AgentRequestResourceConfig {\n  type: 'agent-request';\n  requestId: string;\n}\n\n/**\n * Result of parsing a notification URL\n */\ninterface NotificationUrlInfo {\n  urlParts: string[];\n  queryString: string;\n}\n\n@Component({\n  standalone: false,\n  selector: 'app-user-notifications',\n  templateUrl: './user-notifications.component.html',\n  styleUrls: ['./user-notifications.component.css']\n})\nexport class UserNotificationsComponent implements OnInit, AfterViewInit {\n  @ViewChild('allRadio') allRadio!: ElementRef<HTMLInputElement>;\n  @ViewChild('unreadRadio') unreadRadio!: ElementRef<HTMLInputElement>;\n  @ViewChild('readRadio') readRadio!: ElementRef<HTMLInputElement>;\n\n  public radioSelected: ReadFilterOption = 'All';\n  public currentFilter: string = '';\n  public notificationTypes: MJUserNotificationTypeEntity[] = [];\n  public selectedTypeFilter: string | null = null;\n  public loadingTypes: boolean = true;\n\n  constructor (\n    public sharedService: SharedService,\n    private router: Router,\n    private navigationService: NavigationService,\n    private appManager: ApplicationManager\n  ) {}\n\n  async ngOnInit() {\n    this.loadNotificationTypes();\n  }\n\n  ngAfterViewInit(): void {\n    this.sharedService.InvokeManualResize(); // make sure the notifications component is sized correctly\n  }\n\n  private loadNotificationTypes() {\n    // Get notification types from UserInfoEngine cache, sorted client-side\n    // UserInfoEngine is auto-configured via @RegisterForStartup()\n    this.notificationTypes = [...UserInfoEngine.Instance.NotificationTypes].sort((a, b) => {\n      const priorityA = a.Priority ?? 999;\n      const priorityB = b.Priority ?? 999;\n      if (priorityA !== priorityB) {\n        return priorityA - priorityB;\n      }\n      return a.Name.localeCompare(b.Name);\n    });\n    this.loadingTypes = false;\n  }\n\n  public get NotificationsToShow(): MJUserNotificationEntity[] {\n    let temp: MJUserNotificationEntity[] = [];\n    switch (this.radioSelected) {\n      case 'All':\n        temp = this.AllNotifications;\n        break;\n      case 'Unread':\n        temp = this.AllNotifications.filter(n => n.Unread);\n        break;\n      case 'Read':\n        temp = this.AllNotifications.filter(n => !n.Unread);\n        break;\n    }\n\n    // Apply type filter if selected\n    if (this.selectedTypeFilter) {\n      temp = temp.filter(n => UUIDsEqual(n.NotificationTypeID, this.selectedTypeFilter));\n    }\n\n    // Apply text filter if it is not empty\n    if (this.currentFilter.trim().length > 0) {\n      // check for inclusion of filter value in title or message\n      temp = temp.filter(n => n.Title?.toLowerCase().includes(this.currentFilter.trim().toLowerCase()) ||\n                              n.Message?.toLowerCase().includes(this.currentFilter.trim().toLowerCase())\n                        );\n    }\n\n    return temp;\n  }\n\n  public isNotificationClickable(notification: MJUserNotificationEntity): boolean {\n    // Check for agent-request type (navigated via NavigationService, not URL)\n    if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n      const config = SafeJSONParse<AgentRequestResourceConfig>(notification.ResourceConfiguration);\n      if (config && config.type?.trim().toLowerCase() === 'agent-request' && config.requestId) {\n        return true;\n      }\n    }\n\n    const info = this.notificationUrl(notification);\n    return (info !== null && info.urlParts && info.urlParts.length > 0);\n  }\n\n  public notificationUrl(notification: MJUserNotificationEntity): NotificationUrlInfo {\n    const url: string[] = [];\n    let queryString = '';\n    if (notification.ResourceRecordID && notification.ResourceRecordID.length > 0 &&\n        notification.ResourceTypeID && notification.ResourceTypeID.length > 0) {\n      // we have a resource here, like a Report, Dashboard, etc\n      // we can generate a url to navigate to it\n      const rt = this.sharedService.ResourceTypeByID(notification.ResourceTypeID);\n      let routeSegment: string | null | undefined;\n      if (rt)\n        routeSegment = this.sharedService.mapResourceTypeNameToRouteSegment(rt.Name);\n\n      if (rt && routeSegment && routeSegment.trim().length > 0) {\n        url.push('resource');\n        url.push(routeSegment);\n        url.push(notification.ResourceRecordID.toString());\n        if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n          if (rt.Name.trim().toLowerCase() === 'records') {\n            // special handling for records\n            const config = SafeJSONParse<RecordResourceConfig>(notification.ResourceConfiguration);\n            if (config && config.Entity)\n              queryString = `Entity=${config.Entity}`;\n          }\n          else\n            queryString = notification.ResourceConfiguration;\n        }\n      }\n    }\n    else if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n      // we do NOT have a resource type or resource record id, but we do have a ResourceConfiguration\n      // string, which means we might have information on how to navigate to what we want if we parse the config\n      // HOME screen stuff is done this way\n\n      const config = SafeJSONParse<ConversationResourceConfig>(notification.ResourceConfiguration);\n      if (config && config.type?.trim().toLowerCase() === 'conversation') {\n        url.push('chat');\n        // Build query string with conversation and artifact navigation\n        const queryParams: string[] = [];\n        if (config.conversationId) queryParams.push(`conversationId=${config.conversationId}`);\n        if (config.messageId) queryParams.push(`messageId=${config.messageId}`);\n        if (config.artifactId) queryParams.push(`artifactId=${config.artifactId}`);\n        if (config.versionNumber) queryParams.push(`versionNumber=${config.versionNumber}`);\n        if (config.taskId) queryParams.push(`taskId=${config.taskId}`);\n        queryString = queryParams.join('&');\n      }\n    }\n\n    return { urlParts: url, queryString };\n  }\n\n  public get AllNotifications(): MJUserNotificationEntity[] {\n    return SharedService.UserNotifications;\n  }\n\n  public get UnreadNotifications(): MJUserNotificationEntity[] {\n    return this.AllNotifications.filter(n => n.Unread);\n  }\n\n  public get ReadNotifications(): MJUserNotificationEntity[] {\n    return this.AllNotifications.filter(n => !n.Unread);\n  }\n\n  selectReadOption(option: ReadFilterOption): void {\n    this.radioSelected = option;\n    // now update the radio button group in the UI\n    switch (option) {\n      case 'All':\n        this.allRadio.nativeElement.checked = true;\n        break;\n      case 'Unread':\n        this.unreadRadio.nativeElement.checked = true;\n        break;\n      case 'Read':\n        this.readRadio.nativeElement.checked = true;\n        break;\n    }\n  }\n\n  onReadRadioChanged(event: Event): void {\n    if (event.target instanceof HTMLInputElement) {\n      this.radioSelected = event.target.value as ReadFilterOption;\n    }\n  }\n\n  onFilterChanged(value: string): void {\n    this.currentFilter = value;\n  }\n\n  getItemTitleClass(notification: MJUserNotificationEntity): string {\n    if (notification.Unread) {\n      return 'notification-title notification-title-unread';\n    }\n    return 'notification-title';\n  }\n\n  getItemWrapperClass(notification: MJUserNotificationEntity): string {\n    let classInfo = 'notification-wrap';\n\n    if (this.isNotificationClickable(notification))\n      classInfo += ' notification-wrap-clickable';\n\n    if (notification.Unread)\n      classInfo += ' notification-wrap-unread';\n\n    return classInfo;\n  }\n\n  async markAsRead(notification: MJUserNotificationEntity, bRead: boolean, transGroup: TransactionGroupBase | null): Promise<boolean> {\n    if (notification) {\n      const notificationId = notification.ID;\n      notification.Unread = !bRead;\n      let notificationEntity: MJUserNotificationEntity;\n      if (notification instanceof MJUserNotificationEntity) {\n        // the passed in param truly is a MJUserNotificationEntity or subclass, so just use it, saves a DB round trip\n        notificationEntity = notification;\n      }\n      else {\n        // the passed in param is just a plain object, so we need to load the entity\n        const md = new Metadata();\n        notificationEntity = await md.GetEntityObject<MJUserNotificationEntity>('MJ: User Notifications');\n        await notificationEntity.Load(notificationId);  \n        notificationEntity.Unread = !bRead;  \n      }\n\n      // part of a transaction group, if so, add it as that will defer the actual network traffic/save\n      if (transGroup) {\n        notificationEntity.TransactionGroup = transGroup;\n        await notificationEntity.Save()\n        return true;\n      }\n      else {\n        // Save the notification (not part of transaction group)\n        await notificationEntity.Save();\n        // Update the observables so badge count refreshes immediately\n        MJNotificationService.UpdateNotificationObservables();\n        return true;\n      }\n    }\n    else {\n      return false;\n    }\n  }\n\n  public async markAllAsRead() {\n    await this.markAll(true);\n\n    // test harness for creating Conversations and Conversation Details record in a single transaction using variables\n    await this.TestTransactionGroupVariables();\n  }\n\n  public async TestTransactionGroupVariables() {\n    const md = new Metadata();\n    const transGroup = await md.CreateTransactionGroup();\n\n    const conversation = await md.GetEntityObject<MJConversationEntity>('MJ: Conversations');\n    conversation.UserID = md.CurrentUser.ID;\n    conversation.Description = 'Test Conversation';\n    conversation.TransactionGroup = transGroup;\n    if (!await conversation.Save()) {\n      this.sharedService.CreateSimpleNotification('Unable to create conversation', 'error', 5000);\n    }\n\n    const tvDefine = new TransactionVariable('NewConvoID', conversation, 'ID', 'Define')\n    transGroup.AddVariable(tvDefine);\n\n    const conversationDetail = await md.GetEntityObject<MJConversationDetailEntity>('MJ: Conversation Details');\n    conversationDetail.Message = 'Test Message';\n    conversationDetail.Role = 'User';\n    conversationDetail.ConversationID = 'x'; // fake UUID must be non-null to pass validation, this will be replaced by the variable, since we're part of a TG, not a real save, so doesn't validate it as a true fkey\n    conversationDetail.TransactionGroup = transGroup;\n    if (!await conversationDetail.Save()) {\n      this.sharedService.CreateSimpleNotification('Unable to create conversation detail', 'error', 500);\n    }    \n    const tvUse = new TransactionVariable('NewConvoID', conversationDetail, 'ConversationID', 'Use')\n    transGroup.AddVariable(tvUse);\n\n    if (await transGroup.Submit()) {\n      this.sharedService.CreateSimpleNotification('Transaction Group with Variables worked', 'success', 5000);\n    }\n    else {\n      this.sharedService.CreateSimpleNotification('Transaction Group with Variables failed', 'error', 5000);\n    }\n  }\n\n  public async markAllAsUnread() {\n    await this.markAll(false);\n  }\n\n  public async markAll(bRead: boolean) {\n    // Use transaction group for batching - all saves are queued and sent in one round-trip\n    const md = new Metadata();\n    const transGroup = await md.CreateTransactionGroup();\n\n    // Queue all saves - no need to await individual saves since transaction group queues them\n    for (const notification of this.AllNotifications) {\n      if (notification.Unread && bRead || !notification.Unread && !bRead) {\n        // Don't await - Save() with transaction group queues the operation immediately\n        this.markAsRead(notification, bRead, transGroup);\n      }\n    }\n\n    // Submit transaction group - this is where the actual network call happens\n    if (!await transGroup.Submit())\n      this.sharedService.CreateSimpleNotification('Unable to mark all notifications as read', 'error', 5000);\n    else\n      SharedService.RefreshUserNotifications();\n  }\n  \n  notificationClicked(notification: MJUserNotificationEntity): void {\n    if (this.isNotificationClickable(notification)) {\n      // also mark this as read when we click it\n      this.markAsRead(notification, true, null);\n\n      // Check for special navigation types that use NavigationService (not router)\n      if (this.navigateToAgentRequest(notification)) {\n        return;\n      }\n      if (this.navigateToConversation(notification)) {\n        return;\n      }\n\n      const info = this.notificationUrl(notification);\n      if (info.queryString && info.queryString.trim().length > 0) {\n        const fullUrl = `${info.urlParts.join('/')}${info.queryString ? '?' + info.queryString : ''}`;\n        this.router.navigateByUrl(fullUrl);\n      }\n      else {\n        this.router.navigate(info.urlParts);\n      }\n    }\n  }\n\n  /**\n   * Handle navigation to an agent request via NavigationService.\n   * Returns true if the notification was an agent-request type and navigation was attempted.\n   */\n  private navigateToAgentRequest(notification: MJUserNotificationEntity): boolean {\n    if (!notification.ResourceConfiguration || notification.ResourceConfiguration.trim().length === 0) {\n      return false;\n    }\n\n    const config = SafeJSONParse<AgentRequestResourceConfig>(notification.ResourceConfiguration);\n    if (!config || config.type?.trim().toLowerCase() !== 'agent-request' || !config.requestId) {\n      return false;\n    }\n\n    // Try the AI app first (has dedicated Agent Requests nav item)\n    const aiApp = this.appManager.GetAppByName('AI');\n    if (aiApp) {\n      this.navigationService.OpenNavItemByName(\n        'Agent Requests',\n        { requestId: config.requestId },\n        aiApp.ID\n      );\n      return true;\n    }\n\n    // Fallback: navigate to Chat app's Conversations with the request context\n    const chatApp = this.appManager.GetAppByName('Chat');\n    if (chatApp) {\n      this.navigationService.OpenNavItemByName(\n        'Conversations',\n        { requestId: config.requestId },\n        chatApp.ID\n      );\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Handle navigation to a conversation via NavigationService.\n   * Returns true if the notification was a conversation type and navigation was attempted.\n   */\n  private navigateToConversation(notification: MJUserNotificationEntity): boolean {\n    if (!notification.ResourceConfiguration || notification.ResourceConfiguration.trim().length === 0) {\n      return false;\n    }\n\n    const config = SafeJSONParse<ConversationResourceConfig>(notification.ResourceConfiguration);\n    if (!config || config.type?.trim().toLowerCase() !== 'conversation') {\n      return false;\n    }\n\n    const chatApp = this.appManager.GetAppByName('Chat');\n    if (!chatApp) {\n      return false;\n    }\n\n    const navConfig: Record<string, string> = {};\n    if (config.conversationId) navConfig['conversationId'] = config.conversationId;\n    if (config.messageId) navConfig['messageId'] = config.messageId;\n    if (config.artifactId) navConfig['artifactId'] = config.artifactId;\n    if (config.versionNumber) navConfig['versionNumber'] = config.versionNumber;\n    if (config.taskId) navConfig['taskId'] = config.taskId;\n\n    this.navigationService.OpenNavItemByName(\n      'Conversations',\n      navConfig,\n      chatApp.ID\n    );\n    return true;\n  }\n\n  public getNotificationType(typeId: string | null): MJUserNotificationTypeEntity | null {\n    if (!typeId) return null;\n    return this.notificationTypes.find(t => UUIDsEqual(t.ID, typeId)) || null;\n  }\n\n  public getTypeIcon(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type?.Icon || 'fa-bell';\n  }\n\n  public getTypeColor(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type?.Color || '#999';\n  }\n\n  public getTypeName(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type ? type.Name : 'Notification';\n  }\n\n  public onTypeFilterChange(typeId: string | null): void {\n    this.selectedTypeFilter = typeId;\n  }\n}\n","<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"]}
+{"version":3,"file":"user-notifications.component.js","sourceRoot":"","sources":["../../../src/lib/user-notifications/user-notifications.component.ts","../../../src/lib/user-notifications/user-notifications.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';\nimport { SharedService, NavigationService } from '@memberjunction/ng-shared';\nimport { MJConversationDetailEntity, MJConversationEntity, MJUserNotificationEntity, MJUserNotificationTypeEntity, UserInfoEngine } from '@memberjunction/core-entities';\nimport { Metadata, TransactionGroupBase, TransactionVariable, CompositeKey } from '@memberjunction/core';\nimport { SafeJSONParse , UUIDsEqual } from '@memberjunction/global';\nimport { MJNotificationService } from '@memberjunction/ng-notifications';\nimport { ApplicationManager } from '@memberjunction/ng-base-application';\n\n/**\n * Radio button filter options for notification read status\n */\ntype ReadFilterOption = 'All' | 'Unread' | 'Read';\n\n/**\n * Configuration for record-type resource navigation\n */\ninterface RecordResourceConfig {\n  Entity?: string;\n}\n\n/**\n * Configuration for conversation-type resource navigation\n */\ninterface ConversationResourceConfig {\n  type: 'conversation';\n  conversationId?: string;\n  messageId?: string;\n  artifactId?: string;\n  versionNumber?: string;\n  taskId?: string;\n}\n\n/**\n * Configuration for agent-request-type resource navigation\n */\ninterface AgentRequestResourceConfig {\n  type: 'agent-request';\n  requestId: string;\n}\n\n/**\n * Result of parsing a notification URL\n */\ninterface NotificationUrlInfo {\n  urlParts: string[];\n  queryString: string;\n}\n\n@Component({\n  standalone: false,\n  selector: 'app-user-notifications',\n  templateUrl: './user-notifications.component.html',\n  styleUrls: ['./user-notifications.component.css']\n})\nexport class UserNotificationsComponent implements OnInit, AfterViewInit {\n  @ViewChild('allRadio') allRadio!: ElementRef<HTMLInputElement>;\n  @ViewChild('unreadRadio') unreadRadio!: ElementRef<HTMLInputElement>;\n  @ViewChild('readRadio') readRadio!: ElementRef<HTMLInputElement>;\n\n  public radioSelected: ReadFilterOption = 'All';\n  public currentFilter: string = '';\n  public notificationTypes: MJUserNotificationTypeEntity[] = [];\n  public selectedTypeFilter: string | null = null;\n  public loadingTypes: boolean = true;\n\n  constructor (\n    public sharedService: SharedService,\n    private navigationService: NavigationService,\n    private appManager: ApplicationManager\n  ) {}\n\n  async ngOnInit() {\n    this.loadNotificationTypes();\n  }\n\n  ngAfterViewInit(): void {\n    this.sharedService.InvokeManualResize(); // make sure the notifications component is sized correctly\n  }\n\n  private loadNotificationTypes() {\n    // Get notification types from UserInfoEngine cache, sorted client-side\n    // UserInfoEngine is auto-configured via @RegisterForStartup()\n    this.notificationTypes = [...UserInfoEngine.Instance.NotificationTypes].sort((a, b) => {\n      const priorityA = a.Priority ?? 999;\n      const priorityB = b.Priority ?? 999;\n      if (priorityA !== priorityB) {\n        return priorityA - priorityB;\n      }\n      return a.Name.localeCompare(b.Name);\n    });\n    this.loadingTypes = false;\n  }\n\n  public get NotificationsToShow(): MJUserNotificationEntity[] {\n    let temp: MJUserNotificationEntity[] = [];\n    switch (this.radioSelected) {\n      case 'All':\n        temp = this.AllNotifications;\n        break;\n      case 'Unread':\n        temp = this.AllNotifications.filter(n => n.Unread);\n        break;\n      case 'Read':\n        temp = this.AllNotifications.filter(n => !n.Unread);\n        break;\n    }\n\n    // Apply type filter if selected\n    if (this.selectedTypeFilter) {\n      temp = temp.filter(n => UUIDsEqual(n.NotificationTypeID, this.selectedTypeFilter));\n    }\n\n    // Apply text filter if it is not empty\n    if (this.currentFilter.trim().length > 0) {\n      // check for inclusion of filter value in title or message\n      temp = temp.filter(n => n.Title?.toLowerCase().includes(this.currentFilter.trim().toLowerCase()) ||\n                              n.Message?.toLowerCase().includes(this.currentFilter.trim().toLowerCase())\n                        );\n    }\n\n    return temp;\n  }\n\n  public isNotificationClickable(notification: MJUserNotificationEntity): boolean {\n    // Check for agent-request type (navigated via NavigationService, not URL)\n    if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n      const config = SafeJSONParse<AgentRequestResourceConfig>(notification.ResourceConfiguration);\n      if (config && config.type?.trim().toLowerCase() === 'agent-request' && config.requestId) {\n        return true;\n      }\n    }\n\n    const info = this.notificationUrl(notification);\n    return (info !== null && info.urlParts && info.urlParts.length > 0);\n  }\n\n  public notificationUrl(notification: MJUserNotificationEntity): NotificationUrlInfo {\n    const url: string[] = [];\n    let queryString = '';\n    if (notification.ResourceRecordID && notification.ResourceRecordID.length > 0 &&\n        notification.ResourceTypeID && notification.ResourceTypeID.length > 0) {\n      // we have a resource here, like a Report, Dashboard, etc\n      // we can generate a url to navigate to it\n      const rt = this.sharedService.ResourceTypeByID(notification.ResourceTypeID);\n      let routeSegment: string | null | undefined;\n      if (rt)\n        routeSegment = this.sharedService.mapResourceTypeNameToRouteSegment(rt.Name);\n\n      if (rt && routeSegment && routeSegment.trim().length > 0) {\n        url.push('resource');\n        url.push(routeSegment);\n        url.push(notification.ResourceRecordID.toString());\n        if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n          if (rt.Name.trim().toLowerCase() === 'records') {\n            // special handling for records\n            const config = SafeJSONParse<RecordResourceConfig>(notification.ResourceConfiguration);\n            if (config && config.Entity)\n              queryString = `Entity=${config.Entity}`;\n          }\n          else\n            queryString = notification.ResourceConfiguration;\n        }\n      }\n    }\n    else if (notification.ResourceConfiguration && notification.ResourceConfiguration.trim().length > 0) {\n      // we do NOT have a resource type or resource record id, but we do have a ResourceConfiguration\n      // string, which means we might have information on how to navigate to what we want if we parse the config\n      // HOME screen stuff is done this way\n\n      const config = SafeJSONParse<ConversationResourceConfig>(notification.ResourceConfiguration);\n      if (config && config.type?.trim().toLowerCase() === 'conversation') {\n        url.push('chat');\n        // Build query string with conversation and artifact navigation\n        const queryParams: string[] = [];\n        if (config.conversationId) queryParams.push(`conversationId=${config.conversationId}`);\n        if (config.messageId) queryParams.push(`messageId=${config.messageId}`);\n        if (config.artifactId) queryParams.push(`artifactId=${config.artifactId}`);\n        if (config.versionNumber) queryParams.push(`versionNumber=${config.versionNumber}`);\n        if (config.taskId) queryParams.push(`taskId=${config.taskId}`);\n        queryString = queryParams.join('&');\n      }\n    }\n\n    return { urlParts: url, queryString };\n  }\n\n  public get AllNotifications(): MJUserNotificationEntity[] {\n    return SharedService.UserNotifications;\n  }\n\n  public get UnreadNotifications(): MJUserNotificationEntity[] {\n    return this.AllNotifications.filter(n => n.Unread);\n  }\n\n  public get ReadNotifications(): MJUserNotificationEntity[] {\n    return this.AllNotifications.filter(n => !n.Unread);\n  }\n\n  selectReadOption(option: ReadFilterOption): void {\n    this.radioSelected = option;\n    // now update the radio button group in the UI\n    switch (option) {\n      case 'All':\n        this.allRadio.nativeElement.checked = true;\n        break;\n      case 'Unread':\n        this.unreadRadio.nativeElement.checked = true;\n        break;\n      case 'Read':\n        this.readRadio.nativeElement.checked = true;\n        break;\n    }\n  }\n\n  onReadRadioChanged(event: Event): void {\n    if (event.target instanceof HTMLInputElement) {\n      this.radioSelected = event.target.value as ReadFilterOption;\n    }\n  }\n\n  onFilterChanged(value: string): void {\n    this.currentFilter = value;\n  }\n\n  getItemTitleClass(notification: MJUserNotificationEntity): string {\n    if (notification.Unread) {\n      return 'notification-title notification-title-unread';\n    }\n    return 'notification-title';\n  }\n\n  getItemWrapperClass(notification: MJUserNotificationEntity): string {\n    let classInfo = 'notification-wrap';\n\n    if (this.isNotificationClickable(notification))\n      classInfo += ' notification-wrap-clickable';\n\n    if (notification.Unread)\n      classInfo += ' notification-wrap-unread';\n\n    return classInfo;\n  }\n\n  async markAsRead(notification: MJUserNotificationEntity, bRead: boolean, transGroup: TransactionGroupBase | null): Promise<boolean> {\n    if (notification) {\n      const notificationId = notification.ID;\n      notification.Unread = !bRead;\n      let notificationEntity: MJUserNotificationEntity;\n      if (notification instanceof MJUserNotificationEntity) {\n        // the passed in param truly is a MJUserNotificationEntity or subclass, so just use it, saves a DB round trip\n        notificationEntity = notification;\n      }\n      else {\n        // the passed in param is just a plain object, so we need to load the entity\n        const md = new Metadata();\n        notificationEntity = await md.GetEntityObject<MJUserNotificationEntity>('MJ: User Notifications');\n        await notificationEntity.Load(notificationId);  \n        notificationEntity.Unread = !bRead;  \n      }\n\n      // part of a transaction group, if so, add it as that will defer the actual network traffic/save\n      if (transGroup) {\n        notificationEntity.TransactionGroup = transGroup;\n        await notificationEntity.Save()\n        return true;\n      }\n      else {\n        // Save the notification (not part of transaction group)\n        await notificationEntity.Save();\n        // Update the observables so badge count refreshes immediately\n        MJNotificationService.UpdateNotificationObservables();\n        return true;\n      }\n    }\n    else {\n      return false;\n    }\n  }\n\n  public async markAllAsRead() {\n    await this.markAll(true);\n\n    // test harness for creating Conversations and Conversation Details record in a single transaction using variables\n    await this.TestTransactionGroupVariables();\n  }\n\n  public async TestTransactionGroupVariables() {\n    const md = new Metadata();\n    const transGroup = await md.CreateTransactionGroup();\n\n    const conversation = await md.GetEntityObject<MJConversationEntity>('MJ: Conversations');\n    conversation.UserID = md.CurrentUser.ID;\n    conversation.Description = 'Test Conversation';\n    conversation.TransactionGroup = transGroup;\n    if (!await conversation.Save()) {\n      this.sharedService.CreateSimpleNotification('Unable to create conversation', 'error', 5000);\n    }\n\n    const tvDefine = new TransactionVariable('NewConvoID', conversation, 'ID', 'Define')\n    transGroup.AddVariable(tvDefine);\n\n    const conversationDetail = await md.GetEntityObject<MJConversationDetailEntity>('MJ: Conversation Details');\n    conversationDetail.Message = 'Test Message';\n    conversationDetail.Role = 'User';\n    conversationDetail.ConversationID = 'x'; // fake UUID must be non-null to pass validation, this will be replaced by the variable, since we're part of a TG, not a real save, so doesn't validate it as a true fkey\n    conversationDetail.TransactionGroup = transGroup;\n    if (!await conversationDetail.Save()) {\n      this.sharedService.CreateSimpleNotification('Unable to create conversation detail', 'error', 500);\n    }    \n    const tvUse = new TransactionVariable('NewConvoID', conversationDetail, 'ConversationID', 'Use')\n    transGroup.AddVariable(tvUse);\n\n    if (await transGroup.Submit()) {\n      this.sharedService.CreateSimpleNotification('Transaction Group with Variables worked', 'success', 5000);\n    }\n    else {\n      this.sharedService.CreateSimpleNotification('Transaction Group with Variables failed', 'error', 5000);\n    }\n  }\n\n  public async markAllAsUnread() {\n    await this.markAll(false);\n  }\n\n  public async markAll(bRead: boolean) {\n    // Use transaction group for batching - all saves are queued and sent in one round-trip\n    const md = new Metadata();\n    const transGroup = await md.CreateTransactionGroup();\n\n    // Queue all saves - no need to await individual saves since transaction group queues them\n    for (const notification of this.AllNotifications) {\n      if (notification.Unread && bRead || !notification.Unread && !bRead) {\n        // Don't await - Save() with transaction group queues the operation immediately\n        this.markAsRead(notification, bRead, transGroup);\n      }\n    }\n\n    // Submit transaction group - this is where the actual network call happens\n    if (!await transGroup.Submit())\n      this.sharedService.CreateSimpleNotification('Unable to mark all notifications as read', 'error', 5000);\n    else\n      SharedService.RefreshUserNotifications();\n  }\n  \n  notificationClicked(notification: MJUserNotificationEntity): void {\n    if (this.isNotificationClickable(notification)) {\n      // also mark this as read when we click it\n      this.markAsRead(notification, true, null);\n\n      // Check for special navigation types that use NavigationService (not router)\n      if (this.navigateToAgentRequest(notification)) {\n        return;\n      }\n      if (this.navigateToConversation(notification)) {\n        return;\n      }\n\n      this.navigateToResource(notification);\n    }\n  }\n\n  /**\n   * Navigate to a resource-based notification using NavigationService methods.\n   * Routes to the correct resource based on the notification's ResourceType.\n   */\n  private navigateToResource(notification: MJUserNotificationEntity): void {\n    if (!notification.ResourceRecordID || !notification.ResourceTypeID) return;\n\n    const rt = this.sharedService.ResourceTypeByID(notification.ResourceTypeID);\n    if (!rt) return;\n\n    const recordId = notification.ResourceRecordID.toString();\n    const rtName = rt.Name.trim().toLowerCase();\n\n    switch (rtName) {\n      case 'records': {\n        const config = SafeJSONParse<RecordResourceConfig>(notification.ResourceConfiguration || '');\n        if (config?.Entity) {\n          const key = new CompositeKey();\n          key.SimpleLoadFromURLSegment(recordId);\n          this.navigationService.OpenEntityRecord(config.Entity, key);\n        }\n        break;\n      }\n      case 'user views':\n      case 'mj: user views':\n        this.navigationService.OpenView(recordId, 'View');\n        break;\n      case 'dashboards':\n        this.navigationService.OpenDashboard(recordId, 'Dashboard');\n        break;\n      case 'reports':\n        this.navigationService.OpenReport(recordId, 'Report');\n        break;\n      default:\n        console.warn(`[UserNotifications] Unhandled resource type for navigation: ${rt.Name}`);\n        break;\n    }\n  }\n\n  /**\n   * Handle navigation to an agent request via NavigationService.\n   * Returns true if the notification was an agent-request type and navigation was attempted.\n   */\n  private navigateToAgentRequest(notification: MJUserNotificationEntity): boolean {\n    if (!notification.ResourceConfiguration || notification.ResourceConfiguration.trim().length === 0) {\n      return false;\n    }\n\n    const config = SafeJSONParse<AgentRequestResourceConfig>(notification.ResourceConfiguration);\n    if (!config || config.type?.trim().toLowerCase() !== 'agent-request' || !config.requestId) {\n      return false;\n    }\n\n    // Try the AI app first (has dedicated Agent Requests nav item)\n    const aiApp = this.appManager.GetAppByName('AI');\n    if (aiApp) {\n      this.navigationService.OpenNavItemByName(\n        'Agent Requests',\n        { requestId: config.requestId },\n        aiApp.ID\n      );\n      return true;\n    }\n\n    // Fallback: navigate to Chat app's Conversations with the request context\n    const chatApp = this.appManager.GetAppByName('Chat');\n    if (chatApp) {\n      this.navigationService.OpenNavItemByName(\n        'Conversations',\n        { requestId: config.requestId },\n        chatApp.ID\n      );\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Handle navigation to a conversation via NavigationService.\n   * Returns true if the notification was a conversation type and navigation was attempted.\n   */\n  private navigateToConversation(notification: MJUserNotificationEntity): boolean {\n    if (!notification.ResourceConfiguration || notification.ResourceConfiguration.trim().length === 0) {\n      return false;\n    }\n\n    const config = SafeJSONParse<ConversationResourceConfig>(notification.ResourceConfiguration);\n    if (!config || config.type?.trim().toLowerCase() !== 'conversation') {\n      return false;\n    }\n\n    const chatApp = this.appManager.GetAppByName('Chat');\n    if (!chatApp) {\n      return false;\n    }\n\n    const navConfig: Record<string, string> = {};\n    if (config.conversationId) navConfig['conversationId'] = config.conversationId;\n    if (config.messageId) navConfig['messageId'] = config.messageId;\n    if (config.artifactId) navConfig['artifactId'] = config.artifactId;\n    if (config.versionNumber) navConfig['versionNumber'] = config.versionNumber;\n    if (config.taskId) navConfig['taskId'] = config.taskId;\n\n    this.navigationService.OpenNavItemByName(\n      'Conversations',\n      navConfig,\n      chatApp.ID\n    );\n    return true;\n  }\n\n  public getNotificationType(typeId: string | null): MJUserNotificationTypeEntity | null {\n    if (!typeId) return null;\n    return this.notificationTypes.find(t => UUIDsEqual(t.ID, typeId)) || null;\n  }\n\n  public getTypeIcon(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type?.Icon || 'fa-bell';\n  }\n\n  public getTypeColor(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type?.Color || '#999';\n  }\n\n  public getTypeName(notification: MJUserNotificationEntity): string {\n    const type = this.getNotificationType(notification.NotificationTypeID);\n    return type ? type.Name : 'Notification';\n  }\n\n  public onTypeFilterChange(typeId: string | null): void {\n    this.selectedTypeFilter = typeId;\n  }\n}\n","<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"]}

package/dist/module.d.ts

@@ -49,9 +49,11 @@ import * as i47 from "@memberjunction/ng-artifacts";
 import * as i48 from "@memberjunction/ng-shared-generic";
 import * as i49 from "@memberjunction/ng-entity-viewer";
 import * as i50 from "@memberjunction/ng-list-detail-grid";
+import * as i51 from "@memberjunction/ng-search";
+import * as i52 from "@memberjunction/ng-word-cloud";
 export declare class ExplorerCoreModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerCoreModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerCoreModule, [typeof i1.OAuthCallbackComponent, typeof i2.ResourceContainerComponent, typeof i3.DashboardResource, typeof i4.EntityRecordResource, typeof i5.SearchResultsResource, typeof i6.UserViewResource, typeof i7.SingleRecordComponent, typeof i8.SingleSearchResultComponent, typeof i9.SingleQueryComponent, typeof i10.UserProfileComponent, typeof i11.SingleDashboardComponent, typeof i12.AddItemComponent, typeof i13.DeleteItemComponent, typeof i14.EditDashboardComponent, typeof i15.UserNotificationsComponent, typeof i16.QueryResource, typeof i17.SingleListDetailComponent, typeof i18.ListDetailResource, typeof i19.ChatConversationsResource, typeof i20.ChatCollectionsResource, typeof i21.ChatTasksResource, typeof i22.ArtifactResource, typeof i23.NotificationsResource, typeof i24.DashboardPreferencesDialogComponent], [typeof i25.AppRoutingModule, typeof i26.CommonModule, typeof i27.FormsModule, typeof i27.ReactiveFormsModule, typeof i28.RouterModule, typeof i29.ExportServiceModule, typeof i30.RecordChangesModule, typeof i31.ContainerDirectivesModule, typeof i32.BaseFormsModule, typeof i33.QueryViewerModule, typeof i34.MemberJunctionSharedModule, typeof i35.ConversationsModule, typeof i36.CoreDashboardsModule, typeof i37.DashboardViewerModule, typeof i38.ExplorerSettingsModule, typeof i39.FileStorageModule, typeof i40.EntityFormDialogModule, typeof i41.RecordSelectorModule, typeof i42.ResourcePermissionsModule, typeof i43.GenericDialogModule, typeof i44.MJProgressBarComponent, typeof i45.DragDropModule, typeof i46.AITestHarnessModule, typeof i47.ArtifactsModule, typeof i48.SharedGenericModule, typeof i49.EntityViewerModule, typeof i50.ListDetailGridModule, typeof i44.MJButtonDirective, typeof i44.MJDialogComponent, typeof i44.MJDialogTitlebarComponent, typeof i44.MJDialogActionsComponent, typeof i44.MJDropdownComponent, typeof i44.MJWindowComponent, typeof i44.MJWindowTitlebarComponent], [typeof i2.ResourceContainerComponent, typeof i3.DashboardResource, typeof i4.EntityRecordResource, typeof i5.SearchResultsResource, typeof i6.UserViewResource, typeof i7.SingleRecordComponent, typeof i8.SingleSearchResultComponent, typeof i10.UserProfileComponent, typeof i11.SingleDashboardComponent, typeof i12.AddItemComponent, typeof i13.DeleteItemComponent, typeof i14.EditDashboardComponent, typeof i15.UserNotificationsComponent, typeof i18.ListDetailResource, typeof i24.DashboardPreferencesDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerCoreModule, [typeof i1.OAuthCallbackComponent, typeof i2.ResourceContainerComponent, typeof i3.DashboardResource, typeof i4.EntityRecordResource, typeof i5.SearchResultsResource, typeof i6.UserViewResource, typeof i7.SingleRecordComponent, typeof i8.SingleSearchResultComponent, typeof i9.SingleQueryComponent, typeof i10.UserProfileComponent, typeof i11.SingleDashboardComponent, typeof i12.AddItemComponent, typeof i13.DeleteItemComponent, typeof i14.EditDashboardComponent, typeof i15.UserNotificationsComponent, typeof i16.QueryResource, typeof i17.SingleListDetailComponent, typeof i18.ListDetailResource, typeof i19.ChatConversationsResource, typeof i20.ChatCollectionsResource, typeof i21.ChatTasksResource, typeof i22.ArtifactResource, typeof i23.NotificationsResource, typeof i24.DashboardPreferencesDialogComponent], [typeof i25.AppRoutingModule, typeof i26.CommonModule, typeof i27.FormsModule, typeof i27.ReactiveFormsModule, typeof i28.RouterModule, typeof i29.ExportServiceModule, typeof i30.RecordChangesModule, typeof i31.ContainerDirectivesModule, typeof i32.BaseFormsModule, typeof i33.QueryViewerModule, typeof i34.MemberJunctionSharedModule, typeof i35.ConversationsModule, typeof i36.CoreDashboardsModule, typeof i37.DashboardViewerModule, typeof i38.ExplorerSettingsModule, typeof i39.FileStorageModule, typeof i40.EntityFormDialogModule, typeof i41.RecordSelectorModule, typeof i42.ResourcePermissionsModule, typeof i43.GenericDialogModule, typeof i44.MJProgressBarComponent, typeof i45.DragDropModule, typeof i46.AITestHarnessModule, typeof i47.ArtifactsModule, typeof i48.SharedGenericModule, typeof i49.EntityViewerModule, typeof i50.ListDetailGridModule, typeof i51.SearchModule, typeof i52.MJWordCloudComponent, typeof i44.MJButtonDirective, typeof i44.MJDialogComponent, typeof i44.MJDialogTitlebarComponent, typeof i44.MJDialogActionsComponent, typeof i44.MJDropdownComponent, typeof i44.MJWindowComponent, typeof i44.MJWindowTitlebarComponent], [typeof i2.ResourceContainerComponent, typeof i3.DashboardResource, typeof i4.EntityRecordResource, typeof i5.SearchResultsResource, typeof i6.UserViewResource, typeof i7.SingleRecordComponent, typeof i8.SingleSearchResultComponent, typeof i10.UserProfileComponent, typeof i11.SingleDashboardComponent, typeof i12.AddItemComponent, typeof i13.DeleteItemComponent, typeof i14.EditDashboardComponent, typeof i15.UserNotificationsComponent, typeof i18.ListDetailResource, typeof i24.DashboardPreferencesDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ExplorerCoreModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,qBAsFa,kBAAkB;yCAAlB,kBAAkB;0CAAlB,kBAAkB;0CAAlB,kBAAkB;CAAG"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,qBAwFa,kBAAkB;yCAAlB,kBAAkB;0CAAlB,kBAAkB;0CAAlB,kBAAkB;CAAG"}

package/dist/module.js

@@ -56,6 +56,8 @@ import { ChatTasksResource } from './lib/resource-wrappers/chat-tasks-resource.c
 import { ArtifactResource } from './lib/resource-wrappers/artifact-resource.component';
 import { NotificationsResource } from './lib/resource-wrappers/notifications-resource.component';
 import { OAuthCallbackComponent } from './lib/oauth/oauth-callback.component';
+import { SearchModule } from '@memberjunction/ng-search';
+import { MJWordCloudComponent } from '@memberjunction/ng-word-cloud';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export class ExplorerCoreModule {
@@ -92,6 +94,8 @@ export class ExplorerCoreModule {
             SharedGenericModule,
             EntityViewerModule,
             ListDetailGridModule,
+            SearchModule,
+            MJWordCloudComponent,
             MJDialogComponent,
             MJDialogTitlebarComponent,
             MJDialogActionsComponent,
@@ -156,6 +160,8 @@ export class ExplorerCoreModule {
                     SharedGenericModule,
                     EntityViewerModule,
                     ListDetailGridModule,
+                    SearchModule,
+                    MJWordCloudComponent,
                     MJButtonDirective,
                     MJDialogComponent,
                     MJDialogTitlebarComponent,
@@ -238,6 +244,8 @@ export class ExplorerCoreModule {
         SharedGenericModule,
         EntityViewerModule,
         ListDetailGridModule,
+        SearchModule,
+        MJWordCloudComponent,
         MJButtonDirective,
         MJDialogComponent,
         MJDialogTitlebarComponent,