import { type CSSResultOrNative, type PropertyValues, type TemplateResult } from 'lit';
import { UiElement } from '../../UiElement.js';
import type { TypedEvents } from '../../../core/types.js';
import '../../button/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;
}
interface DialogEventMap {
    close: CustomEvent<UiDialogClosingReason>;
}
export type RenderFunction = () => TemplateResult;
/**
 * 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 color="text" value="dismiss">Cancel</ui-button>
 * <ui-button color="text" 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 color="text" slot="button" value="dismiss" type="text">Cancel</ui-button>
 *  <ui-button color="text" 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 implements TypedEvents<DialogEventMap> {
    #private;
    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
     */
    accessor modal: boolean;
    /**
     * Toggles visibility of the dialog.
     * Note, the dialog is opened asynchronously after the update is performed.
     * @attribute
     */
    accessor 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
     */
    accessor dismissLabel: string | undefined;
    /**
     * 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
     */
    accessor confirmLabel: string | undefined;
    /**
     * Part of the imperative access to the element.
     * When set, it wraps the content in a `<form>` element.
     * When this is enabled the following will happen:
     * - The `confirm` button will get `type="submit"`
     * - The form `method` attribute is set to `dialog`
     * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
     * - The dialog will dispatch the same `submit` event as the form.
     * - When the `submit` event dispatched by the dialog gets cancelled, then:
     *  - The original submit event also gets cancelled.
     *  - The default confirm action is not invoked
     *  - The dialog stays opened
     * - When the submit event is not cancelled, then:
     *  - The default confirm action is invoked.
     *  - The dialog is closed.
     */
    accessor useForm: boolean | undefined;
    /**
     * Only when `confirmLabel` is set.
     * Defines the value associated with the button's name when it's submitted with the form data.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
     * @attribute
     */
    accessor confirmValue: string | undefined;
    /**
     * A reference to the underlying dialog element.
     */
    accessor dialog: HTMLDialogElement;
    protected accessor hasIcon: boolean;
    protected accessor hasTitle: boolean;
    protected accessor hasButton: boolean;
    protected accessor icons: HTMLElement[];
    protected accessor titles: HTMLElement[];
    protected accessor buttons: HTMLElement[];
    /**
     * To be set by a child class when closing the dialog.
     * This is passed to the close event.
     */
    dialogValue?: unknown;
    get formId(): string | undefined;
    constructor();
    /**
     * Allows to inject a template into the internals of the element.
     * This is helpful when working with imperative dialogs.
     * @param content The content to inject into the body.
     */
    inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void;
    protected firstUpdated(): void;
    willUpdate(cp: PropertyValues<this>): void;
    handleClick(e: MouseEvent): void;
    handleKeyDown(e: KeyboardEvent): void;
    updated(changedProperties: PropertyValues<this>): void;
    protected handleInteraction(value: 'dismiss' | 'confirm'): void;
    protected handleDialogClose(): void;
    protected handleDismiss(): void;
    protected handleConfirm(): void;
    render(): TemplateResult;
    protected renderContent(): TemplateResult[] | TemplateResult;
    protected renderIcon(): TemplateResult;
    protected renderTitle(): TemplateResult;
    protected renderBody(): TemplateResult;
    protected renderButtons(): TemplateResult;
}
export {};
//# sourceMappingURL=Dialog.d.ts.map