@odx/angular 5.3.3 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/angular
 
+## 5.4.0
+
+### Minor Changes
+
+- 4375380: Add notification component and service
+
+## 5.3.4
+
+### Patch Changes
+
+- 3eb8c54: Large variant for button component
+- b3993a0: New condensed variant to rich-list component to set vrtical padding to 0 for list items
+
 ## 5.3.3
 
 ### Patch Changes

package/components/button/lib/models/button-size.d.ts

@@ -1,5 +1,6 @@
-export type ButtonSize = typeof ButtonSize[keyof typeof ButtonSize];
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
 export declare const ButtonSize: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
+    readonly LARGE: "large";
 };

package/components/notification/README.md

@@ -0,0 +1,3 @@
+# @odx/angular/components/notification
+
+Secondary entry point of `@odx/angular`. It can be used by importing from `@odx/angular/components/notification`.

package/components/notification/index.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/components';
+export * from './lib/directives';
+export * from './lib/features';
+export * from './lib/models';
+export * from './lib/notification.config';
+export * from './lib/notification.service';
+export * from './lib/notification.tokens';

package/components/notification/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './notification-center/notification-center.component';
+export * from './notification-item/notification-item.component';

package/components/notification/lib/components/notification-center/notification-center.component.d.ts

@@ -0,0 +1,19 @@
+import { OnDestroy } from '@angular/core';
+import { trackById } from '@odx/angular/utils';
+import { NotificationRef } from '../../models';
+import { NotificationCenterService } from '../../services';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class NotificationCenterComponent implements OnDestroy {
+    protected readonly notificationCenterService: NotificationCenterService;
+    protected readonly trackById: typeof trackById;
+    readonly element: import("@angular/core").ElementRef<HTMLElement>;
+    ngOnDestroy(): void;
+    protected isMuted({ options, hasBeenSeen }: NotificationRef): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationCenterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationCenterComponent, "odx-notification-center", never, {}, {}, never, never, true, never>;
+}

package/components/notification/lib/components/notification-item/notification-item.component.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs';
+import { NotificationRef } from '../../models';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ */
+export declare class NotificationItemComponent {
+    private readonly transformNotification;
+    private _notificationRef;
+    protected transformedNotification: Observable<NotificationRef>;
+    readonly element: import("@angular/core").ElementRef<HTMLElement>;
+    /**
+     * 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: NotificationRef);
+    /**
+     * Getter for the notification property.
+     *
+     * @returns NotificationRef - The current notification reference stored in the component.
+     */
+    get notification(): NotificationRef;
+    /**
+     * An event emitter for dismissing the notification.
+     * It emits the notification reference that was dismissed.
+     */
+    dismiss: EventEmitter<NotificationRef>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationItemComponent, "odx-notification-item", never, { "notification": { "alias": "notification"; "required": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
+}

package/components/notification/lib/directives/index.d.ts

@@ -0,0 +1 @@
+export * from './notification-center.directive';

package/components/notification/lib/directives/notification-center.directive.d.ts

@@ -0,0 +1,69 @@
+import { AfterViewInit, OnInit } from '@angular/core';
+import { DynamicTextContent } from '@odx/angular/cdk/dynamic-view';
+import { Observable } from 'rxjs';
+import { NotificationSortFn } from '../models';
+import * as i0 from "@angular/core";
+import * as i1 from "@odx/angular/components/badge";
+import * as i2 from "@odx/angular/components/dropdown";
+/**
+ * A directive that provides an interface for managing notifications.
+ * It allows configuring a notification center with dynamic content, sorting, and badge display functionalities.
+ */
+export declare class NotificationCenterDirective implements OnInit, AfterViewInit {
+    private readonly badgeDirective;
+    private readonly destroyRef;
+    private readonly disabledController;
+    private readonly dropdownDirective;
+    private readonly notificationCenterService;
+    private readonly dropdownStateChange$;
+    private readonly badgeValue$;
+    /**
+     * 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: string | null);
+    /**
+     * 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: DynamicTextContent | null);
+    /**
+     * 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: NotificationSortFn);
+    /**
+     * 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.
+     */
+    notificationAdd: Observable<import("../models").NotificationRef>;
+    /**
+     * 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.
+     */
+    notificationUpdate: Observable<import("../models").NotificationRef>;
+    /**
+     * 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.
+     */
+    notificationRemove: Observable<import("../models").NotificationRef>;
+    /**
+     * 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.
+     */
+    notificationSeen: Observable<import("../models").NotificationRef>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    private formatBadgeValue;
+    private handleBadgeUpdates;
+    private handleDropdownUpdates;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationCenterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NotificationCenterDirective, "[odxNotificationCenter]", never, { "tag": { "alias": "odxNotificationCenter"; "required": false; }; "title": { "alias": "odxNotificationCenterTitle"; "required": false; }; "sortFn": { "alias": "odxNotificationCenterSortFn"; "required": false; }; }, { "notificationAdd": "odxNotificationCenterAdd"; "notificationUpdate": "odxNotificationCenterUpdate"; "notificationRemove": "odxNotificationCenterRemove"; "notificationSeen": "odxNotificationCenterSeen"; }, never, never, true, [{ directive: typeof i1.BadgeDirective; inputs: { "odxBadgeVariant": "odxNotificationCenterBadgeVariant"; }; outputs: {}; }, { directive: typeof i2.DropdownDirective; inputs: {}; outputs: {}; }]>;
+}

package/components/notification/lib/features/index.d.ts

@@ -0,0 +1,5 @@
+export * from './with-browser-notifications';
+export * from './with-load-notifications';
+export * from './with-notification-transformer';
+export * from './with-peristent-notifications';
+export * from './with-save-notifications';

package/components/notification/lib/features/with-browser-notifications.d.ts

@@ -0,0 +1,17 @@
+import { NotificationFeature, NotificationRef } from '../models';
+export type BrowserNotificationExtras = Omit<NotificationOptions, 'body' | 'timestamp'>;
+export type BrowserNotification = Notification;
+export type BrowserNotificationFactory = (notificationRef: NotificationRef) => BrowserNotification;
+export type SendBrowserNotificationFn = (notificationRef: NotificationRef) => unknown;
+export interface WithBrowserNotificationsOptions {
+    sendFn?: SendBrowserNotificationFn;
+    extras?: BrowserNotificationExtras;
+    isEnabled?: boolean;
+}
+/**
+ * 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.
+ */
+export declare function withBrowserNotifications(options?: WithBrowserNotificationsOptions): NotificationFeature;

package/components/notification/lib/features/with-load-notifications.d.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+import { NotificationFeature, NotificationRef } from '../models';
+/**
+ * Type definition for a function that loads notifications.
+ * Can return notifications directly as an array, as a Promise, or as an Observable.
+ * @typedef {Function} LoadNotificationsFn
+ * @returns {Observable<NotificationRef[]> | Promise<NotificationRef[]> | NotificationRef[]} The loaded notifications.
+ */
+export type LoadNotificationsFn = () => Observable<NotificationRef[]> | Promise<NotificationRef[]> | NotificationRef[];
+/**
+ * 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.
+ */
+export declare function withLoadNotifications(loadFn: LoadNotificationsFn): NotificationFeature;

package/components/notification/lib/features/with-notification-transformer.d.ts

@@ -0,0 +1,26 @@
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+import { NotificationFeature, NotificationRef } from '../models';
+export type NotificationTransformFn = (ref: NotificationRef) => Observable<NotificationRef>;
+/**
+ * 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>}
+ */
+export declare const ODX_NOTIFICATION_TRANSFORMER: InjectionToken<NotificationTransformFn>;
+/**
+ * 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.
+ */
+export declare function injectNotificationTransform(): NotificationTransformFn | null;
+/**
+ * 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.
+ */
+export declare function withNotificationTransform(transformFn: NotificationTransformFn): NotificationFeature;

package/components/notification/lib/features/with-peristent-notifications.d.ts

@@ -0,0 +1,63 @@
+import { NotificationFeature, NotificationRef } from '../models';
+import { LoadNotificationsFn } from './with-load-notifications';
+import { SaveNotificationsFn } from './with-save-notifications';
+export interface NotificationSerializer {
+    serialize(value: NotificationRef[]): Promise<string>;
+    deserialize(value: string): Promise<NotificationRef[]>;
+}
+/**
+ * Implementation of NotificationSerializer for persistent storage.
+ * @class PersistentNotificationSerializer
+ * @implements {NotificationSerializer}
+ */
+export declare class PersistentNotificationSerializer implements NotificationSerializer {
+    /**
+     * 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.
+     */
+    serialize(value: NotificationRef[]): Promise<string>;
+    /**
+     * 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.
+     */
+    deserialize(value: string): Promise<NotificationRef[]>;
+    private serializeDynamicTextContent;
+}
+export interface WithPersistentNotificationsStorageOptions {
+    storageKey: string;
+    storage: Storage;
+    serializer: NotificationSerializer;
+    idTransformer?: (notificationRef: NotificationRef) => string;
+}
+export interface WithPersistentNotificationsOptions {
+    initFn: LoadNotificationsFn;
+    saveFn: SaveNotificationsFn;
+    storageOptions: WithPersistentNotificationsStorageOptions;
+}
+/**
+ * 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.
+ */
+export declare function initPersistentNotifications({ storage, storageKey, serializer, idTransformer, }: WithPersistentNotificationsStorageOptions): LoadNotificationsFn;
+/**
+ * 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.
+ */
+export declare function persistNotifications({ storage, storageKey, serializer }: WithPersistentNotificationsStorageOptions): SaveNotificationsFn;
+/**
+ * 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.
+ */
+export declare function withPersistentNotifications(options?: Partial<WithPersistentNotificationsOptions>): NotificationFeature;

package/components/notification/lib/features/with-save-notifications.d.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+import { NotificationFeature, NotificationRef } from '../models';
+export type SaveNotificationsFn = (notificationRefs: NotificationRef[]) => Observable<void> | Promise<void> | void;
+/**
+ * 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.
+ */
+export declare function withSaveNotifications(saveFn: SaveNotificationsFn): NotificationFeature;

package/components/notification/lib/helpers/get-notifications-by-tag.d.ts

@@ -0,0 +1,2 @@
+import { NotificationQuery } from '../models';
+export declare function getNotificationsByTags(...tags: Array<string | null | undefined>): NotificationQuery;

package/components/notification/lib/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './get-notifications-by-tag';
+export * from './sort-notifications';
+export * from './to-notification-collection';

package/components/notification/lib/helpers/sort-notifications.d.ts

@@ -0,0 +1,3 @@
+import { MonoTypeOperatorFunction } from 'rxjs';
+import { NotificationRef, NotificationSortFn } from '../models';
+export declare function sortNotifications(sortFn?: NotificationSortFn): MonoTypeOperatorFunction<NotificationRef[]>;

package/components/notification/lib/helpers/to-notification-collection.d.ts

@@ -0,0 +1,3 @@
+import { OperatorFunction } from 'rxjs';
+import { NotificationCollection, NotificationRef } from '../models';
+export declare function toNotificationCollection(): OperatorFunction<NotificationRef[], NotificationCollection>;

package/components/notification/lib/models/index.d.ts

@@ -0,0 +1,8 @@
+export * from './notification';
+export * from './notification-action';
+export * from './notification-collection';
+export * from './notification-feature';
+export * from './notification-options';
+export * from './notification-query';
+export * from './notification-sort-fn';
+export * from './notification.ref';

package/components/notification/lib/models/notification-action.d.ts

@@ -0,0 +1,2 @@
+import { NotificationRef } from './notification.ref';
+export type NotificationAction = (notificationRef: NotificationRef) => void;

package/components/notification/lib/models/notification-collection.d.ts

@@ -0,0 +1,6 @@
+import { NotificationRef } from './notification.ref';
+export interface NotificationCollection {
+    values: NotificationRef[];
+    count: number;
+    isEmpty: boolean;
+}

package/components/notification/lib/models/notification-feature.d.ts

@@ -0,0 +1,5 @@
+import { EnvironmentProviders, Provider } from '@angular/core';
+export type NotificationFeature = EnvironmentProviders & {
+    ɵodxBrand: '@odx/angular/components/notification::NotificationFeature';
+};
+export declare function makeNotificationFeature(provider: (Provider | NotificationFeature)[] | EnvironmentProviders): NotificationFeature;

package/components/notification/lib/models/notification-options.d.ts

@@ -0,0 +1,7 @@
+export interface NotificationOptions {
+    icon: string;
+    tags: string[];
+    dismissable: boolean;
+    action?: string;
+    language?: string;
+}

package/components/notification/lib/models/notification-query.d.ts

@@ -0,0 +1,2 @@
+import { NotificationRef } from './notification.ref';
+export type NotificationQuery = (notificationRef: NotificationRef) => boolean;

package/components/notification/lib/models/notification-sort-fn.d.ts

@@ -0,0 +1,2 @@
+import { NotificationRef } from './notification.ref';
+export type NotificationSortFn = Parameters<Array<NotificationRef>['sort']>[0];

package/components/notification/lib/models/notification.d.ts

@@ -0,0 +1,6 @@
+import { DynamicTextContent } from '@odx/angular/cdk/dynamic-view';
+export interface Notification {
+    id?: string;
+    title: DynamicTextContent;
+    description?: DynamicTextContent;
+}

package/components/notification/lib/models/notification.ref.d.ts

@@ -0,0 +1,9 @@
+import { Notification } from './notification';
+import { NotificationOptions } from './notification-options';
+export interface NotificationRef {
+    id: NonNullable<Notification['id']>;
+    createdAt: number;
+    item: Notification;
+    options: NotificationOptions;
+    hasBeenSeen: boolean;
+}

package/components/notification/lib/notification.config.d.ts

@@ -0,0 +1,11 @@
+import { EnvironmentProviders } from '@angular/core';
+import { NotificationAction, NotificationFeature, NotificationOptions, NotificationSortFn } from './models';
+export interface NotificationConfig {
+    defaultIdPrefix: string;
+    options: NotificationOptions;
+    sortFn: NotificationSortFn;
+    tagToIconMap?: Record<string, string>;
+    actionMap?: Record<string, NotificationAction>;
+}
+export declare const NotificationConfig: import("@angular/core").InjectionToken<Partial<NotificationConfig>>, NotificationDefaultConfig: NotificationConfig, injectNotificationConfig: () => NotificationConfig, provideNotificationConfig: <D extends import("@odx/angular/utils").ConfigDependencies<unknown> = import("@odx/angular/utils").ConfigDependencies<Partial<NotificationConfig>>>(config: import("@odx/angular/utils").ConfigProvider<Partial<NotificationConfig>, D>) => import("@angular/core").ValueProvider | import("@angular/core").FactoryProvider;
+export declare function provideNotifications(config?: Partial<NotificationConfig>, ...features: NotificationFeature[]): EnvironmentProviders;

package/components/notification/lib/notification.i18n.d.ts

@@ -0,0 +1,3 @@
+import { TranslationObject } from '@odx/angular/internal/translate';
+declare const _default: TranslationObject;
+export default _default;

package/components/notification/lib/notification.logger.d.ts

@@ -0,0 +1,3 @@
+import { Logger } from '@odx/angular/internal';
+declare const _default: Logger;
+export default _default;

package/components/notification/lib/notification.service.d.ts

@@ -0,0 +1,110 @@
+import { Observable } from 'rxjs';
+import { Notification, NotificationCollection, NotificationOptions, NotificationQuery, NotificationRef, NotificationSortFn } from './models';
+import * as i0 from "@angular/core";
+export declare class NotificationService {
+    private readonly config;
+    private readonly localizationService;
+    private readonly queue;
+    private readonly injector;
+    readonly notifications$: Observable<NotificationCollection>;
+    readonly unseenNotifications$: Observable<NotificationCollection>;
+    readonly onNotificationAdd$: Observable<NotificationRef>;
+    readonly onNotificationRemove$: Observable<NotificationRef>;
+    readonly onNotificationUpdate$: Observable<NotificationRef>;
+    readonly onNotificationSeen$: Observable<NotificationRef>;
+    /**
+     * 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: NotificationQuery, sortFn?: NotificationSortFn): Observable<NotificationCollection>;
+    /**
+     * 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: NotificationRef[]): void;
+    /**
+     * 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: Notification, options?: Partial<NotificationOptions>): void;
+    /**
+     * 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: NotificationRef): void;
+    /**
+     * 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: NotificationQuery): void;
+    /**
+     * 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: NotificationRef): void;
+    /**
+     * 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: NotificationQuery): void;
+    /**
+     * Dismisses all notifications.
+     *
+     * @example
+     * // Dismiss all notifications
+     * notificationService.dismissAll();
+     */
+    dismissAll(): void;
+    /**
+     * 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: NotificationRef): void;
+    private resolveOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;
+}

package/components/notification/lib/notification.tokens.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { Queue } from '@odx/angular/utils';
+import { NotificationRef } from './models';
+export declare const ODX_NOTIFICATION_QUEUE: InjectionToken<Queue<NotificationRef>>;

package/components/notification/lib/services/index.d.ts

@@ -0,0 +1 @@
+export * from './notification-center.service';

package/components/notification/lib/services/notification-center.service.d.ts

@@ -0,0 +1,69 @@
+import { DynamicTextContent } from '@odx/angular/cdk/dynamic-view';
+import { Observable } from 'rxjs';
+import { NotificationRef, NotificationSortFn } from '../models';
+import * as i0 from "@angular/core";
+/**
+ * A service for managing the notification center. This service provides functionalities
+ * to filter, sort, and manage actions on notifications.
+ */
+export declare class NotificationCenterService {
+    private readonly currentTag;
+    private readonly currentSortFn;
+    private readonly notificationService;
+    private readonly notificationQuery;
+    private readonly title;
+    readonly title$: Observable<string | null>;
+    readonly notifications$: Observable<import("../models").NotificationCollection>;
+    readonly unseenNotifications$: Observable<import("../models").NotificationCollection>;
+    onNotificationAdd$: Observable<NotificationRef>;
+    onNotificationUpdate$: Observable<NotificationRef>;
+    onNotificationRemove$: Observable<NotificationRef>;
+    onNotificationSeen$: Observable<NotificationRef>;
+    /**
+     * 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?: DynamicTextContent | null): void;
+    /**
+     * 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?: string | null): void;
+    /**
+     * Sets the sort function used to order the notifications.
+     *
+     * @param {NotificationSortFn} [value] - The sort function to apply to the notifications.
+     */
+    setSortFn(value?: NotificationSortFn): void;
+    /**
+     * 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: NotificationRef): void;
+    /**
+     * Marks all current filtered notifications as seen.
+     */
+    markAllAsSeen(): void;
+    /**
+     * Dismisses a specific notification.
+     *
+     * @param {NotificationRef} notificationRef - The reference to the notification to dismiss.
+     */
+    dismiss(notificationRef: NotificationRef): void;
+    /**
+     * Dismisses all notifications that match the current filter criteria.
+     */
+    dismissAll(): void;
+    /**
+     * 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: NotificationRef): void;
+    private queryEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationCenterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NotificationCenterService>;
+}

package/components/notification/testing/README.md

@@ -0,0 +1,3 @@
+# @odx/angular/components/notification/testing
+
+Secondary entry point of `@odx/angular`. It can be used by importing from `@odx/angular/components/notification/testing`.

package/components/notification/testing/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/test-helpers';