import { ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
/**
 * CSS class generator for modal component variants
 * @internal
 */
export declare const modalComponent: (props?: ({
    width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
    aligment?: "center" | "top" | "bottom" | "start" | "end" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible width values for the modal component */
export type ModalWidthProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | null | undefined;
/** Possible vertical alignment values for the modal component */
export type ModalAlignmentProps = 'top' | 'center' | 'bottom' | 'start' | 'end' | null | undefined;
/** Configuration properties for the modal component */
export type ModalProps = {
    width?: ModalWidthProps;
    alignment?: ModalAlignmentProps;
};
/**
 * A customizable modal dialog component with Tailwind CSS integration
 *
 * @remarks
 * Uses Angular's signal-based inputs and outputs for reactive state management.
 * Supports various sizes and vertical alignments through input properties.
 *
 * @example
 * ```html
 * <st-modal
 *   modalId="confirmDialog"
 *   [(opened)]="isOpen"
 *   width="lg"
 *   alignment="top"
 *   (close)="handleClose()"
 *   (clickOutside)="handleClickOustide()"
 * />
 * ```
 */
export declare class ModalComponent {
    /**
     * Specifies the maximum width of the modal content
     * @defaultValue 'md'
     */
    width: import("@angular/core").InputSignal<ModalWidthProps>;
    /**
     * Controls the vertical positioning of the modal
     * @defaultValue 'center'
     */
    alignment: import("@angular/core").InputSignal<ModalAlignmentProps>;
    /** Required unique identifier for the modal dialog */
    modalId: import("@angular/core").InputSignal<string>;
    /** Event emitted when clicking outside the modal content */
    clickOutside: import("@angular/core").OutputEmitterRef<void>;
    /** Event emitted when the modal closes */
    closed: import("@angular/core").OutputEmitterRef<void>;
    /** @internal Icon reference for close button */
    iconClose: string;
    /** @internal Reference to the underlying dialog element */
    dialog: import("@angular/core").Signal<ElementRef<HTMLDialogElement> | undefined>;
    /**
     * Controls the visibility state of the modal
     * Supports two-way binding via Angular's model
     */
    opened: import("@angular/core").ModelSignal<boolean>;
    /** @internal Handles open/close state changes */
    openedEffect: import("@angular/core").EffectRef;
    /**
     * Computes CSS classes for modal content based on current configuration
     * @returns Combined Tailwind classes string
     * @internal
     */
    componentClass: import("@angular/core").Signal<string>;
    /**
     * Computes CSS classes for modal overlay positioning
     * @returns Combined positioning classes string
     * @internal
     */
    modalClass: import("@angular/core").Signal<string>;
    /** @internal Opens the native dialog element */
    handleOpen(): void;
    /** @internal Closes the native dialog element */
    handleClose(): void;
    /**
     * Public method to close the modal and emit close event
     * Can be called directly from parent components
     */
    handleCloseClick(): void;
    /**
     * Handles cancel events from the dialog element
     * @param event - Native dialog cancel event
     * @internal
     */
    handleCancelClick(event: Event): void;
    /**
     * Handles click events outside the modal content
     * @param event - Native mouse event
     * @internal
     */
    handleClickOutside(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "st-modal", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "modalId": { "alias": "modalId"; "required": true; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, { "clickOutside": "clickOutside"; "closed": "closed"; "opened": "openedChange"; }, never, ["st-modal-title", "st-modal-content", "st-modal-actions"], true, never>;
}