import { nothing, PropertyValues, TemplateResult } from "lit";
import { UiElement } from "../UiElement.js";
import '../../define/ui/ui-button.js';
export interface UiDialogClosingReason {
    /**
     * Whether the dialog was cancelled by either activating the `dismiss` button
     * or by pressing escape.
     */
    cancelled: boolean;
    /**
     * This is used in cases when the dialog has more complex purpose.
     * This is the value expected from the dialog.
     */
    value?: unknown;
}
/**
 * Styled dialog using a native `<dialog>` element under the hood.
 * Note, since native dialog renders in the top layer it is not necessary
 * to place the dialog in the `<body>`.
 *
 * ## Using buttons
 *
 * The dialog automatically recognizes buttons with values `confirm` and `dismiss`
 * to close the dialog and dispatch the `close` event. The event has additional
 * closing reason detail.
 *
 * ```javascript
 * <ui-button value="dismiss">Cancel</ui-button>
 * <ui-button value="confirm">Take action</ui-button>
 * ```
 *
 * ```javascript
 * <button value="dismiss">Cancel</button>
 * <button value="confirm">Take action</button>
 * ```
 *
 * The detail object of the `close` event has the following properties:
 * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.
 *
 * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the
 * dialog won't trigger the close button.
 *
 * ## Full example
 *
 * ```javascript
 * <ui-dialog modal>
 *  <ui-icon slot="icon" icon="delete"></ui-icon>
 *
 *  <span slot="title">Delete photos?</span>
 *  <p>This action will permanently remove the selected pictures from your account.</p>
 *
 *  <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
 *  <ui-button slot="button" value="confirm" type="text">Confirm</ui-button>
 * </ui-dialog>
 * ```
 *
 * @slot - The slot for the content of the dialog.
 * @slot icon - The slot to place the dialog icon
 * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
 * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss` buttons to automatically close the dialog.
 * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
 */
export default class UiDialog extends UiElement {
    get disabled(): boolean;
    /**
     * When set, the button is a disabled state.
     * @attribute
     */
    set disabled(value: boolean);
    /**
     * Opens the dialog as modal when toggling dialog's open state.
     *
     * Setting this value after the dialog was opened has no effect.
     *
     * @attribute
     */
    modal: boolean;
    /**
     * Toggles visibility of the dialog.
     * Note, the dialog is opened asynchronously after the update is performed.
     * @attribute
     */
    open: boolean;
    /**
     * Imperative access to create a dismiss button.
     * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.
     * @attribute
     */
    dismissLabel?: string;
    /**
     * Imperative access to create a confirm button.
     * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.
     * @attribute
     */
    confirmLabel?: string;
    /**
     * A reference to the underlying dialog element.
     */
    readonly dialog: HTMLDialogElement;
    protected hasIcon: boolean;
    protected hasTitle: boolean;
    protected hasButton: boolean;
    protected readonly icons: HTMLElement[];
    protected readonly titles: HTMLElement[];
    protected readonly buttons: HTMLElement[];
    /**
     * To be set by a child class when closing the dialog.
     * This is passed to the close event.
     */
    dialogValue?: unknown;
    constructor();
    handleClick(e: MouseEvent): void;
    handleKeyDown(e: KeyboardEvent): void;
    protected updated(changedProperties: PropertyValues<this>): void;
    protected controlVisibility(): void;
    protected handleSlotChange(): void;
    protected handleInteraction(value: 'dismiss' | 'confirm'): void;
    protected handleDialogClose(): void;
    protected handleDismiss(): void;
    protected handleConfirm(): void;
    render(): TemplateResult;
    protected renderIcon(): TemplateResult;
    protected renderTitle(): TemplateResult;
    protected renderBody(): TemplateResult;
    protected renderButtons(): TemplateResult;
    protected renderDismissButton(): TemplateResult | typeof nothing;
    protected renderConfirmButton(): TemplateResult | typeof nothing;
}
//# sourceMappingURL=UiDialog.d.ts.map