ng-expandable-area
Version:
Expandable area for Angular4+
87 lines (86 loc) • 7.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, Input, Renderer2, ElementRef } from '@angular/core';
export 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 }]
};
function ExpandableAreaComponent_tsickle_Closure_declarations() {
/** @type {?} */
ExpandableAreaComponent.prototype.title;
/** @type {?} */
ExpandableAreaComponent.prototype.opened;
/** @type {?} */
ExpandableAreaComponent.prototype._elementRef;
/** @type {?} */
ExpandableAreaComponent.prototype.renderer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kYWJsZS1hcmVhLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWV4cGFuZGFibGUtYXJlYS8iLCJzb3VyY2VzIjpbImV4cGFuZGFibGUtYXJlYS9leHBhbmRhYmxlLWFyZWEuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBb0JoRixNQUFNOzs7OztJQUlKLFlBQ1UsYUFDQTtRQURBLGdCQUFXLEdBQVgsV0FBVztRQUNYLGFBQVEsR0FBUixRQUFRO0tBQ2I7Ozs7SUFFRSxRQUFRO1FBQ2IsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDaEIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7Ozs7O0lBR0ksUUFBUTtRQUNiLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ2hFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiO1FBQUMsSUFBSSxDQUFDLENBQUM7WUFDTixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjs7Ozs7SUFHSyxJQUFJO1FBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDLENBQUM7Ozs7O0lBRzNELElBQUk7UUFDVixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxRQUFRLENBQUMsQ0FBQzs7OztZQTlDdkUsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7OztDQWFYO2dCQUNDLE1BQU0sRUFBRSxDQUFDLHFqQkFBcWpCLENBQUM7YUFDaGtCOzs7O1lBbkJxQyxVQUFVO1lBQXJCLFNBQVM7OztvQkFxQmpDLEtBQUs7cUJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFJlbmRlcmVyMiwgRWxlbWVudFJlZiwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25nLWV4cGFuZGFibGUtYXJlYScsXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cImVwLWNvbGxhcHNlLXRpdGxlXCIgKGNsaWNrKT1cInNob3dBcmVhKClcIj5cbiAge3sgdGl0bGUgfX1cbiAgPGltZyBzcmM9XCJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSGRwWkhSb1BTSXlOQ0lnYUdWcFoyaFxuICAwUFNJeU5DSWdkbWxsZDBKdmVEMGlNQ0F3SURJMElESTBJajRLSUNBZ0lEeG5JR1pwYkd3OUltNXZibVVpSUdacGJHd3RjblZzWlRcbiAgMGlaWFpsYm05a1pDSStDaUFnSUNBZ0lDQWdQSEJoZEdnZ1ptbHNiRDBpSXpZME5UTTVOQ0lnWm1sc2JDMXlkV3hsUFNKdWIyNTZaXG4gIFhKdklpQmtQU0pOTVRVdU9EZzBJRGt1TWprMFRERXlJREV6TGpFM0lEZ3VNVEUySURrdU1qazBZUzQ1T1RjdU9UazNJREFnTVNBd1xuICBMVEV1TkRFZ01TNDBNV3cwTGpVNE55QTBMalU0T1dFeElERWdNQ0F3SURBZ01TNDBNVFFnTUd3MExqVTRPQzAwTGpVNE9HRXVPVGtcbiAgNExqazVPQ0F3SURBZ01DMHhMalF4TFRFdU5ERjZJaTgrQ2lBZ0lDQWdJQ0FnUEhCaGRHZ2daRDBpVFRBZ01HZ3lOSFl5TkVnd2VpXG4gIEl2UGdvZ0lDQWdQQzluUGdvOEwzTjJaejRLXCI+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJlcC1jb2xsYXBzZS1hcmVhXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuYCxcbiAgc3R5bGVzOiBbYC5lcC1jb2xsYXBzZS10aXRsZXtvcGFjaXR5Oi45O2ZvbnQtc2l6ZToxZW07Zm9udC13ZWlnaHQ6NzAwO2xpbmUtaGVpZ2h0OjEuMzM7dGV4dC1hbGlnbjpsZWZ0O2NvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06dXBwZXJjYXNlO3Bvc2l0aW9uOnJlbGF0aXZlO3BhZGRpbmctcmlnaHQ6MjhweDttYXJnaW46MTVweCAwfS5lcC1jb2xsYXBzZS10aXRsZTpob3ZlcntjdXJzb3I6cG9pbnRlcn0uZXAtY29sbGFwc2UtdGl0bGUgaW1ne3Bvc2l0aW9uOmFic29sdXRlO3dpZHRoOjI0cHg7aGVpZ2h0OjI0cHg7cmlnaHQ6MDstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoLTkwZGVnKTt0cmFuc2Zvcm06cm90YXRlKC05MGRlZyl9LmVwLWNvbGxhcHNlLWFyZWF7bWFyZ2luOjE1cHggMDtkaXNwbGF5Om5vbmV9LmVwLWNvbGxhcHNlLWFyZWEuYWN0aXZle2Rpc3BsYXk6YmxvY2t9Omhvc3QuYWN0aXZlIC5lcC1jb2xsYXBzZS1hcmVhe2Rpc3BsYXk6YmxvY2t9Omhvc3QuYWN0aXZlIC5lcC1jb2xsYXBzZS10aXRsZSBpbWd7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDApO3RyYW5zZm9ybTpyb3RhdGUoMCl9YF1cbn0pXG5leHBvcnQgY2xhc3MgRXhwYW5kYWJsZUFyZWFDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBwdWJsaWMgdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIG9wZW5lZDogYm9vbGVhbjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHsgfVxuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5vcGVuZWQpIHtcbiAgICAgIHRoaXMuc2hvdygpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBzaG93QXJlYSgpIHtcbiAgICBpZiAodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNsYXNzTGlzdC5jb250YWlucygnYWN0aXZlJykpIHtcbiAgICAgIHRoaXMuaGlkZSgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHNob3coKSB7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdhY3RpdmUnKTtcbiAgfVxuXG4gIHByaXZhdGUgaGlkZSgpIHtcbiAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2FjdGl2ZScpO1xuICB9XG5cbn1cbiJdfQ==