ng-expandable-area
Version:
Expandable area for Angular4+
107 lines (101 loc) • 8.1 kB
JavaScript
import { Component, Input, Renderer2, ElementRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ExpandableAreaComponent {
/**
* @param {?} _elementRef
* @param {?} renderer
*/
constructor(_elementRef, renderer) {
this._elementRef = _elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.opened) {
this.show();
}
}
/**
* @return {?}
*/
showArea() {
if (this._elementRef.nativeElement.classList.contains('active')) {
this.hide();
}
else {
this.show();
}
}
/**
* @return {?}
*/
show() {
this.renderer.addClass(this._elementRef.nativeElement, 'active');
}
/**
* @return {?}
*/
hide() {
this.renderer.removeClass(this._elementRef.nativeElement, 'active');
}
}
ExpandableAreaComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-expandable-area',
template: `<div class="ep-collapse-title" (click)="showArea()">
{{ title }}
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h
0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT
0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0iIzY0NTM5NCIgZmlsbC1ydWxlPSJub256Z
XJvIiBkPSJNMTUuODg0IDkuMjk0TDEyIDEzLjE3IDguMTE2IDkuMjk0YS45OTcuOTk3IDAgMSAw
LTEuNDEgMS40MWw0LjU4NyA0LjU4OWExIDEgMCAwIDAgMS40MTQgMGw0LjU4OC00LjU4OGEuOTk
4Ljk5OCAwIDAgMC0xLjQxLTEuNDF6Ii8+CiAgICAgICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwei
IvPgogICAgPC9nPgo8L3N2Zz4K">
</div>
<div class="ep-collapse-area">
<ng-content></ng-content>
</div>
`,
styles: [`.ep-collapse-title{opacity:.9;font-size:1em;font-weight:700;line-height:1.33;text-align:left;color:#000;text-transform:uppercase;position:relative;padding-right:28px;margin:15px 0}.ep-collapse-title:hover{cursor:pointer}.ep-collapse-title img{position:absolute;width:24px;height:24px;right:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ep-collapse-area{margin:15px 0;display:none}.ep-collapse-area.active{display:block}:host.active .ep-collapse-area{display:block}:host.active .ep-collapse-title img{-webkit-transform:rotate(0);transform:rotate(0)}`]
},] },
];
/** @nocollapse */
ExpandableAreaComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
ExpandableAreaComponent.propDecorators = {
title: [{ type: Input }],
opened: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ExpandableAreaModule {
}
ExpandableAreaModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [ExpandableAreaComponent],
exports: [ExpandableAreaComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { ExpandableAreaModule, ExpandableAreaComponent as ɵa };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctZXhwYW5kYWJsZS1hcmVhLmpzLm1hcCIsInNvdXJjZXMiOlsibmc6Ly9uZy1leHBhbmRhYmxlLWFyZWEvZXhwYW5kYWJsZS1hcmVhL2V4cGFuZGFibGUtYXJlYS5jb21wb25lbnQudHMiLCJuZzovL25nLWV4cGFuZGFibGUtYXJlYS9leHBhbmRhYmxlLWFyZWEvZXhwYW5kYWJsZS1hcmVhLm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBSZW5kZXJlcjIsIEVsZW1lbnRSZWYsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZy1leHBhbmRhYmxlLWFyZWEnLFxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJlcC1jb2xsYXBzZS10aXRsZVwiIChjbGljayk9XCJzaG93QXJlYSgpXCI+XG4gIHt7IHRpdGxlIH19XG4gIDxpbWcgc3JjPVwiZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TkNJZ2FHVnBaMmhcbiAgMFBTSXlOQ0lnZG1sbGQwSnZlRDBpTUNBd0lESTBJREkwSWo0S0lDQWdJRHhuSUdacGJHdzlJbTV2Ym1VaUlHWnBiR3d0Y25Wc1pUXG4gIDBpWlhabGJtOWtaQ0krQ2lBZ0lDQWdJQ0FnUEhCaGRHZ2dabWxzYkQwaUl6WTBOVE01TkNJZ1ptbHNiQzF5ZFd4bFBTSnViMjU2WlxuICBYSnZJaUJrUFNKTk1UVXVPRGcwSURrdU1qazBUREV5SURFekxqRTNJRGd1TVRFMklEa3VNamswWVM0NU9UY3VPVGszSURBZ01TQXdcbiAgTFRFdU5ERWdNUzQwTVd3MExqVTROeUEwTGpVNE9XRXhJREVnTUNBd0lEQWdNUzQwTVRRZ01HdzBMalU0T0MwMExqVTRPR0V1T1RrXG4gIDRMams1T0NBd0lEQWdNQzB4TGpReExURXVOREY2SWk4K0NpQWdJQ0FnSUNBZ1BIQmhkR2dnWkQwaVRUQWdNR2d5TkhZeU5FZ3dlaVxuICBJdlBnb2dJQ0FnUEM5blBnbzhMM04yWno0S1wiPlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwiZXAtY29sbGFwc2UtYXJlYVwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbmAsXG4gIHN0eWxlczogW2AuZXAtY29sbGFwc2UtdGl0bGV7b3BhY2l0eTouOTtmb250LXNpemU6MWVtO2ZvbnQtd2VpZ2h0OjcwMDtsaW5lLWhlaWdodDoxLjMzO3RleHQtYWxpZ246bGVmdDtjb2xvcjojMDAwO3RleHQtdHJhbnNmb3JtOnVwcGVyY2FzZTtwb3NpdGlvbjpyZWxhdGl2ZTtwYWRkaW5nLXJpZ2h0OjI4cHg7bWFyZ2luOjE1cHggMH0uZXAtY29sbGFwc2UtdGl0bGU6aG92ZXJ7Y3Vyc29yOnBvaW50ZXJ9LmVwLWNvbGxhcHNlLXRpdGxlIGltZ3twb3NpdGlvbjphYnNvbHV0ZTt3aWR0aDoyNHB4O2hlaWdodDoyNHB4O3JpZ2h0OjA7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKC05MGRlZyk7dHJhbnNmb3JtOnJvdGF0ZSgtOTBkZWcpfS5lcC1jb2xsYXBzZS1hcmVhe21hcmdpbjoxNXB4IDA7ZGlzcGxheTpub25lfS5lcC1jb2xsYXBzZS1hcmVhLmFjdGl2ZXtkaXNwbGF5OmJsb2NrfTpob3N0LmFjdGl2ZSAuZXAtY29sbGFwc2UtYXJlYXtkaXNwbGF5OmJsb2NrfTpob3N0LmFjdGl2ZSAuZXAtY29sbGFwc2UtdGl0bGUgaW1ney13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKTt0cmFuc2Zvcm06cm90YXRlKDApfWBdXG59KVxuZXhwb3J0IGNsYXNzIEV4cGFuZGFibGVBcmVhQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgcHVibGljIHRpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBvcGVuZWQ6IGJvb2xlYW47XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcbiAgKSB7IH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMub3BlbmVkKSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2hvd0FyZWEoKSB7XG4gICAgaWYgKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QuY29udGFpbnMoJ2FjdGl2ZScpKSB7XG4gICAgICB0aGlzLmhpZGUoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zaG93KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzaG93KCkge1xuICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnYWN0aXZlJyk7XG4gIH1cblxuICBwcml2YXRlIGhpZGUoKSB7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdhY3RpdmUnKTtcbiAgfVxuXG59XG4iLCJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEV4cGFuZGFibGVBcmVhQ29tcG9uZW50IH0gZnJvbSAnLi9leHBhbmRhYmxlLWFyZWEuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtFeHBhbmRhYmxlQXJlYUNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtFeHBhbmRhYmxlQXJlYUNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgRXhwYW5kYWJsZUFyZWFNb2R1bGUgeyB9XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBOzs7OztJQXdCRSxZQUNVLGFBQ0E7UUFEQSxnQkFBVyxHQUFYLFdBQVc7UUFDWCxhQUFRLEdBQVIsUUFBUTtLQUNiOzs7O0lBRUUsUUFBUTtRQUNiLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNmLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiOzs7OztJQUdJLFFBQVE7UUFDYixJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDL0QsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7YUFBTTtZQUNMLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiOzs7OztJQUdLLElBQUk7UUFDVixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxRQUFRLENBQUMsQ0FBQzs7Ozs7SUFHM0QsSUFBSTtRQUNWLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLFFBQVEsQ0FBQyxDQUFDOzs7O1lBOUN2RSxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7O0NBYVg7Z0JBQ0MsTUFBTSxFQUFFLENBQUMscWpCQUFxakIsQ0FBQzthQUNoa0I7Ozs7WUFuQnFDLFVBQVU7WUFBckIsU0FBUzs7O29CQXFCakMsS0FBSztxQkFDTCxLQUFLOzs7Ozs7O0FDdEJSOzs7WUFJQyxRQUFRLFNBQUM7Z0JBQ1IsT0FBTyxFQUFFO29CQUNQLFlBQVk7aUJBQ2I7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsdUJBQXVCLENBQUM7Z0JBQ3ZDLE9BQU8sRUFBRSxDQUFDLHVCQUF1QixDQUFDO2FBQ25DOzs7Ozs7Ozs7Ozs7Ozs7In0=