theme-lib
Version:
This is a simple example Angular Library published to npm.
113 lines • 8.95 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding } from '@angular/core';
/*
*
* Flip card example:
* @stacked-example(Showcase, flip-card/flip-card-showcase.component)
*
* As a content Flip card accepts two instances of `nb-card` - for front and back sides.
*
* Basic flip card configuration:
*
* ```html
* <nb-flip-card>
* <nb-card-front>
* <nb-card>
* <nb-card-body>
* Front
* </nb-card-body>
* </nb-card>
* </nb-card-front>
* <nb-card-back>
* <nb-card>
* <nb-card-body>
* Back
* </nb-card-body>
* </nb-card>
* </nb-card-back>
* </nb-flip-card>
* ```
*
* ### Installation
*
* Import `NbCardModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbCardModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Flip Card with header and footer:
* @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
*
* Colored flip-cards could be simply configured by providing a `status` property:
* @stacked-example(Colored Card, flip-card/flip-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, flip-card/flip-card-accents.component)
*
* @additional-example(Multiple Sizes, flip-card/flip-card-sizes.component)
*
*/
export class NbFlipCardComponent {
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;
}
/**
* @return {?}
*/
toggle() {
this.flipped = !this.flipped;
}
}
NbFlipCardComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-flip-card',
template: `
<div class="flipcard-body">
<div class="front-container">
<ng-content select="nb-card-front"></ng-content>
<a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
<i class="nb-arrow-dropleft" aria-hidden="true"></i>
</a>
</div>
<div class="back-container">
<ng-content select="nb-card-back"></ng-content>
<a *ngIf="showToggleButton" class="flip-button" (click)="toggle()">
<i class="nb-arrow-dropleft" aria-hidden="true"></i>
</a>
</div>
</div>
`,
styles: [":host{display:block;-webkit-perspective:1200px;perspective:1200px;position:relative}:host-context(.flipped) .flipcard-body{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}:host-context(.flipped) .flipcard-body .front-container{opacity:0;transition:opacity .25s;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host-context(.flipped) .flipcard-body .front-container .flip-button{opacity:0;z-index:-1}:host-context(.flipped) .flipcard-body .back-container{-webkit-backface-visibility:visible;backface-visibility:visible}.flipcard-body{display:flex;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;-webkit-transform-style:preserve-3d;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 .15s}.flipcard-body .front-container{-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s}.flipcard-body .back-container{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}"]
}] }
];
NbFlipCardComponent.propDecorators = {
flipped: [{ type: Input }, { type: HostBinding, args: ['class.flipped',] }],
showToggleButton: [{ type: Input }]
};
if (false) {
/** @type {?} */
NbFlipCardComponent.prototype.flipped;
/** @type {?} */
NbFlipCardComponent.prototype.showToggleButton;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3RoZW1lLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2NhcmQvZmxpcC1jYXJkL2ZsaXAtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUE2RTlELE1BQU0sT0FBTyxtQkFBbUI7SUFwQmhDOzs7OztRQTJCRSxZQUFPLEdBQVksS0FBSyxDQUFDOzs7OztRQU1oQixxQkFBZ0IsR0FBRyxJQUFJLENBQUM7SUFLbkMsQ0FBQzs7OztJQUhDLE1BQU07UUFDSixJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMvQixDQUFDOzs7WUFyQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUV4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7OztHQWVUOzthQUNGOzs7c0JBTUUsS0FBSyxZQUNMLFdBQVcsU0FBQyxlQUFlOytCQU8zQixLQUFLOzs7O0lBUk4sc0NBRXlCOztJQU16QiwrQ0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLypcclxuICpcclxuICogRmxpcCBjYXJkIGV4YW1wbGU6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoU2hvd2Nhc2UsIGZsaXAtY2FyZC9mbGlwLWNhcmQtc2hvd2Nhc2UuY29tcG9uZW50KVxyXG4gKlxyXG4gKiBBcyBhIGNvbnRlbnQgRmxpcCBjYXJkIGFjY2VwdHMgdHdvIGluc3RhbmNlcyBvZiBgbmItY2FyZGAgLSBmb3IgZnJvbnQgYW5kIGJhY2sgc2lkZXMuXHJcbiAqXHJcbiAqIEJhc2ljIGZsaXAgY2FyZCBjb25maWd1cmF0aW9uOlxyXG4gKlxyXG4gKiBgYGBodG1sXHJcbiAqIDxuYi1mbGlwLWNhcmQ+XHJcbiAqICAgPG5iLWNhcmQtZnJvbnQ+XHJcbiAqICAgICA8bmItY2FyZD5cclxuICogICAgICAgPG5iLWNhcmQtYm9keT5cclxuICogICAgICAgICBGcm9udFxyXG4gKiAgICAgICA8L25iLWNhcmQtYm9keT5cclxuICogICAgIDwvbmItY2FyZD5cclxuICogICA8L25iLWNhcmQtZnJvbnQ+XHJcbiAqICAgPG5iLWNhcmQtYmFjaz5cclxuICogICAgIDxuYi1jYXJkPlxyXG4gKiAgICAgICA8bmItY2FyZC1ib2R5PlxyXG4gKiAgICAgICAgIEJhY2tcclxuICogICAgICAgPC9uYi1jYXJkLWJvZHk+XHJcbiAqICAgICA8L25iLWNhcmQ+XHJcbiAqICAgPC9uYi1jYXJkLWJhY2s+XHJcbiAqIDwvbmItZmxpcC1jYXJkPlxyXG4gKiBgYGBcclxuICpcclxuICogIyMjIEluc3RhbGxhdGlvblxyXG4gKlxyXG4gKiBJbXBvcnQgYE5iQ2FyZE1vZHVsZWAgdG8geW91ciBmZWF0dXJlIG1vZHVsZS5cclxuICogYGBgdHNcclxuICogQE5nTW9kdWxlKHtcclxuICogICBpbXBvcnRzOiBbXHJcbiAqICAgXHQvLyAuLi5cclxuICogICAgIE5iQ2FyZE1vZHVsZSxcclxuICogICBdLFxyXG4gKiB9KVxyXG4gKiBleHBvcnQgY2xhc3MgUGFnZU1vZHVsZSB7IH1cclxuICogYGBgXHJcbiAqICMjIyBVc2FnZVxyXG4gKlxyXG4gKiBGbGlwIENhcmQgd2l0aCBoZWFkZXIgYW5kIGZvb3RlcjpcclxuICogQHN0YWNrZWQtZXhhbXBsZShXaXRoIEhlYWRlciAmIEZvb3RlciwgZmxpcC1jYXJkL2ZsaXAtY2FyZC1mdWxsLmNvbXBvbmVudC50cylcclxuICpcclxuICogQ29sb3JlZCBmbGlwLWNhcmRzIGNvdWxkIGJlIHNpbXBseSBjb25maWd1cmVkIGJ5IHByb3ZpZGluZyBhIGBzdGF0dXNgIHByb3BlcnR5OlxyXG4gKiBAc3RhY2tlZC1leGFtcGxlKENvbG9yZWQgQ2FyZCwgZmxpcC1jYXJkL2ZsaXAtY2FyZC1jb2xvcnMuY29tcG9uZW50KVxyXG4gKlxyXG4gKiBJdCBpcyBhbHNvIHBvc3NpYmxlIHRvIGFzc2lnbiBhbiBgYWNjZW50YCBwcm9wZXJ0eSBmb3IgYSBzbGlnaHQgY2FyZCBoaWdobGlnaHRcclxuICogYXMgd2VsbCBhcyBjb21iaW5lIGl0IHdpdGggYHN0YXR1c2A6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoQWNjZW50IENhcmQsIGZsaXAtY2FyZC9mbGlwLWNhcmQtYWNjZW50cy5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEBhZGRpdGlvbmFsLWV4YW1wbGUoTXVsdGlwbGUgU2l6ZXMsIGZsaXAtY2FyZC9mbGlwLWNhcmQtc2l6ZXMuY29tcG9uZW50KVxyXG4gKlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduYi1mbGlwLWNhcmQnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZsaXAtY2FyZC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IGNsYXNzPVwiZmxpcGNhcmQtYm9keVwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiZnJvbnQtY29udGFpbmVyXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibmItY2FyZC1mcm9udFwiPjwvbmctY29udGVudD5cclxuICAgICAgICA8YSAqbmdJZj1cInNob3dUb2dnbGVCdXR0b25cIiBjbGFzcz1cImZsaXAtYnV0dG9uXCIgKGNsaWNrKT1cInRvZ2dsZSgpXCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cIm5iLWFycm93LWRyb3BsZWZ0XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9pPlxyXG4gICAgICAgIDwvYT5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJiYWNrLWNvbnRhaW5lclwiPlxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm5iLWNhcmQtYmFja1wiPjwvbmctY29udGVudD5cclxuICAgICAgICA8YSAqbmdJZj1cInNob3dUb2dnbGVCdXR0b25cIiBjbGFzcz1cImZsaXAtYnV0dG9uXCIgKGNsaWNrKT1cInRvZ2dsZSgpXCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cIm5iLWFycm93LWRyb3BsZWZ0XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9pPlxyXG4gICAgICAgIDwvYT5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmJGbGlwQ2FyZENvbXBvbmVudCB7XHJcbiAgLypcclxuICAgKiBGbGlwIHN0YXRlXHJcbiAgICogQHR5cGUgYm9vbGVhblxyXG4gICAqL1xyXG4gIEBJbnB1dCgpXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mbGlwcGVkJylcclxuICBmbGlwcGVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIC8qXHJcbiAgICogU2hvdy9oaWRlIHRvZ2dsZSBidXR0b24gdG8gYmUgYWJsZSB0byBjb250cm9sIHRvZ2dsZSBmcm9tIHlvdXIgY29kZVxyXG4gICAqIEB0eXBlIHtib29sZWFufVxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHNob3dUb2dnbGVCdXR0b24gPSB0cnVlO1xyXG5cclxuICB0b2dnbGUoKSB7XHJcbiAgICB0aGlzLmZsaXBwZWQgPSAhdGhpcy5mbGlwcGVkO1xyXG4gIH1cclxufVxyXG4iXX0=