import { type IAnimatable } from '../../../Behaviors/Animatable'; import { ICloseable, type ICloseableEvents } from '../../../Behaviors/Closeable'; import { type IExpandableBehavior, type IExpandableEvents, type IExpandableProps } from '../../../Behaviors/Expandable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { Size } from '../../../Types/Size'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IMessageElementProps } from './IMessageElementProps'; declare const MessageElement_base: (abstract new (...args: Array) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => IExpandableProps & IExpandableEvents & IExpandableBehavior) & (abstract new (...args: Array) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array) => import("../../../Behaviors/Closeable").ICloseableProps & ICloseableEvents & ICloseable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Message - A compact, closeable notification component for displaying concise information. * * @description * The `Message` component is a simplified notification element based on the Banner component. * It focuses on displaying an icon, header, and subheader with optional close functionality, * without slots or action areas. This makes it ideal for quick, dismissible messages. * The component supports expandable content that can be collapsed to show only a specified * number of lines, with a toggle button to reveal the full content. * * @name Message * @element mosaik-message * @category Notifications * * @fires closed {ClosedEvent} - Fired when the message is closed. * @fires expanded {ExpandedEvent} - Fired when the message content is expanded. * @fires collapsed {CollapsedEvent} - Fired when the message content is collapsed. * @fires toggled {ToggledEvent} - Fired when the message content is toggled. * * @slot - The default slot for placing rich content inside the message (only used when expandable). * * @csspart root - The root part of the message. * @csspart header-row - The header row containing icon, text, and close button. * @csspart icon - The icon part of the message. * @csspart text - The text part of the message. * @csspart header - The header text part of the message. * @csspart content - The content text part of the message. * @csspart contentWrapper - The wrapper around the content for expandable behavior. * @csspart expandedContent - The expanded content area containing slotted content. * @csspart footer - The footer area containing the caret toggle button. * @csspart caret - The caret button for toggling the expandable content. * @csspart close - The close button or icon part of the message. * * @cssprop {String} --message-font-family - The font family for the message. * @cssprop {String} --message-font-size - The font size for the message. * @cssprop {String} --message-font-weight - The font weight for the message. * @cssprop {Color} --message-background-color - The background color for the message. * @cssprop {Color} --message-border-color - The border color for the message. * @cssprop {Color} --message-foreground-color - The foreground color for the message. * @cssprop {String} --message-border-width - The border width for the message. * @cssprop {String} --message-border-radius - The border radius for the message. * @cssprop {String} --message-border-style - The border style for the message. * @cssprop {String} --message-transition-duration - The transition duration for the message. * @cssprop {String} --message-transition-mode - The transition mode for the message. * @cssprop {String} --message-transition-property - The transition property for the message. * @cssprop {String} --message-shadow - The shadow effect for the message. * @cssprop {String} --message-padding-top - The top padding for the message. * @cssprop {String} --message-padding-left - The left padding for the message. * @cssprop {String} --message-padding-bottom - The bottom padding for the message. * @cssprop {String} --message-padding-right - The right padding for the message. * @cssprop {String} --message-gap - The gap between elements within the message. * @cssprop {Number} --message-collapsed-lines - The number of visible lines when collapsed. * * @dependency {IconElement} - The Icon element. * @dependency {TextElement} - The Text element. * @dependency {ButtonElement} - The Button element for the caret toggle. * @dependency {DismissElement} - The Dismiss element for closing the message. * * @example * Simple closeable notification: * ```html * * ``` * * @example * Expandable message with line limit: * ```html * * ``` * * @example * Expandable message with rich slotted content: * ```html * * * * * ``` * * @public */ export declare class MessageElement extends MessageElement_base implements IMessageElementProps, ICloseableEvents, ICloseable, IExpandableBehavior, IExpandableProps, IExpandableEvents, IAnimatable, ISlottable { private readonly _provider; private _icon; private _iconSize; private _header; private _content; private _expandable; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `icon` property. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `iconSize` property. * * @public * @attr */ get iconSize(): Size | null; set iconSize(value: Size | null); /** * Gets or sets the `header` property. * * @public */ get header(): string; set header(value: string); /** * Gets or sets the `content` property. * * @public */ get content(): string; set content(value: string); /** * Gets or sets the `expandable` property. * When enabled, the content will be truncated to `collapsedLines` lines * and a toggle button will be displayed. * * @public * @attr */ get expandable(): boolean; set expandable(value: boolean); /** * Closes the `MessageElement`. * * @public * @override */ close(): Promise; /** * Toggles the message between expanded and collapsed states. * Only works when `expandable` is `true`. * * @public * @override */ toggle(): void; /** * Expands the message content. * Only works when `expandable` is `true`. * * @public * @override */ expand(): void; /** * Collapses the message content. * Only works when `expandable` is `true`. * * @public * @override */ collapse(): void; /** * This method is invoked when the `isExpanded` property is changed. * * @param prev - The previous value. * @param next - The new value. * @public * @override */ onIsExpandedChanged(prev: boolean, next: boolean): void; } /** * @public */ export declare namespace MessageElement { type Props = IMessageElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-message': MessageElement; } } export {}; //# sourceMappingURL=MessageElement.d.ts.map