import { Component, Input, HostBinding } from '@angular/core';
export class RFlipCardComponent {
    constructor() {
        /**
         * Flip state
         * @type boolean
         */
        this.flipped = false;
        /**
         * Show/hide toggle button to be able to control toggle from your code
         * @type {boolean}
         */
        this.showToggleButton = true;
    }
    toggle() {
        this.flipped = !this.flipped;
    }
}
RFlipCardComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-flip-card',
                template: `
    <div class="flipcard-body">
      <div class="front-container">
        <ng-content select="r-card-front"></ng-content>
        <a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
          <r-icon icon="chevron-left-outline" pack="r-components-essentials" aria-hidden="true"></r-icon>
        </a>
      </div>
      <div class="back-container">
        <ng-content select="r-card-back"></ng-content>
        <a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
          <r-icon icon="chevron-left-outline" pack="r-components-essentials" aria-hidden="true"></r-icon>
        </a>
      </div>
    </div>
  `,
                styles: [":host{display:block;perspective:1200px;position:relative}:host-context(.flipped) .flipcard-body{transform:rotateY(-180deg)}:host-context(.flipped) .flipcard-body .front-container{opacity:0;transition:opacity 0s .25s;backface-visibility:hidden;-webkit-backface-visibility:hidden}:host-context(.flipped) .flipcard-body .front-container .flip-button{opacity:0;z-index:-1}:host-context(.flipped) .flipcard-body .back-container{backface-visibility:visible;-webkit-backface-visibility:visible}.flipcard-body{display:flex;transition:transform .5s;transform-style:preserve-3d}.flipcard-body .back-container,.flipcard-body .front-container{flex:1}.flipcard-body .back-container .flip-button,.flipcard-body .front-container .flip-button{cursor:pointer;position:absolute;right:0;bottom:0;opacity:1;transition:opacity 0s .15s}.flipcard-body .front-container{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity 0s .2s}.flipcard-body .back-container{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg)}"]
            },] }
];
RFlipCardComponent.propDecorators = {
    flipped: [{ type: Input }, { type: HostBinding, args: ['class.flipped',] }],
    showToggleButton: [{ type: Input }]
};
//# sourceMappingURL=flip-card.component.js.map