dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
95 lines (94 loc) • 3.98 kB
TypeScript
import { MessageOptionsType, SnackbarPosition } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSSnackbarMessage } from './snackbar-message.component';
/**
* `dap-ds-snackbar`
* @summary The Snackbar is a container of sliding messages.
* @element dap-ds-snackbar
* @title - Snackbar
*
* @csspart host - The host element
* @csspart message - The message part of the snackbar
* @csspart message-base - The base part of the message
* @csspart message-text - The text part of the message
* @csspart message-closebutton - The close button part of the message
* @csspart message-close-icon - The close icon part of the message
* @csspart message-actions - The actions part of the message
*
* @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))
* @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)
* @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)
*/
export default class DapDSSnackbar extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-snackbar-message': typeof DapDSSnackbarMessage;
};
/** The maximum number of snackbar messages at a given time. */
maxItems: number;
/** The position of the snackbar
* @type {'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center'}
*/
position: SnackbarPosition;
/** The duration of the snackbar message in milliseconds */
duration: number;
/** Whether the snackbar should announce new messages to screen readers */
announceMessages: boolean;
private messages;
private idCounter;
private timeouts;
static readonly styles: import('lit').CSSResult;
/**
* Static method to show a snackbar message anywhere in the application
* @param message - The message to display
* @param options - Optional configuration for the message
*/
static show(message: string, options?: MessageOptionsType): void;
/**
* Static method to show a success message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'successful')
*/
static success(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
/**
* Static method to show an error message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'error')
*/
static error(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
/**
* Static method to show an information message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'information')
*/
static info(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
/**
* Static method to show a default message
* @param message - The message to display
* @param options - Optional configuration (alertType will be overridden to 'default')
*/
static default(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
/**
* Static method to close all snackbar messages globally
*/
static closeAll(): void;
/**
* Close all currently displayed messages
*/
closeAll(): void;
private generateId;
addMessage(message: string, options?: MessageOptionsType): void;
private sliceMessage;
private removeMessage;
private elapseMessages;
private clearTimeout;
private clearAllTimeouts;
connectedCallback(): void;
disconnectedCallback(): void;
private handleShowSnackbarEvent;
private handleCloseAllEvent;
private handleKeyDown;
private announceToScreenReader;
private _closeMessage;
render(): import('lit-html').TemplateResult;
}