import { CommonModule } from '@angular/common';
import { Component, Directive, HostBinding, Optional, Inject, Input, NgModule } from '@angular/core';
import { IgxButtonModule } from '../directives/button/button.directive';
import { mkenum } from '../core/utils';
import * as i0 from "@angular/core";
let NEXT_ID = 0;
/**
 * IgxCardMedia is container for the card media section.
 * Use it to wrap images and videos.
 */
export class IgxCardMediaDirective {
    constructor() {
        /** @hidden @internal */
        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`.
         *
         * @example
         * ```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`.
         *
         * @example
         * ```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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardMediaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardMediaDirective, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'igx-card-media'
                }]
        }], 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
            }] } });
/**
 * IgxCardHeader is container for the card header
 */
export class IgxCardHeaderComponent {
    constructor() {
        /** @hidden @internal */
        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.
         *
         * @example
         * ```html
         * <igx-card-header [vertical]="true"></igx-card-header>
         * ```
         */
        this.vertical = false;
    }
}
IgxCardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardHeaderComponent, selector: "igx-card-header", inputs: { vertical: "vertical" }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, 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" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: 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" }]
        }], propDecorators: { cssClass: [{
                type: HostBinding,
                args: ['class.igx-card-header']
            }], vertical: [{
                type: HostBinding,
                args: ['class.igx-card-header--vertical']
            }, {
                type: Input
            }] } });
/**
 * IgxCardThumbnail is container for the card thumbnail section.
 * Use it to wrap anything you want to be used as a thumbnail.
 */
export class IgxCardThumbnailDirective {
}
IgxCardThumbnailDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardThumbnailDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardThumbnailDirective, selector: "[igxCardThumbnail]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[igxCardThumbnail]'
                }]
        }] });
/**
 * igxCardHeaderTitle is used to denote the header title in a card.
 * Use it to tag text nodes.
 */
export class IgxCardHeaderTitleDirective {
    constructor() {
        /** @hidden @internal */
        this.cssClass = 'igx-card__header__title';
    }
}
IgxCardHeaderTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardHeaderTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardHeaderTitleDirective, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[igxCardHeaderTitle]'
                }]
        }], propDecorators: { cssClass: [{
                type: HostBinding,
                args: ['class.igx-card-header__title']
            }] } });
/**
 * igxCardHeaderSubtitle is used to denote the header subtitle in a card.
 * Use it to tag text nodes.
 */
export class IgxCardHeaderSubtitleDirective {
    constructor() {
        /** @hidden @internal */
        this.cssClass = 'igx-card-header__subtitle';
    }
}
IgxCardHeaderSubtitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardHeaderSubtitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardHeaderSubtitleDirective, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[igxCardHeaderSubtitle]'
                }]
        }], propDecorators: { cssClass: [{
                type: HostBinding,
                args: ['class.igx-card-header__subtitle']
            }] } });
/**
 * IgxCardContent is container for the card content.
 */
export class IgxCardContentDirective {
    constructor() {
        /** @hidden @internal */
        this.cssClass = 'igx-card-content';
    }
}
IgxCardContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardContentDirective, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardContentDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'igx-card-content'
                }]
        }], propDecorators: { cssClass: [{
                type: HostBinding,
                args: ['class.igx-card-content']
            }] } });
/**
 * IgxCardFooter is container for the card footer
 */
export class IgxCardFooterDirective {
    constructor() {
        /**
         * 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>
         * ```
         */
        this.role = 'footer';
    }
}
IgxCardFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
IgxCardFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardFooterDirective, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'igx-card-footer'
                }]
        }], propDecorators: { role: [{
                type: HostBinding,
                args: ['attr.role']
            }, {
                type: Input
            }] } });
/**
 * 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 const IgxCardType = mkenum({
    ELEVATED: 'elevated',
    OUTLINED: 'outlined'
});
export class IgxCardComponent {
    constructor() {
        /**
         * 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;
         * ```
         */
        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`.
         *
         * @example
         * ```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 `elevated`. You can make the card use the
         * outlined style by setting the value to `outlined`.
         *
         * @example
         * ```html
         * <igx-card type="outlined"></igx-card>
         * ```
         */
        this.type = IgxCardType.ELEVATED;
        /**
         * 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>
         * ```
         */
        this.horizontal = false;
    }
    /**
     * A getter which will return true if the card type is `outlined`.
     */
    get isOutlinedCard() {
        return this.type === IgxCardType.OUTLINED;
    }
}
IgxCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardComponent, selector: "igx-card", inputs: { id: "id", role: "role", type: "type", horizontal: "horizontal" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-card": "this.type", "class.igx-card--outlined": "this.isOutlinedCard", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-card', template: "<ng-content></ng-content>\n" }]
        }], 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
            }] } });
export const IgxCardActionsLayout = mkenum({
    START: 'start',
    JUSTIFY: 'justify'
});
/**
 * IgxCardActions is container for the card actions.
 */
export class IgxCardActionsComponent {
    /**
     * A getter that returns `true` when the layout has been
     * set to `justify`.
     */
    get isJustifyLayout() {
        return this.layout === IgxCardActionsLayout.JUSTIFY;
    }
    constructor(card) {
        this.card = card;
        /**
         * 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>
         * ```
         */
        this.layout = IgxCardActionsLayout.START;
        /**
         * An @Input property that sets the vertical attribute of the actions.
         * When set to `true` the actions will be layed out vertically.
         */
        this.vertical = false;
        /**
         * @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>
         * ```
         */
        this.reverse = false;
        this.isVerticalSet = false;
    }
    /**
     * @hidden
     * @internal
     */
    ngOnChanges(changes) {
        for (const prop in changes) {
            if (prop === 'vertical') {
                this.isVerticalSet = true;
            }
        }
    }
    /**
     * @hidden
     * @internal
     */
    ngOnInit() {
        if (!this.isVerticalSet && this.card.horizontal) {
            this.vertical = true;
        }
        ;
    }
}
IgxCardActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardActionsComponent, deps: [{ token: IgxCardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
IgxCardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxCardActionsComponent, selector: "igx-card-actions", inputs: { layout: "layout", vertical: "vertical", reverse: "reverse" }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout", "class.igx-card-actions--reverse": "this.reverse" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-card-actions', template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }]
        }], ctorParameters: function () { return [{ type: IgxCardComponent, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [IgxCardComponent]
                }] }]; }, 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
            }] } });
/**
 * @hidden
 */
export class IgxCardModule {
}
IgxCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
IgxCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: IgxCardModule, declarations: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective], imports: [CommonModule, IgxButtonModule], exports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective] });
IgxCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxCardModule, imports: [CommonModule, IgxButtonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: 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]
                }]
        }] });
//# sourceMappingURL=data:application/json;base64, 