import { EventEmitter } from "../../stencil-public-runtime";
import { A11yComponent, FocusableComponent, ThemeableComponent } from "../../common";
import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
export type DuetModalSize = "small" | "medium" | "large";
export type DuetModalVariation = "default" | "slide-up" | "loader";
export type DuetModalCloseEvent = {
    originalEvent: Event;
    component: "duet-modal";
};
/**
 * @slot sticky-header - Content will be fixed to the top of the modal when scrolling, typically used with slide-up variation for e.g. a search input
 * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
 */
export declare class DuetModal implements ThemeableComponent, A11yComponent {
    /**
     * Own Properties.
     */
    private modalEl?;
    private modalInnerEl?;
    private modalContentEl?;
    private buttonEl?;
    private slotContainerEl?;
    private focusedElBeforeOpen;
    private hasStickyHeader;
    private isAndroidDevice;
    private isSafariBrowser;
    private teleport;
    private accessibleLoaderAnnouncementDefaults;
    private accessibleCloseLabelDefaults;
    private handleAndroidResizeEvents;
    /**
     * Reference to host HTML element.
     */
    element: HTMLElement;
    /**
     * State() variables
     * Inlined decorator, alphabetical order.
     */
    open: boolean;
    openChanged(): void;
    /**
     * The currently active language. This setting also changes the logo to match
     * the chosen language.
     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
     * @default "fi"
     */
    language: DuetLanguage;
    /**
     * Adds accessible label for the close icon that is only shown for screen
     * readers. This property is always required to create an accessibly interface!
     * Swedish translation for this property is “Stäng fönstret”.
     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
     */
    accessibleCloseLabel: string;
    /**
     * When modal used as a lodader, as an audible substitute for the spinner, we use this message
     * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", }
     */
    accessibleLoaderAnnouncement: string;
    /**
     * Size of the modal window.
     */
    size: DuetModalSize;
    /**
     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
     */
    accessibleDescribedBy: string;
    /**
     * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
     */
    accessibleLabelledBy: string;
    /**
     * By default the heading is used aria-label for the modal.
     * If you wish to use something else then you must set this label.
     */
    accessibleLabel: string;
    /**
     * Details of the component
     */
    accessibleDetails: string;
    /**
     * Aria description the button
     */
    accessibleDescription: string;
    /**
     * Variation of the modal window. Slide-up variation has fixed height so it suits well for
     * situations where the modal content height changes. Loader variation is used when the user
     * initiates an action that takes time to complete - it can be used with addMessage() method to
     * insert accessible message to the modal to inform the user about the progress.
     */
    variation: DuetModalVariation;
    /**
     * Size of the modal window's padding.
     */
    gutterSize: DuetModalSize | "none";
    /**
     * Theme of the modal.
     */
    theme: DuetTheme;
    /**
     * Accessible heading displayed in the modal. The modal marks this as the
     * label of the modal when used. This helps screen reader users which is
     * why this is a required property.
     */
    heading: string;
    /**
     * Accessible heading size
     */
    headingLevel: DuetHeadingLevel;
    /**
     * Makes the visual style mimic a specific heading level. This option allows
     * you to make e.g. h1 visually look like h3, but still keep it h1 in the
     * markup.
     */
    headingVisualLevel: DuetVisualHeadingLevel | undefined;
    /**
     * Icon to display above the heading (from Duet’s icons). Example:
     * "form-location"
     */
    icon: DuetIconName;
    /**
     * Custom color to be used for the icon, as a design token entered in camelCase
     * or kebab-case. Example: "primary".
     */
    color: DuetColor;
    /**
     * Use this property when you need to have the modal dialog initially active.
     */
    active: boolean;
    activeChanged(): void;
    /**
     * Use this property when you want the modal to close when clicked outside of modal.
     */
    closeOnBlur: boolean;
    /**
     * Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the
     * element as a string. Use empty string to disable focus moving on close - do this if after closing there is
     * another element that automatically gets the focus or you handle focusing manually.
     */
    focusElementOnClose: FocusableComponent | HTMLElement | string;
    /**
     * Makes either the entire modal ("all"), headign and body content ("heading"), or just its body content ("body")
     * an aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,
     * as it handles aria-live separately.
     */
    accessibleAnnounceChanges: "all" | "heading" | "body";
    /**
     * Emitted when the modal is opened.
     */
    duetOpen: EventEmitter;
    /**
     * Emitted when the modal is closed.
     */
    duetClose: EventEmitter;
    /**
     * Emitted when the modal closing transition is complete.
     */
    duetCloseComplete: EventEmitter;
    /**
     * Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault().
     */
    duetBeforeClose: EventEmitter<DuetModalCloseEvent>;
    /**
     * Component lifecycle events.
     */
    componentWillLoad(): void;
    componentDidLoad(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Component event handling.
     */
    handleKeyUp(ev: any): void;
    /**
     * Shows the modal dialog. Additionally saves the element that triggered
     * the modal so that focus can be moved back to this specific element when
     * the modal dialog is closed.
     */
    show(): Promise<void>;
    /**
     * Hides the modal dialog and puts focus back to the original element
     * that triggered the modal (if we’re still in the same view).
     */
    hide(): Promise<void>;
    /**
     * Set focus on the close button of the modal.
     */
    focusCloseButton(): Promise<void>;
    /**
     * Scolls the top of the modal's content into view
     *
     * @param smooth Set to false for instant scrolling
     */
    scrollToTop(smooth?: boolean): Promise<void>;
    /**
     * Adds a message to the modal dialog using animation and annoucing it to screen readers.
     * Primarily for use with the loader variation.
     *
     * @param message The message to be added to the modal dialog.
     * @param visible Set to false if you want to add a non-visual message.
     */
    addMessage(message: string, visible?: boolean): Promise<void>;
    /**
     * Local methods.
     */
    private closeModal;
    /**
     * render() function
     * Always the last one in the class.
     */
    render(): any;
}