ngx-bootstrap
Version:
Angular Bootstrap
61 lines (60 loc) • 2.1 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { yearsPerCalendar } from '../../engine/format-years-calendar';
import { BsNavigationDirection } from '../../models';
export class BsYearsCalendarViewComponent {
constructor() {
this.onNavigate = new EventEmitter();
this.onViewMode = new EventEmitter();
this.onSelect = new EventEmitter();
this.onHover = new EventEmitter();
}
navigateTo(event) {
const step = BsNavigationDirection.DOWN === event ? -1 : 1;
this.onNavigate.emit({ step: { year: step * yearsPerCalendar } });
}
viewYear(year) {
this.onSelect.emit(year);
}
hoverYear(cell, isHovered) {
this.onHover.emit({ cell, isHovered });
}
changeViewMode(event) {
this.onViewMode.emit(event);
}
}
BsYearsCalendarViewComponent.decorators = [
{ type: Component, args: [{
selector: 'bs-years-calendar-view',
template: `
<bs-calendar-layout>
<bs-datepicker-navigation-view
[calendar]="calendar"
(onNavigate)="navigateTo($event)"
(onViewMode)="changeViewMode($event)"
></bs-datepicker-navigation-view>
<table role="grid" class="years">
<tbody>
<tr *ngFor="let row of calendar?.years">
<td *ngFor="let year of row" role="gridcell"
(click)="viewYear(year)"
(mouseenter)="hoverYear(year, true)"
(mouseleave)="hoverYear(year, false)"
[class.disabled]="year.isDisabled"
[class.is-highlighted]="year.isHovered">
<span [class.selected]="year.isSelected">{{ year.label }}</span>
</td>
</tr>
</tbody>
</table>
</bs-calendar-layout>
`
},] }
];
BsYearsCalendarViewComponent.propDecorators = {
calendar: [{ type: Input }],
onNavigate: [{ type: Output }],
onViewMode: [{ type: Output }],
onSelect: [{ type: Output }],
onHover: [{ type: Output }]
};
//# sourceMappingURL=bs-years-calendar-view.component.js.map