@memberjunction/ng-conversations 2.104.0

package/dist/lib/components/notification/activity-indicator.component.js

@@ -0,0 +1,56 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+function ActivityIndicatorComponent_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.config == null ? null : ctx_r0.config.text);
+} }
+function ActivityIndicatorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵelement(2, "span", 3)(3, "span", 3)(4, "span", 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, ActivityIndicatorComponent_Conditional_0_Conditional_5_Template, 2, 1, "span", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("activity-agent", (ctx_r0.config == null ? null : ctx_r0.config.type) === "agent")("activity-processing", (ctx_r0.config == null ? null : ctx_r0.config.type) === "processing")("activity-typing", (ctx_r0.config == null ? null : ctx_r0.config.type) === "typing");
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional((ctx_r0.config == null ? null : ctx_r0.config.text) ? 5 : -1);
+} }
+/**
+ * Displays activity indicators for agent processes, typing, etc.
+ */
+export class ActivityIndicatorComponent {
+    config;
+    static ɵfac = function ActivityIndicatorComponent_Factory(t) { return new (t || ActivityIndicatorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActivityIndicatorComponent, selectors: [["mj-activity-indicator"]], inputs: { config: "config" }, decls: 1, vars: 1, consts: [[1, "activity-indicator", 3, "activity-agent", "activity-processing", "activity-typing"], [1, "activity-indicator"], [1, "activity-dots"], [1, "dot"], [1, "activity-text"]], template: function ActivityIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ActivityIndicatorComponent_Conditional_0_Template, 6, 7, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional((ctx.config == null ? null : ctx.config.show) ? 0 : -1);
+        } }, styles: [".activity-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #666;\n      background: #F4F4F4;\n      transition: all 150ms ease;\n    }\n\n    .activity-agent[_ngcontent-%COMP%] {\n      background: #EFF6FF;\n      color: #0076B6;\n    }\n\n    .activity-processing[_ngcontent-%COMP%] {\n      background: #FEF3C7;\n      color: #D97706;\n    }\n\n    .activity-typing[_ngcontent-%COMP%] {\n      background: #F3F4F6;\n      color: #6B7280;\n    }\n\n    .activity-dots[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 3px;\n    }\n\n    .dot[_ngcontent-%COMP%] {\n      width: 4px;\n      height: 4px;\n      border-radius: 50%;\n      background: currentColor;\n      animation: _ngcontent-%COMP%_dot-pulse 1.4s ease-in-out infinite;\n    }\n\n    .dot[_ngcontent-%COMP%]:nth-child(1) {\n      animation-delay: 0s;\n    }\n\n    .dot[_ngcontent-%COMP%]:nth-child(2) {\n      animation-delay: 0.2s;\n    }\n\n    .dot[_ngcontent-%COMP%]:nth-child(3) {\n      animation-delay: 0.4s;\n    }\n\n    @keyframes _ngcontent-%COMP%_dot-pulse {\n      0%, 60%, 100% {\n        opacity: 0.3;\n        transform: scale(0.8);\n      }\n      30% {\n        opacity: 1;\n        transform: scale(1.2);\n      }\n    }\n\n    .activity-text[_ngcontent-%COMP%] {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActivityIndicatorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-activity-indicator', template: `
+    @if (config?.show) {
+      <div class="activity-indicator" [class.activity-agent]="config?.type === 'agent'" [class.activity-processing]="config?.type === 'processing'" [class.activity-typing]="config?.type === 'typing'">
+        <div class="activity-dots">
+          <span class="dot"></span>
+          <span class="dot"></span>
+          <span class="dot"></span>
+        </div>
+        @if (config?.text) {
+          <span class="activity-text">{{ config?.text }}</span>
+        }
+      </div>
+    }
+  `, styles: ["\n    .activity-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #666;\n      background: #F4F4F4;\n      transition: all 150ms ease;\n    }\n\n    .activity-agent {\n      background: #EFF6FF;\n      color: #0076B6;\n    }\n\n    .activity-processing {\n      background: #FEF3C7;\n      color: #D97706;\n    }\n\n    .activity-typing {\n      background: #F3F4F6;\n      color: #6B7280;\n    }\n\n    .activity-dots {\n      display: flex;\n      align-items: center;\n      gap: 3px;\n    }\n\n    .dot {\n      width: 4px;\n      height: 4px;\n      border-radius: 50%;\n      background: currentColor;\n      animation: dot-pulse 1.4s ease-in-out infinite;\n    }\n\n    .dot:nth-child(1) {\n      animation-delay: 0s;\n    }\n\n    .dot:nth-child(2) {\n      animation-delay: 0.2s;\n    }\n\n    .dot:nth-child(3) {\n      animation-delay: 0.4s;\n    }\n\n    @keyframes dot-pulse {\n      0%, 60%, 100% {\n        opacity: 0.3;\n        transform: scale(0.8);\n      }\n      30% {\n        opacity: 1;\n        transform: scale(1.2);\n      }\n    }\n\n    .activity-text {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n    }\n  "] }]
+    }], null, { config: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActivityIndicatorComponent, { className: "ActivityIndicatorComponent", filePath: "src/lib/components/notification/activity-indicator.component.ts", lineNumber: 97 }); })();
+//# sourceMappingURL=activity-indicator.component.js.map

package/dist/lib/components/notification/activity-indicator.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.component.js","sourceRoot":"","sources":["../../../../src/lib/components/notification/activity-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;IAiBvC,+BAA4B;IAAA,YAAkB;IAAA,iBAAO;;;IAAzB,cAAkB;IAAlB,uEAAkB;;;IANhD,AADF,8BAAkM,aACrK;IAGzB,AADA,AADA,0BAAyB,cACA,cACA;IAC3B,iBAAM;IACN,kGAAoB;IAGtB,iBAAM;;;IATwI,AAA5D,AAAlD,iGAAiD,6FAA4D,qFAAoD;IAM/L,eAEC;IAFD,8EAEC;;AAfT;;GAEG;AA2FH,MAAM,OAAO,0BAA0B;IAC5B,MAAM,CAA2B;oFAD/B,0BAA0B;6DAA1B,0BAA0B;YAvFnC,mFAAoB;;YAApB,wEAWC;;;iFA4EQ,0BAA0B;cA1FtC,SAAS;2BACE,uBAAuB,YACvB;;;;;;;;;;;;;GAaT;gBA4EQ,MAAM;kBAAd,KAAK;;kFADK,0BAA0B"}

package/dist/lib/components/notification/notification-badge.component.d.ts

@@ -0,0 +1,27 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { BadgeConfig } from '../../models/notification.model';
+import { NotificationService } from '../../services/notification.service';
+import * as i0 from "@angular/core";
+/**
+ * Displays notification badges with various styles and animations
+ * Supports count, dot, pulse, and new badge types
+ */
+export declare class NotificationBadgeComponent implements OnInit, OnDestroy {
+    private notificationService;
+    conversationId?: string;
+    badgeConfig?: BadgeConfig;
+    private destroy$;
+    private _loadedBadgeConfig;
+    constructor(notificationService: NotificationService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get displayConfig(): BadgeConfig | null;
+    /**
+     * Formats count for display
+     * Shows 99+ for counts over 99
+     */
+    formatCount(count: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationBadgeComponent, "mj-notification-badge", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "badgeConfig": { "alias": "badgeConfig"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=notification-badge.component.d.ts.map

package/dist/lib/components/notification/notification-badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/notification/notification-badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGpE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;;AAE1E;;;GAGG;AACH,qBA6Na,0BAA2B,YAAW,MAAM,EAAE,SAAS;IAOtD,OAAO,CAAC,mBAAmB;IAN9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAEnC,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,kBAAkB,CAA4B;gBAElC,mBAAmB,EAAE,mBAAmB;IAE5D,QAAQ,IAAI,IAAI;IAYhB,WAAW,IAAI,IAAI;IAKnB,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAEtC;IAED;;;OAGG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCAlCvB,0BAA0B;2CAA1B,0BAA0B;CAqCtC"}

package/dist/lib/components/notification/notification-badge.component.js

@@ -0,0 +1,160 @@
+import { Component, Input } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/notification.service";
+function NotificationBadgeComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("badge-high", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "high")("badge-urgent", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "urgent")("badge-animate", ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.animate);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCount(ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count), " ");
+} }
+function NotificationBadgeComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 6);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("badge-high", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "high")("badge-urgent", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "urgent")("badge-animate", ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.animate);
+} }
+function NotificationBadgeComponent_Conditional_0_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.formatCount(ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count));
+} }
+function NotificationBadgeComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "span", 8)(2, "span", 9);
+    i0.ɵɵtemplate(3, NotificationBadgeComponent_Conditional_0_Conditional_3_Conditional_3_Template, 2, 1, "span", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("badge-high", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "high")("badge-urgent", (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.priority) === "urgent");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional((ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count) != null && (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count) > 0 ? 3 : -1);
+} }
+function NotificationBadgeComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtext(1, " NEW ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("badge-animate", ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.animate);
+} }
+function NotificationBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵtemplate(1, NotificationBadgeComponent_Conditional_0_Conditional_1_Template, 2, 7, "div", 1)(2, NotificationBadgeComponent_Conditional_0_Conditional_2_Template, 1, 6, "div", 2)(3, NotificationBadgeComponent_Conditional_0_Conditional_3_Template, 4, 5, "div", 3)(4, NotificationBadgeComponent_Conditional_0_Conditional_4_Template, 2, 2, "div", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.type) === "count" && (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count) != null && (ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.count) > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.type) === "dot" ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.type) === "pulse" ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.badgeConfig == null ? null : ctx_r0.badgeConfig.type) === "new" ? 4 : -1);
+} }
+/**
+ * Displays notification badges with various styles and animations
+ * Supports count, dot, pulse, and new badge types
+ */
+export class NotificationBadgeComponent {
+    notificationService;
+    conversationId;
+    badgeConfig;
+    destroy$ = new Subject();
+    _loadedBadgeConfig = null;
+    constructor(notificationService) {
+        this.notificationService = notificationService;
+    }
+    ngOnInit() {
+        // If badgeConfig not provided but conversationId is, load from service
+        if (!this.badgeConfig && this.conversationId) {
+            this.notificationService
+                .getBadgeConfig$(this.conversationId)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(config => {
+                this._loadedBadgeConfig = config;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get displayConfig() {
+        return this.badgeConfig || this._loadedBadgeConfig;
+    }
+    /**
+     * Formats count for display
+     * Shows 99+ for counts over 99
+     */
+    formatCount(count) {
+        return count > 99 ? '99+' : count.toString();
+    }
+    static ɵfac = function NotificationBadgeComponent_Factory(t) { return new (t || NotificationBadgeComponent)(i0.ɵɵdirectiveInject(i1.NotificationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NotificationBadgeComponent, selectors: [["mj-notification-badge"]], inputs: { conversationId: "conversationId", badgeConfig: "badgeConfig" }, decls: 1, vars: 1, consts: [[1, "notification-badge-container"], [1, "notification-badge", "badge-count", 3, "badge-high", "badge-urgent", "badge-animate"], [1, "notification-badge", "badge-dot", 3, "badge-high", "badge-urgent", "badge-animate"], [1, "notification-badge", "badge-pulse", 3, "badge-high", "badge-urgent"], [1, "notification-badge", "badge-new", 3, "badge-animate"], [1, "notification-badge", "badge-count"], [1, "notification-badge", "badge-dot"], [1, "notification-badge", "badge-pulse"], [1, "pulse-ring"], [1, "pulse-ring-delay"], [1, "pulse-count"], [1, "notification-badge", "badge-new"]], template: function NotificationBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, NotificationBadgeComponent_Conditional_0_Template, 5, 4, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional((ctx.badgeConfig == null ? null : ctx.badgeConfig.show) ? 0 : -1);
+        } }, styles: [".notification-badge-container[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .notification-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1;\n      color: white;\n      border-radius: 10px;\n      white-space: nowrap;\n      transition: all 150ms ease;\n    }\n\n    \n\n    .badge-count[_ngcontent-%COMP%] {\n      min-width: 18px;\n      height: 18px;\n      padding: 0 5px;\n      background: #0076B6;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n    }\n\n    .badge-count.badge-high[_ngcontent-%COMP%] {\n      background: #F59E0B;\n    }\n\n    .badge-count.badge-urgent[_ngcontent-%COMP%] {\n      background: #DC2626;\n    }\n\n    \n\n    .badge-dot[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: #0076B6;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n    }\n\n    .badge-dot.badge-high[_ngcontent-%COMP%] {\n      background: #F59E0B;\n    }\n\n    .badge-dot.badge-urgent[_ngcontent-%COMP%] {\n      background: #DC2626;\n    }\n\n    \n\n    .badge-pulse[_ngcontent-%COMP%] {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      background: #0076B6;\n      border-radius: 50%;\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n    }\n\n    .badge-pulse.badge-high[_ngcontent-%COMP%] {\n      background: #F59E0B;\n    }\n\n    .badge-pulse.badge-urgent[_ngcontent-%COMP%] {\n      background: #DC2626;\n    }\n\n    .pulse-ring[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border: 2px solid currentColor;\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      animation: _ngcontent-%COMP%_pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n      opacity: 0;\n    }\n\n    .pulse-ring-delay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border: 2px solid currentColor;\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      animation: _ngcontent-%COMP%_pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n      animation-delay: 1s;\n      opacity: 0;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse-ring {\n      0% {\n        transform: translate(-50%, -50%) scale(0.8);\n        opacity: 1;\n      }\n      50% {\n        transform: translate(-50%, -50%) scale(1.3);\n        opacity: 0.5;\n      }\n      100% {\n        transform: translate(-50%, -50%) scale(1.5);\n        opacity: 0;\n      }\n    }\n\n    .pulse-count[_ngcontent-%COMP%] {\n      position: relative;\n      z-index: 1;\n      font-size: 10px;\n      font-weight: 700;\n      color: white;\n    }\n\n    \n\n    .badge-new[_ngcontent-%COMP%] {\n      height: 18px;\n      padding: 0 6px;\n      background: linear-gradient(135deg, #10B981, #059669);\n      font-size: 9px;\n      font-weight: 800;\n      letter-spacing: 0.5px;\n      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);\n    }\n\n    \n\n    .badge-animate[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_badge-pop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    }\n\n    @keyframes _ngcontent-%COMP%_badge-pop {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n      50% {\n        transform: scale(1.2);\n      }\n      100% {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n\n    \n\n    .badge-urgent.badge-animate[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_badge-pop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n                 _ngcontent-%COMP%_badge-shake 400ms ease-in-out 300ms;\n    }\n\n    @keyframes _ngcontent-%COMP%_badge-shake {\n      0%, 100% { transform: translateX(0); }\n      10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }\n      20%, 40%, 60%, 80% { transform: translateX(2px); }\n    }\n\n    \n\n    .notification-badge[_ngcontent-%COMP%]:hover {\n      transform: scale(1.1);\n      cursor: default;\n    }\n\n    .badge-pulse[_ngcontent-%COMP%]:hover   .pulse-ring[_ngcontent-%COMP%], \n   .badge-pulse[_ngcontent-%COMP%]:hover   .pulse-ring-delay[_ngcontent-%COMP%] {\n      animation-play-state: paused;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NotificationBadgeComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-notification-badge', template: `
+    @if (badgeConfig?.show) {
+      <div class="notification-badge-container">
+        @if (badgeConfig?.type === 'count' && badgeConfig?.count != null && badgeConfig?.count! > 0) {
+          <div
+            class="notification-badge badge-count"
+            [class.badge-high]="badgeConfig?.priority === 'high'"
+            [class.badge-urgent]="badgeConfig?.priority === 'urgent'"
+            [class.badge-animate]="badgeConfig?.animate">
+            {{ formatCount(badgeConfig?.count!) }}
+          </div>
+        }
+        @if (badgeConfig?.type === 'dot') {
+          <div
+            class="notification-badge badge-dot"
+            [class.badge-high]="badgeConfig?.priority === 'high'"
+            [class.badge-urgent]="badgeConfig?.priority === 'urgent'"
+            [class.badge-animate]="badgeConfig?.animate">
+          </div>
+        }
+        @if (badgeConfig?.type === 'pulse') {
+          <div
+            class="notification-badge badge-pulse"
+            [class.badge-high]="badgeConfig?.priority === 'high'"
+            [class.badge-urgent]="badgeConfig?.priority === 'urgent'">
+            <span class="pulse-ring"></span>
+            <span class="pulse-ring-delay"></span>
+            @if (badgeConfig?.count != null && badgeConfig?.count! > 0) {
+              <span class="pulse-count">{{ formatCount(badgeConfig?.count!) }}</span>
+            }
+          </div>
+        }
+        @if (badgeConfig?.type === 'new') {
+          <div
+            class="notification-badge badge-new"
+            [class.badge-animate]="badgeConfig?.animate">
+            NEW
+          </div>
+        }
+      </div>
+    }
+  `, styles: ["\n    .notification-badge-container {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .notification-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1;\n      color: white;\n      border-radius: 10px;\n      white-space: nowrap;\n      transition: all 150ms ease;\n    }\n\n    /* Count badge */\n    .badge-count {\n      min-width: 18px;\n      height: 18px;\n      padding: 0 5px;\n      background: #0076B6;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n    }\n\n    .badge-count.badge-high {\n      background: #F59E0B;\n    }\n\n    .badge-count.badge-urgent {\n      background: #DC2626;\n    }\n\n    /* Dot badge */\n    .badge-dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: #0076B6;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n    }\n\n    .badge-dot.badge-high {\n      background: #F59E0B;\n    }\n\n    .badge-dot.badge-urgent {\n      background: #DC2626;\n    }\n\n    /* Pulse badge with animated rings */\n    .badge-pulse {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      background: #0076B6;\n      border-radius: 50%;\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n    }\n\n    .badge-pulse.badge-high {\n      background: #F59E0B;\n    }\n\n    .badge-pulse.badge-urgent {\n      background: #DC2626;\n    }\n\n    .pulse-ring {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border: 2px solid currentColor;\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n      opacity: 0;\n    }\n\n    .pulse-ring-delay {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border: 2px solid currentColor;\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n      animation-delay: 1s;\n      opacity: 0;\n    }\n\n    @keyframes pulse-ring {\n      0% {\n        transform: translate(-50%, -50%) scale(0.8);\n        opacity: 1;\n      }\n      50% {\n        transform: translate(-50%, -50%) scale(1.3);\n        opacity: 0.5;\n      }\n      100% {\n        transform: translate(-50%, -50%) scale(1.5);\n        opacity: 0;\n      }\n    }\n\n    .pulse-count {\n      position: relative;\n      z-index: 1;\n      font-size: 10px;\n      font-weight: 700;\n      color: white;\n    }\n\n    /* New badge */\n    .badge-new {\n      height: 18px;\n      padding: 0 6px;\n      background: linear-gradient(135deg, #10B981, #059669);\n      font-size: 9px;\n      font-weight: 800;\n      letter-spacing: 0.5px;\n      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);\n    }\n\n    /* Pop-in animation for badges */\n    .badge-animate {\n      animation: badge-pop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n    }\n\n    @keyframes badge-pop {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n      50% {\n        transform: scale(1.2);\n      }\n      100% {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n\n    /* Shake animation for urgent badges */\n    .badge-urgent.badge-animate {\n      animation: badge-pop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n                 badge-shake 400ms ease-in-out 300ms;\n    }\n\n    @keyframes badge-shake {\n      0%, 100% { transform: translateX(0); }\n      10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }\n      20%, 40%, 60%, 80% { transform: translateX(2px); }\n    }\n\n    /* Hover effects */\n    .notification-badge:hover {\n      transform: scale(1.1);\n      cursor: default;\n    }\n\n    .badge-pulse:hover .pulse-ring,\n    .badge-pulse:hover .pulse-ring-delay {\n      animation-play-state: paused;\n    }\n  "] }]
+    }], () => [{ type: i1.NotificationService }], { conversationId: [{
+            type: Input
+        }], badgeConfig: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NotificationBadgeComponent, { className: "NotificationBadgeComponent", filePath: "src/lib/components/notification/notification-badge.component.ts", lineNumber: 232 }); })();
+//# sourceMappingURL=notification-badge.component.js.map

package/dist/lib/components/notification/notification-badge.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-badge.component.js","sourceRoot":"","sources":["../../../../src/lib/components/notification/notification-badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,MAAM,eAAe,CAAC;AACpE,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;;IAcjC,8BAI+C;IAC7C,YACF;IAAA,iBAAM;;;IAFJ,AADA,AADA,0GAAqD,gGACI,iFACb;IAC5C,cACF;IADE,iHACF;;;IAGA,yBAKM;;;IADJ,AADA,AADA,0GAAqD,gGACI,iFACb;;;IAW1C,gCAA0B;IAAA,YAAsC;IAAA,iBAAO;;;IAA7C,cAAsC;IAAtC,sGAAsC;;;IAPpE,8BAG4D;IAE1D,AADA,0BAAgC,cACM;IACtC,iHAA6D;IAG/D,iBAAM;;;IANJ,AADA,0GAAqD,gGACI;IAGzD,eAEC;IAFD,uKAEC;;;IAIH,+BAE+C;IAC7C,qBACF;IAAA,iBAAM;;;IAFJ,+FAA4C;;;IAjClD,8BAA0C;IA8BxC,AAZA,AARA,AATA,iGAA8F,oFAS3D,oFAQE,oFAYF;IAOrC,iBAAM;;;IApCJ,cAQC;IARD,oPAQC;IACD,cAOC;IAPD,kGAOC;IACD,cAWC;IAXD,oGAWC;IACD,cAMC;IAND,kGAMC;;AA5CT;;;GAGG;AA8NH,MAAM,OAAO,0BAA0B;IAOjB;IANX,cAAc,CAAU;IACxB,WAAW,CAAe;IAE3B,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;IAC/B,kBAAkB,GAAuB,IAAI,CAAC;IAEtD,YAAoB,mBAAwC;QAAxC,wBAAmB,GAAnB,mBAAmB,CAAqB;IAAG,CAAC;IAEhE,QAAQ;QACN,uEAAuE;QACvE,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YAC7C,IAAI,CAAC,mBAAmB;iBACrB,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC;iBACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;iBAC9B,SAAS,CAAC,MAAM,CAAC,EAAE;gBAClB,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;YACnC,CAAC,CAAC,CAAC;QACP,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,WAAW,CAAC,KAAa;QACvB,OAAO,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC/C,CAAC;oFApCU,0BAA0B;6DAA1B,0BAA0B;YA1NnC,mFAAyB;;YAAzB,kFAuCC;;;iFAmLQ,0BAA0B;cA7NtC,SAAS;2BACE,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCT;oDAmLQ,cAAc;kBAAtB,KAAK;YACG,WAAW;kBAAnB,KAAK;;kFAFK,0BAA0B"}

package/dist/lib/components/project/project-form-modal.component.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
+import { DialogRef } from '@progress/kendo-angular-dialog';
+import { ProjectEntity } from '@memberjunction/core-entities';
+import { UserInfo } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export interface ProjectFormData {
+    name: string;
+    description: string;
+    color: string;
+    icon: string;
+}
+export declare class ProjectFormModalComponent implements OnInit {
+    private cdr;
+    dialogRef: DialogRef;
+    project: ProjectEntity | null;
+    environmentId: string;
+    currentUser: UserInfo;
+    projectSaved: EventEmitter<ProjectEntity>;
+    formData: ProjectFormData;
+    showNameError: boolean;
+    isEditMode: boolean;
+    availableColors: string[];
+    availableIcons: string[];
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    private loadProjectData;
+    selectColor(color: string): void;
+    selectIcon(icon: string): void;
+    onSave(): Promise<void>;
+    onCancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProjectFormModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProjectFormModalComponent, "mj-project-form-modal", never, { "dialogRef": { "alias": "dialogRef"; "required": false; }; "project": { "alias": "project"; "required": false; }; "environmentId": { "alias": "environmentId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; }, { "projectSaved": "projectSaved"; }, never, never, false, never>;
+}
+//# sourceMappingURL=project-form-modal.component.d.ts.map

package/dist/lib/components/project/project-form-modal.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-form-modal.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/project/project-form-modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAa,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAY,MAAM,sBAAsB,CAAC;;AAE1D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAgDD,qBA4Ra,yBAA0B,YAAW,MAAM;IAoB1C,OAAO,CAAC,GAAG;IAnBd,SAAS,EAAG,SAAS,CAAC;IACtB,OAAO,EAAE,aAAa,GAAG,IAAI,CAAQ;IACrC,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IAEtB,YAAY,8BAAqC;IAEpD,QAAQ,EAAE,eAAe,CAK9B;IAEK,aAAa,UAAS;IACtB,UAAU,UAAS;IACnB,eAAe,WAA0B;IACzC,cAAc,WAAyB;gBAE1B,GAAG,EAAE,iBAAiB;IAE1C,QAAQ,IAAI,IAAI;IAQhB,OAAO,CAAC,eAAe;IAWvB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKxB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC7B,QAAQ,IAAI,IAAI;yCAxFL,yBAAyB;2CAAzB,yBAAyB;CA2FrC"}