dap-design-system 0.15.3 → 0.16.0

package/dist/dds.d.ts

@@ -7,6 +7,16 @@ import { PropertyValueMap } from 'lit';
 import { TemplateResult } from 'lit';
 import { TemplateResult as TemplateResult_2 } from 'lit-html';
 
+export declare type ActionType = {
+    href?: string;
+    target?: LinkTarget;
+    rel?: string;
+    text?: string;
+    func?: () => void;
+};
+
+export declare type AlertType = 'default' | 'information' | 'successful' | 'error';
+
 export declare type Alignment = 'vertical' | 'horizontal';
 
 export declare const anchorClass = "dds-anchor";
@@ -2570,6 +2580,70 @@ export declare class DapDSSkipLink extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-snackbar`
+ * @summary The Snackbar is a container of sliding messages.
+ * @element dap-ds-snackbar
+ * @title - Snackbar
+ *
+ * @attribute { number } maxItems - Maximum number of snackbar messages at a given time.
+ * @attribute { string } position - The position of the snackbar (values can be bottom-left, bottom-right, bottom-center, top-right, top-center). The default value is bottom-center.
+ * @attribute { number } duration - The duration of the snackbar message in milliseconds. Default is 6000ms.
+ */
+export declare class DapDSSnackbar extends DdsElement {
+    maxItems: number;
+    position: SnackbarPosition;
+    duration: number;
+    private messages;
+    private idCounter;
+    private _timeoutId;
+    static styles: CSSResult;
+    private generateId;
+    addMessage(message: string, options?: MessageOptionsType): void;
+    private sliceMessage;
+    private removeMessage;
+    private elapseMessages;
+    private clearElapseTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _closeMessage;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-snackbar-message`
+ * @summary The Snackbar component shows a sliding message to the user.
+ * @element dap-ds-snackbar-message
+ * @title - Snackbar message
+ *
+ * @attribute { string } message - The message to show in snackbar.
+ * @attribute { string } closeButton - The snackbar has a close button when 'true'.
+ * @attribute { string } alertType - The message type of the snackbar item.
+ * @attribute { string } id - The id of the snackbar item.
+ * @attribute { ActionType[] } actions - The actions of the snackbar item.
+ *
+ * @event 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.
+ */
+export declare class DapDSSnackbarMessage extends DdsElement {
+    actions?: ActionType[];
+    message: string;
+    closeButton: string;
+    alertType: AlertType;
+    id: string;
+    static styles: CSSResult;
+    private getActions;
+    private getAlertTypeIcon;
+    private _close;
+    render(): TemplateResult;
+}
+
 /**
  * `dap-ds-spinner`
  * @summary Loading spinner component.
@@ -3387,6 +3461,13 @@ declare type ListItemStatus = 'brand' | 'neutral' | 'positive' | 'negative';
 
 declare type ListItemVariant = 'info' | 'pass' | 'fail' | 'notapplicable' | 'empty' | 'number';
 
+export declare type MessageOptionsType = {
+    duration?: number;
+    alertType?: AlertType;
+    actions?: ActionType[];
+    closeButton?: string;
+};
+
 declare class ModalBaseElement extends DdsElement {
     dialog: HTMLDialogElement;
     open?: boolean;
@@ -3463,6 +3544,14 @@ declare interface SizedElementInterface {
     parentSized: string;
 }
 
+export declare type SnackbarMessage = {
+    id: string;
+    message: string;
+    options?: MessageOptionsType;
+};
+
+export declare type SnackbarPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center';
+
 export declare type Spacing = 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 | 2000 | 2400 | 3000 | 4000 | 5000 | 6000;
 
 declare type SpinnerVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
@@ -5320,6 +5409,14 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-snackbar': DapDSSnackbar;
+        'dap-ds-snackbar-message': DapDSSnackbarMessage;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-spinner': DapDSSpinner;