@angular-generic-table/core
Version:
A generic table component for Angular
178 lines (177 loc) • 13.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import * as Tether from 'tether';
export class GtDropdownComponent {
/**
* @param {?} renderer
*/
constructor(renderer) {
this.renderer = renderer;
this.selectedChange = new EventEmitter();
this.active = false;
this.state = new Subject();
}
/**
* @return {?}
*/
get selected() {
return this._selected;
}
/**
* @param {?} selection
* @return {?}
*/
set selected(selection) {
this._selected = selection;
}
/**
* @param {?} option
* @return {?}
*/
select(option) {
this.active = false;
this.state.next(this.active);
if (this._selected !== option) {
this.selectedChange.emit(option);
}
}
/**
* @return {?}
*/
toggleDropdown() {
this.active = !this.active;
setTimeout(() => {
this.state.next(this.active);
}, 0);
}
/**
* @return {?}
*/
ngOnInit() {
this.state.subscribe(state => {
if (state) {
this.tether = new Tether({
element: '#' + this.id + '_menu',
target: '#' + this.id,
attachment: 'top left',
targetAttachment: 'bottom left',
constraints: [
{
to: 'window',
attachment: 'together'
}
]
});
this.tether.position();
// set up click listener and listen for click outside dropdown
this.clickListener = this.renderer.listen('document', 'click', (event) => {
this.active = false;
this.state.next(this.active);
});
// set up keyboard listener and listen for escape key up
this.keyupListener = this.renderer.listen('document', 'keyup', (event) => {
switch (event.key) {
case 'Escape':
this.active = false;
this.state.next(this.active);
break;
}
});
}
else {
this.tether.destroy();
this.removeListeners();
}
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.removeListeners();
}
/**
* @return {?}
*/
removeListeners() {
if (this.clickListener) {
this.clickListener();
}
if (this.keyupListener) {
this.keyupListener();
}
}
}
GtDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'gt-dropdown',
template: `
<div class="dropdown gt-dropdown" [ngClass]="{'show':active}" [attr.id]="id">
<div class="dropdown-toggle" (click)="toggleDropdown()" [attr.aria-expanded]="active">{{selected}}</div>
<div class="gt-dropdown-menu dropdown-menu" *ngIf="active" [ngClass]="{'show':active}" [attr.id]="id+'_menu'">
<button *ngFor="let option of options;" class="dropdown-item" (click)="select(option)" [ngClass]="{'active':option === selected}">{{option}}</button>
</div>
</div>
`,
styles: [
`
.gt-dropdown .dropdown-toggle {
cursor: pointer;
}
.gt-dropdown .dropdown-toggle::after {
transition: opacity 0.4s ease-in-out;
opacity: 0;
}
.gt-dropdown .dropdown-toggle:hover::after {
opacity: 1;
}
`
]
},] },
];
/** @nocollapse */
GtDropdownComponent.ctorParameters = () => [
{ type: Renderer2, },
];
GtDropdownComponent.propDecorators = {
"selected": [{ type: Input },],
"options": [{ type: Input },],
"id": [{ type: Input },],
"selectedChange": [{ type: Output },],
};
function GtDropdownComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
GtDropdownComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
GtDropdownComponent.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
GtDropdownComponent.propDecorators;
/** @type {?} */
GtDropdownComponent.prototype._selected;
/** @type {?} */
GtDropdownComponent.prototype.options;
/** @type {?} */
GtDropdownComponent.prototype.id;
/** @type {?} */
GtDropdownComponent.prototype.selectedChange;
/** @type {?} */
GtDropdownComponent.prototype.active;
/** @type {?} */
GtDropdownComponent.prototype.state;
/** @type {?} */
GtDropdownComponent.prototype.tether;
/** @type {?} */
GtDropdownComponent.prototype.clickListener;
/** @type {?} */
GtDropdownComponent.prototype.keyupListener;
/** @type {?} */
GtDropdownComponent.prototype.renderer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3QtZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFuZ3VsYXItZ2VuZXJpYy10YWJsZS9jb3JlLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9ndC1kcm9wZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBQ04sU0FBUyxFQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDdkMsT0FBTyxLQUFLLE1BQU0sTUFBTSxRQUFRLENBQUM7QUEyQmpDLE1BQU07Ozs7SUFvQkwsWUFBb0IsUUFBbUI7UUFBbkIsYUFBUSxHQUFSLFFBQVEsQ0FBVzs4QkFSTyxJQUFJLFlBQVksRUFBRTtzQkFFdkQsS0FBSztxQkFDWSxJQUFJLE9BQU8sRUFBRTtLQUtJOzs7O0lBbkIzQyxJQUFJLFFBQVE7UUFDWCxNQUFNLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztLQUN0Qjs7Ozs7UUFJRyxRQUFRLENBQUMsU0FBUztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQzs7Ozs7O0lBYzVCLE1BQU0sQ0FBQyxNQUFXO1FBQ2pCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUM3QixFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDL0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDakM7S0FDRDs7OztJQUVELGNBQWM7UUFDYixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2YsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQzdCLEVBQUUsQ0FBQyxDQUFDLENBQUM7S0FDTjs7OztJQUVELFFBQVE7UUFDUCxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUM1QixFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO2dCQUNYLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxNQUFNLENBQUM7b0JBQ3hCLE9BQU8sRUFBRSxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxPQUFPO29CQUNoQyxNQUFNLEVBQUUsR0FBRyxHQUFHLElBQUksQ0FBQyxFQUFFO29CQUNyQixVQUFVLEVBQUUsVUFBVTtvQkFDdEIsZ0JBQWdCLEVBQUUsYUFBYTtvQkFDL0IsV0FBVyxFQUFFO3dCQUNaOzRCQUNDLEVBQUUsRUFBRSxRQUFROzRCQUNaLFVBQVUsRUFBRSxVQUFVO3lCQUN0QjtxQkFDRDtpQkFDRCxDQUFDLENBQUM7Z0JBRUgsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLEVBQUUsQ0FBQzs7Z0JBR3ZCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQ3hDLFVBQVUsRUFDVixPQUFPLEVBQ1AsQ0FBQyxLQUFpQixFQUFFLEVBQUU7b0JBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO29CQUNwQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7aUJBQzdCLENBQ0QsQ0FBQzs7Z0JBR0YsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FDeEMsVUFBVSxFQUNWLE9BQU8sRUFDUCxDQUFDLEtBQW9CLEVBQUUsRUFBRTtvQkFDeEIsTUFBTSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7d0JBQ25CLEtBQUssUUFBUTs0QkFDWixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQzs0QkFDcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDOzRCQUM3QixLQUFLLENBQUM7cUJBQ1A7aUJBQ0QsQ0FDRCxDQUFDO2FBQ0Y7WUFBQyxJQUFJLENBQUMsQ0FBQztnQkFDUCxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDO2dCQUN0QixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7YUFDdkI7U0FDRCxDQUFDLENBQUM7S0FDSDs7OztJQUVELFdBQVc7UUFDVixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7S0FDdkI7Ozs7SUFFRCxlQUFlO1FBQ2QsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7WUFDeEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3JCO1FBQ0QsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7WUFDeEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3JCO0tBQ0Q7OztZQXpIRCxTQUFTLFNBQUM7Z0JBQ1YsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7OztHQU9SO2dCQUNGLE1BQU0sRUFBRTtvQkFDUDs7Ozs7Ozs7Ozs7R0FXQztpQkFDRDthQUNEOzs7O1lBN0JBLFNBQVM7Ozt5QkFvQ1IsS0FBSzt3QkFJTCxLQUFLO21CQUNMLEtBQUs7K0JBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0RXZlbnRFbWl0dGVyLFxuXHRJbnB1dCxcblx0T25EZXN0cm95LFxuXHRPbkluaXQsXG5cdE91dHB1dCxcblx0UmVuZGVyZXIyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMvU3ViamVjdCc7XG5pbXBvcnQgKiBhcyBUZXRoZXIgZnJvbSAndGV0aGVyJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnZ3QtZHJvcGRvd24nLFxuXHR0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93biBndC1kcm9wZG93blwiIFtuZ0NsYXNzXT1cInsnc2hvdyc6YWN0aXZlfVwiIFthdHRyLmlkXT1cImlkXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24tdG9nZ2xlXCIgKGNsaWNrKT1cInRvZ2dsZURyb3Bkb3duKClcIiBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImFjdGl2ZVwiPnt7c2VsZWN0ZWR9fTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImd0LWRyb3Bkb3duLW1lbnUgZHJvcGRvd24tbWVudVwiICpuZ0lmPVwiYWN0aXZlXCIgW25nQ2xhc3NdPVwieydzaG93JzphY3RpdmV9XCIgW2F0dHIuaWRdPVwiaWQrJ19tZW51J1wiPlxuICAgICAgICA8YnV0dG9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9ucztcIiBjbGFzcz1cImRyb3Bkb3duLWl0ZW1cIiAoY2xpY2spPVwic2VsZWN0KG9wdGlvbilcIiBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6b3B0aW9uID09PSBzZWxlY3RlZH1cIj57e29wdGlvbn19PC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYCxcblx0c3R5bGVzOiBbXG5cdFx0YFxuICAgIC5ndC1kcm9wZG93biAuZHJvcGRvd24tdG9nZ2xlIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG4gICAgLmd0LWRyb3Bkb3duIC5kcm9wZG93bi10b2dnbGU6OmFmdGVyIHtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC40cyBlYXNlLWluLW91dDtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgfVxuICAgIC5ndC1kcm9wZG93biAuZHJvcGRvd24tdG9nZ2xlOmhvdmVyOjphZnRlciB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgIH1cbiAgYFxuXHRdXG59KVxuZXhwb3J0IGNsYXNzIEd0RHJvcGRvd25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cdGdldCBzZWxlY3RlZCgpIHtcblx0XHRyZXR1cm4gdGhpcy5fc2VsZWN0ZWQ7XG5cdH1cblxuXHRfc2VsZWN0ZWQ6IGFueTtcblx0QElucHV0KClcblx0c2V0IHNlbGVjdGVkKHNlbGVjdGlvbikge1xuXHRcdHRoaXMuX3NlbGVjdGVkID0gc2VsZWN0aW9uO1xuXHR9XG5cdEBJbnB1dCgpIG9wdGlvbnM6IEFycmF5PGFueT47XG5cdEBJbnB1dCgpIGlkOiBzdHJpbmc7XG5cdEBPdXRwdXQoKSBzZWxlY3RlZENoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0YWN0aXZlID0gZmFsc2U7IC8vIGlzIGRyb3Bkb3duIGFjdGl2ZSBvciBub3Rcblx0c3RhdGU6IFN1YmplY3Q8Ym9vbGVhbj4gPSBuZXcgU3ViamVjdCgpOyAvLyBjdXJyZW50IHN0YXRlIG9mIGRyb3Bkb3duXG5cdHRldGhlcjogYW55O1xuXHRjbGlja0xpc3RlbmVyOiBGdW5jdGlvbjtcblx0a2V5dXBMaXN0ZW5lcjogRnVuY3Rpb247XG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxuXG5cdHNlbGVjdChvcHRpb246IGFueSkge1xuXHRcdHRoaXMuYWN0aXZlID0gZmFsc2U7XG5cdFx0dGhpcy5zdGF0ZS5uZXh0KHRoaXMuYWN0aXZlKTtcblx0XHRpZiAodGhpcy5fc2VsZWN0ZWQgIT09IG9wdGlvbikge1xuXHRcdFx0dGhpcy5zZWxlY3RlZENoYW5nZS5lbWl0KG9wdGlvbik7XG5cdFx0fVxuXHR9XG5cblx0dG9nZ2xlRHJvcGRvd24oKSB7XG5cdFx0dGhpcy5hY3RpdmUgPSAhdGhpcy5hY3RpdmU7XG5cdFx0c2V0VGltZW91dCgoKSA9PiB7XG5cdFx0XHR0aGlzLnN0YXRlLm5leHQodGhpcy5hY3RpdmUpO1xuXHRcdH0sIDApO1xuXHR9XG5cblx0bmdPbkluaXQoKSB7XG5cdFx0dGhpcy5zdGF0ZS5zdWJzY3JpYmUoc3RhdGUgPT4ge1xuXHRcdFx0aWYgKHN0YXRlKSB7XG5cdFx0XHRcdHRoaXMudGV0aGVyID0gbmV3IFRldGhlcih7XG5cdFx0XHRcdFx0ZWxlbWVudDogJyMnICsgdGhpcy5pZCArICdfbWVudScsXG5cdFx0XHRcdFx0dGFyZ2V0OiAnIycgKyB0aGlzLmlkLFxuXHRcdFx0XHRcdGF0dGFjaG1lbnQ6ICd0b3AgbGVmdCcsXG5cdFx0XHRcdFx0dGFyZ2V0QXR0YWNobWVudDogJ2JvdHRvbSBsZWZ0Jyxcblx0XHRcdFx0XHRjb25zdHJhaW50czogW1xuXHRcdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0XHR0bzogJ3dpbmRvdycsXG5cdFx0XHRcdFx0XHRcdGF0dGFjaG1lbnQ6ICd0b2dldGhlcidcblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRdXG5cdFx0XHRcdH0pO1xuXG5cdFx0XHRcdHRoaXMudGV0aGVyLnBvc2l0aW9uKCk7XG5cblx0XHRcdFx0Ly8gc2V0IHVwIGNsaWNrIGxpc3RlbmVyIGFuZCBsaXN0ZW4gZm9yIGNsaWNrIG91dHNpZGUgZHJvcGRvd25cblx0XHRcdFx0dGhpcy5jbGlja0xpc3RlbmVyID0gdGhpcy5yZW5kZXJlci5saXN0ZW4oXG5cdFx0XHRcdFx0J2RvY3VtZW50Jyxcblx0XHRcdFx0XHQnY2xpY2snLFxuXHRcdFx0XHRcdChldmVudDogTW91c2VFdmVudCkgPT4ge1xuXHRcdFx0XHRcdFx0dGhpcy5hY3RpdmUgPSBmYWxzZTtcblx0XHRcdFx0XHRcdHRoaXMuc3RhdGUubmV4dCh0aGlzLmFjdGl2ZSk7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHQpO1xuXG5cdFx0XHRcdC8vIHNldCB1cCBrZXlib2FyZCBsaXN0ZW5lciBhbmQgbGlzdGVuIGZvciBlc2NhcGUga2V5IHVwXG5cdFx0XHRcdHRoaXMua2V5dXBMaXN0ZW5lciA9IHRoaXMucmVuZGVyZXIubGlzdGVuKFxuXHRcdFx0XHRcdCdkb2N1bWVudCcsXG5cdFx0XHRcdFx0J2tleXVwJyxcblx0XHRcdFx0XHQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcblx0XHRcdFx0XHRcdHN3aXRjaCAoZXZlbnQua2V5KSB7XG5cdFx0XHRcdFx0XHRcdGNhc2UgJ0VzY2FwZSc6XG5cdFx0XHRcdFx0XHRcdFx0dGhpcy5hY3RpdmUgPSBmYWxzZTtcblx0XHRcdFx0XHRcdFx0XHR0aGlzLnN0YXRlLm5leHQodGhpcy5hY3RpdmUpO1xuXHRcdFx0XHRcdFx0XHRcdGJyZWFrO1xuXHRcdFx0XHRcdFx0fVxuXHRcdFx0XHRcdH1cblx0XHRcdFx0KTtcblx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdHRoaXMudGV0aGVyLmRlc3Ryb3koKTtcblx0XHRcdFx0dGhpcy5yZW1vdmVMaXN0ZW5lcnMoKTtcblx0XHRcdH1cblx0XHR9KTtcblx0fVxuXG5cdG5nT25EZXN0cm95KCkge1xuXHRcdHRoaXMucmVtb3ZlTGlzdGVuZXJzKCk7XG5cdH1cblxuXHRyZW1vdmVMaXN0ZW5lcnMoKSB7XG5cdFx0aWYgKHRoaXMuY2xpY2tMaXN0ZW5lcikge1xuXHRcdFx0dGhpcy5jbGlja0xpc3RlbmVyKCk7XG5cdFx0fVxuXHRcdGlmICh0aGlzLmtleXVwTGlzdGVuZXIpIHtcblx0XHRcdHRoaXMua2V5dXBMaXN0ZW5lcigpO1xuXHRcdH1cblx0fVxufVxuIl19