import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
import { default as CxDropdown } from '../../../atoms/src/components/dropdown/dropdown.ts';
import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { ConfirmPopoverButtonsAlignment, ConfirmPopoverButtonsDirection } from '../../../types/src/confirm-popover';
import { DialogDividerPosition } from '../../../types/src/dialog';
import { CSSResultGroup, TemplateResult } from 'lit';

/**
 * @summary Confirm popover is a component that displays a confirmation dialog with a message and two action buttons.
 * The component take a slot `trigger` which will triggers the display of the popover.
 * Afterwards, a `cx-confirm` or `cx-cancel` event will be fired.
 *
 * @event cx-confirm - The confirm button was clicked.
 * @event cx-cancel - The cancel button was clicked.
 *
 * @slot trigger - The trigger element that opens the popover.
 * @slot footer - The footer element that appears below the message and action buttons.
 *
 * @cssproperty --confirm-popover-dialog-width - The width of the dialog variant.
 * @cssproperty [--confirm-button-background-color=var(--cx-color-danger)] - The background color of the confirm button.
 * @cssproperty [--cancel-button-background-color=var(--cx-color-primary-500)] - The background color of the cancel button.
 * @cssproperty [--confirm-button-color=var(--cx-color-neutral-0)] - The color of the confirm button.
 * @cssproperty [--cancel-button-color=var(--cx-color-neutral-0)] - The color of the cancel button.
 *
 * @csspart base - The component’s base wrapper.
 * @csspart actions - The container that wraps the action buttons.
 * @csspart confirm-button - The confirm button.
 * @csspart cancel-button - The cancel button.
 * @csspart footer - The container that wraps the popover's footer.
 */
export default class CxConfirmPopover extends CortexElement {
    static readonly styles: CSSResultGroup;
    private readonly localize;
    static dependencies: {
        'cx-button': typeof CxButton;
        'cx-dialog': typeof CxDialog;
        'cx-dropdown': typeof CxDropdown;
        'cx-typography': typeof CxTypography;
    };
    dropdown: CxDropdown;
    dialog: CxDialog;
    /** The message to display in the confirmation dialog. */
    message: string;
    /** If true, when the trigger is clicked, the popover will not be shown. Instead, cx-confirm event will be emitted. */
    disabled: boolean;
    /** The direction of the buttons. Use as flex direction. */
    buttonsDirection: ConfirmPopoverButtonsDirection;
    /** The alignment of the buttons. */
    buttonsAlignment: ConfirmPopoverButtonsAlignment;
    /** The position of the divider. */
    dividerPosition: DialogDividerPosition;
    /** The label for the dialog. */
    dialogLabel: string;
    /** The text for the confirm button. */
    confirmText: string;
    /** The text for the cancel button. */
    cancelText: string;
    /** The variant of the confirm popover. It can be either 'dialog' or 'dropdown'. */
    variant: 'dialog' | 'dropdown';
    /**
     * The boundary property of the confirm popover's dropdown/dialog popup.
     */
    boundary: HTMLElement;
    get open(): boolean;
    hide(): void;
    show(): void;
    private confirm;
    private cancel;
    handleSlotClick(): void;
    renderSlot(): TemplateResult;
    renderDialog(): TemplateResult;
    renderDropdown(): TemplateResult;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-confirm-popover': CxConfirmPopover;
    }
}
