{"version":3,"file":"mayvio-ui-angular-src-notificationcenter.mjs","sources":["../../src/notificationcenter/notificationcenter.component.ts","../../src/notificationcenter/mayvio-ui-angular-src-notificationcenter.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  HostListener,\n  ElementRef,\n  inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { NotificationItemConfig } from 'mayvio-ui/notificationcenter';\nimport 'mayvio-ui/notificationcenter/css';\n\n@Component({\n  selector: 'mv-notification-center',\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      class=\"mv-notification\"\n      [class.mv-notification--open]=\"isOpen\"\n      [class]=\"className\"\n      style=\"position: relative; display: inline-block\"\n    >\n      <button\n        type=\"button\"\n        class=\"mv-notification-trigger\"\n        (click)=\"toggleOpen()\"\n        aria-label=\"Notifications\"\n        [attr.aria-expanded]=\"isOpen\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"></path>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"></path>\n        </svg>\n        <span class=\"mv-notification-badge\" *ngIf=\"unreadCount > 0\">{{ unreadCount }}</span>\n      </button>\n\n      <div class=\"mv-notification-popup\" role=\"dialog\" [attr.aria-label]=\"title\" *ngIf=\"isOpen\">\n        <div class=\"mv-notification-header\">\n          <h3 class=\"mv-notification-title\">{{ title }}</h3>\n          <button\n            type=\"button\"\n            class=\"mv-notification-mark-all\"\n            *ngIf=\"unreadCount > 0\"\n            (click)=\"markAllAsRead.emit()\"\n          >\n            {{ markAllText }}\n          </button>\n        </div>\n        <div class=\"mv-notification-list\">\n          <div class=\"mv-notification-empty\" *ngIf=\"notifications.length === 0\">\n            {{ emptyText }}\n          </div>\n\n          <div\n            *ngFor=\"let n of notifications; let i = index\"\n            class=\"mv-notification-item\"\n            [class.mv-notification-item--unread]=\"n.unread\"\n          >\n            <div\n              class=\"mv-notification-item-icon\"\n              [ngClass]=\"'mv-notification-item-icon--' + (n.status || 'info')\"\n            >\n              <ng-container [ngSwitch]=\"n.status\">\n                <svg\n                  *ngSwitchCase=\"'success'\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n                <svg\n                  *ngSwitchCase=\"'warning'\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path\n                    d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\n                  ></path>\n                  <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\n                  <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n                </svg>\n                <svg\n                  *ngSwitchCase=\"'error'\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                  <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                  <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                </svg>\n                <svg\n                  *ngSwitchDefault\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                  <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\n                  <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\n                </svg>\n              </ng-container>\n            </div>\n            <div class=\"mv-notification-item-content\">\n              <div class=\"mv-notification-item-title\">{{ n.title }}</div>\n              <div class=\"mv-notification-item-desc\" *ngIf=\"n.description\">{{ n.description }}</div>\n              <div class=\"mv-notification-item-time\" *ngIf=\"n.time\">{{ n.time }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NotificationCenterComponent {\n  @Input() title = 'Notifications';\n  @Input() notifications: NotificationItemConfig[] = [];\n  @Input() markAllText = 'Mark all as read';\n  @Input() emptyText = 'No notifications';\n  @Input() className = '';\n\n  @Output() markAllAsRead = new EventEmitter<void>();\n\n  isOpen = false;\n\n  private el = inject(ElementRef);\n  private cdr = inject(ChangeDetectorRef);\n\n  get unreadCount(): number {\n    return this.notifications.filter((n) => n.unread).length;\n  }\n\n  toggleOpen() {\n    this.isOpen = !this.isOpen;\n    this.cdr.markForCheck();\n  }\n\n  @HostListener('document:mousedown', ['$event.target'])\n  onClickOutside(target: EventTarget | null) {\n    if (this.isOpen && !this.el.nativeElement.contains(target as Node)) {\n      this.isOpen = false;\n      this.cdr.markForCheck();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}