import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
/**
 * @name Card Image
 * @summary Displays a visual representation of a credit or debit card with customizable styling
 * and card details. Supports horizontal and vertical orientations with responsive sizing
 * that adapts content visibility based on container width.
 *
 * @slot action - An optional slot for interactive elements. Supported elements:
 * - [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) —
 *   Renders in the top-right corner. Only visible at large and medium sizes.
 *
 */
export declare class Q2CardImage implements ComponentInterface {
    private predefinedBackgrounds;
    private resizeObserver;
    private sizeBreakpoints;
    hostElement: HTMLElement;
    computedSize: 'large' | 'medium' | 'small' | 'tiny';
    /**
     * Background style for the base layer.
     * - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors
     * - `'gradient'`: Grayscale gradient (themable via CSS variables)
     * - Custom string: URL/path to an image file (SVG, PNG, JPG)
     */
    background: 'primary' | 'secondary' | 'tertiary' | 'gradient' | string;
    /**
     * The card holder name to display on the card. Only rendered at large and medium sizes.
     * When not provided, neither the label nor the name is displayed.
     */
    cardHolder?: string;
    /**
     * Controls whether the "CARD HOLDER" label is displayed above the card holder name.
     * The label is only supported at large size. At medium size, only the name is shown
     * regardless of this prop. When `false`, only the name is shown without the label.
     */
    cardHolderLabel: boolean;
    /**
     * The card number to display. Only the last 4 characters are used, prefixed with `**** **** **** `.
     * The last 4 characters must all be digits; otherwise the card number is not displayed.
     * Not rendered at tiny size.
     */
    cardNumber?: string;
    /**
     * The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.
     */
    cardStatus?: 'digital' | 'enabled' | 'new' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen';
    /**
     * The card type label displayed alongside the expiration date. Not rendered at tiny size.
     */
    cardType?: 'atm' | 'debit';
    /**
     * The color of the card type text. Only applies when `cardType` is set.
     */
    cardTypeColor?: 'black' | 'white';
    /**
     * The chip style displayed on the card. Not rendered at tiny size.
     * - `'gold'`: Gold/brass colored EMV chip
     * - `'silver'`: Silver/platinum colored EMV chip
     */
    chip?: 'gold' | 'silver';
    /**
     * If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.
     */
    clickable: boolean;
    /**
     * If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.
     */
    disabled: boolean;
    /**
     * The expiration date of the card in ISO 8601 extended format (`YYYY-MM`).
     * Displayed as `MM / YY` on the card. Only rendered at large and medium sizes.
     * When not provided, neither the label nor the date value is displayed.
     */
    expirationDate?: string;
    /**
     * Controls whether the "EXPIRES" label is displayed above the expiration date.
     * The label is only supported at large size. At medium size, only the date value is shown
     * regardless of this prop. When `false`, only the date value is shown without the label.
     */
    expirationDateLabel: boolean;
    /**
     * Path to the financial institution logo image (SVG, PNG, or JPG).
     * Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards.
     * When not provided, an empty placeholder div is rendered to maintain consistent card structure.
     */
    fiLogo?: string;
    /**
     * If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.
     */
    inline: boolean;
    /**
     * The orientation of the card image.
     */
    orientation: 'horizontal' | 'vertical';
    /**
     * Background style for the overlay layer. When undefined, the overlay is not rendered.
     * - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)
     * - Custom string: URL/path to an image file (SVG, PNG, JPG)
     */
    overlay?: 'dot' | string;
    /**
     * Overrides the default status banner text (which is the cardStatus value in uppercase).
     * Maximum 14 characters (including spaces) to ensure the text fits within the banner.
     */
    statusTextOverride?: string;
    /**
     * Accessible label for the card image. When provided, this value is applied as `aria-label`
     * on either the card container (non-clickable) or the wrapping button (clickable).
     */
    tctAriaLabel?: string;
    /**
     * The card vendor. Renders the vendor logo in the bottom-right of the card.
     * Not rendered at tiny size.
     */
    vendor?: 'mastercard' | 'visa';
    /**
     * The color variant of the vendor logo. Only applies when `vendor` is set.
     * Defaults to `'white'` for Visa and `'brand'` for Mastercard.
     */
    vendorColor?: 'black' | 'brand' | 'white';
    /**
     * Path to a custom vendor logo image (SVG, PNG, or JPG).
     * When set, this overrides the `vendor` prop and displays the custom logo.
     * Not rendered at tiny size.
     */
    vendorLogo?: string;
    /** Emitted when a clickable card is clicked. Contains card details. */
    tctClick: EventEmitter<{
        cardNumber: string | undefined;
        cardStatus: string | undefined;
        statusTextOverride: string | undefined;
        cardHolder: string | undefined;
        expirationDate: string | undefined;
        cardType: string | undefined;
        vendor: string | undefined;
    }>;
    disconnectedCallback(): void;
    componentWillLoad(): void;
    componentDidLoad(): void;
    componentDidRender(): void;
    get hasActionSlotContent(): boolean;
    private get isDecorative();
    private get size();
    /**
     * Computes the display size from the container's current width.
     * Breakpoints represent the minimum widths at which certain card elements are applied to the layout.
     */
    private computeSizeFromWidth;
    /**
     * Generates inline styles for the base layer when using a custom image URL.
     */
    private getBaseStyles;
    /**
     * Returns the card holder name for display, or an empty string if not provided.
     * Only rendered at large and medium sizes.
     */
    private getCardHolderName;
    /**
     * Returns inline styles for the card type text color.
     */
    private getCardTypeColorStyle;
    /**
     * Returns the card type text (ATM or DEBIT) for display, or null if not set.
     */
    private getCardTypeText;
    /**
     * Returns the resolved file path for the chip SVG, or null if no chip is set.
     */
    private getChipPath;
    /**
     * Returns the formatted card number for display, or an empty string if invalid.
     * Extracts the last 4 characters and validates they are all digits.
     */
    private getFormattedCardNumber;
    /**
     * Returns the formatted expiration date for display as `MM / YY`, or an empty string if invalid.
     * Accepts ISO 8601 extended format `YYYY-MM`.
     * Only rendered at large and medium sizes.
     */
    private getFormattedExpirationDate;
    /**
     * Returns the last 4 digits of the card number, or undefined if not set or invalid.
     */
    private getLastFour;
    /**
     * Generates inline styles for the overlay layer when using a custom image URL.
     */
    private getOverlayStyles;
    /**
     * Returns the display text for the status banner.
     */
    private getStatusText;
    /**
     * Returns the resolved file path for the vendor logo SVG, or null if no vendor is set.
     * Custom vendorLogo takes precedence over the vendor prop.
     */
    private getVendorPath;
    /**
     * Emits the tctClick event with card detail data.
     */
    private handleCardClick;
    /**
     * Validates and normalizes the action slot content.
     * Only allows a single q2-dropdown element with circular icon-only styling.
     */
    private handleDropdownElement;
    /**
     * Handles ResizeObserver entries and updates the computed size.
     */
    private handleResize;
    /**
     * Determines if the overlay value is the 'dot' pattern or a custom URL.
     */
    private isDotOverlay;
    /**
     * Determines if the background value is a predefined type or a custom URL.
     */
    private isPredefinedBackground;
    /**
     * Returns whether the card holder label should be shown.
     * Only displayed at large size and when cardHolderLabel is true.
     */
    private showCardHolderLabel;
    /**
     * Returns whether the expiration date label should be shown.
     * Only displayed at large size and when expirationDateLabel is true.
     */
    private showExpirationDateLabel;
    private renderAction;
    private renderCardContent;
    private renderHorizontalCardDetails;
    private renderStatusBanner;
    private renderVerticalCardDetails;
    render(): any;
}