import { Component, Input, HostBinding } from '@angular/core';
export class RRevealCardComponent {
    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;
    }
}
RRevealCardComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-reveal-card',
                template: `
    <ng-content select="r-card-front"></ng-content>
    <div class="second-card-container">
      <ng-content select="r-card-back"></ng-content>
    </div>
    <a *ngIf="showToggleButton" class="reveal-button" (click)="toggle()">
      <r-icon icon="chevron-down-outline" pack="r-components-essentials" aria-hidden="true"></r-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 .5s}:host ::ng-deep r-card-back r-card,:host ::ng-deep r-card-front r-card{box-shadow:none;margin:0}:host ::ng-deep r-card-front{display:block;height:100%}:host ::ng-deep r-card-back{position:absolute;left:0;top:100%;width:100%;transition:top .5s}:host .reveal-button{cursor:pointer;position:absolute;right:0;bottom:0;transform:rotate(180deg);transition:transform .3s}:host(.revealed) .second-card-container{top:0;transition:none}:host(.revealed) .second-card-container ::ng-deep r-card-back{top:0}:host(.revealed) .reveal-button{transform:none}"]
            },] }
];
RRevealCardComponent.propDecorators = {
    revealed: [{ type: Input }, { type: HostBinding, args: ['class.revealed',] }],
    showToggleButton: [{ type: Input }]
};
//# sourceMappingURL=reveal-card.component.js.map