import * as i0 from '@angular/core';
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
/**
* IgxCardMedia is container for the card media section.
* Use it to wrap images and videos.
*/
declare class IgxCardMediaDirective {
/** @hidden @internal */
cssClass: string;
/**
* Sets the `width` and `min-width` style property
* of the media container. If not provided it will be set to `auto`.
*
* @example
* ```html
*
* ```
*/
width: string;
/**
* Sets the `height` style property of the media container.
* If not provided it will be set to `auto`.
*
* @example
* ```html
*
* ```
*/
height: string;
/**
* Sets the `role` attribute of the media container.
*/
role: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* IgxCardHeader is container for the card header
*/
declare class IgxCardHeaderComponent {
/** @hidden @internal */
cssClass: string;
/**
* Sets the layout style of the header.
* By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
*
* @example
* ```html
*
* ```
*/
vertical: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_vertical: unknown;
}
/**
* IgxCardThumbnail is container for the card thumbnail section.
* Use it to wrap anything you want to be used as a thumbnail.
*/
declare class IgxCardThumbnailDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* igxCardHeaderTitle is used to denote the header title in a card.
* Use it to tag text nodes.
*/
declare class IgxCardHeaderTitleDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* igxCardHeaderSubtitle is used to denote the header subtitle in a card.
* Use it to tag text nodes.
*/
declare class IgxCardHeaderSubtitleDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* IgxCardContent is container for the card content.
*/
declare class IgxCardContentDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* IgxCardFooter is container for the card footer
*/
declare class IgxCardFooterDirective {
/**
* Sets the value of the `role` attribute of the card footer.
* By default the value is set to `footer`.
*
* @example
* ```html
*
* ```
*/
role: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* 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
*
*
*
{{title}}
*
{{subtitle}}
*
*
*
*
*
*
* ```
*/
declare class IgxCardComponent {
/**
* Sets/gets the `id` of the card.
* If not set, `id` will have value `"igx-card-0"`;
*
* @example
* ```html
*
* ```
* ```typescript
* let cardId = this.card.id;
* ```
*/
id: string;
/**
* Sets the `igx-card` css class to the card component.
*
* @hidden
* @internal
*/
cssClass: string;
/**
* Sets the value of the `role` attribute of the card.
* By default the value is set to `group`.
*
* @example
* ```html
*
* ```
*/
role: string;
/**
* Sets/gets whether the card is elevated.
* Default value is `false`.
*
* @example
* ```html
*
* ```
* ```typescript
* let cardElevation = this.card.elevated;
* ```
*/
elevated: boolean;
/**
* 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
*
* ```
*/
horizontal: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_elevated: unknown;
static ngAcceptInputType_horizontal: unknown;
}
declare const IgxCardActionsLayout: {
readonly START: "start";
readonly JUSTIFY: "justify";
};
type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
/**
* IgxCardActions is container for the card actions.
*/
declare class IgxCardActionsComponent implements OnInit, OnChanges {
card: IgxCardComponent;
/**
* 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
*
* ```
*/
layout: IgxCardActionsLayout | string;
/**
* 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;
private isVerticalSet;
/**
* @hidden
* @internal
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
* @internal
*/
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_vertical: unknown;
}
declare const IGX_CARD_DIRECTIVES: readonly [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxCardModule {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵmod: i0.ɵɵNgModuleDeclaration;
static ɵinj: i0.ɵɵInjectorDeclaration;
}
export { IGX_CARD_DIRECTIVES, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective };