@mintplayer/ng-spark 22.32.0 → 22.33.0

package/fesm2022/mintplayer-ng-spark-notifications.mjs

@@ -0,0 +1,687 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Injectable, InjectionToken, PLATFORM_ID, computed, effect, inject, input, signal, untracked } from "@angular/core";
+import { DOCUMENT, Location, isPlatformBrowser } from "@angular/common";
+import { valueFor } from "@mintplayer/ng-spark/models";
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { Router, RouterLink } from "@angular/router";
+import { SwPush } from "@angular/service-worker";
+import { Subscription, firstValueFrom } from "rxjs";
+import { SPARK_AUTH_STATE, SPARK_CONFIG } from "@mintplayer/ng-spark";
+import { SparkLanguageService, SparkLiveService, SparkService } from "@mintplayer/ng-spark/services";
+import { sparkInAppUrl } from "@mintplayer/ng-spark/pwa";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsBadgeComponent } from "@mintplayer/ng-bootstrap/badge";
+import { BsDropdownDividerDirective, BsDropdownHeaderDirective, BsDropdownItemDirective, BsDropdownMenuComponent } from "@mintplayer/ng-bootstrap/dropdown-menu";
+import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
+const SPARK_NOTIFICATION_TYPE_ID = "411e3be6-5da0-5d84-bc21-001888fafc6d";
+const SPARK_MY_NOTIFICATIONS_QUERY_ID = "7123c201-9aed-50f9-9d9a-ede2491af7f9";
+const SPARK_UNREAD_NOTIFICATIONS_QUERY_ID = "a205d3e5-ff6e-5260-ac9e-e5c6b16644c9";
+function toSparkNotification(item) {
+	const text = (name) => {
+		const value = valueFor(item, name)?.value;
+		return value == null || value === "" ? null : String(value);
+	};
+	const created = text("CreatedAtUtc");
+	const createdAt = created ? new Date(created) : null;
+	return {
+		id: item.id,
+		title: text("Title") ?? item.breadcrumb ?? "",
+		body: text("Body"),
+		url: text("Url"),
+		isRead: valueFor(item, "IsRead")?.value === true,
+		createdAt: createdAt && !Number.isNaN(createdAt.getTime()) ? createdAt : null
+	};
+}
+const SPARK_NOTIFICATIONS_OPTIONS = new InjectionToken("SPARK_NOTIFICATIONS_OPTIONS", {
+	providedIn: "root",
+	factory: () => ({
+		recentCount: 8,
+		listLink: ["/query", "notifications"]
+	})
+});
+function provideSparkNotifications(options = {}) {
+	return {
+		provide: SPARK_NOTIFICATIONS_OPTIONS,
+		useValue: {
+			recentCount: 8,
+			listLink: ["/query", "notifications"],
+			...options
+		}
+	};
+}
+const SPARK_PUSH_PERMISSIONS = new InjectionToken("SPARK_PUSH_PERMISSIONS", {
+	providedIn: "root",
+	factory: () => {
+		const window = inject(DOCUMENT).defaultView;
+		if (!window || !window.Notification || !window.PushManager || !window.navigator?.serviceWorker) return null;
+		return window.Notification;
+	}
+});
+var SparkNotificationsService = class SparkNotificationsService {
+	http = inject(HttpClient);
+	live = inject(SparkLiveService);
+	spark = inject(SparkService);
+	router = inject(Router, { optional: true });
+	location = inject(Location, { optional: true });
+	document = inject(DOCUMENT);
+	swPush = inject(SwPush, { optional: true });
+	permissions = inject(SPARK_PUSH_PERMISSIONS);
+	options = inject(SPARK_NOTIFICATIONS_OPTIONS);
+	baseUrl = `${inject(SPARK_CONFIG, { optional: true })?.baseUrl ?? "/spark"}/notifications`;
+	browser = isPlatformBrowser(inject(PLATFORM_ID));
+	unread = signal(null, ...ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []);
+	latest = signal(null, ...ngDevMode ? [{ debugName: "latest" }] : /* istanbul ignore next */ []);
+	unreadCount = computed(() => this.unread()?.totalItems ?? 0, ...ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []);
+	recent = computed(() => (this.latest()?.items ?? []).map(toSparkNotification), ...ngDevMode ? [{ debugName: "recent" }] : /* istanbul ignore next */ []);
+	loaded = computed(() => this.latest() !== null, ...ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []);
+	pushSupported = this.browser && !!this.swPush?.isEnabled && this.permissions !== null;
+	permission = signal(this.permissions?.permission ?? "default", ...ngDevMode ? [{ debugName: "permission" }] : /* istanbul ignore next */ []);
+	subscribed = signal(false, ...ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []);
+	configured = signal(null, ...ngDevMode ? [{ debugName: "configured" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	publicKey = null;
+	pushState = computed(() => {
+		if (!this.pushSupported) return "unsupported";
+		if (this.permission() === "denied") return "denied";
+		return this.subscribed() && this.permission() === "granted" ? "on" : "off";
+	}, ...ngDevMode ? [{ debugName: "pushState" }] : /* istanbul ignore next */ []);
+	pushConfigured = this.configured.asReadonly();
+	pushBusy = this.busy.asReadonly();
+	constructor() {
+		if (!this.browser) return;
+		const authState = inject(SPARK_AUTH_STATE, { optional: true });
+		effect((onCleanup) => {
+			authState?.();
+			untracked(() => {
+				const subscriptions = new Subscription();
+				subscriptions.add(this.follow({
+					queryId: SPARK_UNREAD_NOTIFICATIONS_QUERY_ID,
+					skip: 0,
+					take: 1
+				}, this.unread));
+				subscriptions.add(this.follow({
+					queryId: SPARK_MY_NOTIFICATIONS_QUERY_ID,
+					skip: 0,
+					take: this.options.recentCount
+				}, this.latest));
+				this.publicKey = null;
+				this.loadPublicKey();
+				onCleanup(() => {
+					subscriptions.unsubscribe();
+					this.unread.set(null);
+					this.latest.set(null);
+				});
+			});
+		});
+		if (this.swPush?.isEnabled) {
+			const subscription = this.swPush.subscription.subscribe((current) => this.subscribed.set(!!current));
+			subscription.add(this.swPush.notificationClicks.subscribe(({ notification }) => {
+				const id = notification?.data?.notificationId;
+				if (typeof id === "string" && id) this.markRead([id]).catch(() => void 0);
+			}));
+			inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+		}
+	}
+	async markRead(ids) {
+		const body = ids ? { ids: [...ids] } : {};
+		return (await firstValueFrom(this.http.post(`${this.baseUrl}/read`, body)))?.marked ?? 0;
+	}
+	async open(notification) {
+		const url = notification.url ?? await this.loadUrl(notification.id);
+		if (!notification.isRead) try {
+			await this.markRead([notification.id]);
+		} catch {}
+		this.navigate(url);
+	}
+	async enablePush() {
+		const permissions = this.permissions;
+		const swPush = this.swPush;
+		if (!this.pushSupported || !permissions || !swPush) return false;
+		const asked = permissions.requestPermission();
+		this.busy.set(true);
+		try {
+			const key = this.loadPublicKey();
+			const permission = await asked;
+			this.permission.set(permission);
+			if (permission !== "granted") return false;
+			const serverPublicKey = await key;
+			if (!serverPublicKey) return false;
+			const subscription = await swPush.requestSubscription({ serverPublicKey });
+			try {
+				await firstValueFrom(this.http.post(`${this.baseUrl}/push/subscribe`, subscription.toJSON()));
+			} catch {
+				await swPush.unsubscribe().catch(() => void 0);
+				this.subscribed.set(false);
+				return false;
+			}
+			this.subscribed.set(true);
+			return true;
+		} catch {
+			return false;
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async disablePush() {
+		const swPush = this.swPush;
+		if (!swPush?.isEnabled) return;
+		this.busy.set(true);
+		try {
+			const current = await firstValueFrom(swPush.subscription);
+			if (current) {
+				await firstValueFrom(this.http.post(`${this.baseUrl}/push/unsubscribe`, { endpoint: current.endpoint })).catch(() => void 0);
+				await swPush.unsubscribe().catch(() => void 0);
+			}
+			this.subscribed.set(false);
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	follow(request, target) {
+		return this.live.watchQuery(request).subscribe((event) => target.set(event.type === "result" ? event.result : null));
+	}
+	loadPublicKey() {
+		this.publicKey ??= firstValueFrom(this.http.get(`${this.baseUrl}/push/key`)).then((response) => {
+			const key = response?.publicKey || null;
+			this.configured.set(!!key);
+			return key;
+		}, (error) => {
+			this.configured.set(false);
+			if (!(error instanceof HttpErrorResponse) || error.status === 0) this.publicKey = null;
+			return null;
+		});
+		return this.publicKey;
+	}
+	async loadUrl(id) {
+		try {
+			const value = (await this.spark.get(SPARK_NOTIFICATION_TYPE_ID, id))?.attributes?.find((a) => a.name === "Url")?.value;
+			return typeof value === "string" && value ? value : null;
+		} catch {
+			return null;
+		}
+	}
+	navigate(url) {
+		if (!url) return;
+		let parsed;
+		try {
+			parsed = new URL(url, this.document.baseURI);
+		} catch {
+			return;
+		}
+		const inApp = sparkInAppUrl(url, this.document, this.location);
+		if (inApp && this.router) {
+			this.router.navigateByUrl(inApp).catch(() => this.assign(parsed.href));
+			return;
+		}
+		if (parsed.protocol === "http:" || parsed.protocol === "https:") this.assign(parsed.href);
+	}
+	assign(href) {
+		this.document.defaultView?.location.assign(href);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkNotificationsService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkNotificationsService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkNotificationsService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const SPARK_NOTIFICATION_TEXTS = {
+	title: "Notifications",
+	empty: "No notifications",
+	markAllRead: "Mark all as read",
+	showAll: "All notifications",
+	pushEnable: "Turn on push notifications",
+	pushDisable: "Turn off push notifications on this device",
+	pushDenied: "Notifications are blocked for this site in your browser settings.",
+	pushUnsupported: "This browser cannot receive push notifications here. On iPhone and iPad, add the app to your Home Screen first."
+};
+var SparkPushToggleComponent = class SparkPushToggleComponent {
+	notifications = inject(SparkNotificationsService);
+	language = inject(SparkLanguageService);
+	t(key) {
+		return this.language.t("notifications.spa." + key, SPARK_NOTIFICATION_TEXTS[key]);
+	}
+	enable() {
+		this.notifications.enablePush();
+	}
+	disable() {
+		this.notifications.disablePush();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkPushToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkPushToggleComponent,
+		isStandalone: true,
+		selector: "spark-push-toggle",
+		ngImport: i0,
+		template: `
+    @if (notifications.pushConfigured()) {
+      @switch (notifications.pushState()) {
+        @case ('unsupported') {
+          <p class="spark-push-unsupported small text-body-secondary mb-0">{{ t('pushUnsupported') }}</p>
+        }
+        @case ('denied') {
+          <p class="spark-push-denied small text-body-secondary mb-0">{{ t('pushDenied') }}</p>
+        }
+        @case ('on') {
+          <button type="button" class="btn btn-sm btn-outline-secondary spark-push-disable"
+                  [disabled]="notifications.pushBusy()" (click)="disable()">{{ t('pushDisable') }}</button>
+        }
+        @default {
+          <button type="button" class="btn btn-sm btn-outline-primary spark-push-enable"
+                  [disabled]="notifications.pushBusy()" (click)="enable()">{{ t('pushEnable') }}</button>
+        }
+      }
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkPushToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-push-toggle",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (notifications.pushConfigured()) {
+      @switch (notifications.pushState()) {
+        @case ('unsupported') {
+          <p class="spark-push-unsupported small text-body-secondary mb-0">{{ t('pushUnsupported') }}</p>
+        }
+        @case ('denied') {
+          <p class="spark-push-denied small text-body-secondary mb-0">{{ t('pushDenied') }}</p>
+        }
+        @case ('on') {
+          <button type="button" class="btn btn-sm btn-outline-secondary spark-push-disable"
+                  [disabled]="notifications.pushBusy()" (click)="disable()">{{ t('pushDisable') }}</button>
+        }
+        @default {
+          <button type="button" class="btn btn-sm btn-outline-primary spark-push-enable"
+                  [disabled]="notifications.pushBusy()" (click)="enable()">{{ t('pushEnable') }}</button>
+        }
+      }
+    }
+  `
+		}]
+	}]
+});
+const UNITS = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["week", 604800],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+function sparkRelativeTime(date, now, language) {
+	if (!date) return "";
+	const seconds = Math.round((date.getTime() - now) / 1e3);
+	let format;
+	try {
+		format = new Intl.RelativeTimeFormat(language || "en", { numeric: "auto" });
+	} catch {
+		format = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+	}
+	for (const [unit, size] of UNITS) if (Math.abs(seconds) >= size) return format.format(Math.trunc(seconds / size), unit);
+	return format.format(0, "second");
+}
+var SparkNotificationBellComponent = class SparkNotificationBellComponent {
+	notifications = inject(SparkNotificationsService);
+	language = inject(SparkLanguageService);
+	options = inject(SPARK_NOTIFICATIONS_OPTIONS);
+	colors = Color;
+	allLink = input(null, ...ngDevMode ? [{ debugName: "allLink" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	listLink = computed(() => this.allLink() ?? this.options.listLink, ...ngDevMode ? [{ debugName: "listLink" }] : /* istanbul ignore next */ []);
+	countText = computed(() => {
+		const count = this.notifications.unreadCount();
+		return count > 99 ? "99+" : String(count);
+	}, ...ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []);
+	ariaLabel = computed(() => {
+		const count = this.notifications.unreadCount();
+		return count > 0 ? `${this.t("title")} (${count})` : this.t("title");
+	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	positions = [{
+		originX: "end",
+		originY: "bottom",
+		overlayX: "end",
+		overlayY: "top"
+	}, {
+		originX: "end",
+		originY: "top",
+		overlayX: "end",
+		overlayY: "bottom"
+	}];
+	t(key) {
+		return this.language.t("notifications.spa." + key, SPARK_NOTIFICATION_TEXTS[key]);
+	}
+	when(notification) {
+		return sparkRelativeTime(notification.createdAt, Date.now(), this.language.language());
+	}
+	close() {
+		this.open.set(false);
+	}
+	onOutsideClick(event, toggle) {
+		if (event.target instanceof Node && toggle.contains(event.target)) return;
+		this.close();
+	}
+	async choose(notification) {
+		this.close();
+		await this.notifications.open(notification);
+	}
+	async markAllRead() {
+		await this.notifications.markRead();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkNotificationBellComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkNotificationBellComponent,
+		isStandalone: true,
+		selector: "spark-notification-bell",
+		inputs: { allLink: {
+			classPropertyName: "allLink",
+			publicName: "allLink",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <button type="button" cdkOverlayOrigin #origin="cdkOverlayOrigin" #toggle
+            class="btn btn-link position-relative spark-notification-bell-toggle"
+            aria-haspopup="menu" [attr.aria-expanded]="open()" [attr.aria-label]="ariaLabel()"
+            (click)="open.set(!open())">
+      <spark-icon name="bell" />
+      @if (notifications.unreadCount() > 0) {
+        <bs-badge [type]="colors.danger" [decorative]="true"
+                  class="position-absolute top-0 start-100 translate-middle spark-notification-count">{{ countText() }}</bs-badge>
+      }
+    </button>
+    <ng-template cdkConnectedOverlay
+                 [cdkConnectedOverlayOrigin]="origin"
+                 [cdkConnectedOverlayOpen]="open()"
+                 [cdkConnectedOverlayPositions]="positions"
+                 (overlayOutsideClick)="onOutsideClick($event, toggle)"
+                 (overlayKeydown)="$event.key === 'Escape' && close()"
+                 (detach)="close()">
+      <bs-dropdown-menu class="spark-notification-menu">
+        <li bsDropdownHeader class="d-flex align-items-center justify-content-between gap-3">
+          <span>{{ t('title') }}</span>
+          @if (notifications.unreadCount() > 0) {
+            <button type="button" class="btn btn-link btn-sm p-0 spark-notification-mark-all" (click)="markAllRead()">{{ t('markAllRead') }}</button>
+          }
+        </li>
+        @for (notification of notifications.recent(); track notification.id) {
+          <li bsDropdownItem class="spark-notification" [class.fw-semibold]="!notification.isRead"
+              [class.spark-notification-unread]="!notification.isRead" [attr.data-id]="notification.id"
+              (click)="choose(notification)">
+            <div class="spark-notification-title text-wrap">{{ notification.title }}</div>
+            @if (notification.body) {
+              <div class="spark-notification-body small fw-normal text-body-secondary text-wrap">{{ notification.body }}</div>
+            }
+            <div class="spark-notification-time small fw-normal text-body-secondary">{{ when(notification) }}</div>
+          </li>
+        } @empty {
+          <li class="dropdown-item-text text-body-secondary spark-notification-empty">{{ t('empty') }}</li>
+        }
+        <li bsDropdownDivider></li>
+        <li bsDropdownItem class="spark-notification-all">
+          <a [routerLink]="listLink()" (click)="close()">{{ t('showAll') }}</a>
+        </li>
+        @if (notifications.pushConfigured() && notifications.pushState() !== 'unsupported') {
+          <li class="dropdown-item-text spark-notification-push"><spark-push-toggle /></li>
+        }
+      </bs-dropdown-menu>
+    </ng-template>
+  `,
+		isInline: true,
+		styles: [":host{display:inline-block}.spark-notification-count{font-size:.65rem}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "component",
+				type: BsBadgeComponent,
+				selector: "bs-badge",
+				inputs: [
+					"type",
+					"unit",
+					"decorative"
+				]
+			},
+			{
+				kind: "component",
+				type: BsDropdownMenuComponent,
+				selector: "bs-dropdown-menu",
+				inputs: ["menuMode", "maxHeight"],
+				outputs: ["select"]
+			},
+			{
+				kind: "directive",
+				type: BsDropdownItemDirective,
+				selector: "[bsDropdownItem]",
+				inputs: [
+					"active",
+					"disabled",
+					"value"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsDropdownHeaderDirective,
+				selector: "[bsDropdownHeader]"
+			},
+			{
+				kind: "directive",
+				type: BsDropdownDividerDirective,
+				selector: "[bsDropdownDivider]"
+			},
+			{
+				kind: "component",
+				type: SparkIconComponent,
+				selector: "spark-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: SparkPushToggleComponent,
+				selector: "spark-push-toggle"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkNotificationBellComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-notification-bell",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				RouterLink,
+				CdkOverlayOrigin,
+				CdkConnectedOverlay,
+				BsBadgeComponent,
+				BsDropdownMenuComponent,
+				BsDropdownItemDirective,
+				BsDropdownHeaderDirective,
+				BsDropdownDividerDirective,
+				SparkIconComponent,
+				SparkPushToggleComponent
+			],
+			template: `
+    <button type="button" cdkOverlayOrigin #origin="cdkOverlayOrigin" #toggle
+            class="btn btn-link position-relative spark-notification-bell-toggle"
+            aria-haspopup="menu" [attr.aria-expanded]="open()" [attr.aria-label]="ariaLabel()"
+            (click)="open.set(!open())">
+      <spark-icon name="bell" />
+      @if (notifications.unreadCount() > 0) {
+        <bs-badge [type]="colors.danger" [decorative]="true"
+                  class="position-absolute top-0 start-100 translate-middle spark-notification-count">{{ countText() }}</bs-badge>
+      }
+    </button>
+    <ng-template cdkConnectedOverlay
+                 [cdkConnectedOverlayOrigin]="origin"
+                 [cdkConnectedOverlayOpen]="open()"
+                 [cdkConnectedOverlayPositions]="positions"
+                 (overlayOutsideClick)="onOutsideClick($event, toggle)"
+                 (overlayKeydown)="$event.key === 'Escape' && close()"
+                 (detach)="close()">
+      <bs-dropdown-menu class="spark-notification-menu">
+        <li bsDropdownHeader class="d-flex align-items-center justify-content-between gap-3">
+          <span>{{ t('title') }}</span>
+          @if (notifications.unreadCount() > 0) {
+            <button type="button" class="btn btn-link btn-sm p-0 spark-notification-mark-all" (click)="markAllRead()">{{ t('markAllRead') }}</button>
+          }
+        </li>
+        @for (notification of notifications.recent(); track notification.id) {
+          <li bsDropdownItem class="spark-notification" [class.fw-semibold]="!notification.isRead"
+              [class.spark-notification-unread]="!notification.isRead" [attr.data-id]="notification.id"
+              (click)="choose(notification)">
+            <div class="spark-notification-title text-wrap">{{ notification.title }}</div>
+            @if (notification.body) {
+              <div class="spark-notification-body small fw-normal text-body-secondary text-wrap">{{ notification.body }}</div>
+            }
+            <div class="spark-notification-time small fw-normal text-body-secondary">{{ when(notification) }}</div>
+          </li>
+        } @empty {
+          <li class="dropdown-item-text text-body-secondary spark-notification-empty">{{ t('empty') }}</li>
+        }
+        <li bsDropdownDivider></li>
+        <li bsDropdownItem class="spark-notification-all">
+          <a [routerLink]="listLink()" (click)="close()">{{ t('showAll') }}</a>
+        </li>
+        @if (notifications.pushConfigured() && notifications.pushState() !== 'unsupported') {
+          <li class="dropdown-item-text spark-notification-push"><spark-push-toggle /></li>
+        }
+      </bs-dropdown-menu>
+    </ng-template>
+  `,
+			styles: [":host{display:inline-block}.spark-notification-count{font-size:.65rem}\n"]
+		}]
+	}],
+	propDecorators: { allLink: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "allLink",
+			required: false
+		}]
+	}] }
+});
+export { SPARK_MY_NOTIFICATIONS_QUERY_ID, SPARK_NOTIFICATIONS_OPTIONS, SPARK_NOTIFICATION_TEXTS, SPARK_NOTIFICATION_TYPE_ID, SPARK_PUSH_PERMISSIONS, SPARK_UNREAD_NOTIFICATIONS_QUERY_ID, SparkNotificationBellComponent, SparkNotificationsService, SparkPushToggleComponent, provideSparkNotifications, sparkRelativeTime, toSparkNotification };
+
+//# sourceMappingURL=mintplayer-ng-spark-notifications.mjs.map