ng-expandable-area
Version:
Expandable area for Angular4+
106 lines (100 loc) • 8.72 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
*/
var ExpandableAreaComponent = /** @class */ (function () {
function ExpandableAreaComponent(_elementRef, renderer) {
this._elementRef = _elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ExpandableAreaComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.opened) {
this.show();
}
};
/**
* @return {?}
*/
ExpandableAreaComponent.prototype.showArea = /**
* @return {?}
*/
function () {
if (this._elementRef.nativeElement.classList.contains('active')) {
this.hide();
}
else {
this.show();
}
};
/**
* @return {?}
*/
ExpandableAreaComponent.prototype.show = /**
* @return {?}
*/
function () {
this.renderer.addClass(this._elementRef.nativeElement, 'active');
};
/**
* @return {?}
*/
ExpandableAreaComponent.prototype.hide = /**
* @return {?}
*/
function () {
this.renderer.removeClass(this._elementRef.nativeElement, 'active');
};
ExpandableAreaComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-expandable-area',
template: "<div class=\"ep-collapse-title\" (click)=\"showArea()\">\n {{ title }}\n <img src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h\n 0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT\n 0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0iIzY0NTM5NCIgZmlsbC1ydWxlPSJub256Z\n XJvIiBkPSJNMTUuODg0IDkuMjk0TDEyIDEzLjE3IDguMTE2IDkuMjk0YS45OTcuOTk3IDAgMSAw\n LTEuNDEgMS40MWw0LjU4NyA0LjU4OWExIDEgMCAwIDAgMS40MTQgMGw0LjU4OC00LjU4OGEuOTk\n 4Ljk5OCAwIDAgMC0xLjQxLTEuNDF6Ii8+CiAgICAgICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwei\n IvPgogICAgPC9nPgo8L3N2Zz4K\">\n</div>\n<div class=\"ep-collapse-area\">\n <ng-content></ng-content>\n</div>\n",
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 = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
ExpandableAreaComponent.propDecorators = {
title: [{ type: Input }],
opened: [{ type: Input }]
};
return ExpandableAreaComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ExpandableAreaModule = /** @class */ (function () {
function ExpandableAreaModule() {
}
ExpandableAreaModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [ExpandableAreaComponent],
exports: [ExpandableAreaComponent]
},] },
];
return ExpandableAreaModule;
}());
/**
* @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+XG48L2Rpdj5cbmAsXG4gIHN0eWxlczogW2AuZXAtY29sbGFwc2UtdGl0bGV7b3BhY2l0eTouOTtmb250LXNpemU6MWVtO2ZvbnQtd2VpZ2h0OjcwMDtsaW5lLWhlaWdodDoxLjMzO3RleHQtYWxpZ246bGVmdDtjb2xvcjojMDAwO3RleHQtdHJhbnNmb3JtOnVwcGVyY2FzZTtwb3NpdGlvbjpyZWxhdGl2ZTtwYWRkaW5nLXJpZ2h0OjI4cHg7bWFyZ2luOjE1cHggMH0uZXAtY29sbGFwc2UtdGl0bGU6aG92ZXJ7Y3Vyc29yOnBvaW50ZXJ9LmVwLWNvbGxhcHNlLXRpdGxlIGltZ3twb3NpdGlvbjphYnNvbHV0ZTt3aWR0aDoyNHB4O2hlaWdodDoyNHB4O3JpZ2h0OjA7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKC05MGRlZyk7dHJhbnNmb3JtOnJvdGF0ZSgtOTBkZWcpfS5lcC1jb2xsYXBzZS1hcmVhe21hcmdpbjoxNXB4IDA7ZGlzcGxheTpub25lfS5lcC1jb2xsYXBzZS1hcmVhLmFjdGl2ZXtkaXNwbGF5OmJsb2NrfTpob3N0LmFjdGl2ZSAuZXAtY29sbGFwc2UtYXJlYXtkaXNwbGF5OmJsb2NrfTpob3N0LmFjdGl2ZSAuZXAtY29sbGFwc2UtdGl0bGUgaW1ney13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKTt0cmFuc2Zvcm06cm90YXRlKDApfWBdXG59KVxuZXhwb3J0IGNsYXNzIEV4cGFuZGFibGVBcmVhQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgcHVibGljIHRpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBvcGVuZWQ6IGJvb2xlYW47XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcbiAgKSB7IH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMub3BlbmVkKSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2hvd0FyZWEoKSB7XG4gICAgaWYgKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QuY29udGFpbnMoJ2FjdGl2ZScpKSB7XG4gICAgICB0aGlzLmhpZGUoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zaG93KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzaG93KCkge1xuICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnYWN0aXZlJyk7XG4gIH1cblxuICBwcml2YXRlIGhpZGUoKSB7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdhY3RpdmUnKTtcbiAgfVxuXG59XG4iLCJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEV4cGFuZGFibGVBcmVhQ29tcG9uZW50IH0gZnJvbSAnLi9leHBhbmRhYmxlLWFyZWEuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtFeHBhbmRhYmxlQXJlYUNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtFeHBhbmRhYmxlQXJlYUNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgRXhwYW5kYWJsZUFyZWFNb2R1bGUgeyB9XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBO0lBd0JFLGlDQUNVLGFBQ0E7UUFEQSxnQkFBVyxHQUFYLFdBQVc7UUFDWCxhQUFRLEdBQVIsUUFBUTtLQUNiOzs7O0lBRUUsMENBQVE7Ozs7UUFDYixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjs7Ozs7SUFHSSwwQ0FBUTs7OztRQUNiLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUMvRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjthQUFNO1lBQ0wsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7Ozs7O0lBR0ssc0NBQUk7Ozs7UUFDVixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxRQUFRLENBQUMsQ0FBQzs7Ozs7SUFHM0Qsc0NBQUk7Ozs7UUFDVixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxRQUFRLENBQUMsQ0FBQzs7O2dCQTlDdkUsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRSwwckJBYVg7b0JBQ0MsTUFBTSxFQUFFLENBQUMscWpCQUFxakIsQ0FBQztpQkFDaGtCOzs7O2dCQW5CcUMsVUFBVTtnQkFBckIsU0FBUzs7O3dCQXFCakMsS0FBSzt5QkFDTCxLQUFLOztrQ0F0QlI7Ozs7Ozs7QUNBQTs7OztnQkFJQyxRQUFRLFNBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsWUFBWSxFQUFFLENBQUMsdUJBQXVCLENBQUM7b0JBQ3ZDLE9BQU8sRUFBRSxDQUFDLHVCQUF1QixDQUFDO2lCQUNuQzs7K0JBVkQ7Ozs7Ozs7Ozs7Ozs7OzsifQ==