import { EventEmitter } from '../../../stencil-public-runtime';
/**
 * The card component is more than just a navigational element.
 * It is a flexible component that can be used as a product item, a clickable link card, etc...
 *
 * Setting the `href` prop will transform the entire `pn-card` into a clickable element.
 * If you need content to be interactable inside the card, do not use the `href` prop.
 *
 * @slot - The default slot is the primary content of the card. This is the same area where the `text` prop is located.
 * @slot image - Set a custom image/svg/illustration. Simply use an `img` tag with the slot "image".
 * @slot tags - Add `pn-tags` that will be positioned above the `label` and `overline` if used.
 * @slot header - The header content, same area that the `label` and `overline` props will appear.
 * @slot navigation - This slot is intended for one or more `pn-button` components.
 * Only use **without** the `href` prop. Having both at the same time makes the component inaccessible.
 *
 * @since v7.12.0
 */
export declare class PnCard {
    private readonly id;
    private idTitle;
    visibleOutline: boolean;
    hostElement: HTMLElement;
    /** Headline of the card. Will act as label for the link if there is no `href-label` set. */
    label: string;
    /** The label HTML tag. Default is `h3`. */
    labelTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
    /** Set a smaller text above the `label` text. */
    overline?: string;
    /** Text content of the card. */
    text?: string;
    /** Set a HTML id for the card. Optional and not required. */
    cardId?: string;
    /**
     * Uee the horizontal card layout.
     * @category Features
     * */
    horizontal?: boolean;
    /** Reverse the order of which the image will wrap. @category Features */
    reverse?: boolean;
    /**
     * Select image aspect ratio. Example: '3/3', '16/9'.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}
     * @category Features
     * */
    aspectRatio?: string | '3/3' | '16/9';
    /** The card link. @category Href */
    href?: string;
    /** The link text. @category Href */
    hrefLabel?: string;
    /** The target attribute of the link. @category Href */
    target?: string;
    /** The rel attribute of the link. @category Href */
    rel?: string;
    /** The link icon. Defaults to `arrow_right` or `open_in_new` if `target="_blank"`. @category Href */
    icon?: string;
    watchCardId(): void;
    /** Emitted when you click on the card link (if you use the `href` prop). */
    pnCard: EventEmitter<{
        click: MouseEvent;
    }>;
    componentWillLoad(): void;
    private isExternal;
    private showTitle;
    private showHref;
    private getTitleId;
    private getLabelledby;
    private getIcon;
    private getHeadingTag;
    private handleFocus;
    private handleClick;
    render(): any;
}
