/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { CommonModule } from '@angular/common';
import { Component, Directive, HostBinding, Optional, Inject, Input, NgModule } from '@angular/core';
import { IgxButtonModule } from '../directives/button/button.directive';
/** @type {?} */
var NEXT_ID = 0;
/**
 * IgxCardMedia is container for the card media section.
 * Use it to wrap images and videos.
 */
var IgxCardMediaDirective = /** @class */ (function () {
    function IgxCardMediaDirective() {
        /**
         * @hidden
         */
        this.cssClass = 'igx-card__media';
        /**
         * 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`.
         * ```html
         * <igx-card-media width="300px"></igx-card-media>
         * ```
         */
        this.width = 'auto';
        /**
         * An \@Input property that sets the `height` style property of the media container.
         * If not provided it will be set to `auto`.
         * ```html
         * <igx-card-media height="50%"></igx-card-media>
         * ```
         */
        this.height = 'auto';
        /**
         * An \@Input property that sets the `role` attribute of the media container.
         */
        this.role = 'img';
    }
    IgxCardMediaDirective.decorators = [
        { type: Directive, args: [{
                    // tslint:disable-next-line:directive-selector
                    selector: 'igx-card-media'
                },] }
    ];
    IgxCardMediaDirective.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-card__media',] }],
        width: [{ type: HostBinding, args: ['style.width',] }, { type: HostBinding, args: ['style.min-width',] }, { type: Input }],
        height: [{ type: HostBinding, args: ['style.height',] }, { type: Input }],
        role: [{ type: HostBinding, args: ['attr.role',] }, { type: Input }]
    };
    return IgxCardMediaDirective;
}());
export { IgxCardMediaDirective };
if (false) {
    /**
     * @hidden
     * @type {?}
     */
    IgxCardMediaDirective.prototype.cssClass;
    /**
     * 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`.
     * ```html
     * <igx-card-media width="300px"></igx-card-media>
     * ```
     * @type {?}
     */
    IgxCardMediaDirective.prototype.width;
    /**
     * An \@Input property that sets the `height` style property of the media container.
     * If not provided it will be set to `auto`.
     * ```html
     * <igx-card-media height="50%"></igx-card-media>
     * ```
     * @type {?}
     */
    IgxCardMediaDirective.prototype.height;
    /**
     * An \@Input property that sets the `role` attribute of the media container.
     * @type {?}
     */
    IgxCardMediaDirective.prototype.role;
}
/**
 * IgxCardHeader is container for the card header
 */
var IgxCardHeaderComponent = /** @class */ (function () {
    function IgxCardHeaderComponent() {
        /**
         * @hidden
         */
        this.cssClass = 'igx-card-header';
        /**
         * An \@Input property that sets the layout style of the header.
         * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
         * ```html
         * <igx-card-header [vertical]="true"></igx-card-header>
         * ```
         */
        this.vertical = false;
        /**
         * An \@Input property that sets the value of the `role` attribute of the card header.
         * By default the value is set to `header`.
         * ```html
         * <igx-card-header role="header"></igx-card-header>
         * ```
         */
        this.role = 'header';
    }
    IgxCardHeaderComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-card-header',
                    template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n"
                }] }
    ];
    IgxCardHeaderComponent.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-card-header',] }],
        vertical: [{ type: HostBinding, args: ['class.igx-card-header--vertical',] }, { type: Input }],
        role: [{ type: HostBinding, args: ['attr.role',] }]
    };
    return IgxCardHeaderComponent;
}());
export { IgxCardHeaderComponent };
if (false) {
    /**
     * @hidden
     * @type {?}
     */
    IgxCardHeaderComponent.prototype.cssClass;
    /**
     * An \@Input property that sets the layout style of the header.
     * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
     * ```html
     * <igx-card-header [vertical]="true"></igx-card-header>
     * ```
     * @type {?}
     */
    IgxCardHeaderComponent.prototype.vertical;
    /**
     * An \@Input property that sets the value of the `role` attribute of the card header.
     * By default the value is set to `header`.
     * ```html
     * <igx-card-header role="header"></igx-card-header>
     * ```
     * @type {?}
     */
    IgxCardHeaderComponent.prototype.role;
}
/**
 * IgxCardThumbnail is container for the card thumbnail section.
 * Use it to wrap anything you want to be used as a thumbnail.
 */
var IgxCardThumbnailDirective = /** @class */ (function () {
    function IgxCardThumbnailDirective() {
    }
    IgxCardThumbnailDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[igxCardThumbnail]'
                },] }
    ];
    return IgxCardThumbnailDirective;
}());
export { IgxCardThumbnailDirective };
/**
 * igxCardHeaderTitle is used to denote the header title in a card.
 * Use it to tag text nodes.
 */
var IgxCardHeaderTitleDirective = /** @class */ (function () {
    function IgxCardHeaderTitleDirective() {
        /**
         * @hidden
         */
        this.cssClass = 'igx-card__header__title';
    }
    IgxCardHeaderTitleDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[igxCardHeaderTitle]'
                },] }
    ];
    IgxCardHeaderTitleDirective.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-card-header__title',] }]
    };
    return IgxCardHeaderTitleDirective;
}());
export { IgxCardHeaderTitleDirective };
if (false) {
    /**
     * @hidden
     * @type {?}
     */
    IgxCardHeaderTitleDirective.prototype.cssClass;
}
/**
 * igxCardHeaderSubtitle is used to denote the header subtitle in a card.
 * Use it to tag text nodes.
 */
var IgxCardHeaderSubtitleDirective = /** @class */ (function () {
    function IgxCardHeaderSubtitleDirective() {
        /**
         * @hidden
         */
        this.cssClass = 'igx-card-header__subtitle';
    }
    IgxCardHeaderSubtitleDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[igxCardHeaderSubtitle]'
                },] }
    ];
    IgxCardHeaderSubtitleDirective.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-card-header__subtitle',] }]
    };
    return IgxCardHeaderSubtitleDirective;
}());
export { IgxCardHeaderSubtitleDirective };
if (false) {
    /**
     * @hidden
     * @type {?}
     */
    IgxCardHeaderSubtitleDirective.prototype.cssClass;
}
/**
 * IgxCardContent is container for the card content.
 */
var IgxCardContentDirective = /** @class */ (function () {
    function IgxCardContentDirective() {
        /**
         * @hidden
         */
        this.cssClass = 'igx-card-content';
    }
    IgxCardContentDirective.decorators = [
        { type: Directive, args: [{
                    // tslint:disable-next-line:directive-selector
                    selector: 'igx-card-content'
                },] }
    ];
    IgxCardContentDirective.propDecorators = {
        cssClass: [{ type: HostBinding, args: ['class.igx-card-content',] }]
    };
    return IgxCardContentDirective;
}());
export { IgxCardContentDirective };
if (false) {
    /**
     * @hidden
     * @type {?}
     */
    IgxCardContentDirective.prototype.cssClass;
}
/**
 * IgxCardFooter is container for the card footer
 */
var IgxCardFooterDirective = /** @class */ (function () {
    function IgxCardFooterDirective() {
        /**
         * An \@Input property that sets the value of the `role` attribute of the card footer.
         * By default the value is set to `footer`.
         * ```html
         * <igx-card-footer role="footer"></igx-card-footer>
         * ```
         */
        this.role = 'footer';
    }
    IgxCardFooterDirective.decorators = [
        { type: Directive, args: [{
                    // tslint:disable-next-line:directive-selector
                    selector: 'igx-card-footer'
                },] }
    ];
    IgxCardFooterDirective.propDecorators = {
        role: [{ type: HostBinding, args: ['attr.role',] }, { type: Input }]
    };
    return IgxCardFooterDirective;
}());
export { IgxCardFooterDirective };
if (false) {
    /**
     * An \@Input property that sets the value of the `role` attribute of the card footer.
     * By default the value is set to `footer`.
     * ```html
     * <igx-card-footer role="footer"></igx-card-footer>
     * ```
     * @type {?}
     */
    IgxCardFooterDirective.prototype.role;
}
/** @enum {string} */
var IgxCardType = {
    DEFAULT: 'default',
    OUTLINED: 'outlined',
};
export { IgxCardType };
var IgxCardComponent = /** @class */ (function () {
    function IgxCardComponent() {
        /**
         * Sets/gets the `id` of the card.
         * If not set, `id` will have value `"igx-card-0"`;
         * ```html
         * <igx-card id = "my-first-card"></igx-card>
         * ```
         * ```typescript
         * let cardId =  this.card.id;
         * ```
         * \@memberof IgxCardComponent
         */
        this.id = "igx-card-" + NEXT_ID++;
        /**
         * An \@Input property that sets the value of the `role` attribute of the card.
         * By default the value is set to `group`.
         * ```html
         * <igx-card role="group"></igx-card>
         * ```
         */
        this.role = 'group';
        /**
         * An \@Input property that sets the value of the `type` attribute of the card.
         * By default the value is set to `default`. You can make the card use the
         * outlined style by setting the value to `outlined`.
         * ```html
         * <igx-card type="outlined"></igx-card>
         * ```
         */
        this.type = IgxCardType.DEFAULT;
        /**
         * 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.
         * ```html
         * <igx-card [horizontal]="true"></igx-card>
         * ```
         */
        this.horizontal = false;
    }
    Object.defineProperty(IgxCardComponent.prototype, "isOutlinedCard", {
        /**
         * A getter which will return true if the card type is `outlined`.
         */
        get: /**
         * A getter which will return true if the card type is `outlined`.
         * @return {?}
         */
        function () {
            return this.type === IgxCardType.OUTLINED;
        },
        enumerable: true,
        configurable: true
    });
    IgxCardComponent.decorators = [
        { type: Component, args: [{
                    selector: 'igx-card',
                    template: "<ng-container select='igx-card-media'></ng-container>\n\n<ng-container select='igx-card-header'></ng-container>\n<ng-container select='igx-card-content'>\n    <ng-content></ng-content>\n</ng-container>\n\n<ng-container select='igx-card-actions'></ng-container>\n"
                }] }
    ];
    IgxCardComponent.propDecorators = {
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        role: [{ type: HostBinding, args: ['attr.role',] }, { type: Input }],
        type: [{ type: HostBinding, args: ['class.igx-card',] }, { type: Input }],
        isOutlinedCard: [{ type: HostBinding, args: ['class.igx-card--outlined',] }],
        horizontal: [{ type: HostBinding, args: ['class.igx-card--horizontal',] }, { type: Input }]
    };
    return IgxCardComponent;
}());
export { IgxCardComponent };
if (false) {
    /**
     * Sets/gets the `id` of the card.
     * If not set, `id` will have value `"igx-card-0"`;
     * ```html
     * <igx-card id = "my-first-card"></igx-card>
     * ```
     * ```typescript
     * let cardId =  this.card.id;
     * ```
     * \@memberof IgxCardComponent
     * @type {?}
     */
    IgxCardComponent.prototype.id;
    /**
     * An \@Input property that sets the value of the `role` attribute of the card.
     * By default the value is set to `group`.
     * ```html
     * <igx-card role="group"></igx-card>
     * ```
     * @type {?}
     */
    IgxCardComponent.prototype.role;
    /**
     * An \@Input property that sets the value of the `type` attribute of the card.
     * By default the value is set to `default`. You can make the card use the
     * outlined style by setting the value to `outlined`.
     * ```html
     * <igx-card type="outlined"></igx-card>
     * ```
     * @type {?}
     */
    IgxCardComponent.prototype.type;
    /**
     * 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.
     * ```html
     * <igx-card [horizontal]="true"></igx-card>
     * ```
     * @type {?}
     */
    IgxCardComponent.prototype.horizontal;
}
/** @enum {string} */
var IgxCardActionsLayout = {
    DEFAULT: 'default',
    JUSTIFY: 'justify',
};
export { IgxCardActionsLayout };
/**
 * IgxCardActions is container for the card actions.
 */
var IgxCardActionsComponent = /** @class */ (function () {
    function IgxCardActionsComponent(card) {
        this.card = card;
        this.isVerticalSet = false;
        /**
         * An \@Input property that sets the layout style of the actions.
         * By default icons and icon buttons, as well as regular buttons
         * are split into two containers, which are then positioned on both ends
         * of the card-actions area.
         * You can justify the elements in those groups so they are positioned equally
         * from one another taking up all the space available along the card actions axis.
         * ```html
         * <igx-card-actions layout="justify"></igx-card-actions>
         * ```
         */
        this.layout = 'default';
        /**
         * An \@Input property that sets order of the buttons the actions area.
         * By default all icons/icon buttons are placed at the end of the action
         * area. Any regular buttons(flat, raised) will appear before the icons/icon buttons
         * placed in the actions area.
         * If you want to reverse their positions so that icons appear first, use the `reverse`
         * attribute.
         * ```html
         * <igx-card-actions [reverse]="true"></igx-card-actions>
         * ```
         */
        this.reverse = false;
    }
    Object.defineProperty(IgxCardActionsComponent.prototype, "isJustifyLayout", {
        /**
         * A getter that returns `true` when the layout has been
         * set to `justify`.
         */
        get: /**
         * A getter that returns `true` when the layout has been
         * set to `justify`.
         * @return {?}
         */
        function () {
            return this.layout === IgxCardActionsLayout.JUSTIFY;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} changes
     * @return {?}
     */
    IgxCardActionsComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        for (var prop in changes) {
            if (prop === 'vertical') {
                this.isVerticalSet = true;
            }
        }
    };
    /**
     * @return {?}
     */
    IgxCardActionsComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.vertical = !this.isVerticalSet && this.card.horizontal;
    };
    IgxCardActionsComponent.decorators = [
        { type: Component, args: [{
                    // tslint:disable-next-line:directive-selector
                    selector: 'igx-card-actions',
                    template: "<div class=\"igx-card-actions__icons\">\n    <ng-content select=\"igx-icon, [igxButton='icon']\"></ng-content>\n</div>\n\n<div #buttons class=\"igx-card-actions__buttons\">\n    <ng-content select=\"[igxButton]\"></ng-content>\n</div>\n\n\n<ng-content></ng-content>\n"
                }] }
    ];
    /** @nocollapse */
    IgxCardActionsComponent.ctorParameters = function () { return [
        { type: IgxCardComponent, decorators: [{ type: Optional }, { type: Inject, args: [IgxCardComponent,] }] }
    ]; };
    IgxCardActionsComponent.propDecorators = {
        layout: [{ type: HostBinding, args: ['class.igx-card-actions',] }, { type: Input }],
        vertical: [{ type: HostBinding, args: ['class.igx-card-actions--vertical',] }, { type: Input }],
        isJustifyLayout: [{ type: HostBinding, args: ['class.igx-card-actions--justify',] }],
        reverse: [{ type: HostBinding, args: ['class.igx-card-actions--reverse',] }, { type: Input }]
    };
    return IgxCardActionsComponent;
}());
export { IgxCardActionsComponent };
if (false) {
    /**
     * @type {?}
     * @private
     */
    IgxCardActionsComponent.prototype.isVerticalSet;
    /**
     * An \@Input property that sets the layout style of the actions.
     * By default icons and icon buttons, as well as regular buttons
     * are split into two containers, which are then positioned on both ends
     * of the card-actions area.
     * You can justify the elements in those groups so they are positioned equally
     * from one another taking up all the space available along the card actions axis.
     * ```html
     * <igx-card-actions layout="justify"></igx-card-actions>
     * ```
     * @type {?}
     */
    IgxCardActionsComponent.prototype.layout;
    /**
     * An \@Input property that sets the vertical attribute of the actions.
     * When set to `true` the actions will be layed out vertically.
     * @type {?}
     */
    IgxCardActionsComponent.prototype.vertical;
    /**
     * An \@Input property that sets order of the buttons the actions area.
     * By default all icons/icon buttons are placed at the end of the action
     * area. Any regular buttons(flat, raised) will appear before the icons/icon buttons
     * placed in the actions area.
     * If you want to reverse their positions so that icons appear first, use the `reverse`
     * attribute.
     * ```html
     * <igx-card-actions [reverse]="true"></igx-card-actions>
     * ```
     * @type {?}
     */
    IgxCardActionsComponent.prototype.reverse;
    /** @type {?} */
    IgxCardActionsComponent.prototype.card;
}
/**
 * @hidden
 */
var IgxCardModule = /** @class */ (function () {
    function IgxCardModule() {
    }
    IgxCardModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [
                        IgxCardComponent,
                        IgxCardHeaderComponent,
                        IgxCardMediaDirective,
                        IgxCardContentDirective,
                        IgxCardActionsComponent,
                        IgxCardFooterDirective,
                        IgxCardHeaderTitleDirective,
                        IgxCardHeaderSubtitleDirective,
                        IgxCardThumbnailDirective,
                    ],
                    exports: [
                        IgxCardComponent,
                        IgxCardHeaderComponent,
                        IgxCardMediaDirective,
                        IgxCardContentDirective,
                        IgxCardActionsComponent,
                        IgxCardFooterDirective,
                        IgxCardHeaderTitleDirective,
                        IgxCardHeaderSubtitleDirective,
                        IgxCardThumbnailDirective,
                    ],
                    imports: [CommonModule, IgxButtonModule]
                },] }
    ];
    return IgxCardModule;
}());
export { IgxCardModule };
//# sourceMappingURL=data:application/json;base64, 