var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, HostBinding } from '@angular/core';
/**
 *
 * Reveal card example:
 * @stacked-example(My example, reveal-card/reveal-card-showcase.component)
 *
 * As a content Reveal card accepts two instances of `el-card` - for front and back sides.
 *
 * Basic reveal card configuration:
 *
 * ```html
 * <el-reveal-card>
 *   <el-card-front>
 *     <el-card>
 *       <el-card-body>
 *         Front
 *       </el-card-body>
 *     </el-card>
 *   </el-card-front>
 *   <el-card-back>
 *     <el-card>
 *       <el-card-body>
 *         Back
 *       </el-card-body>
 *     </el-card>
 *   </el-card-back>
 * </el-reveal-card>
 * ```
 *
 * ### Installation
 *
 * Import `ElCardModule` to your feature module.
 * ```ts
 * @NgModule({
 *   imports: [
 *   	// ...
 *     ElCardModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 *
 * Reveal Card with header and footer:
 * @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
 *
 * Colored reveal-cards could be simply configured by providing a `status` property:
 * @stacked-example(Colored Card, reveal-card/reveal-card-colors.component)
 *
 * It is also possible to assign an `accent` property for a slight card highlight
 * as well as combine it with `status`:
 * @stacked-example(Accent Card, reveal-card/reveal-card-accents.component)
 *
 * @additional-example(Multiple Sizes, reveal-card/reveal-card-sizes.component)
 */
let ElRevealCardComponent = class ElRevealCardComponent {
    /**
     *
     * Reveal card example:
     * @stacked-example(My example, reveal-card/reveal-card-showcase.component)
     *
     * As a content Reveal card accepts two instances of `el-card` - for front and back sides.
     *
     * Basic reveal card configuration:
     *
     * ```html
     * <el-reveal-card>
     *   <el-card-front>
     *     <el-card>
     *       <el-card-body>
     *         Front
     *       </el-card-body>
     *     </el-card>
     *   </el-card-front>
     *   <el-card-back>
     *     <el-card>
     *       <el-card-body>
     *         Back
     *       </el-card-body>
     *     </el-card>
     *   </el-card-back>
     * </el-reveal-card>
     * ```
     *
     * ### Installation
     *
     * Import `ElCardModule` to your feature module.
     * ```ts
     * @NgModule({
     *   imports: [
     *   	// ...
     *     ElCardModule,
     *   ],
     * })
     * export class PageModule { }
     * ```
     * ### Usage
     *
     * Reveal Card with header and footer:
     * @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
     *
     * Colored reveal-cards could be simply configured by providing a `status` property:
     * @stacked-example(Colored Card, reveal-card/reveal-card-colors.component)
     *
     * It is also possible to assign an `accent` property for a slight card highlight
     * as well as combine it with `status`:
     * @stacked-example(Accent Card, reveal-card/reveal-card-accents.component)
     *
     * @additional-example(Multiple Sizes, reveal-card/reveal-card-sizes.component)
     */
    constructor() {
        /**
         * Reveal state
         * @type boolean
         */
        this.revealed = false;
        /**
         * Show/hide toggle button to be able to control toggle from your code
         * @type {boolean}
         */
        this.showToggleButton = true;
    }
    toggle() {
        this.revealed = !this.revealed;
    }
};
__decorate([
    Input(),
    HostBinding('class.revealed'),
    __metadata("design:type", Boolean)
], ElRevealCardComponent.prototype, "revealed", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], ElRevealCardComponent.prototype, "showToggleButton", void 0);
ElRevealCardComponent = __decorate([
    Component({
        selector: 'el-reveal-card',
        template: `
    <ng-content select="el-card-front"></ng-content>
    <div class="second-card-container">
      <ng-content select="el-card-back"></ng-content>
    </div>
    <a *ngIf="showToggleButton" class="reveal-button" (click)="toggle()">
      <el-icon icon="chevron-down-outline" pack="endlessjs-essentials" aria-hidden="true"></el-icon>
    </a>
  `,
        styles: [":host{display:block;position:relative;overflow:hidden}:host .second-card-container{position:absolute;top:100%;right:0;left:0;overflow:hidden;transition:top 0s 0.5s}:host ::ng-deep el-card-front el-card,:host ::ng-deep el-card-back el-card{box-shadow:none;margin:0}:host ::ng-deep el-card-front{display:block;height:100%}:host ::ng-deep el-card-back{position:absolute;left:0;top:100%;width:100%;transition:top 0.5s}:host .reveal-button{cursor:pointer;position:absolute;right:0;bottom:0;transform:rotate(180deg);transition:transform 0.3s}:host(.revealed) .second-card-container{top:0;transition:none}:host(.revealed) .second-card-container ::ng-deep el-card-back{top:0}:host(.revealed) .reveal-button{transform:none}\n"]
    })
], ElRevealCardComponent);
export { ElRevealCardComponent };
//# sourceMappingURL=reveal-card.component.js.map