@odx/angular 5.3.4 → 5.4.0

package/fesm2022/odx-angular-components-notification.mjs

@@ -0,0 +1,832 @@
+import { __decorate } from 'tslib';
+import { trigger, transition, useAnimation } from '@angular/animations';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { makeEnvironmentProviders, InjectionToken, inject, Injector, runInInjectionContext, Injectable, signal, computed, ENVIRONMENT_INITIALIZER, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, DestroyRef, Directive } from '@angular/core';
+import { LetDirective } from '@ngrx/component';
+import { collapse } from '@odx/angular/animations';
+import { InteractiveDirective } from '@odx/angular/cdk/a11y';
+import { DynamicViewDirective } from '@odx/angular/cdk/dynamic-view';
+import { ActionGroupComponent } from '@odx/angular/components/action-group';
+import * as i1$1 from '@odx/angular/components/badge';
+import { BadgeDirective } from '@odx/angular/components/badge';
+import { ButtonComponent } from '@odx/angular/components/button';
+import * as i2$1 from '@odx/angular/components/dropdown';
+import { DropdownModule, DropdownDirective } from '@odx/angular/components/dropdown';
+import { IconComponent } from '@odx/angular/components/icon';
+import * as i3 from '@odx/angular/components/list';
+import { ListModule } from '@odx/angular/components/list';
+import { Logger, deepmerge, CSSComponent } from '@odx/angular/internal';
+import { provideTranslations, TranslatePipe } from '@odx/angular/internal/translate';
+import { isFunction, createConfigTokens, orderBy, Queue, getUniqueId, isString, injectElement, trackById, Position } from '@odx/angular/utils';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { tap, map, shareReplay, filter, switchMap, isObservable, of, combineLatest, from, firstValueFrom, merge, startWith } from 'rxjs';
+import { LocalizationService } from '@odx/angular/localization';
+import { AvatarComponent } from '@odx/angular/components/avatar';
+import * as i2 from '@odx/angular';
+import { DisabledController } from '@odx/angular';
+
+var notificationI18n = {
+    en: {
+        title: 'Notifications',
+        dismissAll: 'Dismiss all',
+    },
+    de: {
+        title: 'Benachrichtigungen',
+        dismissAll: 'Alle entfernen',
+    },
+};
+
+function getNotificationsByTags(...tags) {
+    const cachedTags = new Set(tags.filter(Boolean));
+    return ({ options }) => {
+        return cachedTags.size < 1 || options.tags.every((tag) => cachedTags.has(tag));
+    };
+}
+
+function sortNotifications(sortFn) {
+    return (source$) => source$.pipe(tap((values) => {
+        if (!isFunction(sortFn))
+            return;
+        values.sort(sortFn);
+    }));
+}
+
+function toNotificationCollection() {
+    return (source$) => source$.pipe(map((notificationRefs) => ({
+        values: notificationRefs,
+        count: notificationRefs.length,
+        isEmpty: notificationRefs.length === 0,
+    })));
+}
+
+const { NotificationConfig, NotificationDefaultConfig, injectNotificationConfig, provideNotificationConfig } = createConfigTokens('Notification', '@odx/angular/components/notification', {
+    options: { icon: 'core::globe', tags: [], dismissable: true },
+    sortFn: orderBy('createdAt', 'DESC'),
+    defaultIdPrefix: 'odx-notifications',
+});
+function provideNotifications(config, ...features) {
+    return makeEnvironmentProviders([provideNotificationConfig(config ?? {}), features]);
+}
+
+var logger = new Logger('@odx/angular/components/notification');
+
+const ODX_NOTIFICATION_QUEUE = new InjectionToken('@odx/angular/component/notifications::Queue', {
+    providedIn: 'root',
+    factory: () => new Queue(),
+});
+
+class NotificationService {
+    constructor() {
+        this.config = injectNotificationConfig();
+        this.localizationService = inject(LocalizationService);
+        this.queue = inject(ODX_NOTIFICATION_QUEUE);
+        this.injector = inject(Injector);
+        this.notifications$ = this.queue.value$.pipe(sortNotifications(this.config.sortFn), toNotificationCollection(), shareReplay({ bufferSize: 1, refCount: true }));
+        this.unseenNotifications$ = this.notifications$.pipe(map((collection) => collection.values.filter(({ hasBeenSeen }) => !hasBeenSeen)), toNotificationCollection(), shareReplay({ bufferSize: 1, refCount: true }));
+        this.onNotificationAdd$ = this.queue.onAdd$;
+        this.onNotificationRemove$ = this.queue.onRemove$;
+        this.onNotificationUpdate$ = this.queue.onUpdate$;
+        this.onNotificationSeen$ = this.queue.onUpdate$.pipe(filter(({ hasBeenSeen }) => hasBeenSeen));
+    }
+    /**
+     * Fetches notifications filtered by a specified query and optionally sorted by a custom sort function.
+     *
+     * @param {NotificationQuery} query - A function or object to filter notifications.
+     * @param {NotificationSortFn} [sortFn] - An optional sorting function to order the filtered notifications.
+     * @returns {Observable<NotificationCollection>} An observable stream of the filtered (and optionally sorted) notification collection.
+     * @example
+     * // Fetch notifications with a specific tag, sorted by creation date
+     * const sortedNotifications$ = notificationService.getNotificationsBy$(
+     *   notification => notification.tags.includes('important'),
+     *   (a, b) => b.createdAt - a.createdAt
+     * );
+     */
+    getNotificationsBy$(query, sortFn) {
+        return this.queue.value$.pipe(map((notifications) => notifications.filter(query)), sortNotifications(sortFn), toNotificationCollection(), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    /**
+     * Loads a list of notifications into the service.
+     *
+     * @param {NotificationRef[]} refs - An array of notification references to be loaded.
+     * @example
+     * // Load multiple notifications at once
+     * notificationService.load([
+     *   { id: '1', item: { title: 'Notification 1' }, options: {dismissable: true, icon: 'plus', tags: ['important']}, hasBeenSeen: false, createdAt: Date.now() },
+     *   { id: '2', item: { title: 'Notification 2' }, options: {dismissable: true, icon: 'plus', tags: ['important']}, hasBeenSeen: false, createdAt: Date.now() }
+     * ]);
+     */
+    load(refs) {
+        this.queue.addMany(refs);
+    }
+    /**
+     * Creates a new notification and adds it to the notification queue.
+     *
+     * @param {Notification} item - The notification to create.
+     * @param {Partial<NotificationOptions>} [options] - Optional settings for the notification.
+     * @example
+     * // Create a new notification with custom options
+     * notificationService.create(
+     *   { title: 'New Notification' },
+     *   { dismissable: true, icon: 'plus', tags: ['important'] }
+     * );
+     */
+    create(item, options) {
+        this.queue.add({
+            id: item.id ?? getUniqueId(this.config.defaultIdPrefix),
+            createdAt: Date.now(),
+            item,
+            options: this.resolveOptions(options),
+            hasBeenSeen: false,
+        });
+    }
+    /**
+     * Marks a specific notification as seen.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification to mark as seen.
+     * @example
+     * // Mark a notification as seen by its reference
+     * notificationService.markAsSeen(notificationRef);
+     */
+    markAsSeen(notificationRef) {
+        if (notificationRef.hasBeenSeen)
+            return;
+        this.queue.add({ ...notificationRef, hasBeenSeen: true });
+    }
+    /**
+     * Marks all notifications that match a specific query as seen.
+     *
+     * @param {NotificationQuery} query - The query to match notifications to mark as seen.
+     * @example
+     * // Mark all notifications with a specific tag as seen
+     * notificationService.markAsSeenBy(notification => notification.tags.includes('important'));
+     */
+    markAsSeenBy(query) {
+        for (const notificationRef of this.queue.toArray().filter(query)) {
+            this.markAsSeen(notificationRef);
+        }
+    }
+    /**
+     * Dismisses a specific notification.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification to dismiss.
+     * @example
+     * // Dismiss a notification by its reference
+     * notificationService.dismiss(notificationRef);
+     */
+    dismiss(notificationRef) {
+        if (!notificationRef.options.dismissable)
+            return;
+        this.queue.remove(notificationRef);
+    }
+    /**
+     * Dismisses all notifications that match a specific query.
+     *
+     * @param {NotificationQuery} query - The query to match notifications to dismiss.
+     * @example
+     * // Dismiss all notifications with a specific tag
+     * notificationService.dismissBy(notification => notification.tags.includes('expired'));
+     */
+    dismissBy(query) {
+        for (const item of this.queue.toArray().filter(query)) {
+            this.dismiss(item);
+        }
+    }
+    /**
+     * Dismisses all notifications.
+     *
+     * @example
+     * // Dismiss all notifications
+     * notificationService.dismissAll();
+     */
+    dismissAll() {
+        this.queue.clear();
+    }
+    /**
+     * Executes the action associated with a specific notification.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification whose action to execute.
+     * @example
+     * // Execute action for a notification
+     * notificationService.executeAction(notificationRef);
+     */
+    executeAction(notificationRef) {
+        if (!notificationRef.options.action)
+            return;
+        const actionFn = this.config.actionMap?.[notificationRef.options.action];
+        if (!isFunction(actionFn)) {
+            logger.warn(`Cannot find action ${notificationRef.options.action} for notification reference: ${notificationRef}`);
+            return;
+        }
+        runInInjectionContext(this.injector, () => actionFn(notificationRef));
+    }
+    resolveOptions(options) {
+        return deepmerge(this.config.options, options ?? {}, {
+            icon: options?.icon ?? this.config.tagToIconMap?.[options?.tags?.[0] ?? ''] ?? this.config.options.icon,
+            language: options?.language ?? this.localizationService.getActiveLanguage(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A service for managing the notification center. This service provides functionalities
+ * to filter, sort, and manage actions on notifications.
+ */
+class NotificationCenterService {
+    constructor() {
+        this.currentTag = signal(null);
+        this.currentSortFn = signal(undefined);
+        this.notificationService = inject(NotificationService);
+        this.notificationQuery = computed(() => getNotificationsByTags(this.currentTag()));
+        this.title = signal(null);
+        this.title$ = toObservable(this.title).pipe(switchMap((title) => (isObservable(title) ? title : of(title))), shareReplay({ bufferSize: 1, refCount: true }));
+        this.notifications$ = combineLatest([toObservable(this.notificationQuery), toObservable(this.currentSortFn)]).pipe(switchMap(([query, sortFn]) => this.notificationService.getNotificationsBy$(query, sortFn)));
+        this.unseenNotifications$ = this.notifications$.pipe(map((collection) => collection.values.filter(({ hasBeenSeen }) => !hasBeenSeen)), toNotificationCollection());
+        this.onNotificationAdd$ = this.queryEvent(this.notificationService.onNotificationAdd$);
+        this.onNotificationUpdate$ = this.queryEvent(this.notificationService.onNotificationUpdate$);
+        this.onNotificationRemove$ = this.queryEvent(this.notificationService.onNotificationRemove$);
+        this.onNotificationSeen$ = this.queryEvent(this.notificationService.onNotificationSeen$);
+    }
+    /**
+     * Sets the title for the notification center. The title can be static text or an observable for dynamic content.
+     *
+     * @param {DynamicTextContent | null} [value] - The title content for the notification center.
+     */
+    setTitle(value) {
+        this.title.set(value ?? null);
+    }
+    /**
+     * Sets the current tag to filter notifications. Only notifications with this tag will be included.
+     *
+     * @param {string | null} [value] - The tag to filter notifications by.
+     */
+    setTag(value) {
+        this.currentTag.set(value ?? null);
+    }
+    /**
+     * Sets the sort function used to order the notifications.
+     *
+     * @param {NotificationSortFn} [value] - The sort function to apply to the notifications.
+     */
+    setSortFn(value) {
+        this.currentSortFn.set(value);
+    }
+    /**
+     * Marks a given notification as seen. This does not remove the notification but updates its seen status.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification to be marked as seen.
+     */
+    markAsSeen(notificationRef) {
+        this.notificationService.markAsSeen(notificationRef);
+    }
+    /**
+     * Marks all current filtered notifications as seen.
+     */
+    markAllAsSeen() {
+        this.notificationService.markAsSeenBy(this.notificationQuery());
+    }
+    /**
+     * Dismisses a specific notification.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification to dismiss.
+     */
+    dismiss(notificationRef) {
+        this.notificationService.dismiss(notificationRef);
+    }
+    /**
+     * Dismisses all notifications that match the current filter criteria.
+     */
+    dismissAll() {
+        this.notificationService.dismissBy(this.notificationQuery());
+    }
+    /**
+     * Executes the action associated with a specific notification and marks it as seen.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification whose action to execute.
+     */
+    executeAction(notificationRef) {
+        this.markAsSeen(notificationRef);
+        this.notificationService.executeAction(notificationRef);
+    }
+    queryEvent(source$) {
+        return combineLatest([source$, toObservable(this.notificationQuery)]).pipe(filter(([notificationRef, query]) => query(notificationRef)), map(([notificationRef]) => notificationRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterService, decorators: [{
+            type: Injectable
+        }] });
+
+function makeNotificationFeature(provider) {
+    return provider;
+}
+
+/**
+ * Loads notifications using the provided `loadFn`. This function abstracts over the differences
+ * between synchronous notifications, promises, and observables, providing a uniform Observable output.
+ * @function loadNotifications
+ * @param {LoadNotificationsFn} [loadFn] - An optional function to load notifications.
+ * @returns {Observable<NotificationRef[]>} An Observable stream of notification references.
+ */
+function loadNotifications(loadFn) {
+    const notifications = loadFn?.();
+    if (isObservable(notifications)) {
+        return notifications;
+    }
+    if (notifications instanceof Promise) {
+        return from(notifications);
+    }
+    return of(notifications ?? []);
+}
+/**
+ * Integrates notification loading into the application environment. This function uses the Angular
+ * `ENVIRONMENT_INITIALIZER` to ensure that notifications are loaded as part of the application's
+ * initialization process.
+ * @function withLoadNotifications
+ * @param {LoadNotificationsFn} loadFn - The function to load notifications.
+ * @returns {NotificationFeature} A notification feature configured to load notifications at startup.
+ */
+function withLoadNotifications(loadFn) {
+    return makeNotificationFeature([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            useFactory: () => {
+                const notificationService = inject(NotificationService);
+                const notifications$ = loadNotifications(loadFn);
+                return () => {
+                    notifications$.subscribe((notificationRefs) => notificationService.load(notificationRefs));
+                };
+            },
+            multi: true,
+        },
+    ]);
+}
+
+/**
+ * Asynchronously saves notifications using the provided save function. It handles Observable and Promise results seamlessly.
+ * @async
+ * @function saveNotifications
+ * @param {NotificationRef[]} notifications - The notifications to be saved.
+ * @param {SaveNotificationsFn} [saveFn] - Optional custom save function.
+ * @returns {Promise<void>} A promise that resolves when the save operation is complete.
+ */
+async function saveNotifications(notifications, saveFn) {
+    const save = saveFn?.(notifications);
+    if (isObservable(save)) {
+        await firstValueFrom(save);
+    }
+    else if (save instanceof Promise) {
+        await save;
+    }
+}
+/**
+ * Configures the application to automatically save notifications using a specified save function.
+ * This setup integrates with Angular's environment initialization process to ensure notifications are saved as needed.
+ * @function withSaveNotifications
+ * @param {SaveNotificationsFn} saveFn - The function to save notifications.
+ * @returns {NotificationFeature} A notification feature configured to automatically save notifications.
+ */
+function withSaveNotifications(saveFn) {
+    return makeNotificationFeature([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            useFactory: () => {
+                const injector = inject(Injector);
+                const notificationService = inject(NotificationService);
+                const saveFnWithContext = (notifications) => runInInjectionContext(injector, () => saveFn(notifications));
+                return () => {
+                    notificationService.notifications$.subscribe(({ values }) => saveNotifications(values, saveFnWithContext));
+                };
+            },
+            multi: true,
+        },
+    ]);
+}
+
+/**
+ * Implementation of NotificationSerializer for persistent storage.
+ * @class PersistentNotificationSerializer
+ * @implements {NotificationSerializer}
+ */
+class PersistentNotificationSerializer {
+    /**
+     * Serializes an array of NotificationRef objects into a string.
+     * @function serialize
+     * @memberof NotificationSerializer
+     * @param {NotificationRef[]} value - The notification references to serialize.
+     * @returns {Promise<string>} A promise that resolves to the serialized string representation of notification references.
+     */
+    async serialize(value) {
+        const serializedNotifications = await Promise.all(value.map(async (ref) => deepmerge(ref, {
+            item: {
+                title: await this.serializeDynamicTextContent(ref.item.title),
+                description: await this.serializeDynamicTextContent(ref.item.description),
+            },
+        })));
+        return JSON.stringify(serializedNotifications);
+    }
+    /**
+     * Deserializes a string into an array of NotificationRef objects.
+     * @function deserialize
+     * @memberof NotificationSerializer
+     * @param {string} value - The string representation of notification references to deserialize.
+     * @returns {Promise<NotificationRef[]>} A promise that resolves to the deserialized notification references.
+     */
+    async deserialize(value) {
+        return JSON.parse(value);
+    }
+    async serializeDynamicTextContent(content) {
+        if (!content)
+            return '';
+        if (isString(content))
+            return content;
+        return firstValueFrom(content).catch(() => '');
+    }
+}
+/**
+ * Initializes and returns a function for loading persistent notifications.
+ * @function initPersistentNotifications
+ * @param {WithPersistentNotificationsStorageOptions} options - The storage options including serializer and storage key.
+ * @returns {LoadNotificationsFn} A function to load notifications from storage.
+ */
+function initPersistentNotifications({ storage, storageKey, serializer, idTransformer, }) {
+    return async () => {
+        const storedValue = storage.getItem(storageKey);
+        if (!storedValue)
+            return [];
+        const notificationRefs = await serializer.deserialize(storedValue);
+        if (isFunction(idTransformer)) {
+            for (const notificationRef of notificationRefs) {
+                notificationRef.item.id = notificationRef.id = idTransformer(notificationRef);
+            }
+        }
+        return notificationRefs;
+    };
+}
+/**
+ * Returns a function for persisting notifications.
+ * @function persistNotifications
+ * @param {WithPersistentNotificationsStorageOptions} options - The storage options including serializer and storage key.
+ * @returns {SaveNotificationsFn} A function to save notifications to storage.
+ */
+function persistNotifications({ storage, storageKey, serializer }) {
+    return async (notificationRefs) => {
+        storage.setItem(storageKey, await serializer.serialize(notificationRefs));
+    };
+}
+/**
+ * Configures the application to use persistent notifications, automatically loading from and saving to the configured storage.
+ * @function withPersistentNotifications
+ * @param {Partial<WithPersistentNotificationsOptions>} [options] - Optional configuration for persistent notifications.
+ * @returns {NotificationFeature} A notification feature configured for persistence.
+ */
+function withPersistentNotifications(options) {
+    const storageOptions = {
+        storageKey: options?.storageOptions?.storageKey ?? '@odx/angular/components/notification::Storage',
+        storage: options?.storageOptions?.storage ?? localStorage,
+        serializer: options?.storageOptions?.serializer ?? new PersistentNotificationSerializer(),
+    };
+    const initFn = options?.initFn ?? initPersistentNotifications(storageOptions);
+    const saveFn = options?.saveFn ?? persistNotifications(storageOptions);
+    return makeNotificationFeature([withLoadNotifications(initFn), withSaveNotifications(saveFn)]);
+}
+
+/**
+ * Requests permission to display browser notifications and returns a boolean indicating whether permission was granted.
+ * @async
+ * @function requestBrowserNotificationPermissions
+ * @returns {Promise<boolean>} A promise that resolves to `true` if permission is granted, otherwise `false`.
+ */
+async function requestBrowserNotificationPermissions() {
+    if (!('Notification' in window))
+        return false;
+    if (Notification.permission === 'granted')
+        return true;
+    if (Notification.permission === 'denied')
+        return false;
+    const permission = await Notification.requestPermission();
+    return permission === 'granted';
+}
+/**
+ * Creates a function responsible for sending out browser notifications with the given options.
+ * @function sendBrowserNotification
+ * @param {NotificationSerializer} serializer - The serializer to use for notification data.
+ * @param {BrowserNotificationExtras} [options] - Additional options for the browser notification.
+ * @returns {SendBrowserNotificationFn} A function to send browser notifications.
+ */
+function sendBrowserNotification(serializer, options) {
+    return async (notificationRef) => {
+        if (!('Notification' in window))
+            return;
+        const [notificationObj] = await serializer.deserialize(await serializer.serialize([notificationRef]));
+        if (!notificationObj || notificationObj.hasBeenSeen)
+            return;
+        const { createdAt, item } = notificationObj;
+        new Notification(item.title, {
+            tag: notificationRef.options.tags?.[0],
+            lang: notificationRef.options.language,
+            ...options,
+            body: item.description,
+            timestamp: createdAt,
+        });
+    };
+}
+/**
+ * Configures the application to send browser notifications, using Angular's `ENVIRONMENT_INITIALIZER` for setup.
+ * @function withBrowserNotifications
+ * @param {WithBrowserNotificationsOptions} [options] - Optional configuration for browser notifications.
+ * @returns {NotificationFeature} A notification feature for integration into the application environment.
+ */
+function withBrowserNotifications(options) {
+    return makeNotificationFeature([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            useFactory: () => {
+                const isEnabled = options?.isEnabled ?? true;
+                if (!isEnabled)
+                    return () => void 0;
+                const notificationService = inject(NotificationService);
+                const serializer = new PersistentNotificationSerializer();
+                const sendBrowserNotificationFn = options?.sendFn ?? sendBrowserNotification(serializer, options?.extras);
+                return async () => {
+                    if (!isEnabled)
+                        return;
+                    const permissionsGranted = await requestBrowserNotificationPermissions();
+                    if (!permissionsGranted)
+                        return;
+                    notificationService.onNotificationAdd$.subscribe(sendBrowserNotificationFn);
+                };
+            },
+            multi: true,
+        },
+    ]);
+}
+
+/**
+ * An InjectionToken for the NotificationTransformFn. This token can be used to inject
+ * a custom notification transformation function into the Angular DI system.
+ * @type {InjectionToken<NotificationTransformFn>}
+ */
+const ODX_NOTIFICATION_TRANSFORMER = new InjectionToken('@odx/angular/components/notification::NotificationTransformer');
+/**
+ * Attempts to inject a NotificationTransformFn from the Angular DI system.
+ * If no provider is found, it returns null.
+ * @function injectNotificationTransform
+ * @returns {NotificationTransformFn | null} The injected NotificationTransformFn, or null if not provided.
+ */
+function injectNotificationTransform() {
+    return inject(ODX_NOTIFICATION_TRANSFORMER, { optional: true });
+}
+/**
+ * Configures a notification transformation function to be used within the application.
+ * This function provides a mechanism to globally apply transformations to notifications
+ * before they are processed or displayed.
+ * @function withNotificationTransform
+ * @param {NotificationTransformFn} transformFn - The function to transform notifications.
+ * @returns {NotificationFeature} A NotificationFeature configured with the provided transformation function.
+ */
+function withNotificationTransform(transformFn) {
+    return makeNotificationFeature([
+        {
+            provide: ODX_NOTIFICATION_TRANSFORMER,
+            useValue: transformFn,
+        },
+    ]);
+}
+
+/**
+ * A component for displaying notifications.
+ * Supports customization through dynamic transformation of notification data.
+ * Utilizes the OnPush change detection strategy for better performance in large applications.
+ *
+ * @component
+ */
+let NotificationItemComponent = class NotificationItemComponent {
+    constructor() {
+        this.transformNotification = injectNotificationTransform();
+        this.element = injectElement();
+        /**
+         * An event emitter for dismissing the notification.
+         * It emits the notification reference that was dismissed.
+         */
+        this.dismiss = new EventEmitter();
+    }
+    /**
+     * Input property to set the notification. On setting, it transforms the notification for display.
+     * This transformation can be a custom logic provided through dependency injection.
+     *
+     * @param value NotificationRef - The notification object to be displayed.
+     */
+    set notification(value) {
+        this._notificationRef = value;
+        this.transformedNotification = this.transformNotification?.(value) ?? of(value);
+    }
+    /**
+     * Getter for the notification property.
+     *
+     * @returns NotificationRef - The current notification reference stored in the component.
+     */
+    get notification() {
+        return this._notificationRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationItemComponent, isStandalone: true, selector: "odx-notification-item", inputs: { notification: "notification" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<ng-template [ngIf]=\"transformedNotification | async\" let-ref>\n  <odx-avatar class=\"odx-notification-item__avatar odx-no-margin\">\n    <odx-icon [identifier]=\"ref.options.icon\" />\n  </odx-avatar>\n  <div class=\"odx-notification-item__title\">\n    <ng-template [odxDynamicView]=\"ref.item.title\" />\n  </div>\n  <div class=\"odx-notification-item__description\" *ngIf=\"ref.item.description as description\">\n    <ng-template [odxDynamicView]=\"ref.item.description\" />\n  </div>\n</ng-template>\n<odx-action-group class=\"odx-notification-item__actions odx-no-margin\">\n  <button odxButton class=\"odx-no-margin\" (click)=\"dismiss.next(notification)\" *ngIf=\"notification.options.dismissable\">\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+};
+NotificationItemComponent = __decorate([
+    CSSComponent('notification-item')
+], NotificationItemComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'odx-notification-item', standalone: true, imports: [AvatarComponent, ActionGroupComponent, ButtonComponent, CommonModule, DynamicViewDirective, IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"transformedNotification | async\" let-ref>\n  <odx-avatar class=\"odx-notification-item__avatar odx-no-margin\">\n    <odx-icon [identifier]=\"ref.options.icon\" />\n  </odx-avatar>\n  <div class=\"odx-notification-item__title\">\n    <ng-template [odxDynamicView]=\"ref.item.title\" />\n  </div>\n  <div class=\"odx-notification-item__description\" *ngIf=\"ref.item.description as description\">\n    <ng-template [odxDynamicView]=\"ref.item.description\" />\n  </div>\n</ng-template>\n<odx-action-group class=\"odx-notification-item__actions odx-no-margin\">\n  <button odxButton class=\"odx-no-margin\" (click)=\"dismiss.next(notification)\" *ngIf=\"notification.options.dismissable\">\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
+        }], propDecorators: { notification: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dismiss: [{
+                type: Output
+            }] } });
+
+/**
+ * A component for displaying and managing a list of notifications. It integrates various sub-components and directives to provide a rich user interface for notification interaction. Supports animations for notification transitions and leverages Angular's change detection strategies for performance.
+ *
+ * @CSSComponent 'notification-center' - Specifies the CSS class for styling the notification center component.
+ */
+let NotificationCenterComponent = class NotificationCenterComponent {
+    constructor() {
+        this.notificationCenterService = inject(NotificationCenterService);
+        this.trackById = trackById;
+        this.element = injectElement();
+    }
+    ngOnDestroy() {
+        this.notificationCenterService.markAllAsSeen();
+    }
+    isMuted({ options, hasBeenSeen }) {
+        return hasBeenSeen && !options.action;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationCenterComponent, isStandalone: true, selector: "odx-notification-center", providers: [provideTranslations(notificationI18n)], ngImport: i0, template: "<ng-template [ngIf]=\"notificationCenterService.notifications$ | async\" let-notifications>\n  <h3 class=\"odx-notification-center__header\" *ngrxLet=\"notificationCenterService.title$ | async as title\">\n    <ng-template [odxDynamicView]=\"title ?? ('title' | odxTranslate | async)\"></ng-template>\n  </h3>\n  <odx-list class=\"odx-notification-center__content\">\n    <odx-list-item\n      @notificationAnimation\n      [muted]=\"isMuted(notification)\"\n      [selected]=\"!notification.hasBeenSeen\"\n      (click)=\"notificationCenterService.executeAction(notification)\"\n      *ngFor=\"let notification of notifications.values; trackBy: trackById\"\n    >\n      <odx-notification-item [notification]=\"notification\" (dismiss)=\"notificationCenterService.dismiss(notification)\" />\n    </odx-list-item>\n  </odx-list>\n  <div class=\"odx-notification-center__footer\">\n    <button odxButton [disabled]=\"false\" (click)=\"notificationCenterService.dismissAll()\">\n      {{ 'dismissAll' | odxTranslate | async }}\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "pipe", type: TranslatePipe, name: "odxTranslate" }, { kind: "component", type: NotificationItemComponent, selector: "odx-notification-item", inputs: ["notification"], outputs: ["dismiss"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i3.ListComponent, selector: "odx-list" }, { kind: "component", type: i3.ListItemComponent, selector: "odx-list-item, [odxListItem]", inputs: ["danger", "muted", "selected"] }], animations: [trigger('notificationAnimation', [transition(':leave', useAnimation(collapse, { delay: 150 }))])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+};
+NotificationCenterComponent = __decorate([
+    CSSComponent('notification-center')
+], NotificationCenterComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'odx-notification-center', standalone: true, imports: [
+                        CommonModule,
+                        LetDirective,
+                        ActionGroupComponent,
+                        BadgeDirective,
+                        ButtonComponent,
+                        DynamicViewDirective,
+                        IconComponent,
+                        DropdownModule,
+                        TranslatePipe,
+                        NotificationItemComponent,
+                        InteractiveDirective,
+                        ListModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideTranslations(notificationI18n)], animations: [trigger('notificationAnimation', [transition(':leave', useAnimation(collapse, { delay: 150 }))])], template: "<ng-template [ngIf]=\"notificationCenterService.notifications$ | async\" let-notifications>\n  <h3 class=\"odx-notification-center__header\" *ngrxLet=\"notificationCenterService.title$ | async as title\">\n    <ng-template [odxDynamicView]=\"title ?? ('title' | odxTranslate | async)\"></ng-template>\n  </h3>\n  <odx-list class=\"odx-notification-center__content\">\n    <odx-list-item\n      @notificationAnimation\n      [muted]=\"isMuted(notification)\"\n      [selected]=\"!notification.hasBeenSeen\"\n      (click)=\"notificationCenterService.executeAction(notification)\"\n      *ngFor=\"let notification of notifications.values; trackBy: trackById\"\n    >\n      <odx-notification-item [notification]=\"notification\" (dismiss)=\"notificationCenterService.dismiss(notification)\" />\n    </odx-list-item>\n  </odx-list>\n  <div class=\"odx-notification-center__footer\">\n    <button odxButton [disabled]=\"false\" (click)=\"notificationCenterService.dismissAll()\">\n      {{ 'dismissAll' | odxTranslate | async }}\n    </button>\n  </div>\n</ng-template>\n" }]
+        }] });
+
+/**
+ * A directive that provides an interface for managing notifications.
+ * It allows configuring a notification center with dynamic content, sorting, and badge display functionalities.
+ */
+class NotificationCenterDirective {
+    constructor() {
+        this.badgeDirective = inject(BadgeDirective, { self: true });
+        this.destroyRef = inject(DestroyRef);
+        this.disabledController = DisabledController.inject();
+        this.dropdownDirective = inject(DropdownDirective, { self: true });
+        this.notificationCenterService = inject(NotificationCenterService, { self: true });
+        this.dropdownStateChange$ = merge(this.dropdownDirective.beforeOpen, this.dropdownDirective.beforeClose).pipe(startWith(void 0));
+        this.badgeValue$ = this.notificationCenterService.unseenNotifications$.pipe(switchMap(({ count }) => this.dropdownStateChange$.pipe(map(() => this.formatBadgeValue(count)))));
+        /**
+         * An event that is emitted when a new notification is added.
+         * Listeners can use this event to react to new notifications being added to the notification center.
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.notificationAdd = this.notificationCenterService.onNotificationAdd$;
+        /**
+         * An event that is emitted when a notification is updated.
+         * This can be used to react to changes in notifications, such as their read status or content updates.
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.notificationUpdate = this.notificationCenterService.onNotificationUpdate$;
+        /**
+         * An event that is emitted when a notification is removed from the notification center.
+         * Use this event to handle the removal of notifications, such as cleaning up resources or updating UI elements.
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.notificationRemove = this.notificationCenterService.onNotificationRemove$;
+        /**
+         * An event that is emitted when a notification is marked as seen.
+         * This event can be used to perform actions when the user acknowledges a notification.
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.notificationSeen = this.notificationCenterService.onNotificationSeen$;
+    }
+    /**
+     * Sets the tag for filtering notifications. Only notifications with this tag will be shown in the notification center.
+     * @param value The tag value to filter notifications. If null, all notifications are shown.
+     */
+    set tag(value) {
+        this.notificationCenterService.setTag(value);
+    }
+    /**
+     * Sets the title of the notification center. The title can be dynamic and change based on the application state.
+     * @param value The title content, which can be a string or an Observable returning a string. Allows for dynamic titles.
+     */
+    set title(value) {
+        this.notificationCenterService.setTitle(value);
+    }
+    /**
+     * Sets the sorting function used to order notifications within the notification center.
+     * @param value A function that compares two notifications and returns the sort order.
+     *
+     * @example
+     *  sortFfn = (a: NotificationRef, b: NotificationRef) => {
+          if (a.createdAt < b.createdAt) return -1;
+          if (a.createdAt > b.createdAt) return 1;
+          return 0;
+        };
+     */
+    set sortFn(value) {
+        this.notificationCenterService.setSortFn(value);
+    }
+    ngOnInit() {
+        this.badgeDirective.position = Position.BOTTOM;
+        this.badgeDirective.offset = 6;
+        this.dropdownDirective.content = NotificationCenterComponent;
+        this.dropdownDirective.options = {
+            containerClass: 'odx-notification-center-overlay',
+            position: Position.BOTTOM_END,
+            enableFallback: false,
+        };
+    }
+    ngAfterViewInit() {
+        merge(this.handleBadgeUpdates(), this.handleDropdownUpdates()).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
+    }
+    formatBadgeValue(value) {
+        return this.dropdownDirective.isOpen || value === 0 ? null : value.toFixed(0);
+    }
+    handleBadgeUpdates() {
+        return this.badgeValue$.pipe(tap((value) => {
+            this.badgeDirective.value = value;
+            this.badgeDirective.ngOnChanges();
+        }));
+    }
+    handleDropdownUpdates() {
+        return this.notificationCenterService.notifications$.pipe(tap(({ isEmpty }) => {
+            this.disabledController?.setDisabledState(isEmpty);
+            if (!isEmpty)
+                return;
+            this.dropdownDirective.close();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NotificationCenterDirective, isStandalone: true, selector: "[odxNotificationCenter]", inputs: { tag: ["odxNotificationCenter", "tag"], title: ["odxNotificationCenterTitle", "title"], sortFn: ["odxNotificationCenterSortFn", "sortFn"] }, outputs: { notificationAdd: "odxNotificationCenterAdd", notificationUpdate: "odxNotificationCenterUpdate", notificationRemove: "odxNotificationCenterRemove", notificationSeen: "odxNotificationCenterSeen" }, providers: [NotificationCenterService], hostDirectives: [{ directive: i1$1.BadgeDirective, inputs: ["odxBadgeVariant", "odxNotificationCenterBadgeVariant"] }, { directive: i2$1.DropdownDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationCenterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[odxNotificationCenter]',
+                    hostDirectives: [{ directive: BadgeDirective, inputs: ['odxBadgeVariant:odxNotificationCenterBadgeVariant'] }, DropdownDirective],
+                    providers: [NotificationCenterService],
+                }]
+        }], propDecorators: { tag: [{
+                type: Input,
+                args: ['odxNotificationCenter']
+            }], title: [{
+                type: Input,
+                args: ['odxNotificationCenterTitle']
+            }], sortFn: [{
+                type: Input,
+                args: ['odxNotificationCenterSortFn']
+            }], notificationAdd: [{
+                type: Output,
+                args: ['odxNotificationCenterAdd']
+            }], notificationUpdate: [{
+                type: Output,
+                args: ['odxNotificationCenterUpdate']
+            }], notificationRemove: [{
+                type: Output,
+                args: ['odxNotificationCenterRemove']
+            }], notificationSeen: [{
+                type: Output,
+                args: ['odxNotificationCenterSeen']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NotificationCenterComponent, NotificationCenterDirective, NotificationConfig, NotificationDefaultConfig, NotificationItemComponent, NotificationService, ODX_NOTIFICATION_QUEUE, ODX_NOTIFICATION_TRANSFORMER, PersistentNotificationSerializer, initPersistentNotifications, injectNotificationConfig, injectNotificationTransform, makeNotificationFeature, persistNotifications, provideNotificationConfig, provideNotifications, withBrowserNotifications, withLoadNotifications, withNotificationTransform, withPersistentNotifications, withSaveNotifications };
+//# sourceMappingURL=odx-angular-components-notification.mjs.map