import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../directives/button/button.directive";
/**
 * IgxCardMedia is container for the card media section.
 * Use it to wrap images and videos.
 */
export declare class IgxCardMediaDirective {
    /** @hidden @internal */
    cssClass: string;
    /**
     * An @Input property that sets the `width` and `min-width` style property
     * of the media container. If not provided it will be set to `auto`.
     *
     * @example
     * ```html
     * <igx-card-media width="300px"></igx-card-media>
     * ```
     */
    width: string;
    /**
     * An @Input property that sets the `height` style property of the media container.
     * If not provided it will be set to `auto`.
     *
     * @example
     * ```html
     * <igx-card-media height="50%"></igx-card-media>
     * ```
     */
    height: string;
    /**
     * An @Input property that sets the `role` attribute of the media container.
     */
    role: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardMediaDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardMediaDirective, "igx-card-media", never, { "width": "width"; "height": "height"; "role": "role"; }, {}, never, never, false, never>;
}
/**
 * IgxCardHeader is container for the card header
 */
export declare class IgxCardHeaderComponent {
    /** @hidden @internal */
    cssClass: string;
    /**
     * An @Input property that sets the layout style of the header.
     * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
     *
     * @example
     * ```html
     * <igx-card-header [vertical]="true"></igx-card-header>
     * ```
     */
    vertical: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardHeaderComponent, "igx-card-header", never, { "vertical": "vertical"; }, {}, never, ["igx-avatar, igx-card-media, [igxCardThumbnail]", "\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__subtitle", "*"], false, never>;
}
/**
 * IgxCardThumbnail is container for the card thumbnail section.
 * Use it to wrap anything you want to be used as a thumbnail.
 */
export declare class IgxCardThumbnailDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardThumbnailDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardThumbnailDirective, "[igxCardThumbnail]", never, {}, {}, never, never, false, never>;
}
/**
 * igxCardHeaderTitle is used to denote the header title in a card.
 * Use it to tag text nodes.
 */
export declare class IgxCardHeaderTitleDirective {
    /** @hidden @internal */
    cssClass: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderTitleDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardHeaderTitleDirective, "[igxCardHeaderTitle]", never, {}, {}, never, never, false, never>;
}
/**
 * igxCardHeaderSubtitle is used to denote the header subtitle in a card.
 * Use it to tag text nodes.
 */
export declare class IgxCardHeaderSubtitleDirective {
    /** @hidden @internal */
    cssClass: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderSubtitleDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardHeaderSubtitleDirective, "[igxCardHeaderSubtitle]", never, {}, {}, never, never, false, never>;
}
/**
 * IgxCardContent is container for the card content.
 */
export declare class IgxCardContentDirective {
    /** @hidden @internal */
    cssClass: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardContentDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardContentDirective, "igx-card-content", never, {}, {}, never, never, false, never>;
}
/**
 * IgxCardFooter is container for the card footer
 */
export declare class IgxCardFooterDirective {
    /**
     * An @Input property that sets the value of the `role` attribute of the card footer.
     * By default the value is set to `footer`.
     *
     * @example
     * ```html
     * <igx-card-footer role="footer"></igx-card-footer>
     * ```
     */
    role: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardFooterDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardFooterDirective, "igx-card-footer", never, { "role": "role"; }, {}, never, never, false, never>;
}
/**
 * Card provides a way to display organized content in appealing way.
 *
 * @igxModule IgxCardModule
 *
 * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
 *
 * @igxKeywords card, button, avatar, icon
 *
 * @igxGroup Layouts
 *
 * @remarks
 * The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
 * five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
 *
 * @example
 * ```html
 * <igx-card>
 *   <igx-card-header>
 *     <h3 igxCardHeaderTitle>{{title}}</h3>
 *     <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
 *   </igx-card-header>
 *   <igx-card-actions>
 *       <button igxButton igxRipple>Share</button>
 *       <button igxButton igxRipple>Play Album</button>
 *   </igx-card-actions>
 * </igx-card>
 * ```
 */
export declare const IgxCardType: {
    ELEVATED: "elevated";
    OUTLINED: "outlined";
};
export type IgxCardType = (typeof IgxCardType)[keyof typeof IgxCardType];
export declare class IgxCardComponent {
    /**
     * Sets/gets the `id` of the card.
     * If not set, `id` will have value `"igx-card-0"`;
     *
     * @example
     * ```html
     * <igx-card id = "my-first-card"></igx-card>
     * ```
     * ```typescript
     * let cardId =  this.card.id;
     * ```
     */
    id: string;
    /**
     * An @Input property that sets the value of the `role` attribute of the card.
     * By default the value is set to `group`.
     *
     * @example
     * ```html
     * <igx-card role="group"></igx-card>
     * ```
     */
    role: string;
    /**
     * An @Input property that sets the value of the `type` attribute of the card.
     * By default the value is set to `elevated`. You can make the card use the
     * outlined style by setting the value to `outlined`.
     *
     * @example
     * ```html
     * <igx-card type="outlined"></igx-card>
     * ```
     */
    type: IgxCardType | string;
    /**
     * A getter which will return true if the card type is `outlined`.
     */
    get isOutlinedCard(): boolean;
    /**
     * An @Input property that sets the value of the `horizontal` attribute of the card.
     * Setting this to `true` will make the different card sections align horizontally,
     * essentially flipping the card to the side.
     *
     * @example
     * ```html
     * <igx-card [horizontal]="true"></igx-card>
     * ```
     */
    horizontal: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardComponent, "igx-card", never, { "id": "id"; "role": "role"; "type": "type"; "horizontal": "horizontal"; }, {}, never, ["*"], false, never>;
}
export declare const IgxCardActionsLayout: {
    START: "start";
    JUSTIFY: "justify";
};
export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
/**
 * IgxCardActions is container for the card actions.
 */
export declare class IgxCardActionsComponent implements OnInit, OnChanges {
    card: IgxCardComponent;
    /**
     * An @Input property that sets the layout style of the actions.
     * You can justify the elements slotted in the igx-card-action container
     * so that they are positioned equally from one another taking up all the
     * space available along the card actions axis.
     *
     * @example
     * ```html
     * <igx-card-actions layout="justify"></igx-card-actions>
     * ```
     */
    layout: IgxCardActionsLayout | string;
    /**
     * An @Input property that sets the vertical attribute of the actions.
     * When set to `true` the actions will be layed out vertically.
     */
    vertical: boolean;
    /**
     * A getter that returns `true` when the layout has been
     * set to `justify`.
     */
    get isJustifyLayout(): boolean;
    /**
     * @deprecated in version 15.1.0.
     *
     * An @Input property that reverses the order of the buttons in the actions area.
     *
     * @example
     * ```html
     * <igx-card-actions [reverse]="true"></igx-card-actions>
     * ```
     */
    reverse: boolean;
    private isVerticalSet;
    constructor(card: IgxCardComponent);
    /**
     * @hidden
     * @internal
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @hidden
     * @internal
     */
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardActionsComponent, [{ optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardActionsComponent, "igx-card-actions", never, { "layout": "layout"; "vertical": "vertical"; "reverse": "reverse"; }, {}, never, ["[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])", "*", "[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])"], false, never>;
}
/**
 * @hidden
 */
export declare class IgxCardModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<IgxCardModule, [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective], [typeof i1.CommonModule, typeof i2.IgxButtonModule], [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<IgxCardModule>;
}
