angular-mydatepicker
Version:
Angular datepicker and date range picker
1,186 lines • 139 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, ElementRef, ViewEncapsulation, ViewChild, Renderer2, ChangeDetectorRef, HostBinding } from "@angular/core";
import { UtilService } from "../../services/angular-mydatepicker.util.service";
import { KeyCode } from "../../enums/key-code.enum";
import { MonthId } from "../../enums/month-id.enum";
import { DefaultView } from "../../enums/default-view.enum";
import { CalAnimation } from "../../enums/cal-animation.enum";
import { HeaderAction } from "../../enums/header-action.enum";
import { DOT, UNDER_LINE, D, M, Y, DATE_ROW_COUNT, DATE_COL_COUNT, MONTH_ROW_COUNT, MONTH_COL_COUNT, YEAR_ROW_COUNT, YEAR_COL_COUNT, SU, MO, TU, WE, TH, FR, SA, EMPTY_STR, CLICK, STYLE, MY_DP_ANIMATION, ANIMATION_NAMES, IN, OUT, TABINDEX, TD_SELECTOR, ZERO_STR, YEAR_SEPARATOR } from "../../constants/constants";
var CalendarComponent = /** @class */ (function () {
function CalendarComponent(elem, renderer, cdr, utilService) {
var _this = this;
this.elem = elem;
this.renderer = renderer;
this.cdr = cdr;
this.utilService = utilService;
this.position = "static";
this.visibleMonth = { monthTxt: EMPTY_STR, monthNbr: 0, year: 0 };
this.selectedMonth = { monthNbr: 0, year: 0 };
this.selectedDate = { year: 0, month: 0, day: 0 };
this.selectedDateRange = { begin: { year: 0, month: 0, day: 0 }, end: { year: 0, month: 0, day: 0 } };
this.weekDays = [];
this.dates = [];
this.months = [];
this.years = [];
this.yearsDuration = "";
this.dayIdx = 0;
this.weekDayOpts = [SU, MO, TU, WE, TH, FR, SA];
this.selectMonth = false;
this.selectYear = false;
this.viewChanged = false;
this.selectorPos = null;
this.prevViewDisabled = false;
this.nextViewDisabled = false;
this.clickListener = renderer.listen(elem.nativeElement, CLICK, (/**
* @param {?} event
* @return {?}
*/
function (event) {
if ((_this.opts.monthSelector || _this.opts.yearSelector) && event.target) {
_this.resetMonthYearSelect();
}
}));
}
/**
* @return {?}
*/
CalendarComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _a = this.opts, stylesData = _a.stylesData, calendarAnimation = _a.calendarAnimation, inline = _a.inline;
if (stylesData.styles.length) {
/** @type {?} */
var styleElTemp = this.renderer.createElement(STYLE);
this.renderer.appendChild(styleElTemp, this.renderer.createText(stylesData.styles));
this.renderer.appendChild(this.styleEl.nativeElement, styleElTemp);
}
if (calendarAnimation.in !== CalAnimation.None) {
this.setCalendarAnimation(calendarAnimation, true);
}
if (!inline) {
this.focusToSelector();
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.clickListener();
};
/**
* @param {?} opts
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @param {?} selectorPos
* @param {?} dc
* @param {?} cvc
* @param {?} rds
* @param {?} va
* @param {?} cbe
* @return {?}
*/
CalendarComponent.prototype.initializeComponent = /**
* @param {?} opts
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @param {?} selectorPos
* @param {?} dc
* @param {?} cvc
* @param {?} rds
* @param {?} va
* @param {?} cbe
* @return {?}
*/
function (opts, defaultMonth, selectedValue, inputValue, selectorPos, dc, cvc, rds, va, cbe) {
this.opts = opts;
this.selectorPos = selectorPos;
this.dateChanged = dc;
this.calendarViewChanged = cvc;
this.rangeDateSelection = rds;
this.viewActivated = va;
this.closedByEsc = cbe;
var defaultView = opts.defaultView, firstDayOfWeek = opts.firstDayOfWeek, dayLabels = opts.dayLabels;
this.weekDays.length = 0;
this.dayIdx = this.weekDayOpts.indexOf(firstDayOfWeek);
if (this.dayIdx !== -1) {
/** @type {?} */
var idx = this.dayIdx;
for (var i = 0; i < this.weekDayOpts.length; i++) {
this.weekDays.push(dayLabels[this.weekDayOpts[idx]]);
idx = this.weekDayOpts[idx] === SA ? 0 : idx + 1;
}
}
this.initializeView(defaultMonth, selectedValue, inputValue);
this.setCalendarVisibleMonth();
this.setDefaultView(defaultView);
};
/**
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @return {?}
*/
CalendarComponent.prototype.initializeView = /**
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @return {?}
*/
function (defaultMonth, selectedValue, inputValue) {
var dateRange = this.opts.dateRange;
// use today as a selected month
/** @type {?} */
var today = this.utilService.getToday();
this.selectedMonth = { monthNbr: today.month, year: today.year };
// If default month attribute valur given use it as a selected month
var defMonth = defaultMonth.defMonth, overrideSelection = defaultMonth.overrideSelection;
if (defMonth && defMonth.length) {
this.selectedMonth = this.utilService.parseDefaultMonth(defMonth);
}
/** @type {?} */
var validateOpts = null;
if (!dateRange) {
// Single date mode - If date selected use it as selected month
validateOpts = { validateDisabledDates: false, selectedValue: this.utilService.getSelectedValue(selectedValue, dateRange) };
/** @type {?} */
var date = this.utilService.isDateValid(inputValue, this.opts, validateOpts);
if (this.utilService.isInitializedDate(date)) {
this.selectedDate = date;
if (!overrideSelection) {
this.selectedMonth = { monthNbr: date.month, year: date.year };
}
}
}
else {
// Date range mode - If date range selected use begin date as selected month
validateOpts = { validateDisabledDates: false, selectedValue: this.utilService.getSelectedValue(selectedValue, dateRange) };
var _a = this.utilService.isDateValidDateRange(inputValue, this.opts, validateOpts), begin = _a.begin, end = _a.end;
if (this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end)) {
this.selectedDateRange = { begin: begin, end: end };
if (!overrideSelection) {
this.selectedMonth = { monthNbr: begin.month, year: begin.year };
}
}
}
};
/**
* @param {?} opts
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @return {?}
*/
CalendarComponent.prototype.refreshComponent = /**
* @param {?} opts
* @param {?} defaultMonth
* @param {?} selectedValue
* @param {?} inputValue
* @return {?}
*/
function (opts, defaultMonth, selectedValue, inputValue) {
this.opts = opts;
var defaultView = opts.defaultView;
this.initializeView(defaultMonth, selectedValue, inputValue);
this.setCalendarVisibleMonth();
this.setDefaultView(defaultView);
};
/**
* @param {?} headerAction
* @return {?}
*/
CalendarComponent.prototype.headerAction = /**
* @param {?} headerAction
* @return {?}
*/
function (headerAction) {
var _a = this.opts, monthSelector = _a.monthSelector, yearSelector = _a.yearSelector;
if (headerAction === HeaderAction.PrevBtnClick) {
if (!this.prevViewDisabled) {
this.onPrevNavigateBtnClicked();
}
}
else if (headerAction === HeaderAction.NextBtnClick) {
if (!this.nextViewDisabled) {
this.onNextNavigateBtnClicked();
}
}
else if (headerAction === HeaderAction.MonthBtnClick) {
if (monthSelector) {
this.onMonthViewBtnClicked();
}
}
else if (headerAction === HeaderAction.YearBtnClick) {
if (yearSelector) {
this.onYearViewBtnClicked();
}
}
};
/**
* @param {?} defaultView
* @return {?}
*/
CalendarComponent.prototype.setDefaultView = /**
* @param {?} defaultView
* @return {?}
*/
function (defaultView) {
if (defaultView === DefaultView.Month) {
this.monthViewBtnClicked();
}
else if (defaultView === DefaultView.Year) {
this.yearViewBtnClicked();
}
};
/**
* @param {?} calAnimation
* @param {?} isOpen
* @return {?}
*/
CalendarComponent.prototype.setCalendarAnimation = /**
* @param {?} calAnimation
* @param {?} isOpen
* @return {?}
*/
function (calAnimation, isOpen) {
var nativeElement = this.selectorEl.nativeElement;
var renderer = this.renderer;
/** @type {?} */
var classIn = MY_DP_ANIMATION + ANIMATION_NAMES[calAnimation.in - 1];
if (isOpen) {
renderer.addClass(nativeElement, classIn + IN);
}
else {
/** @type {?} */
var classOut = MY_DP_ANIMATION + ANIMATION_NAMES[calAnimation.out - 1];
renderer.removeClass(nativeElement, classIn + IN);
renderer.addClass(nativeElement, classOut + OUT);
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.resetDateValue = /**
* @return {?}
*/
function () {
if (!this.opts.dateRange) {
this.selectedDate = this.utilService.resetDate();
}
else {
this.selectedDateRange.begin = this.utilService.resetDate();
this.selectedDateRange.end = this.utilService.resetDate();
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.clearDate = /**
* @return {?}
*/
function () {
var _a = this.utilService.getToday(), month = _a.month, year = _a.year;
this.selectedMonth = { monthNbr: month, year: year };
this.resetDateValue();
this.setCalendarVisibleMonth();
this.resetMonthYearSelect();
};
/**
* @return {?}
*/
CalendarComponent.prototype.resetMonthYearSelect = /**
* @return {?}
*/
function () {
this.selectMonth = false;
this.selectYear = false;
};
/**
* @return {?}
*/
CalendarComponent.prototype.onMonthViewBtnClicked = /**
* @return {?}
*/
function () {
this.viewChanged = true;
this.monthViewBtnClicked();
};
/**
* @return {?}
*/
CalendarComponent.prototype.monthViewBtnClicked = /**
* @return {?}
*/
function () {
this.selectMonth = !this.selectMonth;
this.selectYear = false;
this.cdr.detectChanges();
if (this.selectMonth) {
this.generateMonths();
}
else {
var _a = this.selectedMonth, year = _a.year, monthNbr = _a.monthNbr;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr: monthNbr, year: year };
this.generateCalendar(monthNbr, year, true);
}
};
/**
* @param {?} cell
* @return {?}
*/
CalendarComponent.prototype.onMonthCellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
this.viewChanged = true;
var _a = this.visibleMonth, year = _a.year, monthNbr = _a.monthNbr;
/** @type {?} */
var monthChange = cell.nbr !== monthNbr;
this.visibleMonth = { monthTxt: this.opts.monthLabels[cell.nbr], monthNbr: cell.nbr, year: year };
this.selectedMonth.year = year;
this.generateCalendar(cell.nbr, year, monthChange);
this.selectMonth = false;
this.focusToSelector();
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.onMonthCellKeyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// Move focus by arrow keys
var _a = this.getSourceRowAndColumnFromEvent(event), sourceRow = _a.sourceRow, sourceCol = _a.sourceCol;
var _b = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, MONTH_ROW_COUNT, MONTH_COL_COUNT), moveFocus = _b.moveFocus, targetRow = _b.targetRow, targetCol = _b.targetCol, direction = _b.direction;
if (moveFocus) {
this.focusCellElement(M, targetRow, targetCol, direction, MONTH_COL_COUNT);
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.onYearViewBtnClicked = /**
* @return {?}
*/
function () {
this.viewChanged = true;
this.yearViewBtnClicked();
};
/**
* @return {?}
*/
CalendarComponent.prototype.yearViewBtnClicked = /**
* @return {?}
*/
function () {
this.selectYear = !this.selectYear;
this.selectMonth = false;
this.cdr.detectChanges();
if (this.selectYear) {
this.generateYears(this.visibleMonth.year);
}
else {
var _a = this.selectedMonth, year = _a.year, monthNbr = _a.monthNbr;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr: monthNbr, year: year };
this.generateCalendar(monthNbr, year, true);
}
};
/**
* @param {?} cell
* @return {?}
*/
CalendarComponent.prototype.onYearCellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
this.viewChanged = true;
var _a = this.visibleMonth, year = _a.year, monthNbr = _a.monthNbr, monthTxt = _a.monthTxt;
/** @type {?} */
var yc = cell.year !== year;
this.visibleMonth = { monthTxt: monthTxt, monthNbr: monthNbr, year: cell.year };
this.selectedMonth.year = cell.year;
this.generateCalendar(monthNbr, cell.year, yc);
this.selectYear = false;
this.focusToSelector();
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.onYearCellKeyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// Move focus by arrow keys
var _a = this.getSourceRowAndColumnFromEvent(event), sourceRow = _a.sourceRow, sourceCol = _a.sourceCol;
var _b = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, YEAR_ROW_COUNT, YEAR_COL_COUNT), moveFocus = _b.moveFocus, targetRow = _b.targetRow, targetCol = _b.targetCol, direction = _b.direction;
if (moveFocus) {
this.focusCellElement(Y, targetRow, targetCol, direction, YEAR_COL_COUNT);
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.generateMonths = /**
* @return {?}
*/
function () {
/** @type {?} */
var today = this.utilService.getToday();
this.months.length = 0;
var _a = this.visibleMonth, year = _a.year, monthNbr = _a.monthNbr;
var _b = this.opts, rtl = _b.rtl, monthLabels = _b.monthLabels;
/** @type {?} */
var row = 0;
for (var i = 1; i <= 12; i += 3) {
/** @type {?} */
var rowData = [];
/** @type {?} */
var col = rtl ? 2 : 0;
for (var j = i; j < i + 3; j++) {
/** @type {?} */
var disabled = this.utilService.isDisabledMonth(year, j, this.opts);
rowData.push({
nbr: j,
year: year,
name: monthLabels[j],
currMonth: j === today.month && year === today.year,
selected: j === monthNbr && year === this.selectedMonth.year,
disabled: disabled,
row: row,
col: rtl ? col-- : col++
});
}
row++;
this.months.push(rowData);
}
this.setMonthViewHeaderBtnDisabledState(year);
};
/**
* @param {?} inputYear
* @return {?}
*/
CalendarComponent.prototype.generateYears = /**
* @param {?} inputYear
* @return {?}
*/
function (inputYear) {
var _a = this.opts, minYear = _a.minYear, maxYear = _a.maxYear, rtl = _a.rtl;
/** @type {?} */
var y = inputYear - 12;
if (inputYear < minYear) {
y = minYear;
}
if (inputYear + 25 > maxYear) {
y = maxYear - 24;
}
var year = this.visibleMonth.year;
this.years.length = 0;
/** @type {?} */
var today = this.utilService.getToday();
/** @type {?} */
var row = 0;
for (var i = y; i < y + 25; i += 5) {
/** @type {?} */
var rowData = [];
/** @type {?} */
var col = rtl ? 4 : 0;
for (var j = i; j < i + 5; j++) {
/** @type {?} */
var disabled = this.utilService.isDisabledYear(j, this.opts);
rowData.push({
year: j,
currYear: j === today.year,
selected: j === year,
disabled: disabled,
row: row,
col: rtl ? col-- : col++
});
}
row++;
this.years.push(rowData);
}
/** @type {?} */
var beginYear = this.getYearValueByRowAndCol(0, 0);
/** @type {?} */
var endYear = beginYear + 24;
this.yearsDuration = (!rtl ? beginYear : endYear) + YEAR_SEPARATOR + (!rtl ? endYear : beginYear);
this.setYearViewHeaderBtnDisabledState(beginYear, endYear);
};
/**
* @return {?}
*/
CalendarComponent.prototype.onTodayFooterClicked = /**
* @return {?}
*/
function () {
/** @type {?} */
var date = this.utilService.getToday();
this.selectDate(date);
};
/**
* @param {?} row
* @param {?} col
* @return {?}
*/
CalendarComponent.prototype.getYearValueByRowAndCol = /**
* @param {?} row
* @param {?} col
* @return {?}
*/
function (row, col) {
var years = this.years;
if (!years || years.length === 0) {
var year = this.utilService.getToday().year;
return year;
}
return years[row][col].year;
};
/**
* @return {?}
*/
CalendarComponent.prototype.setCalendarVisibleMonth = /**
* @return {?}
*/
function () {
// Sets visible month of calendar
var _a = this.selectedMonth, year = _a.year, monthNbr = _a.monthNbr;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr: monthNbr, year: year };
// Create current month
this.generateCalendar(monthNbr, year, true);
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.onViewActivated = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.viewActivated(event);
};
/**
* @return {?}
*/
CalendarComponent.prototype.onPrevNavigateBtnClicked = /**
* @return {?}
*/
function () {
if (!this.selectMonth && !this.selectYear) {
this.setDateViewMonth(false);
}
else if (this.selectMonth) {
this.visibleMonth.year--;
this.generateMonths();
}
else if (this.selectYear) {
this.generateYears(this.getYearValueByRowAndCol(2, 2) - 25);
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.onNextNavigateBtnClicked = /**
* @return {?}
*/
function () {
if (!this.selectMonth && !this.selectYear) {
this.setDateViewMonth(true);
}
else if (this.selectMonth) {
this.visibleMonth.year++;
this.generateMonths();
}
else if (this.selectYear) {
this.generateYears(this.getYearValueByRowAndCol(2, 2) + 25);
}
};
/**
* @param {?} isNext
* @return {?}
*/
CalendarComponent.prototype.setDateViewMonth = /**
* @param {?} isNext
* @return {?}
*/
function (isNext) {
/** @type {?} */
var change = isNext ? 1 : -1;
var _a = this.visibleMonth, year = _a.year, monthNbr = _a.monthNbr;
/** @type {?} */
var d = this.utilService.getJsDate(year, monthNbr, 1);
d.setMonth(d.getMonth() + change);
/** @type {?} */
var y = d.getFullYear();
/** @type {?} */
var m = d.getMonth() + 1;
this.visibleMonth = { monthTxt: this.opts.monthLabels[m], monthNbr: m, year: y };
this.generateCalendar(m, y, true);
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.onCloseSelector = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode === KeyCode.esc) {
this.closedByEsc();
}
};
/**
* @param {?} cell
* @return {?}
*/
CalendarComponent.prototype.onDayCellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
// Cell clicked on the calendar
this.selectDate(cell.dateObj);
this.resetMonthYearSelect();
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.onDayCellKeyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// Move focus by arrow keys
var _a = this.getSourceRowAndColumnFromEvent(event), sourceRow = _a.sourceRow, sourceCol = _a.sourceCol;
var _b = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, DATE_ROW_COUNT, DATE_COL_COUNT), moveFocus = _b.moveFocus, targetRow = _b.targetRow, targetCol = _b.targetCol, direction = _b.direction;
if (moveFocus) {
this.focusCellElement(D, targetRow, targetCol, direction, DATE_COL_COUNT);
}
};
/**
* @param {?} event
* @return {?}
*/
CalendarComponent.prototype.getSourceRowAndColumnFromEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var sourceRow = 0;
/** @type {?} */
var sourceCol = 0;
if (event.target && event.target.id) {
// value of id is for example: m_0_1 (first number = row, second number = column)
/** @type {?} */
var arr = event.target.id.split(UNDER_LINE);
sourceRow = Number(arr[1]);
sourceCol = Number(arr[2]);
}
return { sourceRow: sourceRow, sourceCol: sourceCol };
};
/**
* @param {?} event
* @param {?} row
* @param {?} col
* @param {?} rowCount
* @param {?} colCount
* @return {?}
*/
CalendarComponent.prototype.getTargetFocusRowAndColumn = /**
* @param {?} event
* @param {?} row
* @param {?} col
* @param {?} rowCount
* @param {?} colCount
* @return {?}
*/
function (event, row, col, rowCount, colCount) {
/** @type {?} */
var moveFocus = true;
/** @type {?} */
var targetRow = row;
/** @type {?} */
var targetCol = col;
/** @type {?} */
var direction = false;
/** @type {?} */
var keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode === KeyCode.upArrow && row > 0) {
targetRow--;
}
else if (keyCode === KeyCode.downArrow && row < rowCount) {
targetRow++;
direction = true;
}
else if (keyCode === KeyCode.leftArrow && col > 0) {
targetCol--;
}
else if (keyCode === KeyCode.rightArrow && col < colCount) {
targetCol++;
direction = true;
}
else {
moveFocus = false;
}
return { moveFocus: moveFocus, targetRow: targetRow, targetCol: targetCol, direction: direction };
};
/**
* @param {?} type
* @param {?} row
* @param {?} col
* @param {?} direction
* @param {?} colCount
* @return {?}
*/
CalendarComponent.prototype.focusCellElement = /**
* @param {?} type
* @param {?} row
* @param {?} col
* @param {?} direction
* @param {?} colCount
* @return {?}
*/
function (type, row, col, direction, colCount) {
/** @type {?} */
var className = type + UNDER_LINE + row + UNDER_LINE + col;
/** @type {?} */
var elem = this.selectorEl.nativeElement.querySelector(DOT + className);
if (elem.getAttribute(TABINDEX) !== ZERO_STR) {
// if the selected element is disabled move a focus to next/previous enabled element
/** @type {?} */
var tdList = this.getCalendarElements();
/** @type {?} */
var idx = row * (colCount + 1) + col;
/** @type {?} */
var enabledElem = null;
if (direction) {
// find next enabled
enabledElem = tdList.slice(idx).find((/**
* @param {?} td
* @return {?}
*/
function (td) { return td.getAttribute(TABINDEX) === ZERO_STR; }));
}
else {
// find previous enabled
enabledElem = tdList.slice(0, idx).reverse().find((/**
* @param {?} td
* @return {?}
*/
function (td) { return td.getAttribute(TABINDEX) === ZERO_STR; }));
}
elem = enabledElem ? enabledElem : this.selectorEl.nativeElement;
}
else {
elem.focus();
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.focusToSelector = /**
* @return {?}
*/
function () {
this.selectorEl.nativeElement.focus();
};
/**
* @return {?}
*/
CalendarComponent.prototype.getCalendarElements = /**
* @return {?}
*/
function () {
return Array.from(this.selectorEl.nativeElement.querySelectorAll(TD_SELECTOR));
};
/**
* @param {?} date
* @return {?}
*/
CalendarComponent.prototype.selectDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
var _a = this.opts, dateRange = _a.dateRange, dateFormat = _a.dateFormat, monthLabels = _a.monthLabels, dateRangeDatesDelimiter = _a.dateRangeDatesDelimiter, closeSelectorOnDateSelect = _a.closeSelectorOnDateSelect;
if (dateRange) {
// Date range
/** @type {?} */
var isBeginDateInitialized = this.utilService.isInitializedDate(this.selectedDateRange.begin);
/** @type {?} */
var isEndDateInitialized = this.utilService.isInitializedDate(this.selectedDateRange.end);
if (isBeginDateInitialized && isEndDateInitialized) {
// both already selected - set begin date and reset end date
this.selectedDateRange.begin = date;
this.selectedDateRange.end = this.utilService.resetDate();
this.rangeDateSelection({
isBegin: true,
date: date,
jsDate: this.utilService.myDateToJsDate(date),
dateFormat: dateFormat,
formatted: this.utilService.formatDate(date, dateFormat, monthLabels),
epoc: this.utilService.getEpocTime(date)
});
}
else if (!isBeginDateInitialized) {
// begin date
this.selectedDateRange.begin = date;
this.rangeDateSelection({
isBegin: true,
date: date,
jsDate: this.utilService.myDateToJsDate(date),
dateFormat: dateFormat,
formatted: this.utilService.formatDate(date, dateFormat, monthLabels),
epoc: this.utilService.getEpocTime(date)
});
}
else {
// second selection
/** @type {?} */
var firstDateEarlier = this.utilService.isDateEarlier(date, this.selectedDateRange.begin);
if (firstDateEarlier) {
this.selectedDateRange.begin = date;
this.rangeDateSelection({
isBegin: true,
date: date,
jsDate: this.utilService.myDateToJsDate(date),
dateFormat: dateFormat,
formatted: this.utilService.formatDate(date, dateFormat, monthLabels),
epoc: this.utilService.getEpocTime(date)
});
}
else {
this.selectedDateRange.end = date;
this.rangeDateSelection({
isBegin: false,
date: date,
jsDate: this.utilService.myDateToJsDate(date),
dateFormat: dateFormat,
formatted: this.utilService.formatDate(date, dateFormat, monthLabels),
epoc: this.utilService.getEpocTime(date)
});
this.dateChanged(this.utilService.getDateModel(null, this.selectedDateRange, dateFormat, monthLabels, dateRangeDatesDelimiter), closeSelectorOnDateSelect);
}
}
}
else {
// Single date
this.selectedDate = date;
this.dateChanged(this.utilService.getDateModel(this.selectedDate, null, dateFormat, monthLabels, dateRangeDatesDelimiter), closeSelectorOnDateSelect);
}
};
/**
* @param {?} y
* @param {?} m
* @return {?}
*/
CalendarComponent.prototype.monthStartIdx = /**
* @param {?} y
* @param {?} m
* @return {?}
*/
function (y, m) {
// Month start index
/** @type {?} */
var d = new Date();
d.setDate(1);
d.setMonth(m - 1);
d.setFullYear(y);
/** @type {?} */
var idx = d.getDay() + this.sundayIdx();
return idx >= 7 ? idx - 7 : idx;
};
/**
* @param {?} d
* @param {?} m
* @param {?} y
* @param {?} today
* @return {?}
*/
CalendarComponent.prototype.isCurrDay = /**
* @param {?} d
* @param {?} m
* @param {?} y
* @param {?} today
* @return {?}
*/
function (d, m, y, today) {
// Check is a given date the today
return d === today.day && m === today.month && y === today.year;
};
/**
* @param {?} date
* @return {?}
*/
CalendarComponent.prototype.getDayNumber = /**
* @param {?} date
* @return {?}
*/
function (date) {
// Get day number: su=0, mo=1, tu=2, we=3 ...
var year = date.year, month = date.month, day = date.day;
/** @type {?} */
var d = this.utilService.getJsDate(year, month, day);
return d.getDay();
};
/**
* @param {?} date
* @return {?}
*/
CalendarComponent.prototype.getWeekday = /**
* @param {?} date
* @return {?}
*/
function (date) {
// Get weekday: su, mo, tu, we ...
return this.weekDayOpts[this.getDayNumber(date)];
};
/**
* @return {?}
*/
CalendarComponent.prototype.sundayIdx = /**
* @return {?}
*/
function () {
// Index of Sunday day
return this.dayIdx > 0 ? 7 - this.dayIdx : 0;
};
/**
* @param {?} m
* @param {?} y
* @param {?} notifyChange
* @return {?}
*/
CalendarComponent.prototype.generateCalendar = /**
* @param {?} m
* @param {?} y
* @param {?} notifyChange
* @return {?}
*/
function (m, y, notifyChange) {
this.dates.length = 0;
/** @type {?} */
var today = this.utilService.getToday();
/** @type {?} */
var monthStart = this.monthStartIdx(y, m);
/** @type {?} */
var dInThisM = this.utilService.datesInMonth(m, y);
/** @type {?} */
var dInPrevM = this.utilService.datesInPrevMonth(m, y);
/** @type {?} */
var dayNbr = 1;
/** @type {?} */
var month = m;
/** @type {?} */
var cmo = MonthId.prev;
var _a = this.opts, rtl = _a.rtl, showWeekNumbers = _a.showWeekNumbers, firstDayOfWeek = _a.firstDayOfWeek;
for (var i = 1; i < 7; i++) {
/** @type {?} */
var col = rtl ? 6 : 0;
/** @type {?} */
var week = [];
if (i === 1) {
// First week
/** @type {?} */
var pm = dInPrevM - monthStart + 1;
// Previous month
for (var j = pm; j <= dInPrevM; j++) {
/** @type {?} */
var date = { year: m === 1 ? y - 1 : y, month: m === 1 ? 12 : m - 1, day: j };
week.push({
dateObj: date,
cmo: cmo,
currDay: this.isCurrDay(j, month - 1, y, today),
disabledDate: this.utilService.isDisabledDate(date, this.opts),
markedDate: this.utilService.isMarkedDate(date, this.opts),
highlight: this.utilService.isHighlightedDate(date, this.opts),
row: i - 1,
col: rtl ? col-- : col++
});
}
cmo = MonthId.curr;
// Current month
/** @type {?} */
var daysLeft = 7 - week.length;
for (var j = 0; j < daysLeft; j++) {
/** @type {?} */
var date = { year: y, month: m, day: dayNbr };
week.push({
dateObj: date,
cmo: cmo,
currDay: this.isCurrDay(dayNbr, m, y, today),
disabledDate: this.utilService.isDisabledDate(date, this.opts),
markedDate: this.utilService.isMarkedDate(date, this.opts),
highlight: this.utilService.isHighlightedDate(date, this.opts),
row: i - 1,
col: rtl ? col-- : col++
});
dayNbr++;
}
}
else {
// Rest of the weeks
for (var j = 1; j < 8; j++) {
if (dayNbr > dInThisM) {
// Next month
dayNbr = 1;
cmo = MonthId.next;
month = m + 1;
}
/** @type {?} */
var date = { year: cmo === MonthId.next && m === 12 ? y + 1 : y, month: cmo === MonthId.curr ? m : cmo === MonthId.next && m < 12 ? m + 1 : 1, day: dayNbr };
week.push({
dateObj: date,
cmo: cmo,
currDay: this.isCurrDay(dayNbr, month, y, today),
disabledDate: this.utilService.isDisabledDate(date, this.opts),
markedDate: this.utilService.isMarkedDate(date, this.opts),
highlight: this.utilService.isHighlightedDate(date, this.opts),
row: i - 1,
col: rtl ? col-- : col++
});
dayNbr++;
}
}
/** @type {?} */
var weekNbr = showWeekNumbers && firstDayOfWeek === MO ? this.utilService.getWeekNumber(week[0].dateObj) : 0;
this.dates.push({ week: week, weekNbr: weekNbr });
}
this.setDateViewHeaderBtnDisabledState(m, y);
if (notifyChange) {
// Notify parent
this.calendarViewChanged({ year: y, month: m, first: { number: 1, weekday: this.getWeekday({ year: y, month: m, day: 1 }) }, last: { number: dInThisM, weekday: this.getWeekday({ year: y, month: m, day: dInThisM }) } });
}
};
/**
* @param {?} m
* @param {?} y
* @return {?}
*/
CalendarComponent.prototype.setDateViewHeaderBtnDisabledState = /**
* @param {?} m
* @param {?} y
* @return {?}
*/
function (m, y) {
/** @type {?} */
var dpm = false;
/** @type {?} */
var dnm = false;
var _a = this.opts, disableHeaderButtons = _a.disableHeaderButtons, disableUntil = _a.disableUntil, disableSince = _a.disableSince, enableDates = _a.enableDates, minYear = _a.minYear, maxYear = _a.maxYear, rtl = _a.rtl;
if (disableHeaderButtons) {
/** @type {?} */
var duDate = { year: m === 1 ? y - 1 : y, month: m === 1 ? 12 : m - 1, day: this.utilService.datesInMonth(m === 1 ? 12 : m - 1, m === 1 ? y - 1 : y) };
/** @type {?} */
var dsDate = { year: m === 12 ? y + 1 : y, month: m === 12 ? 1 : m + 1, day: 1 };
dpm = this.utilService.isDisabledByDisableUntil(duDate, disableUntil)
&& !this.utilService.isPastDatesEnabled(duDate, enableDates);
dnm = this.utilService.isDisabledByDisableSince(dsDate, disableSince)
&& !this.utilService.isFutureDatesEnabled(dsDate, enableDates);
}
this.prevViewDisabled = m === 1 && y === minYear || dpm;
this.nextViewDisabled = m === 12 && y === maxYear || dnm;
if (rtl) {
this.swapHeaderBtnDisabled();
}
};
/**
* @param {?} y
* @return {?}
*/
CalendarComponent.prototype.setMonthViewHeaderBtnDisabledState = /**
* @param {?} y
* @return {?}
*/
function (y) {
/** @type {?} */
var dpm = false;
/** @type {?} */
var dnm = false;
var _a = this.opts, disableHeaderButtons = _a.disableHeaderButtons, disableUntil = _a.disableUntil, disableSince = _a.disableSince, enableDates = _a.enableDates, minYear = _a.minYear, maxYear = _a.maxYear, rtl = _a.rtl;
if (disableHeaderButtons) {
/** @type {?} */
var duDate = { year: y - 1, month: 12, day: 31 };
/** @type {?} */
var dsDate = { year: y + 1, month: 1, day: 1 };
dpm = this.utilService.isDisabledByDisableUntil(duDate, disableUntil)
&& !this.utilService.isPastDatesEnabled(duDate, enableDates);
dnm = this.utilService.isDisabledByDisableSince(dsDate, disableSince)
&& !this.utilService.isFutureDatesEnabled(dsDate, enableDates);
}
this.prevViewDisabled = y === minYear || dpm;
this.nextViewDisabled = y === maxYear || dnm;
if (rtl) {
this.swapHeaderBtnDisabled();
}
};
/**
* @param {?} yp
* @param {?} yn
* @return {?}
*/
CalendarComponent.prototype.setYearViewHeaderBtnDisabledState = /**
* @param {?} yp
* @param {?} yn
* @return {?}
*/
function (yp, yn) {
/** @type {?} */
var dpy = false;
/** @type {?} */
var dny = false;
var _a = this.opts, disableHeaderButtons = _a.disableHeaderButtons, disableUntil = _a.disableUntil, disableSince = _a.disableSince, enableDates = _a.enableDates, minYear = _a.minYear, maxYear = _a.maxYear, rtl = _a.rtl;
if (disableHeaderButtons) {
/** @type {?} */
var duDate = { year: yp - 1, month: 12, day: 31 };
/** @type {?} */
var dsDate = { year: yn + 1, month: 1, day: 1 };
dpy = this.utilService.isDisabledByDisableUntil(duDate, disableUntil)
&& !this.utilService.isPastDatesEnabled(duDate, enableDates);
dny = this.utilService.isDisabledByDisableSince(dsDate, disableSince)
&& !this.utilService.isFutureDatesEnabled(dsDate, enableDates);
}
this.prevViewDisabled = yp <= minYear || dpy;
this.nextViewDisabled = yn >= maxYear || dny;
if (rtl) {
this.swapHeaderBtnDisabled();
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.swapHeaderBtnDisabled = /**
* @return {?}
*/
function () {
var _a;
_a = tslib_1.__read([this.nextViewDisabled, this.prevViewDisabled], 2), this.prevViewDisabled = _a[0], this.nextViewDisabled = _a[1];
};
CalendarComponent.decorators = [
{ type: Component, args: [{
selector: "lib-angular-mydatepicker-calendar",
template: "<span #styleEl></span>\n<div class=\"ng-mydp {{opts.stylesData?.selector || ''}}\">\n <div class=\"myDpSelector\" #selectorEl \n [libAngularMyDatePickerCalendar]=\"{inline: opts.inline, selectorWidth: opts.selectorWidth, selectorHeight: opts.selectorHeight, selectorPos: selectorPos}\" \n [ngClass]=\"{'myDpSelectorArrow': opts.showSelectorArrow, 'myDpSelectorArrowLeft': opts.showSelectorArrow && !opts.alignSelectorRight, \n 'myDpSelectorArrowRight': opts.showSelectorArrow&&opts.alignSelectorRight, 'myDpSelectorAbsolute': !opts.inline, 'myDpSelectorPosInitial': opts.inline}\" \n (keyup)=\"onCloseSelector($event)\" tabindex=\"0\">\n\n <lib-selection-bar [opts]=\"opts\" [yearsDuration]=\"yearsDuration\" [visibleMonth]=\"visibleMonth\" [selectMonth]=\"selectMonth\" [selectYear]=\"selectYear\"\n [prevViewDisabled]=\"prevViewDisabled\" [nextViewDisabled]=\"nextViewDisabled\"\n (prevNavigateBtnClicked)=\"onPrevNavigateBtnClicked()\" (nextNavigateBtnClicked)=\"onNextNavigateBtnClicked()\"\n (monthViewBtnClicked)=\"onMonthViewBtnClicked()\" (yearViewBtnClicked)=\"onYearViewBtnClicked()\"></lib-selection-bar>\n\n <lib-day-view *ngIf=\"!selectMonth && !selectYear\" [opts]=\"opts\" [dates]=\"dates\" [weekDays]=\"weekDays\"\n [selectedDate]=\"selectedDate\" [selectedDateRange]=\"selectedDateRange\" [viewChanged]=\"viewChanged\"\n (dayCellClicked)=\"onDayCellClicked($event)\"\n (dayCellKeyDown)=\"onDayCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-day-view>\n\n <lib-month-view *ngIf=\"selectMonth\" [opts]=\"opts\" [months]=\"months\" [viewChanged]=\"viewChanged\"\n (monthCellClicked)=\"onMonthCellClicked($event)\"\n (monthCellKeyDown)=\"onMonthCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-month-view>\n\n <lib-year-view *ngIf=\"selectYear\" [opts]=\"opts\" [years]=\"years\" [viewChanged]=\"viewChanged\"\n (yearCellClicked)=\"onYearCellClicked($event)\"\n (yearCellKeyDown)=\"onYearCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-year-view>\n\n <lib-footer-bar *ngIf=\"opts.showFooterToday\" [opts]=\"opts\"\n (footerBarTxtClicked)=\"onTodayFooterClicked()\"></lib-footer-bar>\n </div>\n</div>\n",
providers: [UtilService],
encapsulation: ViewEncapsulation.None,
styles: [".ng-mydp{position:static}.ng-myrtl{direction:rtl}.ng-mydp *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;padding:0;margin:0}.ng-mydp table{display:table;border-spacing:0}.ng-mydp table td,.ng-mydp table th{padding:0;margin:0;vertical-align:middle;border:none}.myDpSelector{padding:4px;border:1px solid #ccc;background-color:#fff;border-radius:4px;z-index:100000}.myDpViewChangeAnimation{-webkit-animation:.2s linear myDpViewChangeAnimation;animation:.2s linear myDpViewChangeAnimation}@-webkit-keyframes myDpViewChangeAnimation{0%{transform:scale(.75);opacity:.1}100%{transform:scale(1);opacity:1}}@keyframes myDpViewChangeAnimation{0%{transform:scale(.75);opacity:.1}100%{transform:scale(1);opacity:1}}.myDpAnimationFadeIn{-webkit-animation:.5s linear myDpAnimationFadeIn;animation:.5s linear myDpAnimationFadeIn}@-webkit-keyframes myDpAnimationFadeIn{0%{transform:translateY(-50px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes myDpAnimationFadeIn{0%{transform:translateY(-50px);opacity:0}100%{transform:translateY(0);opacity:1}}.myDpAnimationFadeOut{-webkit-animation:.3s linear forwards myDpAnimationFadeOut;animation:.3s linear forwards myDpAnimationFadeOut}@-webkit-keyframes myDpAnimationFadeOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-50px);opacity:0}}@keyframes myDpAnimationFadeOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-50px);opacity:0}}.myDpAnimationScaleTopIn{-webkit-animation:.3s linear myDpAnimationScaleTopIn;animation:.3s linear myDpAnimationScaleTopIn}@-webkit-keyframes myDpAnimationScaleTopIn{0%{transform:scaleY(0);transform-origin:100% 0}100%{transform:scaleY(1);transform-origin:100% 0}}@keyframes myDpAnimationScaleTopIn{0%{transform:scaleY(0);transform-origin:100% 0}100%{transform:scaleY(1);transform-origin:100% 0}}.myDpAnimationScaleTopOut{-webkit-animation:.3s linear forwards myDpAnimationScaleTopOut;animation:.3s linear forwards myDpAnimationScaleTopOut}@-webkit-keyframes myDpAnimationScaleTopOut{0%{transform:scaleY(1);transform-origin:100% 0;opacity:1}100%{transform:scaleY(0);transform-origin:100% 0;opacity:0}}@keyframes myDpAnimationScaleTopOut{0%{transform:scaleY(1);transform-origin:100% 0;opacity:1}100%{transform:scaleY(0);transform-origin:100% 0;opacity:0}}.myDpAnimationScaleCenterIn{-webkit-animation:.3s linear myDpAnimationScaleCenterIn;animation:.3s linear myDpAnimationScaleCenterIn}@-webkit-keyframes myDpAnimationScaleCenterIn{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes myDpAnimationScaleCenterIn{0%{transform:scale(0)}100%{transform:scale(1)}}.myDpAnimationScaleCenterOut{-webkit-animation:.3s linear forwards myDpAnimationScaleCenterOut;animation:.3s linear forwards myDpAnimationScaleCenterOut}@-webkit-keyframes myDpAnimationScaleCenterOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}@keyframes myDpAnimationScaleCenterOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.myDpAnimationRotateIn{-webkit-animation:.3s linear myDpAnimationRotateIn;animation:.3s linear myDpAnimationRotateIn}@-webkit-keyframes myDpAnimationRotateIn{0%{transform:scale(.3) rotate(-45deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes myDpAnimationRotateIn{0%{transform:scale(.3) rotate(-45deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}.myDpAnimationRotateOut{-webkit-animation:.3s linear forwards myDpAnimationRotateOut;animation:.3s linear forwards myDpAnimationRotateOut}@-webkit-keyframes myDpAnimationRotateOut{0%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.3) rotate(-45deg);opacity:0}}@keyframes myDpAnimationRotateOut{0%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.3) rotate(-45deg);opacity:0}}.myDpAnimationFlipDiagonalIn{-webkit-animation:.3s linear myDpAnimationFlipDiagonalIn;animation:.3s linear myDpAnimationFlipDiagonalIn}@-webkit-keyframes myDpAnimationFlipDiagonalIn{0%{transform:rotate3d(1,1,0,-78deg)}100%{transform:rotate3d(1,1,0,0deg)}}@keyframes myDpAnimationFlipDiagonalIn{0%{transform:rotate3d(1,1,0,-78deg)}100%{transform:rotate3d(1,1,0,0deg)}}.myDpAnimationFlipDiagonalOut{-webkit-animation:.3s linear forwards myDpAnimationFlipDiagonalOut;animation:.3s linear forwards myDpAnimationFlipDiagonalOut}@-webkit-keyframes myDpAnimationFlipDiagonalOut{0%{transform:rotate3d(1,1,0,0deg);opacity:1}100%{transform:rotate3d(1,1,0,78deg);opacity:0}}@keyframes myDpAnimationFlipDiagonalOut{0%{transform:rotate3d(1,1,0,0deg);opacity:1}100%{transform:rotate3d(1,1,0,78deg);opacity:0}}.myDpSelectorAbsolute{position:absolute}.myDpSelectorPosInitial{position:initial}.myDpSelector:focus{box-shadow:-1px 1px 6px 0 #add8e6;outline:0}.myDpSelectorArrow{background:#fff}.myDpSelectorArrow:after,.myDpSelectorArrow:before{bottom:100%;border:solid transparent;content:\" \";height:0;width:0;position:absolute}.myDpSelectorArrow:after{border-color:rgba(250,250,250,0);border-bottom-color:#fafafa;border-width:10px;margin-left:-10px}.myDpSelectorArrow:before{border-color:rgba(204,204,204,0);border-bottom-color:#ccc;border-width:11px;margin-left:-11px}.myDpSelectorArrow:focus:before{border-bottom-color:#add8e6}.myDpSelectorArrowLeft:after,.myDpSelectorArrowLeft:before{left:24px}.myDpSelectorArrowRight:after,.myDpSelectorArrowRight:before{left:86%}::-ms-clear{display:none}.myDpCalTable,.myDpFooterBar,.myDpMonthTable,.myDpYearTable{border-radius:0 0 4px 4px}.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:first-child,.myDpMonthTable.myDpNoFooter tbo