forked from ng-bootstrap/ng-bootstrap
/
datepicker-navigation.ts
69 lines (61 loc) · 2.67 KB
/
datepicker-navigation.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
import {NavigationEvent, MonthViewModel} from './datepicker-view-model';
import {NgbDate} from './ngb-date';
import {NgbDatepickerI18n} from './datepicker-i18n';
@Component({
selector: 'ngb-datepicker-navigation',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styleUrls: ['./datepicker-navigation.scss'],
template: `
<div class="ngb-dp-arrow">
<button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="onClickPrev($event)" [disabled]="prevDisabled"
i18n-aria-label="@@ngb.datepicker.previous-month" aria-label="Previous month"
i18n-title="@@ngb.datepicker.previous-month" title="Previous month">
<span class="ngb-dp-navigation-chevron"></span>
</button>
</div>
<ngb-datepicker-navigation-select *ngIf="showSelect" class="ngb-dp-navigation-select"
[date]="date"
[disabled] = "disabled"
[months]="selectBoxes.months"
[years]="selectBoxes.years"
(select)="select.emit($event)">
</ngb-datepicker-navigation-select>
<ng-template *ngIf="!showSelect" ngFor let-month [ngForOf]="months" let-i="index">
<div class="ngb-dp-arrow" *ngIf="i > 0"></div>
<div class="ngb-dp-month-name">
{{ i18n.getMonthFullName(month.number, month.year) }} {{ i18n.getYearNumerals(month.year) }}
</div>
<div class="ngb-dp-arrow" *ngIf="i !== months.length - 1"></div>
</ng-template>
<div class="ngb-dp-arrow right">
<button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="onClickNext($event)" [disabled]="nextDisabled"
i18n-aria-label="@@ngb.datepicker.next-month" aria-label="Next month"
i18n-title="@@ngb.datepicker.next-month" title="Next month">
<span class="ngb-dp-navigation-chevron"></span>
</button>
</div>
`
})
export class NgbDatepickerNavigation {
navigation = NavigationEvent;
@Input() date: NgbDate;
@Input() disabled: boolean;
@Input() months: MonthViewModel[] = [];
@Input() showSelect: boolean;
@Input() prevDisabled: boolean;
@Input() nextDisabled: boolean;
@Input() selectBoxes: {years: number[], months: number[]};
@Output() navigate = new EventEmitter<NavigationEvent>();
@Output() select = new EventEmitter<NgbDate>();
constructor(public i18n: NgbDatepickerI18n) {}
onClickPrev(event: MouseEvent) {
(event.target as HTMLElement).focus();
this.navigate.emit(this.navigation.PREV);
}
onClickNext(event: MouseEvent) {
(event.target as HTMLElement).focus();
this.navigate.emit(this.navigation.NEXT);
}
}