import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import type { IButton } from "@ui5/webcomponents/dist/Button.js";
import IllustrationMessageDesign from "./types/IllustrationMessageDesign.js";
import "./illustrations/BeforeSearch.js";
/**
* @class
*
* ### Overview
* An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
* illustration, and conversational tone to better communicate an empty or a success state than just show
* a message alone.
*
* Each illustration has default internationalised title and subtitle texts. Also they can be managed with
* `titleText` and `subtitleText` properties.
*
* To display the desired illustration, use the `name` property, where you can find the list of all available illustrations.
*
* **Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"`
*
* **Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"`
*
* ### Structure
* The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
*
* - Illustration
* - Title
* - Subtitle
* - Actions
*
* ### Usage
* `ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,
* a `ui5-dialog` or a `ui5-page`
*
* ### ES6 Module Import
*
* `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`
* @csspart subtitle - Used to style the subtitle wrapper of the `ui5-illustrated-message`
* @constructor
* @extends UI5Element
* @public
* @since 1.0.0-rc.15
*/
declare class IllustratedMessage extends UI5Element {
/**
* Defines the illustration name that will be displayed in the component.
*
* Example:
*
* `name='BeforeSearch'`, `name='UnableToUpload'`, etc..
*
* **Note:** To use the TNT illustrations,
* you need to set the `tnt` or `Tnt` prefix in front of the icon's name.
*
* Example:
*
* `name='tnt/Avatar'` or `name='TntAvatar'`.
*
* **Note:** By default the `BeforeSearch` illustration is loaded.
* When using an illustration type, other than the default, it should be loaded in addition:
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";`
*
* For TNT illustrations:
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";`
* @default "BeforeSearch"
* @public
*/
name: string;
/**
* Determines which illustration breakpoint variant is used.
*
* As `IllustratedMessage` adapts itself around the `Illustration`, the other
* elements of the component are displayed differently on the different breakpoints/illustration designs.
* @default "Auto"
* @public
* @since 2.0.0
*/
design: `${IllustrationMessageDesign}`;
/**
* Defines the subtitle of the component.
*
* **Note:** Using this property, the default subtitle text of illustration will be overwritten.
*
* **Note:** Using `subtitle` slot, the default of this property will be overwritten.
* @default undefined
* @public
*/
subtitleText?: string;
/**
* Defines the title of the component.
*
* **Note:** Using this property, the default title text of illustration will be overwritten.
* @default undefined
* @public
*/
titleText?: string;
/**
* Receives id(or many ids) of the elements that label the component.
* @default undefined
* @public
* @since 1.7.0
*/
accessibleNameRef?: string;
/**
* Illustration breakpoint variant for the Dot
design.
*
* @private
* @since 1.24.0
*/
dotSvg?: string;
/**
* Illustration breakpoint variant for the Spot
design.
*
* @private
* @since 1.9.0
*/
spotSvg?: string;
/**
* Illustration breakpoint variant for the `Scene` design.
* @private
* @since 1.9.0
*/
sceneSvg?: string;
/**
* Illustration breakpoint variant for the `Dialog` design.
* @private
* @since 1.9.0
*/
dialogSvg?: string;
/**
* Determinates what is the current media of the component based on its width.
* @private
*/
media?: string;
/**
* Defines whether the illustration is decorative.
*
* When set to `true`, the attributes `role="presentation"` and `aria-hidden="true"` are applied to the SVG element.
* @default false
* @public
* @since 2.10.0
*/
decorative: boolean;
/**
* Defines the title of the component.
*
* **Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.
* @public
* @since 1.7.0
*/
title: Array & string;
/**
* Defines the subtitle of the component.
*
* **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.
* @public
* @since 1.0.0-rc.16
*/
subtitle: Array;
/**
* Defines the component actions.
* @public
*/
actions: Array;
illustrationTitle?: string;
illustrationSubtitle?: string;
static i18nBundle: I18nBundle;
_lastKnownOffsetWidthForMedia: Record;
_lastKnownOffsetHeightForMedia: Record;
_lastKnownMedia: string;
_handleResize: ResizeObserverCallback;
constructor();
static get BREAKPOINTS(): {
DIALOG: number;
SPOT: number;
DOT: number;
BASE: number;
};
static get BREAKPOINTS_HEIGHT(): {
DIALOG: number;
SPOT: number;
DOT: number;
BASE: number;
};
static get MEDIA(): {
BASE: string;
DOT: string;
SPOT: string;
DIALOG: string;
SCENE: string;
};
onBeforeRendering(): Promise;
onEnterDOM(): void;
onExitDOM(): void;
handleResize(): void;
_applyMedia(heightChange?: boolean): void;
_setSVGAccAttrs(): void;
_adjustHeightToFitContainer(): void;
onAfterRendering(): void;
/**
* Modifies the IM styles in accordance to the `size` property's value.
* Note: The resize handler has no effect when size is different than "Auto".
* @private
* @since 1.5.0
*/
_handleCustomSize(): void;
get ariaLabelText(): string | undefined;
get effectiveIllustration(): string | undefined;
get hasFormattedSubtitle(): boolean;
get hasFormattedTitle(): boolean;
get effectiveTitleText(): string | undefined;
get effectiveSubitleText(): string | undefined;
get hasTitle(): boolean;
get hasSubtitle(): boolean;
get hasActions(): boolean;
isValidIllustration(currentIllustration: string): boolean;
}
export default IllustratedMessage;