import { type TemplateResult } from 'lit';
import { OmniElement } from '../core/OmniElement.js';
import { Modal } from '../modal/Modal.js';
import type { RenderFunction, RenderResult } from '../render-element/RenderElement.js';
export type { RenderFunction, RenderResult } from '../render-element/RenderElement.js';
import '../button/Button.js';
import '../render-element/RenderElement.js';
import '../modal/Modal.js';
/**
* Component that displays an alert.
*
* @import
* ```js
* import '@capitec/omni-components/alert';
* ```
*
* @example
* ```html
*
*
* ```
*
* @element omni-alert
*
* Registry of all properties defined by the component.
*
* @fires alert-action-click - Dispatched when an alert action button is clicked.
* @fires alert-close - Dispatched when the alert is closed.
*
* @slot status-indicator - Content to render as the status indicator instead of default status icons.
* @slot header - Content to render inside the component message area.
* @slot - Content to render inside the component description body.
* @slot primary - Content to render as the primary action button.
* @slot secondary - Content to render as the secondary action button.
*
* @csspart modal - Internal `omni-modal` element instance.
* @csspart content - Internal `HTMLDivElement` instance for container of header and description content.
* @csspart content - Internal `HTMLDivElement` instance for each line of description (does not include slotted description content).
* @csspart header - Internal `HTMLDivElement` instance for header.
* @csspart actions - Internal `HTMLDivElement` instance for container of action button(s).
*
* @cssprop --omni-alert-min-width - Minimum width for alert.
* @cssprop --omni-alert-max-width - Maximum width for alert.
* @cssprop --omni-alert-border - Alert border.
* @cssprop --omni-alert-border-radius - Alert border radius.
* @cssprop --omni-alert-box-shadow - Alert box shadow.
*
* @cssprop --omni-alert-animation-duration - Alert fade in and out animation duration.
* @cssprop --omni-alert-padding-top - Alert content top padding.
* @cssprop --omni-alert-padding-bottom - Alert content bottom padding.
* @cssprop --omni-alert-padding-left - Alert content left padding.
* @cssprop --omni-alert-padding-right - Alert content right padding.
*
* @cssprop --omni-alert-header-font-color - Alert header font color.
* @cssprop --omni-alert-header-font-family - Alert header font family.
* @cssprop --omni-alert-header-font-size - Alert header font size.
* @cssprop --omni-alert-header-font-weight - Alert header font weight.
* @cssprop --omni-alert-header-line-height - Alert header line height.
* @cssprop --omni-alert-header-background - Alert header background.
*
* @cssprop --omni-alert-header-padding-top - Alert header top padding.
* @cssprop --omni-alert-header-padding-bottom - Alert header bottom padding.
* @cssprop --omni-alert-header-padding-left - Alert header left padding.
* @cssprop --omni-alert-header-padding-right - Alert header right padding.
*
* @cssprop --omni-alert-description-font-color - Alert description font color.
* @cssprop --omni-alert-description-font-family - Alert description font family.
* @cssprop --omni-alert-description-font-size - Alert description font size.
* @cssprop --omni-alert-description-font-weight - Alert description font weight.
* @cssprop --omni-alert-description-line-height - Alert description line height.
*
* @cssprop --omni-alert-description-padding-top - Alert description top padding.
* @cssprop --omni-alert-description-padding-bottom - Alert description bottom padding.
* @cssprop --omni-alert-description-padding-left - Alert description left padding.
* @cssprop --omni-alert-description-padding-right - Alert description right padding.
*
* @cssprop --omni-alert-action-padding-top - Alert actions part top padding.
* @cssprop --omni-alert-action-padding-bottom - Alert actions part bottom padding.
* @cssprop --omni-alert-action-padding-left - Alert actions part left padding.
* @cssprop --omni-alert-action-padding-right - Alert actions part right padding.
*
* @cssprop --omni-alert-action-button-padding-top - Alert action button(s) top padding.
* @cssprop --omni-alert-action-button-padding-bottom - Alert action button(s) bottom padding.
* @cssprop --omni-alert-action-button-padding-left - Alert action button(s) left padding.
* @cssprop --omni-alert-action-button-padding-right - Alert action button(s) right padding.
*
* @cssprop --omni-alert-action-button-internal-padding-top - Alert action button(s) internal top padding.
* @cssprop --omni-alert-action-button-internal-padding-bottom - Alert action button(s) internal bottom padding.
* @cssprop --omni-alert-action-button-internal-padding-left - Alert action button(s) internal left padding.
* @cssprop --omni-alert-action-button-internal-padding-right - Alert action button(s) internal right padding.
*
* @cssprop --omni-alert-header-horizontal-gap - Alert header horizontal space between status indicator and header content.
*
* @cssprop --omni-alert-header-status-size - Alert header status indicator symmetrical size.
*/
export declare class Alert extends OmniElement {
/**
* Internal `omni-modal` instance.
* @no_attribute
* @ignore
*/
modal: Modal;
/**
* The alert status (Defaults to 'none').
* @attr
*/
status: 'success' | 'warning' | 'error' | 'info' | 'none';
/**
* The alert header message.
* @attr
*/
message?: string;
/**
* Header content horizontal alignment:
* - `left` Align header to the left.
* - `center` Align header to the center. (Default)
* - `right` Align header to the right.
* @attr [header-align]
*/
headerAlign?: 'left' | 'center' | 'right';
/**
* The alert detail message.
* @attr
*/
description?: string;
/**
* Description content horizontal alignment:
* - `left` Align description content to the left.
* - `center` Align description content to the center. (Default)
* - `right` Align description content to the right.
* @attr [description-align]
*/
descriptionAlign?: 'left' | 'center' | 'right';
/**
* The primary action button label (Defaults to 'Ok').
* @attr [primary-action]
*/
primaryAction?: string;
/**
* The secondary action button label (Defaults to 'Cancel').
* @attr [secondary-action]
*/
secondaryAction?: string;
/**
* If true, will provide a secondary action button.
* @attr [enable-secondary]
*/
enableSecondary?: boolean;
/**
* Action button(s) horizontal alignment:
* - `left` Align action button(s) to the left.
* - `center` Align action button(s) to the center.
* - `right` Align action button(s) to the right. (Default)
* - `stretch` Align action button(s) stretched to fill the horizontal space.
* @attr [action-align]
*/
actionAlign?: 'left' | 'center' | 'right' | 'stretch';
/**
* Create a global `omni-alert` element without showing it.
*
* @returns The alert instance.
*/
static create(init: AlertInit): Alert;
/**
* Show a global `omni-alert` element.
*
* @returns The alert instance.
*/
static show(init: AlertInit & {
onClose?: (reason: 'auto' | 'primary' | 'secondary') => void;
}): Alert;
/**
* Show a global `omni-alert` element asynchronously, waits for it to close and returns the reason for close.
*
* @returns The reason for the alert close.
*/
static showAsync(init: AlertInit): Promise<"auto" | "primary" | "secondary">;
/**
* Show the `omni-alert` asynchronously, waits for it to close and returns the reason for close.
*
* @returns The reason for the alert close.
*/
showAsync(): Promise<"auto" | "primary" | "secondary">;
/**
* Show the `omni-alert`.
*
* @returns The alert instance.
*/
show(): Alert;
/**
* Hide the `omni-alert` and remove the component from the DOM
*/
hide(): void;
private onActionClick;
/**
* The element style template.
*/
static get styles(): import("lit").CSSResultGroup[];
/**
* Generate the web component template.
*
* @returns The HTML component template.
*/
render(): TemplateResult;
}
/**
* Context for `Alert.show`/`Alert.showAsync` function(s) to programmatically render a new `` instance.
*/
export type AlertInit = {
/**
* The id to apply to the Alert element.
*/
id?: string;
/**
* A function that returns, or an instance of content to render as the alert status indicator
*/
statusIndicator?: RenderFunction | RenderResult;
/**
* A function that returns, or an instance of content to render in the alert header
*/
header?: RenderFunction | RenderResult;
/**
* A function that returns, or an instance of content to render as alert body
*/
body?: RenderFunction | RenderResult;
/**
* A function that returns, or an instance of content to render as the alert primary action
*/
primary?: RenderFunction | RenderResult;
/**
* A function that returns, or an instance of content to render as the alert secondary action
*/
secondary?: RenderFunction | RenderResult;
/**
* The alert status (Defaults to 'none').
*/
status?: 'success' | 'warning' | 'error' | 'info' | 'none';
/**
* The alert header message.
*/
message?: string;
/**
* Header content horizontal alignment:
* - `left` Align header to the left.
* - `center` Align header to the center. (Default)
* - `right` Align header to the right.
*/
headerAlign?: 'left' | 'center' | 'right';
/**
* The alert detail message.
*/
description?: string;
/**
* Description content horizontal alignment:
* - `left` Align description content to the left.
* - `center` Align description content to the center. (Default)
* - `right` Align description content to the right.
*/
descriptionAlign?: 'left' | 'center' | 'right';
/**
* The primary action button label (Defaults to 'Ok').
*/
primaryAction?: string;
/**
* The secondary action button label (Defaults to 'Cancel').
*/
secondaryAction?: string;
/**
* If true, will provide a secondary action button.
*/
enableSecondary?: boolean;
/**
* Action button(s) horizontal alignment:
* - `left` Align action button(s) to the left.
* - `center` Align action button(s) to the center.
* - `right` Align action button(s) to the right. (Default)
* - `stretch` Align action button(s) stretched to fill the horizontal space.
*/
actionAlign?: 'left' | 'center' | 'right' | 'stretch';
};
declare global {
interface HTMLElementTagNameMap {
'omni-alert': Alert;
}
}
//# sourceMappingURL=Alert.d.ts.map