theme-lib
Version:
This is a simple example Angular Library published to npm.
105 lines • 7.89 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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 `nb-card` - for front and back sides.
*
* Basic reveal card configuration:
*
* ```html
* <nb-reveal-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-reveal-card>
* ```
*
* ### Installation
*
* Import `NbCardModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbCardModule,
* ],
* })
* 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)
*/
export class NbRevealCardComponent {
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;
}
/**
* @return {?}
*/
toggle() {
this.revealed = !this.revealed;
}
}
NbRevealCardComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-reveal-card',
template: `
<ng-content select="nb-card-front"></ng-content>
<div class="second-card-container">
<ng-content select="nb-card-back"></ng-content>
</div>
<a *ngIf="showToggleButton" class="reveal-button" (click)="toggle()">
<i class="nb-arrow-dropdown" aria-hidden="true"></i>
</a>
`,
styles: [":host{display:block;position:relative;overflow:hidden}:host.revealed .second-card-container{top:0;transition:none}:host.revealed .second-card-container /deep/ nb-card-back{top:0}:host.revealed .reveal-button{-webkit-transform:none;transform:none}:host /deep/ nb-card-front{display:block;height:100%}:host .second-card-container{position:absolute;top:100%;right:0;left:0;overflow:hidden;transition:top .5s}:host .second-card-container /deep/ nb-card-back{position:absolute;left:0;top:100%;width:100%;transition:top .5s}:host .reveal-button{cursor:pointer;position:absolute;right:0;bottom:0;-webkit-transform:rotate(180deg);transform:rotate(180deg);transition:transform .3s;transition:transform .3s,-webkit-transform .3s}"]
}] }
];
NbRevealCardComponent.propDecorators = {
revealed: [{ type: Input }, { type: HostBinding, args: ['class.revealed',] }],
showToggleButton: [{ type: Input }]
};
if (false) {
/** @type {?} */
NbRevealCardComponent.prototype.revealed;
/** @type {?} */
NbRevealCardComponent.prototype.showToggleButton;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmV2ZWFsLWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vdGhlbWUtbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvY2FyZC9yZXZlYWwtY2FyZC9yZXZlYWwtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQXFFOUQsTUFBTSxPQUFPLHFCQUFxQjtJQWJsQzs7Ozs7UUFvQkUsYUFBUSxHQUFZLEtBQUssQ0FBQzs7Ozs7UUFNakIscUJBQWdCLEdBQUcsSUFBSSxDQUFDO0lBS25DLENBQUM7Ozs7SUFIQyxNQUFNO1FBQ0osSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDakMsQ0FBQzs7O1lBOUJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO2dCQUUxQixRQUFRLEVBQUU7Ozs7Ozs7O0dBUVQ7O2FBQ0Y7Ozt1QkFNRSxLQUFLLFlBQ0wsV0FBVyxTQUFDLGdCQUFnQjsrQkFPNUIsS0FBSzs7OztJQVJOLHlDQUUwQjs7SUFNMUIsaURBQWlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbi8qXHJcbiAqXHJcbiAqIFJldmVhbCBjYXJkIGV4YW1wbGU6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoTXkgZXhhbXBsZSwgcmV2ZWFsLWNhcmQvcmV2ZWFsLWNhcmQtc2hvd2Nhc2UuY29tcG9uZW50KVxyXG4gKlxyXG4gKiBBcyBhIGNvbnRlbnQgUmV2ZWFsIGNhcmQgYWNjZXB0cyB0d28gaW5zdGFuY2VzIG9mIGBuYi1jYXJkYCAtIGZvciBmcm9udCBhbmQgYmFjayBzaWRlcy5cclxuICpcclxuICogQmFzaWMgcmV2ZWFsIGNhcmQgY29uZmlndXJhdGlvbjpcclxuICpcclxuICogYGBgaHRtbFxyXG4gKiA8bmItcmV2ZWFsLWNhcmQ+XHJcbiAqICAgPG5iLWNhcmQtZnJvbnQ+XHJcbiAqICAgICA8bmItY2FyZD5cclxuICogICAgICAgPG5iLWNhcmQtYm9keT5cclxuICogICAgICAgICBGcm9udFxyXG4gKiAgICAgICA8L25iLWNhcmQtYm9keT5cclxuICogICAgIDwvbmItY2FyZD5cclxuICogICA8L25iLWNhcmQtZnJvbnQ+XHJcbiAqICAgPG5iLWNhcmQtYmFjaz5cclxuICogICAgIDxuYi1jYXJkPlxyXG4gKiAgICAgICA8bmItY2FyZC1ib2R5PlxyXG4gKiAgICAgICAgIEJhY2tcclxuICogICAgICAgPC9uYi1jYXJkLWJvZHk+XHJcbiAqICAgICA8L25iLWNhcmQ+XHJcbiAqICAgPC9uYi1jYXJkLWJhY2s+XHJcbiAqIDwvbmItcmV2ZWFsLWNhcmQ+XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiAjIyMgSW5zdGFsbGF0aW9uXHJcbiAqXHJcbiAqIEltcG9ydCBgTmJDYXJkTW9kdWxlYCB0byB5b3VyIGZlYXR1cmUgbW9kdWxlLlxyXG4gKiBgYGB0c1xyXG4gKiBATmdNb2R1bGUoe1xyXG4gKiAgIGltcG9ydHM6IFtcclxuICogICBcdC8vIC4uLlxyXG4gKiAgICAgTmJDYXJkTW9kdWxlLFxyXG4gKiAgIF0sXHJcbiAqIH0pXHJcbiAqIGV4cG9ydCBjbGFzcyBQYWdlTW9kdWxlIHsgfVxyXG4gKiBgYGBcclxuICogIyMjIFVzYWdlXHJcbiAqXHJcbiAqIFJldmVhbCBDYXJkIHdpdGggaGVhZGVyIGFuZCBmb290ZXI6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoV2l0aCBIZWFkZXIgJiBGb290ZXIsIHJldmVhbC1jYXJkL3JldmVhbC1jYXJkLWZ1bGwuY29tcG9uZW50KVxyXG4gKlxyXG4gKiBDb2xvcmVkIHJldmVhbC1jYXJkcyBjb3VsZCBiZSBzaW1wbHkgY29uZmlndXJlZCBieSBwcm92aWRpbmcgYSBgc3RhdHVzYCBwcm9wZXJ0eTpcclxuICogQHN0YWNrZWQtZXhhbXBsZShDb2xvcmVkIENhcmQsIHJldmVhbC1jYXJkL3JldmVhbC1jYXJkLWNvbG9ycy5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEl0IGlzIGFsc28gcG9zc2libGUgdG8gYXNzaWduIGFuIGBhY2NlbnRgIHByb3BlcnR5IGZvciBhIHNsaWdodCBjYXJkIGhpZ2hsaWdodFxyXG4gKiBhcyB3ZWxsIGFzIGNvbWJpbmUgaXQgd2l0aCBgc3RhdHVzYDpcclxuICogQHN0YWNrZWQtZXhhbXBsZShBY2NlbnQgQ2FyZCwgcmV2ZWFsLWNhcmQvcmV2ZWFsLWNhcmQtYWNjZW50cy5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEBhZGRpdGlvbmFsLWV4YW1wbGUoTXVsdGlwbGUgU2l6ZXMsIHJldmVhbC1jYXJkL3JldmVhbC1jYXJkLXNpemVzLmNvbXBvbmVudClcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmItcmV2ZWFsLWNhcmQnLFxyXG4gIHN0eWxlVXJsczogWycuL3JldmVhbC1jYXJkLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm5iLWNhcmQtZnJvbnRcIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8ZGl2IGNsYXNzPVwic2Vjb25kLWNhcmQtY29udGFpbmVyXCI+XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm5iLWNhcmQtYmFja1wiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG4gICAgPGEgKm5nSWY9XCJzaG93VG9nZ2xlQnV0dG9uXCIgY2xhc3M9XCJyZXZlYWwtYnV0dG9uXCIgKGNsaWNrKT1cInRvZ2dsZSgpXCI+XHJcbiAgICAgIDxpIGNsYXNzPVwibmItYXJyb3ctZHJvcGRvd25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgICA8L2E+XHJcbiAgYCxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5iUmV2ZWFsQ2FyZENvbXBvbmVudCB7XHJcbiAgLypcclxuICAgKiBSZXZlYWwgc3RhdGVcclxuICAgKiBAdHlwZSBib29sZWFuXHJcbiAgICovXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJldmVhbGVkJylcclxuICByZXZlYWxlZDogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICAvKlxyXG4gICAqIFNob3cvaGlkZSB0b2dnbGUgYnV0dG9uIHRvIGJlIGFibGUgdG8gY29udHJvbCB0b2dnbGUgZnJvbSB5b3VyIGNvZGVcclxuICAgKiBAdHlwZSB7Ym9vbGVhbn1cclxuICAgKi9cclxuICBASW5wdXQoKSBzaG93VG9nZ2xlQnV0dG9uID0gdHJ1ZTtcclxuXHJcbiAgdG9nZ2xlKCkge1xyXG4gICAgdGhpcy5yZXZlYWxlZCA9ICF0aGlzLnJldmVhbGVkO1xyXG4gIH1cclxufVxyXG4iXX0=