angular-mydatepicker-ivy
Version:
Angular datepicker and date range picker
69 lines • 12.6 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
import { KeyCode } from "../../enums/key-code.enum";
import { ActiveView } from "../../enums/active-view.enum";
import { UtilService } from "../../services/angular-mydatepicker.util.service";
import { OPTS, MONTHS } from "../../constants/constants";
import * as i0 from "@angular/core";
import * as i1 from "../../services/angular-mydatepicker.util.service";
import * as i2 from "@angular/common";
export class MonthViewComponent {
utilService;
opts;
months;
viewChanged;
monthCellClicked = new EventEmitter();
monthCellKeyDown = new EventEmitter();
viewActivated = new EventEmitter();
constructor(utilService) {
this.utilService = utilService;
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(OPTS)) {
this.opts = changes[OPTS].currentValue;
}
if (changes.hasOwnProperty(MONTHS)) {
this.months = changes[MONTHS].currentValue;
}
}
ngAfterViewInit() {
this.viewActivated.emit(ActiveView.Month);
}
onMonthCellClicked(event, cell) {
event.stopPropagation();
if (cell.disabled) {
return;
}
this.monthCellClicked.emit(cell);
}
onMonthCellKeyDown(event, cell) {
const keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode !== KeyCode.tab) {
event.preventDefault();
if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
this.onMonthCellClicked(event, cell);
}
else if (this.opts.moveFocusByArrowKeys) {
this.monthCellKeyDown.emit(event);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: MonthViewComponent, deps: [{ token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: MonthViewComponent, selector: "lib-month-view", inputs: { opts: "opts", months: "months", viewChanged: "viewChanged" }, outputs: { monthCellClicked: "monthCellClicked", monthCellKeyDown: "monthCellKeyDown", viewActivated: "viewActivated" }, providers: [UtilService], usesOnChanges: true, ngImport: i0, template: "<table class=\"myDpMonthTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <tbody>\n <tr *ngFor=\"let mr of months\">\n <td id=\"m_{{m.row}}_{{m.col}}\" class=\"m_{{m.row}}_{{m.col}} myDpMonthcell\"\n [ngClass]=\"{'myDpSelectedMonth': m.selected, 'myDpDisabled': m.disabled, 'myDpTableSingleMonth': !m.disabled}\"\n *ngFor=\"let m of mr\" (click)=\"onMonthCellClicked($event, m)\" (keydown)=\"onMonthCellKeyDown($event, m)\" [attr.tabindex]=\"!m.disabled ? 0 : -1\">\n <span class=\"myDpMonthNbr\" *ngIf=\"opts.showMonthNumber\">{{m.nbr}}</span>\n <span class=\"myDpMonthValue\" \n [attr.aria-label]=\"[(m.nbr + '/' + 1 + '/' + m.year | date:'MMMM yyyy')]\"\n [ngClass]=\"{'myDpMarkCurrMonth': m.currMonth && opts.markCurrentMonth}\">{{m.name}}</span>\n </td>\n </tr>\n </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: MonthViewComponent, decorators: [{
type: Component,
args: [{ selector: "lib-month-view", providers: [UtilService], encapsulation: ViewEncapsulation.None, template: "<table class=\"myDpMonthTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <tbody>\n <tr *ngFor=\"let mr of months\">\n <td id=\"m_{{m.row}}_{{m.col}}\" class=\"m_{{m.row}}_{{m.col}} myDpMonthcell\"\n [ngClass]=\"{'myDpSelectedMonth': m.selected, 'myDpDisabled': m.disabled, 'myDpTableSingleMonth': !m.disabled}\"\n *ngFor=\"let m of mr\" (click)=\"onMonthCellClicked($event, m)\" (keydown)=\"onMonthCellKeyDown($event, m)\" [attr.tabindex]=\"!m.disabled ? 0 : -1\">\n <span class=\"myDpMonthNbr\" *ngIf=\"opts.showMonthNumber\">{{m.nbr}}</span>\n <span class=\"myDpMonthValue\" \n [attr.aria-label]=\"[(m.nbr + '/' + 1 + '/' + m.year | date:'MMMM yyyy')]\"\n [ngClass]=\"{'myDpMarkCurrMonth': m.currMonth && opts.markCurrentMonth}\">{{m.name}}</span>\n </td>\n </tr>\n </tbody>\n</table>\n" }]
}], ctorParameters: function () { return [{ type: i1.UtilService }]; }, propDecorators: { opts: [{
type: Input
}], months: [{
type: Input
}], viewChanged: [{
type: Input
}], monthCellClicked: [{
type: Output
}], monthCellKeyDown: [{
type: Output
}], viewActivated: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9udGgtdmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLW15ZGF0ZXBpY2tlci9zcmMvbGliL2NvbXBvbmVudHMvbW9udGgtdmlldy9tb250aC12aWV3LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItbXlkYXRlcGlja2VyL3NyYy9saWIvY29tcG9uZW50cy9tb250aC12aWV3L21vbnRoLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUE0QixNQUFNLEVBQWlCLGlCQUFpQixFQUFDLE1BQU0sZUFBZSxDQUFDO0FBR2pJLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sOEJBQThCLENBQUM7QUFDeEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGtEQUFrRCxDQUFDO0FBQzdFLE9BQU8sRUFBQyxJQUFJLEVBQUUsTUFBTSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFRdkQsTUFBTSxPQUFPLGtCQUFrQjtJQVNUO0lBUlgsSUFBSSxDQUFhO0lBQ2pCLE1BQU0sQ0FBaUM7SUFDdkMsV0FBVyxDQUFVO0lBRXBCLGdCQUFnQixHQUFtQyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUN4RixnQkFBZ0IsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUM5RCxhQUFhLEdBQTZCLElBQUksWUFBWSxFQUFjLENBQUM7SUFFbkYsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7SUFBSSxDQUFDO0lBRWpELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDaEMsSUFBSSxDQUFDLElBQUksR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsWUFBWSxDQUFDO1NBQ3hDO1FBQ0QsSUFBSSxPQUFPLENBQUMsY0FBYyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ2xDLElBQUksQ0FBQyxNQUFNLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLFlBQVksQ0FBQztTQUM1QztJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxLQUFVLEVBQUUsSUFBc0I7UUFDbkQsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBRXhCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ25DLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxLQUFVLEVBQUUsSUFBc0I7UUFDbkQsTUFBTSxPQUFPLEdBQVcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwRSxJQUFJLE9BQU8sS0FBSyxPQUFPLENBQUMsR0FBRyxFQUFFO1lBQzNCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUV2QixJQUFJLE9BQU8sS0FBSyxPQUFPLENBQUMsS0FBSyxJQUFJLE9BQU8sS0FBSyxPQUFPLENBQUMsS0FBSyxFQUFFO2dCQUMxRCxJQUFJLENBQUMsa0JBQWtCLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDO2FBQ3RDO2lCQUNJLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtnQkFDdkMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUNuQztTQUNGO0lBQ0gsQ0FBQzt1R0E5Q1Usa0JBQWtCOzJGQUFsQixrQkFBa0IsME9BSGxCLENBQUMsV0FBVyxDQUFDLCtDQ1gxQix3K0JBY0E7OzJGREFhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxnQkFBZ0IsYUFFZixDQUFDLFdBQVcsQ0FBQyxpQkFDVCxpQkFBaUIsQ0FBQyxJQUFJO2tHQUc1QixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUksZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUNHLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgQWZ0ZXJWaWV3SW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzLCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7SU15Q2FsZW5kYXJNb250aH0gZnJvbSBcIi4uLy4uL2ludGVyZmFjZXMvbXktY2FsZW5kYXItbW9udGguaW50ZXJmYWNlXCI7XG5pbXBvcnQge0lNeU9wdGlvbnN9IGZyb20gXCIuLi8uLi9pbnRlcmZhY2VzL215LW9wdGlvbnMuaW50ZXJmYWNlXCI7XG5pbXBvcnQge0tleUNvZGV9IGZyb20gXCIuLi8uLi9lbnVtcy9rZXktY29kZS5lbnVtXCI7XG5pbXBvcnQge0FjdGl2ZVZpZXd9IGZyb20gXCIuLi8uLi9lbnVtcy9hY3RpdmUtdmlldy5lbnVtXCI7XG5pbXBvcnQge1V0aWxTZXJ2aWNlfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvYW5ndWxhci1teWRhdGVwaWNrZXIudXRpbC5zZXJ2aWNlXCI7XG5pbXBvcnQge09QVFMsIE1PTlRIU30gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9jb25zdGFudHNcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImxpYi1tb250aC12aWV3XCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vbW9udGgtdmlldy5jb21wb25lbnQuaHRtbFwiLFxuICBwcm92aWRlcnM6IFtVdGlsU2VydmljZV0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgTW9udGhWaWV3Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBBZnRlclZpZXdJbml0IHtcbiAgQElucHV0KCkgb3B0czogSU15T3B0aW9ucztcbiAgQElucHV0KCkgbW9udGhzOiBBcnJheTxBcnJheTxJTXlDYWxlbmRhck1vbnRoPj47XG4gIEBJbnB1dCgpIHZpZXdDaGFuZ2VkOiBib29sZWFuO1xuXG4gIEBPdXRwdXQoKSBtb250aENlbGxDbGlja2VkOiBFdmVudEVtaXR0ZXI8SU15Q2FsZW5kYXJNb250aD4gPSBuZXcgRXZlbnRFbWl0dGVyPElNeUNhbGVuZGFyTW9udGg+KCk7XG4gIEBPdXRwdXQoKSBtb250aENlbGxLZXlEb3duOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgdmlld0FjdGl2YXRlZDogRXZlbnRFbWl0dGVyPEFjdGl2ZVZpZXc+ID0gbmV3IEV2ZW50RW1pdHRlcjxBY3RpdmVWaWV3PigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdXRpbFNlcnZpY2U6IFV0aWxTZXJ2aWNlKSB7IH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXMuaGFzT3duUHJvcGVydHkoT1BUUykpIHtcbiAgICAgIHRoaXMub3B0cyA9IGNoYW5nZXNbT1BUU10uY3VycmVudFZhbHVlO1xuICAgIH1cbiAgICBpZiAoY2hhbmdlcy5oYXNPd25Qcm9wZXJ0eShNT05USFMpKSB7XG4gICAgICB0aGlzLm1vbnRocyA9IGNoYW5nZXNbTU9OVEhTXS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMudmlld0FjdGl2YXRlZC5lbWl0KEFjdGl2ZVZpZXcuTW9udGgpO1xuICB9XG5cbiAgb25Nb250aENlbGxDbGlja2VkKGV2ZW50OiBhbnksIGNlbGw6IElNeUNhbGVuZGFyTW9udGgpOiB2b2lkIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcblxuICAgIGlmIChjZWxsLmRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5tb250aENlbGxDbGlja2VkLmVtaXQoY2VsbCk7XG4gIH1cblxuICBvbk1vbnRoQ2VsbEtleURvd24oZXZlbnQ6IGFueSwgY2VsbDogSU15Q2FsZW5kYXJNb250aCkge1xuICAgIGNvbnN0IGtleUNvZGU6IG51bWJlciA9IHRoaXMudXRpbFNlcnZpY2UuZ2V0S2V5Q29kZUZyb21FdmVudChldmVudCk7XG4gICAgaWYgKGtleUNvZGUgIT09IEtleUNvZGUudGFiKSB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuXG4gICAgICBpZiAoa2V5Q29kZSA9PT0gS2V5Q29kZS5lbnRlciB8fCBrZXlDb2RlID09PSBLZXlDb2RlLnNwYWNlKSB7XG4gICAgICAgIHRoaXMub25Nb250aENlbGxDbGlja2VkKGV2ZW50LCBjZWxsKTtcbiAgICAgIH1cbiAgICAgIGVsc2UgaWYgKHRoaXMub3B0cy5tb3ZlRm9jdXNCeUFycm93S2V5cykge1xuICAgICAgICB0aGlzLm1vbnRoQ2VsbEtleURvd24uZW1pdChldmVudCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCI8dGFibGUgY2xhc3M9XCJteURwTW9udGhUYWJsZVwiIFtuZ0NsYXNzXT1cInsnbmctbXlydGwnOiBvcHRzLnJ0bCwgJ215RHBGb290ZXInOiBvcHRzLnNob3dGb290ZXJUb2RheSwgJ215RHBOb0Zvb3Rlcic6ICFvcHRzLnNob3dGb290ZXJUb2RheSwgJ215RHBWaWV3Q2hhbmdlQW5pbWF0aW9uJzogb3B0cy52aWV3Q2hhbmdlQW5pbWF0aW9uICYmIHZpZXdDaGFuZ2VkfVwiPlxuICA8dGJvZHk+XG4gICAgPHRyICpuZ0Zvcj1cImxldCBtciBvZiBtb250aHNcIj5cbiAgICAgIDx0ZCBpZD1cIm1fe3ttLnJvd319X3t7bS5jb2x9fVwiIGNsYXNzPVwibV97e20ucm93fX1fe3ttLmNvbH19IG15RHBNb250aGNlbGxcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cInsnbXlEcFNlbGVjdGVkTW9udGgnOiBtLnNlbGVjdGVkLCAnbXlEcERpc2FibGVkJzogbS5kaXNhYmxlZCwgJ215RHBUYWJsZVNpbmdsZU1vbnRoJzogIW0uZGlzYWJsZWR9XCJcbiAgICAgICAgICAqbmdGb3I9XCJsZXQgbSBvZiBtclwiIChjbGljayk9XCJvbk1vbnRoQ2VsbENsaWNrZWQoJGV2ZW50LCBtKVwiIChrZXlkb3duKT1cIm9uTW9udGhDZWxsS2V5RG93bigkZXZlbnQsIG0pXCIgW2F0dHIudGFiaW5kZXhdPVwiIW0uZGlzYWJsZWQgPyAwIDogLTFcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJteURwTW9udGhOYnJcIiAqbmdJZj1cIm9wdHMuc2hvd01vbnRoTnVtYmVyXCI+e3ttLm5icn19PC9zcGFuPlxuICAgICAgICA8c3BhbiBjbGFzcz1cIm15RHBNb250aFZhbHVlXCIgXG4gICAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJbKG0ubmJyICsgJy8nICsgMSArICcvJyArIG0ueWVhciB8IGRhdGU6J01NTU0geXl5eScpXVwiXG4gICAgICAgICAgW25nQ2xhc3NdPVwieydteURwTWFya0N1cnJNb250aCc6IG0uY3Vyck1vbnRoICYmIG9wdHMubWFya0N1cnJlbnRNb250aH1cIj57e20ubmFtZX19PC9zcGFuPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICA8L3Rib2R5PlxuPC90YWJsZT5cbiJdfQ==