@etsoo/notificationbase 1.1.37 → 1.1.40

package/__tests__/tsconfig.json

@@ -1,15 +1,14 @@
 {
     "compilerOptions": {
-        "target": "ES2019",
+        "target": "ES2020",
         "module": "ESNext",
-        "allowJs": true,
+        "moduleResolution": "Node10",
+        "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "declaration": true

package/babel.config.json

@@ -0,0 +1,11 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": [
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "corejs": 3
+            }
+        ]
+    ]
+}

package/lib/cjs/Notification.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = exports.NotificationType = exports.NotificationMessageType = exports.NotificationModalType = exports.NotificationAlign = void 0;
+const shared_1 = require("@etsoo/shared");
+// https://devimalplanet.com/typescript-how-to-extend-one-enum-from-another
+// Number index keys are still there
+const { MiddleLeft, MiddleRight, ...alignItems } = shared_1.DataTypes.PlacementEnum;
+const newItems = {
+    ...alignItems
+};
+delete newItems[MiddleLeft];
+delete newItems[MiddleRight];
+/**
+ * Display align
+ */
+exports.NotificationAlign = {
+    ...newItems
+};
+/**
+ * Modal types
+ */
+var NotificationModalType;
+(function (NotificationModalType) {
+    NotificationModalType[NotificationModalType["Loading"] = 0] = "Loading";
+    NotificationModalType[NotificationModalType["Confirm"] = 1] = "Confirm";
+    NotificationModalType[NotificationModalType["Prompt"] = 2] = "Prompt";
+    NotificationModalType[NotificationModalType["Error"] = 3] = "Error";
+    NotificationModalType[NotificationModalType["Popup"] = 6] = "Popup";
+})(NotificationModalType || (exports.NotificationModalType = NotificationModalType = {}));
+/**
+ * Message types
+ */
+var NotificationMessageType;
+(function (NotificationMessageType) {
+    NotificationMessageType[NotificationMessageType["Default"] = 10] = "Default";
+    NotificationMessageType[NotificationMessageType["Success"] = 11] = "Success";
+    NotificationMessageType[NotificationMessageType["Warning"] = 12] = "Warning";
+    NotificationMessageType[NotificationMessageType["Info"] = 13] = "Info";
+    NotificationMessageType[NotificationMessageType["Danger"] = 14] = "Danger"; // Error
+})(NotificationMessageType || (exports.NotificationMessageType = NotificationMessageType = {}));
+/**
+ * Merged type definition below together
+ */
+exports.NotificationType = {
+    ...NotificationModalType,
+    ...NotificationMessageType
+};
+/**
+ * Notification class
+ * Generic parameter UI presents UI element type
+ */
+class Notification {
+    /**
+     * Is open or not
+     */
+    get open() {
+        return this._open;
+    }
+    /**
+     * Constructor
+     * @param type Type
+     * @param content Content
+     * @param title Title
+     * @param align Align
+     * @param timespan Timespan
+     */
+    constructor(type, content, title, align, timespan) {
+        /**
+         * Dismiss timeout seed
+         */
+        this.dismissSeed = 0;
+        this._open = true;
+        this.id = shared_1.Utils.newGUID();
+        this.type = type;
+        this.content = content;
+        this.title = title;
+        // Modal type
+        this.modal = type in NotificationModalType;
+        // Align, only available for none modal
+        if (this.modal)
+            this.align = exports.NotificationAlign.Unknown;
+        else if (align != null)
+            this.align = align;
+        // Message align default to top left
+        else if (type in NotificationMessageType)
+            this.align = exports.NotificationAlign.TopLeft;
+        else
+            this.align = exports.NotificationAlign.Center;
+        // Display as modal will lasts otherwise 5 seconds to dismiss it
+        this.timespan = timespan ?? (this.modal ? 0 : 5);
+    }
+    /**
+     * Dismiss it
+     * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
+     * @returns Is delayed or not
+     */
+    dismiss(delaySeconds = 0, noTrigger = false) {
+        // If it's closed, return
+        if (!this._open)
+            return false;
+        if (delaySeconds > 0) {
+            this.removeTimeout();
+            this.dismissSeed = window.setTimeout(this.dismiss.bind(this), delaySeconds * 1000, 0 // force to dismiss
+            );
+            return true;
+        }
+        // For message, call onReturn
+        if (!noTrigger &&
+            this.onReturn != null &&
+            this.type in NotificationMessageType) {
+            this.onReturn(undefined);
+        }
+        // Indicate closed
+        this._open = false;
+        if (this.onDismiss)
+            this.onDismiss();
+        this.dispose();
+        return false;
+    }
+    // Remove possible dismiss timeout
+    removeTimeout() {
+        if (this.dismissSeed > 0) {
+            clearTimeout(this.dismissSeed);
+            this.dismissSeed = 0;
+        }
+    }
+    /**
+     * Dispose it
+     */
+    dispose() {
+        this.removeTimeout();
+    }
+    /**
+     * Return value
+     * Dismiss first, then run callback
+     * @param value
+     * @returns
+     */
+    async returnValue(value) {
+        if (this.onReturn) {
+            const result = await this.onReturn(value);
+            if (result === false)
+                return;
+        }
+        this.dismiss(0, true);
+    }
+}
+exports.Notification = Notification;

package/lib/cjs/NotificationContainer.js

@@ -0,0 +1,302 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationContainer = void 0;
+const Notification_1 = require("./Notification");
+/**
+ * Notification container class
+ */
+class NotificationContainer {
+    /**
+     * Is loading bar showing
+     */
+    get isLoading() {
+        return this.notifications[Notification_1.NotificationAlign.Unknown].some((n) => n.open && n.type === Notification_1.NotificationModalType.Loading);
+    }
+    /**
+     * Is model window showing
+     */
+    get isModeling() {
+        return this.alignOpenCount(Notification_1.NotificationAlign.Unknown) > 0;
+    }
+    /**
+     * Constructor
+     */
+    constructor(update) {
+        this.loadingCount = 0;
+        // Update callback
+        this.update = update;
+        // Init notification collection
+        this.notifications = {};
+        for (const align in Notification_1.NotificationAlign) {
+            if (!isNaN(Number(align)))
+                this.notifications[align] = [];
+        }
+    }
+    /**
+     * Add notification
+     * @param notification Notification
+     * @param top Is insert top
+     */
+    add(notification, top = false) {
+        // Align collection
+        const alignItems = this.notifications[notification.align];
+        // Support dismiss action
+        const { timespan, onDismiss } = notification;
+        notification.onDismiss = () => {
+            // Remove from the collection
+            const index = alignItems.findIndex((item) => item.id === notification.id);
+            if (index > -1)
+                alignItems.splice(index, 1);
+            // Call the registered callback
+            this.doRegister(notification, true);
+            // Custom onDismiss callback
+            if (onDismiss)
+                onDismiss();
+        };
+        // Add to the collection
+        if (top)
+            alignItems.unshift(notification);
+        else
+            alignItems.push(notification);
+        // Call the registered callback
+        this.doRegister(notification, false);
+        // Auto dismiss in timespan seconds
+        if (timespan > 0)
+            notification.dismiss(timespan);
+    }
+    /**
+     * Align all notification count
+     * @param align Align
+     */
+    alignCount(align) {
+        return this.notifications[align].length;
+    }
+    /**
+     * Align open notification count
+     * @param align Align
+     */
+    alignOpenCount(align) {
+        const items = this.notifications[align];
+        return items.filter((item) => item.open).length;
+    }
+    /**
+     * Remove all closed notification
+     */
+    clear() {
+        for (const align in this.notifications) {
+            // Align items
+            const items = this.notifications[align];
+            // Loop to remove closed item
+            const len = items.length - 1;
+            for (let n = len; n >= 0; n--) {
+                const notification = items[n];
+                if (!notification.open) {
+                    notification.dispose();
+                    items.splice(n, 1);
+                }
+            }
+        }
+    }
+    /**
+     * Dispose all notifications
+     */
+    dispose() {
+        for (const align in this.notifications) {
+            // Align items
+            const items = this.notifications[align];
+            items.forEach((item) => item.dispose());
+            // Reset
+            this.notifications[align] = [];
+        }
+    }
+    /**
+     * Call register callback
+     * @param id Notification id
+     * @param dismiss Is dismiss
+     */
+    doRegister(item, dismiss) {
+        // Call
+        this.update(item, dismiss);
+    }
+    /**
+     * Get notification with align and id
+     * @param align Align
+     * @param id Notification id
+     */
+    get(align, id) {
+        const items = this.notifications[align];
+        return items.find((item) => item.id === id);
+    }
+    /**
+     * Get notification with id
+     * @param id Notification id
+     */
+    getById(id) {
+        for (const align in Object.keys(Notification_1.NotificationAlign)) {
+            var item = this.get(align, id);
+            if (item != null)
+                return item;
+        }
+        return undefined;
+    }
+    /**
+     * Report error or message
+     * @param errorOrTitle Error message or title
+     * @param callback Callback
+     * @param type Type, default is Error
+     * @param props Props
+     */
+    alert(errorOrTitle, callback, type, props) {
+        // Parse messange and title
+        let error, title;
+        if (Array.isArray(errorOrTitle)) {
+            error = errorOrTitle[0];
+            title = errorOrTitle[1];
+        }
+        else {
+            error = errorOrTitle;
+        }
+        // Setup
+        const n = {
+            inputProps: props,
+            type: type ?? Notification_1.NotificationType.Error,
+            title,
+            content: error,
+            onReturn: callback
+        };
+        // Add to the collection
+        return this.addRaw(n, true);
+    }
+    /**
+     * Confirm action
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param props Props
+     */
+    confirm(message, title, callback, props) {
+        // Setup
+        const n = {
+            type: Notification_1.NotificationType.Confirm,
+            content: message,
+            title,
+            onReturn: callback,
+            inputProps: props
+        };
+        // Add to the collection
+        return this.addRaw(n);
+    }
+    /**
+     * Hide loading
+     * @param force Force to hide, otherwise, only the last one
+     */
+    hideLoading(force) {
+        // Deduct to count
+        this.loadingCount--;
+        if (force)
+            this.loadingCount = 0;
+        if (this.loadingCount === 0) {
+            this.lastLoading?.dismiss();
+            this.lastLoading = undefined;
+        }
+    }
+    /**
+     * Show a message
+     * @param type Message type
+     * @param message Message
+     * @param title Title
+     * @param parameters Parameters
+     * @param props Props
+     */
+    message(type, message, title, parameters, props) {
+        // Destruct
+        const { align, timespan, callback, modal } = parameters ?? {};
+        // Setup
+        const n = {
+            type,
+            content: message,
+            title,
+            align,
+            timespan,
+            onReturn: callback,
+            inputProps: props
+        };
+        // Add to the collection
+        return this.addRaw(n, modal);
+    }
+    /**
+     * Prompt action
+     * @param message Message
+     * @param callback Callback
+     * @param title Title
+     * @param props More properties
+     */
+    prompt(message, callback, title, props) {
+        // Setup
+        const n = {
+            type: Notification_1.NotificationType.Prompt,
+            content: message,
+            title,
+            inputProps: props,
+            onReturn: callback
+        };
+        // Add to the collection
+        return this.addRaw(n);
+    }
+    /**
+     * Show loading
+     * @param title Title
+     */
+    showLoading(title) {
+        // Add to count
+        this.loadingCount++;
+        if (this.lastLoading == null) {
+            // Setup
+            const n = {
+                type: Notification_1.NotificationType.Loading,
+                content: title ?? ''
+            };
+            // Add to the collection
+            // Keep the reference
+            this.lastLoading = this.addRaw(n);
+        }
+    }
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param properties Popup properties
+     * @returns Result
+     */
+    popup(component, properties) {
+        // Setup
+        const n = {
+            type: Notification_1.NotificationType.Popup,
+            content: component,
+            renderSetup: (_options) => {
+                return properties;
+            }
+        };
+        // Add to the collection
+        return this.addRaw(n);
+    }
+    /**
+     * Show a success message
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param timespan Timespan to close
+     * @param props Props
+     */
+    succeed(message, title, callback, timespan, props) {
+        // Default to zero for constant
+        timespan ?? (timespan = 0);
+        // Create as message
+        return this.message(Notification_1.NotificationMessageType.Success, message, title, {
+            align: Notification_1.NotificationAlign.Center,
+            modal: true,
+            timespan,
+            callback
+        }, props);
+    }
+}
+exports.NotificationContainer = NotificationContainer;

package/lib/cjs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Notification"), exports);
+__exportStar(require("./NotificationContainer"), exports);

package/lib/mjs/Notification.d.ts

@@ -0,0 +1,328 @@
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Display align
+ */
+export declare const NotificationAlign: {
+    [x: number]: string;
+    TopLeft: DataTypes.PlacementEnum.TopLeft;
+    TopCenter: DataTypes.PlacementEnum.TopCenter;
+    TopRight: DataTypes.PlacementEnum.TopRight;
+    Center: DataTypes.PlacementEnum.Center;
+    BottomLeft: DataTypes.PlacementEnum.BottomLeft;
+    BottomCenter: DataTypes.PlacementEnum.BottomCenter;
+    BottomRight: DataTypes.PlacementEnum.BottomRight;
+    Unknown: DataTypes.PlacementEnum.Unknown;
+};
+export type NotificationAlign = Exclude<DataTypes.PlacementEnum, DataTypes.PlacementEnum.MiddleLeft | DataTypes.PlacementEnum.MiddleRight>;
+/**
+ * Modal types
+ */
+export declare enum NotificationModalType {
+    Loading = 0,
+    Confirm = 1,
+    Prompt = 2,
+    Error = 3,// Alert
+    Popup = 6
+}
+/**
+ * Message types
+ */
+export declare enum NotificationMessageType {
+    Default = 10,// No default then refer to Info
+    Success = 11,
+    Warning = 12,
+    Info = 13,
+    Danger = 14
+}
+/**
+ * Merged type definition below together
+ */
+export declare const NotificationType: {
+    [x: number]: string;
+    Default: NotificationMessageType.Default;
+    Success: NotificationMessageType.Success;
+    Warning: NotificationMessageType.Warning;
+    Info: NotificationMessageType.Info;
+    Danger: NotificationMessageType.Danger;
+    Loading: NotificationModalType.Loading;
+    Confirm: NotificationModalType.Confirm;
+    Prompt: NotificationModalType.Prompt;
+    Error: NotificationModalType.Error;
+    Popup: NotificationModalType.Popup;
+};
+/**
+ * Notification types
+ */
+export type NotificationType = NotificationModalType | NotificationMessageType;
+/**
+ * Notification content
+ */
+export type NotificationContent<UI> = string | UI;
+/**
+ * On dismiss callback
+ */
+export interface NotificationDismiss {
+    (): void;
+}
+/**
+ * Notification reander setup
+ */
+export interface NotifictionRenderSetup {
+    (options: any): any;
+}
+/**
+ * On return callback
+ * T = string | undefined, Undefined value means cancel
+ * return false will prevent default action
+ * return string is the error message to show
+ */
+export interface NotificationReturn<T> {
+    (value: T): boolean | string | void | PromiseLike<boolean | string | void>;
+}
+/**
+ * Notification message parameters
+ */
+export interface NotificationParameters {
+    /**
+     * Display align
+     */
+    align?: NotificationAlign;
+    /**
+     * Callback
+     */
+    callback?: NotificationReturn<void>;
+    /**
+     * Show as modal
+     */
+    modal?: boolean;
+    /**
+     * Time span to dismiss
+     */
+    timespan?: number;
+    /**
+     * Add to the top
+     */
+    top?: boolean;
+}
+/**
+ * Notification props supported for calls
+ */
+export type NotificationCallProps = {
+    /**
+     * Input component properties
+     */
+    inputProps?: DataTypes.StringRecord;
+};
+/**
+ * Notification render props
+ */
+export type NotificationRenderProps = DataTypes.StringRecord;
+/**
+ * Notification base interface
+ */
+export interface INotificaseBase<UI, C extends NotificationCallProps = {}> {
+    /**
+     * Display align
+     */
+    readonly align?: NotificationAlign;
+    /**
+     * Content
+     */
+    readonly content: NotificationContent<UI>;
+    /**
+     * Input or control properties
+     */
+    inputProps?: C;
+    /**
+     * On dismiss handling
+     */
+    onDismiss?: NotificationDismiss;
+    /**
+     * On return value
+     */
+    onReturn?: NotificationReturn<any>;
+    /**
+     * Show the icon or hide it
+     */
+    showIcon?: boolean;
+    /**
+     * Seconds to auto dismiss
+     */
+    timespan?: number;
+    /**
+     * Render setup / callback
+     * Add more properties
+     */
+    renderSetup?: NotifictionRenderSetup;
+    /**
+     * Title
+     */
+    readonly title?: NotificationContent<UI>;
+    /**
+     * Type
+     */
+    readonly type: NotificationType;
+}
+/**
+ * Notification interface
+ */
+export interface INotification<UI, C extends NotificationCallProps> extends INotificaseBase<UI, C> {
+    /**
+     * Display align
+     */
+    readonly align: NotificationAlign;
+    /**
+     * Seconds to auto dismiss
+     */
+    timespan: number;
+    /**
+     * Unique id
+     */
+    readonly id: string;
+    /**
+     * Display as modal
+     */
+    modal: boolean;
+    /**
+     * Is open or not
+     */
+    readonly open: boolean;
+    /**
+     * Reference
+     */
+    ref?: any;
+    /**
+     * Content
+     */
+    readonly content: NotificationContent<UI>;
+    /**
+     * Title
+     */
+    readonly title?: NotificationContent<UI>;
+    /**
+     * Dismiss it
+     * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
+     * @returns Is delayed or not
+     */
+    dismiss(delaySeconds?: number, noTrigger?: boolean): boolean;
+    /**
+     * Dispose it
+     */
+    dispose(): void;
+    /**
+     * Render method
+     * @param props Props
+     * @param className Style class name
+     * @param options Other options
+     */
+    render(props: NotificationRenderProps, className?: string): UI | undefined;
+    /**
+     * Return value
+     * Dismiss first, then run callback
+     * @param value
+     * @returns
+     */
+    returnValue(value: any): Promise<void>;
+}
+/**
+ * Notification class
+ * Generic parameter UI presents UI element type
+ */
+export declare abstract class Notification<UI, C extends NotificationCallProps> implements INotification<UI, C> {
+    /**
+     * Display align
+     */
+    readonly align: NotificationAlign;
+    /**
+     * Content
+     */
+    readonly content: NotificationContent<UI>;
+    /**
+     * Dismiss timeout seed
+     */
+    private dismissSeed;
+    /**
+     * Unique id
+     */
+    readonly id: string;
+    /**
+     * Input or control properties
+     */
+    inputProps?: C;
+    /**
+     * Display as modal
+     */
+    modal: boolean;
+    /**
+     * On dismiss handling
+     */
+    onDismiss?: NotificationDismiss;
+    /**
+     * On return value
+     */
+    onReturn?: NotificationReturn<unknown>;
+    private _open;
+    /**
+     * Is open or not
+     */
+    get open(): boolean;
+    /**
+     * Reference
+     */
+    ref?: any;
+    /**
+     * Render setup / callback
+     */
+    renderSetup?: NotifictionRenderSetup;
+    /**
+     * Show the icon or hide it
+     */
+    showIcon?: boolean;
+    /**
+     * Seconds to auto dismiss
+     */
+    timespan: number;
+    /**
+     * Title
+     */
+    readonly title?: NotificationContent<UI>;
+    /**
+     * Type
+     */
+    readonly type: NotificationType;
+    /**
+     * Constructor
+     * @param type Type
+     * @param content Content
+     * @param title Title
+     * @param align Align
+     * @param timespan Timespan
+     */
+    constructor(type: NotificationType, content: NotificationContent<UI>, title?: NotificationContent<UI>, align?: NotificationAlign, timespan?: number);
+    /**
+     * Dismiss it
+     * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
+     * @returns Is delayed or not
+     */
+    dismiss(delaySeconds?: number, noTrigger?: boolean): boolean;
+    private removeTimeout;
+    /**
+     * Dispose it
+     */
+    dispose(): void;
+    /**
+     * Render method
+     * @param props Props, provider's UI props
+     * @param className Style class name
+     */
+    abstract render(props: NotificationRenderProps, className?: string): UI | undefined;
+    /**
+     * Return value
+     * Dismiss first, then run callback
+     * @param value
+     * @returns
+     */
+    returnValue(value: any): Promise<void>;
+}

package/lib/mjs/NotificationContainer.d.ts

@@ -0,0 +1,250 @@
+import { INotificaseBase, INotification, NotificationAlign, NotificationCallProps, NotificationContent, NotificationMessageType, NotificationParameters, NotificationReturn } from './Notification';
+/**
+ * Notification action
+ */
+export interface NotificationAction<UI, C extends NotificationCallProps> {
+    (notification: INotification<UI, C>, dismiss: boolean): void;
+}
+/**
+ * Notifications sorted with display align type
+ */
+export type NotificationDictionary<UI, C extends NotificationCallProps> = {
+    [key: number]: INotification<UI, C>[];
+};
+/**
+ * Notifier interface
+ */
+export interface INotifier<UI, C extends NotificationCallProps> {
+    /**
+     * Is loading bar showing
+     */
+    readonly isLoading: boolean;
+    /**
+     * Is model window showing
+     */
+    readonly isModeling: boolean;
+    /**
+     * Add notification
+     * @param notification Notification
+     * @param top Is insert top
+     */
+    add(notification: INotification<UI, C>, top?: boolean): void;
+    /**
+     * Report error or message
+     * @param errorOrTitle Error message or title
+     * @param callback Callback
+     * @param type Type, default is Error
+     * @param props Props
+     */
+    alert(errorOrTitle: NotificationContent<UI> | [NotificationContent<UI>, NotificationContent<UI>], callback?: NotificationReturn<void>, type?: NotificationMessageType, props?: C): INotification<UI, C>;
+    /**
+     * Align all notification count
+     * @param align Align
+     */
+    alignCount(align: NotificationAlign): number;
+    /**
+     * Align open notification count
+     * @param align Align
+     */
+    alignOpenCount(align: NotificationAlign): number;
+    /**
+     * Remove all closed notification
+     */
+    clear(): void;
+    /**
+     * Confirm action
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param props Props
+     */
+    confirm(message: NotificationContent<UI>, title?: NotificationContent<UI>, callback?: NotificationReturn<boolean>, props?: C): INotification<UI, C>;
+    /**
+     * Dispose all notifications
+     */
+    dispose(): void;
+    /**
+     * Get notification with align and id
+     * @param align Align
+     * @param id Notification id
+     */
+    get(align: NotificationAlign, id: string): INotification<UI, C> | undefined;
+    /**
+     * Get notification with id
+     * @param id Notification id
+     */
+    getById(id: string): INotification<UI, C> | undefined;
+    /**
+     * Hide loading
+     * @param force Force to hide, otherwise, only the last one
+     */
+    hideLoading(force?: boolean): void;
+    /**
+     * Show a message
+     * @param type Message type
+     * @param message Message
+     * @param title Title
+     * @param parameters Parameters
+     * @param props Props
+     */
+    message(type: NotificationMessageType, message: NotificationContent<UI>, title?: NotificationContent<UI>, parameters?: NotificationParameters, props?: C): INotification<UI, C>;
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param properties Popup properties
+     * @returns Result
+     */
+    popup(component: NotificationContent<UI>, properties: any): INotification<UI, C>;
+    /**
+     * Prompt action
+     * @param message Message
+     * @param callback Callback
+     * @param title Title
+     * @param props More properties
+     */
+    prompt<T = string | undefined>(message: NotificationContent<UI>, callback: NotificationReturn<T>, title?: NotificationContent<UI>, props?: C): INotification<UI, C>;
+    /**
+     * Show loading
+     * @param title Title
+     */
+    showLoading(title?: NotificationContent<UI>): void;
+    /**
+     * Show a success message
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param timespan Timespan to close
+     * @param props Props
+     */
+    succeed(message: NotificationContent<UI>, title?: NotificationContent<UI>, callback?: NotificationReturn<void>, timespan?: number, props?: C): INotification<UI, C>;
+}
+/**
+ * Notification container class
+ */
+export declare abstract class NotificationContainer<UI, C extends NotificationCallProps> implements INotifier<UI, C> {
+    private update;
+    private lastLoading?;
+    private loadingCount;
+    /**
+     * Notification collection to display
+     */
+    readonly notifications: NotificationDictionary<UI, C>;
+    /**
+     * Is loading bar showing
+     */
+    get isLoading(): boolean;
+    /**
+     * Is model window showing
+     */
+    get isModeling(): boolean;
+    /**
+     * Constructor
+     */
+    constructor(update: NotificationAction<UI, C>);
+    /**
+     * Add raw definition
+     * @param data Notification data definition
+     * @param modal Show as modal
+     */
+    protected abstract addRaw(data: INotificaseBase<UI, C>, modal?: boolean): INotification<UI, C>;
+    /**
+     * Add notification
+     * @param notification Notification
+     * @param top Is insert top
+     */
+    add(notification: INotification<UI, C>, top?: boolean): void;
+    /**
+     * Align all notification count
+     * @param align Align
+     */
+    alignCount(align: NotificationAlign): number;
+    /**
+     * Align open notification count
+     * @param align Align
+     */
+    alignOpenCount(align: NotificationAlign): number;
+    /**
+     * Remove all closed notification
+     */
+    clear(): void;
+    /**
+     * Dispose all notifications
+     */
+    dispose(): void;
+    /**
+     * Call register callback
+     * @param id Notification id
+     * @param dismiss Is dismiss
+     */
+    private doRegister;
+    /**
+     * Get notification with align and id
+     * @param align Align
+     * @param id Notification id
+     */
+    get(align: NotificationAlign, id: string): INotification<UI, C> | undefined;
+    /**
+     * Get notification with id
+     * @param id Notification id
+     */
+    getById(id: string): INotification<UI, C> | undefined;
+    /**
+     * Report error or message
+     * @param errorOrTitle Error message or title
+     * @param callback Callback
+     * @param type Type, default is Error
+     * @param props Props
+     */
+    alert(errorOrTitle: NotificationContent<UI> | [NotificationContent<UI>, NotificationContent<UI>], callback?: NotificationReturn<void>, type?: NotificationMessageType, props?: C): INotification<UI, C>;
+    /**
+     * Confirm action
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param props Props
+     */
+    confirm(message: NotificationContent<UI>, title?: NotificationContent<UI>, callback?: NotificationReturn<boolean>, props?: C): INotification<UI, C>;
+    /**
+     * Hide loading
+     * @param force Force to hide, otherwise, only the last one
+     */
+    hideLoading(force?: boolean): void;
+    /**
+     * Show a message
+     * @param type Message type
+     * @param message Message
+     * @param title Title
+     * @param parameters Parameters
+     * @param props Props
+     */
+    message(type: NotificationMessageType, message: NotificationContent<UI>, title?: NotificationContent<UI>, parameters?: NotificationParameters, props?: C): INotification<UI, C>;
+    /**
+     * Prompt action
+     * @param message Message
+     * @param callback Callback
+     * @param title Title
+     * @param props More properties
+     */
+    prompt<T = string | undefined>(message: NotificationContent<UI>, callback: NotificationReturn<T>, title?: string, props?: C): INotification<UI, C>;
+    /**
+     * Show loading
+     * @param title Title
+     */
+    showLoading(title?: NotificationContent<UI>): void;
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param properties Popup properties
+     * @returns Result
+     */
+    popup(component: NotificationContent<UI>, properties: any): INotification<UI, C>;
+    /**
+     * Show a success message
+     * @param message Message
+     * @param title Title
+     * @param callback Callback
+     * @param timespan Timespan to close
+     * @param props Props
+     */
+    succeed(message: NotificationContent<UI>, title?: NotificationContent<UI>, callback?: NotificationReturn<void>, timespan?: number, props?: C): INotification<UI, C>;
+}

package/lib/mjs/index.js

@@ -0,0 +1,2 @@
+export * from './Notification';
+export * from './NotificationContainer';

package/package.json

@@ -1,11 +1,19 @@
 {
     "name": "@etsoo/notificationbase",
-    "version": "1.1.37",
+    "version": "1.1.40",
     "description": "TypeScript notification component for extending with all features described and partially implemented",
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
+    "main": "lib/cjs/index.js",
+    "module": "lib/mjs/index.js",
+    "type": "module",
+    "types": "lib/mjs/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./lib/mjs/index.js",
+            "require": "./lib/cjs/index.js"
+        }
+    },
     "scripts": {
-        "build": "tsc",
+        "build": "tsc -p tsconfig.json && tsc -p tsconfig.cjs.json",
         "format": "prettier --write src/**/*.ts",
         "lint": "eslint --ext .ts src/",
         "test": "jest",
@@ -45,7 +53,7 @@
     },
     "homepage": "https://github.com/ETSOO/NotificationBase#readme",
     "dependencies": {
-        "@etsoo/shared": "^1.2.27"
+        "@etsoo/shared": "^1.2.31"
     },
     "devDependencies": {
         "@babel/core": "^7.24.0",

package/tsconfig.cjs.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        /* Visit https://aka.ms/tsconfig.json to read more about this file */
+        "target": "ES2020",
+        "module": "CommonJS",
+        "moduleResolution": "Node10",
+        "isolatedModules": true,
+        "outDir": "./lib/cjs",
+        "noEmit": false,
+        "declaration": true,
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": ["src"]
+}

package/tsconfig.json

@@ -3,9 +3,9 @@
         /* Visit https://aka.ms/tsconfig.json to read more about this file */
         "target": "ES2020",
         "module": "ESNext",
-        "moduleResolution": "Bundler",
+        "moduleResolution": "Node10",
         "isolatedModules": true,
-        "outDir": "./lib",
+        "outDir": "./lib/mjs",
         "noEmit": false,
         "declaration": true,
         "strict": true,

package/babel.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-    presets: ['@babel/preset-env'],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            }
-        ]
-    ]
-};