theme-lib
Version:
This is a simple example Angular Library published to npm.
103 lines • 9.24 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)
*
*/
var NbFlipCardComponent = /** @class */ (function () {
function NbFlipCardComponent() {
/*
* 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 {?}
*/
NbFlipCardComponent.prototype.toggle = /**
* @return {?}
*/
function () {
this.flipped = !this.flipped;
};
NbFlipCardComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-flip-card',
template: "\n <div class=\"flipcard-body\">\n <div class=\"front-container\">\n <ng-content select=\"nb-card-front\"></ng-content>\n <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n </a>\n </div>\n <div class=\"back-container\">\n <ng-content select=\"nb-card-back\"></ng-content>\n <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n </a>\n </div>\n </div>\n ",
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 }]
};
return NbFlipCardComponent;
}());
export { NbFlipCardComponent };
if (false) {
/** @type {?} */
NbFlipCardComponent.prototype.flipped;
/** @type {?} */
NbFlipCardComponent.prototype.showToggleButton;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3RoZW1lLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2NhcmQvZmxpcC1jYXJkL2ZsaXAtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUF5RDlEO0lBQUE7Ozs7O1FBMkJFLFlBQU8sR0FBWSxLQUFLLENBQUM7Ozs7O1FBTWhCLHFCQUFnQixHQUFHLElBQUksQ0FBQztJQUtuQyxDQUFDOzs7O0lBSEMsb0NBQU07OztJQUFOO1FBQ0UsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDL0IsQ0FBQzs7Z0JBckNGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFFeEIsUUFBUSxFQUFFLCtsQkFlVDs7aUJBQ0Y7OzswQkFNRSxLQUFLLFlBQ0wsV0FBVyxTQUFDLGVBQWU7bUNBTzNCLEtBQUs7O0lBS1IsMEJBQUM7Q0FBQSxBQXRDRCxJQXNDQztTQWxCWSxtQkFBbUI7OztJQUs5QixzQ0FFeUI7O0lBTXpCLCtDQUFpQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEhvc3RCaW5kaW5nIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG4vKlxyXG4gKlxyXG4gKiBGbGlwIGNhcmQgZXhhbXBsZTpcclxuICogQHN0YWNrZWQtZXhhbXBsZShTaG93Y2FzZSwgZmxpcC1jYXJkL2ZsaXAtY2FyZC1zaG93Y2FzZS5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEFzIGEgY29udGVudCBGbGlwIGNhcmQgYWNjZXB0cyB0d28gaW5zdGFuY2VzIG9mIGBuYi1jYXJkYCAtIGZvciBmcm9udCBhbmQgYmFjayBzaWRlcy5cclxuICpcclxuICogQmFzaWMgZmxpcCBjYXJkIGNvbmZpZ3VyYXRpb246XHJcbiAqXHJcbiAqIGBgYGh0bWxcclxuICogPG5iLWZsaXAtY2FyZD5cclxuICogICA8bmItY2FyZC1mcm9udD5cclxuICogICAgIDxuYi1jYXJkPlxyXG4gKiAgICAgICA8bmItY2FyZC1ib2R5PlxyXG4gKiAgICAgICAgIEZyb250XHJcbiAqICAgICAgIDwvbmItY2FyZC1ib2R5PlxyXG4gKiAgICAgPC9uYi1jYXJkPlxyXG4gKiAgIDwvbmItY2FyZC1mcm9udD5cclxuICogICA8bmItY2FyZC1iYWNrPlxyXG4gKiAgICAgPG5iLWNhcmQ+XHJcbiAqICAgICAgIDxuYi1jYXJkLWJvZHk+XHJcbiAqICAgICAgICAgQmFja1xyXG4gKiAgICAgICA8L25iLWNhcmQtYm9keT5cclxuICogICAgIDwvbmItY2FyZD5cclxuICogICA8L25iLWNhcmQtYmFjaz5cclxuICogPC9uYi1mbGlwLWNhcmQ+XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiAjIyMgSW5zdGFsbGF0aW9uXHJcbiAqXHJcbiAqIEltcG9ydCBgTmJDYXJkTW9kdWxlYCB0byB5b3VyIGZlYXR1cmUgbW9kdWxlLlxyXG4gKiBgYGB0c1xyXG4gKiBATmdNb2R1bGUoe1xyXG4gKiAgIGltcG9ydHM6IFtcclxuICogICBcdC8vIC4uLlxyXG4gKiAgICAgTmJDYXJkTW9kdWxlLFxyXG4gKiAgIF0sXHJcbiAqIH0pXHJcbiAqIGV4cG9ydCBjbGFzcyBQYWdlTW9kdWxlIHsgfVxyXG4gKiBgYGBcclxuICogIyMjIFVzYWdlXHJcbiAqXHJcbiAqIEZsaXAgQ2FyZCB3aXRoIGhlYWRlciBhbmQgZm9vdGVyOlxyXG4gKiBAc3RhY2tlZC1leGFtcGxlKFdpdGggSGVhZGVyICYgRm9vdGVyLCBmbGlwLWNhcmQvZmxpcC1jYXJkLWZ1bGwuY29tcG9uZW50LnRzKVxyXG4gKlxyXG4gKiBDb2xvcmVkIGZsaXAtY2FyZHMgY291bGQgYmUgc2ltcGx5IGNvbmZpZ3VyZWQgYnkgcHJvdmlkaW5nIGEgYHN0YXR1c2AgcHJvcGVydHk6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoQ29sb3JlZCBDYXJkLCBmbGlwLWNhcmQvZmxpcC1jYXJkLWNvbG9ycy5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEl0IGlzIGFsc28gcG9zc2libGUgdG8gYXNzaWduIGFuIGBhY2NlbnRgIHByb3BlcnR5IGZvciBhIHNsaWdodCBjYXJkIGhpZ2hsaWdodFxyXG4gKiBhcyB3ZWxsIGFzIGNvbWJpbmUgaXQgd2l0aCBgc3RhdHVzYDpcclxuICogQHN0YWNrZWQtZXhhbXBsZShBY2NlbnQgQ2FyZCwgZmxpcC1jYXJkL2ZsaXAtY2FyZC1hY2NlbnRzLmNvbXBvbmVudClcclxuICpcclxuICogQGFkZGl0aW9uYWwtZXhhbXBsZShNdWx0aXBsZSBTaXplcywgZmxpcC1jYXJkL2ZsaXAtY2FyZC1zaXplcy5jb21wb25lbnQpXHJcbiAqXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25iLWZsaXAtY2FyZCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZmxpcC1jYXJkLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXYgY2xhc3M9XCJmbGlwY2FyZC1ib2R5XCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJmcm9udC1jb250YWluZXJcIj5cclxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJuYi1jYXJkLWZyb250XCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDxhICpuZ0lmPVwic2hvd1RvZ2dsZUJ1dHRvblwiIGNsYXNzPVwiZmxpcC1idXR0b25cIiAoY2xpY2spPVwidG9nZ2xlKClcIj5cclxuICAgICAgICAgIDxpIGNsYXNzPVwibmItYXJyb3ctZHJvcGxlZnRcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgICAgICAgPC9hPlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cImJhY2stY29udGFpbmVyXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibmItY2FyZC1iYWNrXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDxhICpuZ0lmPVwic2hvd1RvZ2dsZUJ1dHRvblwiIGNsYXNzPVwiZmxpcC1idXR0b25cIiAoY2xpY2spPVwidG9nZ2xlKClcIj5cclxuICAgICAgICAgIDxpIGNsYXNzPVwibmItYXJyb3ctZHJvcGxlZnRcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgICAgICAgPC9hPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIGAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOYkZsaXBDYXJkQ29tcG9uZW50IHtcclxuICAvKlxyXG4gICAqIEZsaXAgc3RhdGVcclxuICAgKiBAdHlwZSBib29sZWFuXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmZsaXBwZWQnKVxyXG4gIGZsaXBwZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgLypcclxuICAgKiBTaG93L2hpZGUgdG9nZ2xlIGJ1dHRvbiB0byBiZSBhYmxlIHRvIGNvbnRyb2wgdG9nZ2xlIGZyb20geW91ciBjb2RlXHJcbiAgICogQHR5cGUge2Jvb2xlYW59XHJcbiAgICovXHJcbiAgQElucHV0KCkgc2hvd1RvZ2dsZUJ1dHRvbiA9IHRydWU7XHJcblxyXG4gIHRvZ2dsZSgpIHtcclxuICAgIHRoaXMuZmxpcHBlZCA9ICF0aGlzLmZsaXBwZWQ7XHJcbiAgfVxyXG59XHJcbiJdfQ==