dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
82 lines (81 loc) • 5.71 kB
TypeScript
import { TemplateResult } from 'lit';
import { ActionType, AlertType, SnackbarPosition } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSButton } from '../button/button.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as DapDSLink } from '../link/link.component';
import { default as DapDSStack } from '../stack/stack.component';
/**
* `dap-ds-snackbar-message`
* @summary The Snackbar component shows a sliding message to the user.
* @element dap-ds-snackbar-message
* @title - Snackbar message
* @group snackbar
*
* @event {{ id: string }} dds-close - Fires when the snackbar closes.
*
* @slot default - The content of the snackbar.
*
* @csspart base - Main snackbar container.
* @csspart text - The text part of the snackbar.
* @csspart closebutton - The close button part of the component.
* @csspart icon - The icon part of the close button.
*
* @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))
* @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))
* @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))
* @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))
* @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)
* @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))
* @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))
* @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))
* @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))
* @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))
* @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))
* @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))
* @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))
* @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))
* @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))
* @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))
* @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))
* @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))
* @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))
* @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))
* @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))
* @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))
* @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))
* @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))
* @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)
* @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)
*/
export default class DapDSSnackbarMessage extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-stack': typeof DapDSStack;
'dap-ds-button': typeof DapDSButton;
'dap-ds-link': typeof DapDSLink;
'dap-ds-icon': typeof DapDSIcon;
'dap-ds-icon-button': typeof DapDSIconButton;
};
/** The actions of the snackbar item. */
actions?: ActionType[];
/** The message of the snackbar item. */
message: string;
/** Whether the snackbar has a close button. */
closeButton: string;
/** The message type of the snackbar item. */
alertType: AlertType;
/** The custom style of the snackbar item. */
customStyle?: Record<string, string>;
/** The position of the snackbar container for directional animations. */
position: SnackbarPosition;
/** `data-testid` for the snackbar close button. */
closeButtonTestId: string;
private isClosing;
static readonly styles: import('lit').CSSResult;
private getActions;
private getAlertTypeIcon;
private _close;
render(): TemplateResult;
}