import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { DialogDividerPosition } from '../../../../types/src/dialog';
import { default as Modal } from '../../../../utils/src/custom-element/modal';
import { CSSResultGroup, PropertyValues } from 'lit';
import { ScrollbarsAutoHideBehavior } from 'overlayscrollbars';
import { default as CxDivider } from '../divider/divider';
import { default as CxIconButton } from '../icon-button/icon-button';
import { default as CxPopup } from '../popup/popup';

/**
 * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
 *
 * @slot (default) - The dialog's main content.
 * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
 * @slot header-actions - Optional actions to add to the header. Works best with `<cx-icon-button>`.
 * @slot footer - The dialog's footer, usually one or more buttons representing various options.
 *
 * @event cx-show - Emitted when the dialog opens.
 * @event cx-after-show - Emitted after the dialog opens and all animations are complete.
 * @event cx-hide - Emitted when the dialog closes.
 * @event cx-after-hide - Emitted after the dialog closes and all animations are complete.
 * @event cx-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
 *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
 * @event {{ source: 'close-button' | 'keyboard' | 'overlay', preventedReason?: string }} cx-request-close - Emitted when the user attempts to
 *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
 *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
 *   destructive behavior such as data loss.
 *
 * @csspart base - The component's base wrapper.
 * @csspart overlay - The overlay that covers the screen behind the dialog.
 * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
 * @csspart header - The dialog's header. This element wraps the title and header actions.
 * @csspart header-actions - Optional actions to add to the header. Works best with `<cx-icon-button>`.
 * @csspart title - The dialog's title.
 * @csspart close-button - The close button, an `<cx-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 * @csspart body - The dialog's body.
 * @csspart footer - The dialog's footer.
 *
 * @cssproperty [--width=31rem] - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
 * @cssproperty [--header-spacing=var(--cx-spacing-small) var(--cx-spacing-large)] - The amount of padding to use for the header.
 * @cssproperty [--body-spacing=var(--cx-spacing-medium) var(--cx-spacing-large)] - The amount of padding to use for the body.
 * @cssproperty [--divider-spacing=0 var(--cx-spacing-large)] - The amount of padding to use for the divider.
 * @cssproperty [--footer-spacing=var(--cx-spacing-large)] - The amount of padding to use for the footer.
 * @cssproperty [--max-width=100vw] - The maximum width of the dialog.
 * @cssproperty [--max-height=100vh] - The maximum height of the dialog.
 * @cssproperty [--overlay-background-color=var(--cx-overlay-background-color)] - The background color of the overlay.
 *
 * @animation dialog.show - The animation to use when showing the dialog.
 * @animation dialog.hide - The animation to use when hiding the dialog.
 * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
 * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
 * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
 *
 * @property open - Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
 *   use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
 * @property label - The dialog's label as displayed in the header. You should always include a relevant label even when using
 *   `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
 * @property noHeader - Disables the header. This will also remove the default close button, so please ensure you provide an easy,
 *   accessible way for users to dismiss the dialog.
 * @property boundary - The element to which the dialog will be centered inside.
 * @property disableOverlayClick - Prevents the dialog from closing when clicking the overlay.
 * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
 *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when
 *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
 */
export default class CxDialog extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-divider': typeof CxDivider;
        'cx-icon-button': typeof CxIconButton;
        'cx-popup': typeof CxPopup;
    };
    private readonly hasSlotController;
    private readonly localize;
    private originalTrigger;
    modal: Modal;
    private closeWatcher;
    popup: CxPopup;
    panel: HTMLElement;
    body: HTMLElement;
    /**
     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
     */
    open: boolean;
    /**
     * The dialog's label as displayed in the header. You should always include a relevant label even when using
     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /**
     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
     * accessible way for users to dismiss the dialog.
     */
    noHeader: boolean;
    /**
     * The element to which the dialog will be centered inside.
     * If not provided, the dialog will be centered inside the document body.
     */
    boundary: HTMLElement;
    /** The position of the divider. */
    dividerPosition: DialogDividerPosition;
    /**
     * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space.
     * This is useful for dialogs that contain scrollable content.
     * Note that the scrollbar will only be visible when the content is overflowing.
     */
    useOverlayScrollbar: boolean;
    /**
     * The `autoHide` behavior of the overlay scrollbar. This controls when the scrollbar will be hidden. It can be set to 'scroll' (the default), which will hide the scrollbar when not scrolling, 'leave' which will hide the scrollbar when not scrolling and the mouse is not over the scrollable area, or 'never' which will never hide the scrollbar.
     */
    overlayScrollbarAutoHide: ScrollbarsAutoHideBehavior;
    /**
     * The `autoHideDelay` of the overlay scrollbar. This controls how long to wait before hiding the scrollbar when `autoHide` is set to 'scroll' or 'leave'. The default is 1000ms.
     */
    overlayScrollbarAutoHideDelay: number;
    /**
     * Preventing the dialog from closing when clicking the overlay.
     */
    disableOverlayClick: boolean;
    /**
     * Preventing the dialog from closing when clicking outside of the dialog. E.g: When a dialog is contained inside a smaller container,
     * clicking outside the container will close the dialog by default. This property will prevent that.
     */
    stayOpenOutsideClick: boolean;
    /**
     * The `strategy` property of the `cx-popup` component.
     */
    strategy: 'fixed' | 'overlay';
    private osInstance;
    overlay: HTMLElement;
    boundaryObserver: ResizeObserver | null;
    boundarySize: {
        height: number;
        width: number;
    };
    constructor();
    runFirstUpdated(): void;
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    protected shouldUpdate(_changedProperties: PropertyValues): boolean;
    updatePopupAnchor(): Promise<void>;
    private handleWindowResize;
    private requestClose;
    /**
     * If there are multiple dialogs open, should only close the top-most dialog when clicking outside dialog panel.
     * @param event - The event object.
     */
    private preventBoundaryDialogClose;
    private addOpenListeners;
    private removeOpenListeners;
    private handleDocumentMouseDown;
    private handleDocumentKeyDown;
    private handleCloseButtonClick;
    handleOpenChange(): Promise<void>;
    /** Shows the dialog. */
    show(): Promise<void>;
    /** Hides the dialog */
    hide(): Promise<void>;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-dialog': CxDialog;
    }
}
