ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
96 lines (94 loc) • 10.3 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
* Created by jayhamilton on 7/11/17.
*/
export class FacetComponent {
constructor() {
this.tagSelectEvent = new EventEmitter();
}
ngOnInit() {
if (this.openFacet) {
this.facetOpen = 'in';
}
else {
this.facetOpen = 'out';
}
}
toggleAccordion() {
this.facetOpen = this.facetOpen === 'out' ? 'in' : 'out';
}
tagSelect(tagName) {
this.tagSelectEvent.emit(tagName);
}
}
FacetComponent.decorators = [
{ type: Component, args: [{
moduleId: module.id,
selector: 'dashboard-facet',
template: `
<hr style='max-width: 100%; margin-left:0;'>
<br>
<div class='ui container grid'>
<div class='eight wide column' style="margin-left: 0 !important;padding-left: 0 !important;">
<h4>{{facet.name}}</h4>
</div>
<div class='eight wide column'>
<div class='ui top right attached label' style='background-color: whitesmoke'>
<i
class='chevron icon' [ngClass]= "{'up': facetOpen == 'in', 'down': facetOpen=='out'}"
(click)='toggleAccordion()'
style='color:grey'>
</i>
</div>
</div>
</div>
<div []='facetOpen'>
<table class='ui very basic table' []='facetOpen'>
<tbody>
<tr *ngFor='let tag of facet.tags'>
<td style="width: 35px !important">
<mat-checkbox (click)='tagSelect(tag.name)'></mat-checkbox>
<!--<input type='checkbox' (click)='tagSelect(tag.name)'>-->
</td>
<td style='color:grey'>{{tag.name}} ( {{tag.count}} )</td>
</tr>
</tbody>
</table>
</div>
<br>
`,
animations: [
trigger('accordion', [
state('in', style({
height: '*'
})),
state('out', style({
opacity: '0',
height: '0px'
})),
transition('in => out', animate('700ms ease-in-out')),
transition('out => in', animate('300ms ease-in-out'))
]),
trigger('accordion2', [
state('in', style({
height: '*'
})),
state('out', style({
opacity: '0',
height: '0px'
})),
transition('in => out', animate('300ms ease-in-out')),
transition('out => in', animate('800ms ease-in-out'))
])
],
styles: [".ui.avatar.image{height:4em!important;width:4.4em!important}hr{background:hsla(0,0%,43.1%,.1)!important;border:0;color:hsla(0,0%,43.1%,.1)!important;font-size:0;height:2px!important}.ui.input.focus input,.ui.input input:focus{border-color:#e9e9e9!important}h3,h4{color:rgba(66,66,66,.74)!important;font-size:.85em;font-weight:400!important}.segment,.ui.basic.segment{border-radius:5px!important}.ui.table tr td{border-top:none!important}.ui.table td{font-size:.8em;padding:.3em!important}"]
},] }
];
FacetComponent.ctorParameters = () => [];
FacetComponent.propDecorators = {
tagSelectEvent: [{ type: Output }],
facet: [{ type: Input }],
openFacet: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFjZXQtY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9iZW5saS93b3Jrc3BhY2VzL25neC1keW5hbWljLWRhc2hib2FyZC1mcmFtZXdvcmsvcHJvamVjdHMvbmd4LWR5bmFtaWMtZGFzaGJvYXJkL3NyYy8iLCJzb3VyY2VzIjpbImRhc2hib2FyZC9mYWNldC9mYWNldC1jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUU3RSxPQUFPLEVBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBRS9FOztHQUVHO0FBaUVILE1BQU0sT0FBTyxjQUFjO0lBT3ZCO1FBTlUsbUJBQWMsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQU9qRSxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN6QjthQUFNO1lBQ0gsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7U0FDMUI7SUFDTCxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBRTdELENBQUM7SUFFRCxTQUFTLENBQUMsT0FBTztRQUNiLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3RDLENBQUM7OztZQXpGSixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLE1BQU0sQ0FBQyxFQUFFO2dCQUNuQixRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQWlDVDtnQkFFRCxVQUFVLEVBQUU7b0JBRVIsT0FBTyxDQUFDLFdBQVcsRUFBRTt3QkFDakIsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUM7NEJBQ2QsTUFBTSxFQUFFLEdBQUc7eUJBQ2QsQ0FBQyxDQUFDO3dCQUNILEtBQUssQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDOzRCQUNmLE9BQU8sRUFBRSxHQUFHOzRCQUNaLE1BQU0sRUFBRSxLQUFLO3lCQUNoQixDQUFDLENBQUM7d0JBQ0gsVUFBVSxDQUFDLFdBQVcsRUFBRSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQzt3QkFDckQsVUFBVSxDQUFDLFdBQVcsRUFBRSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQztxQkFDeEQsQ0FBQztvQkFDRixPQUFPLENBQUMsWUFBWSxFQUFFO3dCQUNsQixLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQzs0QkFDZCxNQUFNLEVBQUUsR0FBRzt5QkFDZCxDQUFDLENBQUM7d0JBQ0gsS0FBSyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUM7NEJBQ2YsT0FBTyxFQUFFLEdBQUc7NEJBQ1osTUFBTSxFQUFFLEtBQUs7eUJBQ2hCLENBQUMsQ0FBQzt3QkFDSCxVQUFVLENBQUMsV0FBVyxFQUFFLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO3dCQUNyRCxVQUFVLENBQUMsV0FBVyxFQUFFLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO3FCQUN4RCxDQUFDO2lCQUNMOzthQUNKOzs7OzZCQUVJLE1BQU07b0JBQ04sS0FBSzt3QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtGYWNldH0gZnJvbSAnLi9mYWNldC1tb2RlbCc7XG5pbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge2FuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlcn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbi8qKlxuICogQ3JlYXRlZCBieSBqYXloYW1pbHRvbiBvbiA3LzExLzE3LlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBtb2R1bGVJZDogbW9kdWxlLmlkLFxuICAgIHNlbGVjdG9yOiAnZGFzaGJvYXJkLWZhY2V0JyxcbiAgICB0ZW1wbGF0ZTogYFxuXG4gICAgICAgIDxociBzdHlsZT0nbWF4LXdpZHRoOiAxMDAlOyBtYXJnaW4tbGVmdDowOyc+XG4gICAgICAgIDxicj5cbiAgICAgICAgPGRpdiBjbGFzcz0ndWkgY29udGFpbmVyIGdyaWQnPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz0nZWlnaHQgd2lkZSBjb2x1bW4nIHN0eWxlPVwibWFyZ2luLWxlZnQ6IDAgIWltcG9ydGFudDtwYWRkaW5nLWxlZnQ6IDAgIWltcG9ydGFudDtcIj5cbiAgICAgICAgICAgICAgICA8aDQ+e3tmYWNldC5uYW1lfX08L2g0PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPSdlaWdodCB3aWRlIGNvbHVtbic+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ndWkgdG9wIHJpZ2h0IGF0dGFjaGVkIGxhYmVsJyBzdHlsZT0nYmFja2dyb3VuZC1jb2xvcjogd2hpdGVzbW9rZSc+XG4gICAgICAgICAgICAgICAgICAgIDxpXG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz0nY2hldnJvbiBpY29uJyBbbmdDbGFzc109IFwieyd1cCc6IGZhY2V0T3BlbiA9PSAnaW4nLCAnZG93bic6IGZhY2V0T3Blbj09J291dCd9XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9J3RvZ2dsZUFjY29yZGlvbigpJ1xuICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU9J2NvbG9yOmdyZXknPlxuICAgICAgICAgICAgICAgICAgICA8L2k+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgW0BhY2NvcmRpb25dPSdmYWNldE9wZW4nPlxuICAgICAgICAgICAgPHRhYmxlIGNsYXNzPSd1aSB2ZXJ5IGJhc2ljIHRhYmxlJyBbQGFjY29yZGlvbjJdPSdmYWNldE9wZW4nPlxuICAgICAgICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgICAgICA8dHIgKm5nRm9yPSdsZXQgdGFnIG9mIGZhY2V0LnRhZ3MnPlxuICAgICAgICAgICAgICAgICAgICA8dGQgc3R5bGU9XCJ3aWR0aDogMzVweCAhaW1wb3J0YW50XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWNoZWNrYm94IChjbGljayk9J3RhZ1NlbGVjdCh0YWcubmFtZSknPjwvbWF0LWNoZWNrYm94PlxuICAgICAgICAgICAgICAgICAgICAgICAgPCEtLTxpbnB1dCB0eXBlPSdjaGVja2JveCcgKGNsaWNrKT0ndGFnU2VsZWN0KHRhZy5uYW1lKSc+LS0+XG4gICAgICAgICAgICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT0nY29sb3I6Z3JleSc+e3t0YWcubmFtZX19ICZuYnNwOygge3t0YWcuY291bnR9fSApPC90ZD5cbiAgICAgICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgICAgICA8L3RhYmxlPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGJyPlxuXG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMuY3NzJ10sXG4gICAgYW5pbWF0aW9uczogW1xuXG4gICAgICAgIHRyaWdnZXIoJ2FjY29yZGlvbicsIFtcbiAgICAgICAgICAgIHN0YXRlKCdpbicsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6ICcqJ1xuICAgICAgICAgICAgfSkpLFxuICAgICAgICAgICAgc3RhdGUoJ291dCcsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAnMCcsXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAnMHB4J1xuICAgICAgICAgICAgfSkpLFxuICAgICAgICAgICAgdHJhbnNpdGlvbignaW4gPT4gb3V0JywgYW5pbWF0ZSgnNzAwbXMgZWFzZS1pbi1vdXQnKSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCdvdXQgPT4gaW4nLCBhbmltYXRlKCczMDBtcyBlYXNlLWluLW91dCcpKVxuICAgICAgICBdKSxcbiAgICAgICAgdHJpZ2dlcignYWNjb3JkaW9uMicsIFtcbiAgICAgICAgICAgIHN0YXRlKCdpbicsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6ICcqJ1xuICAgICAgICAgICAgfSkpLFxuICAgICAgICAgICAgc3RhdGUoJ291dCcsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAnMCcsXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAnMHB4J1xuICAgICAgICAgICAgfSkpLFxuICAgICAgICAgICAgdHJhbnNpdGlvbignaW4gPT4gb3V0JywgYW5pbWF0ZSgnMzAwbXMgZWFzZS1pbi1vdXQnKSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCdvdXQgPT4gaW4nLCBhbmltYXRlKCc4MDBtcyBlYXNlLWluLW91dCcpKVxuICAgICAgICBdKVxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgRmFjZXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBPdXRwdXQoKSB0YWdTZWxlY3RFdmVudDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gICAgQElucHV0KCkgZmFjZXQ6IEZhY2V0O1xuICAgIEBJbnB1dCgpIG9wZW5GYWNldDogYm9vbGVhbjtcblxuICAgIGZhY2V0T3Blbjogc3RyaW5nO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIGlmICh0aGlzLm9wZW5GYWNldCkge1xuICAgICAgICAgICAgdGhpcy5mYWNldE9wZW4gPSAnaW4nO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5mYWNldE9wZW4gPSAnb3V0JztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHRvZ2dsZUFjY29yZGlvbigpIHtcbiAgICAgICAgdGhpcy5mYWNldE9wZW4gPSB0aGlzLmZhY2V0T3BlbiA9PT0gJ291dCcgPyAnaW4nIDogJ291dCc7XG5cbiAgICB9XG5cbiAgICB0YWdTZWxlY3QodGFnTmFtZSkge1xuICAgICAgICB0aGlzLnRhZ1NlbGVjdEV2ZW50LmVtaXQodGFnTmFtZSk7XG4gICAgfVxuXG59XG4iXX0=