export default TinyNotifyCenter; /** * Represents a single notification entry. * * A notification can be provided as a simple string (treated as a plain message), * or as an object with additional data such as a title, an avatar image, and a click handler. */ export type NotifyData = string | { title?: string; message: string; avatar?: string; onClick?: (e: MouseEvent) => void; }; /** * Represents a single notification entry. * * A notification can be provided as a simple string (treated as a plain message), * or as an object with additional data such as a title, an avatar image, and a click handler. * * @typedef {string | { * title?: string, // Optional title displayed above the message * message: string, // Required message content * avatar?: string, // Optional avatar image URL (displayed on the left) * onClick?: (e: MouseEvent) => void // Optional click handler for the entire notification * }} NotifyData */ /** * A notification center component for displaying interactive alerts in the UI. * * This class renders a notification overlay on the page and allows dynamically * adding, clearing, or interacting with notification items. Notifications can * contain plain text or HTML, and optionally support click events, titles, and avatars. * * Features: * - Dynamic rendering of notification UI with `insertTemplate()` * - Supports text and HTML content modes * - Optional avatars for each notification * - Callback support on notification click * - Per-notification close buttons * - Notification count badge * * @class */ declare class TinyNotifyCenter { /** * Returns the full HTML structure for the notification system as a string. * * This includes: * - A hidden `.notify-overlay` containing the central notification panel (`#notifCenter`), * which has a header with a "Notifications" label, a "clear all" button, and a close button. * - A `.list` container for dynamically added notifications. * - A bell button (`.notify-bell`) to toggle the notification center, with an embedded badge. * * This template can be inserted into the DOM using `insertAdjacentHTML()` or parsed dynamically * into elements using JavaScript or jQuery, depending on the needs of the system. * * @returns {string} The complete HTML structure for the notification center. */ static getTemplate(): string; /** * Inserts the full notification center template into the document body. * * The structure is injected directly into the DOM using * `insertAdjacentHTML`. * * The `where` parameter allows control over where inside the `document.body` * the HTML is inserted: * - `'afterbegin'` (default): Inserts right after the opening tag. * - `'beforeend'`: Inserts right before the closing tag. * - Any valid position accepted by `insertAdjacentHTML`. * * @param {'beforebegin'|'afterbegin'|'beforeend'|'afterend'} [where='afterbegin'] * The position relative to `document.body` where the HTML should be inserted. */ static insertTemplate(where?: "beforebegin" | "afterbegin" | "beforeend" | "afterend"): void; /** * Options for configuring the NotificationCenter instance. * * Allows manual specification of the main elements used by the notification center. * If not provided, default elements will be selected from the DOM automatically. * * @param {Object} options - Configuration object. * @param {HTMLElement} [options.center=document.getElementById('notifCenter')] - The container element that holds the list of notifications. * @param {HTMLElement} [options.badge=document.getElementById('notifBadge')] - The badge element used to display the current notification count. * @param {HTMLElement} [options.button=document.querySelector('.notify-bell')] - The button element that toggles the notification center. * @param {HTMLElement} [options.overlay=document.querySelector('.notify-overlay')] - The overlay element that covers the screen when the center is visible. */ constructor(options?: { center?: HTMLElement | undefined; badge?: HTMLElement | undefined; button?: HTMLElement | undefined; overlay?: HTMLElement | undefined; }); /** * Enable or disable automatic mark-as-read on close. * @param {boolean} value */ setMarkAllAsReadOnClose(value: boolean): void; /** * Define how long the remove animation takes (in ms). * @param {number} ms */ setRemoveDelay(ms: number): void; /** * Get rendering mode ('text' or 'html') by index. * @param {number} index * @returns {'text' | 'html' | null} */ getItemMode(index: number): "text" | "html" | null; /** * Get a notify element by index. * @param {number} index * @returns {HTMLElement} */ getItem(index: number): HTMLElement; /** * Check if a notify exists at the given index. * @param {number} index * @returns {boolean} */ hasItem(index: number): boolean; /** * Mark a notification index as read. * @param {number|HTMLElement} index */ markAsRead(index: number | HTMLElement): void; /** * Add a new notify to the center. * * @param {NotifyData} message - Notification content or a full object with title, avatar, and callback. * @param {'text'|'html'} [mode='text'] - How to treat the message content. */ add(message: NotifyData, mode?: "text" | "html"): void; /** * Remove a notify by index. * @param {number} index */ remove(index: number): void; /** * Clear all notifications safely. */ clear(): void; /** * Open the notify center. */ open(): void; /** * Close the notify center. */ close(): void; /** * Toggle open/close state. */ toggle(): void; /** * Recalculate the number of notifications based on the actual DOM list. */ recount(): void; /** * Get current count. * @returns {number} */ get count(): number; #private; } //# sourceMappingURL=TinyNotifyCenter.d.mts.map