fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
1,290 lines • 149 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, EventEmitter, Input, Output, HostListener, ElementRef, forwardRef, Inject, ChangeDetectorRef, HostBinding } from '@angular/core';
import { HashService } from '../utils/hash.service';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
/**
* @record
*/
export function CalendarDay() { }
if (false) {
/** @type {?} */
CalendarDay.prototype.date;
/** @type {?|undefined} */
CalendarDay.prototype.day;
/** @type {?|undefined} */
CalendarDay.prototype.weekDay;
/** @type {?|undefined} */
CalendarDay.prototype.monthStatus;
/** @type {?|undefined} */
CalendarDay.prototype.disabled;
/** @type {?|undefined} */
CalendarDay.prototype.blocked;
/** @type {?|undefined} */
CalendarDay.prototype.selected;
/** @type {?|undefined} */
CalendarDay.prototype.selectedFirst;
/** @type {?|undefined} */
CalendarDay.prototype.selectedRange;
/** @type {?|undefined} */
CalendarDay.prototype.selectedLast;
/** @type {?|undefined} */
CalendarDay.prototype.today;
/** @type {?|undefined} */
CalendarDay.prototype.isTabIndexed;
}
/**
* @record
*/
export function EmittedDate() { }
if (false) {
/** @type {?|undefined} */
EmittedDate.prototype.selectedDay;
/** @type {?|undefined} */
EmittedDate.prototype.selectedFirstDay;
/** @type {?|undefined} */
EmittedDate.prototype.selectedLastDay;
}
var CalendarComponent = /** @class */ (function () {
function CalendarComponent(hasher, eRef, cd) {
this.hasher = hasher;
this.eRef = eRef;
this.cd = cd;
this.init = false;
this.calType = 'single';
this.mondayStartOfWeek = false;
this.isInvalidDateInput = new EventEmitter();
this.isDateTimePicker = false;
this.invalidDate = false;
this.showCalendarMonths = false;
this.showCalendarYears = false;
this.showCalendarDates = true;
this.monthsShortName = [
'Jan.',
'Feb.',
'Mar.',
'Apr.',
'May',
'Jun.',
'Jul.',
'Aug.',
'Sep.',
'Oct.',
'Nov.',
'Dec.'
];
this.monthsFullName = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
this.daysPerMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.calendarGrid = [];
this.calendarYearsList = [];
this.today = new Date();
this.todayMonth = this.today.getMonth();
this.todayYear = this.today.getFullYear();
this.date = new Date();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.month];
this.year = this.date.getFullYear();
this.day = this.date.getDate();
this.firstYearCalendarList = this.year;
this.selectCounter = 0;
this.selectedDay = {
date: null
};
this.selectedDayChange = new EventEmitter();
this.selectedRangeFirst = {
date: null
};
this.selectedRangeFirstChange = new EventEmitter();
this.selectedRangeLast = {
date: null
};
this.selectedRangeLastChange = new EventEmitter();
this.emittedDate = {
selectedDay: this.selectedDay,
selectedFirstDay: this.selectedRangeFirst,
selectedLastDay: this.selectedRangeLast
};
this.closeCalendar = new EventEmitter();
this.disableFunction = (/**
* @param {?} d
* @return {?}
*/
function (d) {
return false;
});
this.blockFunction = (/**
* @param {?} d
* @return {?}
*/
function (d) {
return false;
});
this.onChange = (/**
* @return {?}
*/
function () { });
this.onTouched = (/**
* @return {?}
*/
function () { });
// A function that determines the number of days in a particular month
this.determineDaysInMonth = (/**
* @param {?} month
* @param {?} year
* @return {?}
*/
function (month, year) {
if (month === 1) {
if ((year % 100 !== 0 && year % 4 === 0) || year % 400 === 0) {
return 29;
}
else {
return this.daysPerMonth[month];
}
}
else {
return this.daysPerMonth[month];
}
});
}
/**
* @param {?} calendarMonth
* @return {?}
*/
CalendarComponent.prototype.getPreviousMonthDays = /**
* @param {?} calendarMonth
* @return {?}
*/
function (calendarMonth) {
// Previous month days
/** @type {?} */
var prevMonthLastDate;
if (this.mondayStartOfWeek) {
prevMonthLastDate = new Date(this.date.getFullYear(), this.date.getMonth(), -1);
}
else {
prevMonthLastDate = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
}
/** @type {?} */
var prevMonth = prevMonthLastDate.getMonth();
/** @type {?} */
var prevMonthYear = prevMonthLastDate.getFullYear();
/** @type {?} */
var prevMonthLastDay = prevMonthLastDate.getDate();
/** @type {?} */
var prevMonthLastWeekDay = prevMonthLastDate.getDay();
if (prevMonthLastWeekDay < 6) {
while (prevMonthLastWeekDay >= 0) {
/** @type {?} */
var prevMonthDay = prevMonthLastDay - prevMonthLastWeekDay;
/** @type {?} */
var calDate = new Date(prevMonthYear, prevMonth, prevMonthDay);
/** @type {?} */
var previousMonthCalendarDay = {
date: calDate,
day: calDate.getDate(),
weekDay: calDate.getDay(),
monthStatus: 'previous',
disabled: this.disableFunction(calDate),
blocked: this.blockFunction(calDate),
selected: (this.selectedDay.date && calDate.toDateString() === this.selectedDay.date.toDateString()) ||
(this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString()) ||
(this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString()),
selectedFirst: this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString(),
selectedLast: this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString(),
selectedRange: this.selectedRangeFirst.date &&
calDate.getTime() > this.selectedRangeFirst.date.getTime() &&
this.selectedRangeLast.date &&
calDate.getTime() < this.selectedRangeLast.date.getTime()
};
calendarMonth.push(previousMonthCalendarDay);
prevMonthLastWeekDay--;
}
}
return calendarMonth;
};
/**
* @param {?} calendarMonth
* @return {?}
*/
CalendarComponent.prototype.getCurrentMonthDays = /**
* @param {?} calendarMonth
* @return {?}
*/
function (calendarMonth) {
/** @type {?} */
var numOfDaysInCurrentMonth = this.determineDaysInMonth(this.month, this.year);
// Current month days
/** @type {?} */
var foundSelected = false;
for (var d = 1; d <= numOfDaysInCurrentMonth; d++) {
/** @type {?} */
var calDate = new Date(this.date.getFullYear(), this.date.getMonth(), d);
/** @type {?} */
var currMonthCalendarDay = {
date: calDate,
day: calDate.getDate(),
weekDay: calDate.getDay(),
monthStatus: 'current',
disabled: this.disableFunction(calDate),
blocked: this.blockFunction(calDate),
selected: (this.selectedDay.date && calDate.toDateString() === this.selectedDay.date.toDateString()) ||
(this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString()) ||
(this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString()),
selectedFirst: this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString(),
selectedLast: this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString(),
selectedRange: this.selectedRangeFirst.date &&
calDate.getTime() > this.selectedRangeFirst.date.getTime() &&
this.selectedRangeLast.date &&
calDate.getTime() < this.selectedRangeLast.date.getTime(),
today: calDate.toDateString() === this.today.toDateString(),
isTabIndexed: false
};
// if a day is selected, it should be tab indexed
if (currMonthCalendarDay.selected) {
foundSelected = true;
currMonthCalendarDay.isTabIndexed = true;
}
calendarMonth.push(currMonthCalendarDay);
}
if (!foundSelected) {
/** @type {?} */
var foundToday = false;
for (var d = 0; d < numOfDaysInCurrentMonth; d++) {
// if no day is selected, tab index today
if (calendarMonth[d] && calendarMonth[d].today) {
foundToday = true;
calendarMonth[d].isTabIndexed = true;
}
}
// if today isn't present on the calendarGrid, tab index the first day
if (!foundToday) {
calendarMonth[0].isTabIndexed = true;
}
}
return calendarMonth;
};
/**
* @param {?} calendarMonth
* @return {?}
*/
CalendarComponent.prototype.getNextMonthDays = /**
* @param {?} calendarMonth
* @return {?}
*/
function (calendarMonth) {
// Next month days
/** @type {?} */
var nextMonthDisplayedDays = 0;
// The calendar grid can have either 5 (35 days) or 6 (42 days) weeks
// depending on the week day of the first day of the current month
// and the number of days in the current month
if (calendarMonth.length > 35) {
nextMonthDisplayedDays = 42 - calendarMonth.length;
}
else {
nextMonthDisplayedDays = 35 - calendarMonth.length;
}
for (var nextD = 1; nextD <= nextMonthDisplayedDays; nextD++) {
/** @type {?} */
var nextMonthFirstDate = void 0;
if (this.date.getMonth() === 11) {
nextMonthFirstDate = new Date(this.date.getFullYear() + 1, 0, 1);
}
else {
nextMonthFirstDate = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);
}
/** @type {?} */
var nextMonth = nextMonthFirstDate.getMonth();
/** @type {?} */
var nextMonthYear = nextMonthFirstDate.getFullYear();
/** @type {?} */
var calDate = new Date(nextMonthYear, nextMonth, nextD);
/** @type {?} */
var nextMonthCalendarDay = {
date: calDate,
day: calDate.getDate(),
weekDay: calDate.getDay(),
monthStatus: 'next',
disabled: this.disableFunction(calDate),
blocked: this.blockFunction(calDate),
selected: (this.selectedDay.date && calDate.toDateString() === this.selectedDay.date.toDateString()) ||
(this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString()) ||
(this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString()),
selectedFirst: this.selectedRangeFirst.date &&
calDate.toDateString() === this.selectedRangeFirst.date.toDateString(),
selectedLast: this.selectedRangeLast.date &&
calDate.toDateString() === this.selectedRangeLast.date.toDateString(),
selectedRange: this.selectedRangeFirst.date &&
calDate.getTime() > this.selectedRangeFirst.date.getTime() &&
this.selectedRangeLast.date &&
calDate.getTime() < this.selectedRangeLast.date.getTime()
};
calendarMonth.push(nextMonthCalendarDay);
}
return calendarMonth;
};
/**
* @return {?}
*/
CalendarComponent.prototype.populateCalendar = /**
* @return {?}
*/
function () {
/** @type {?} */
var calendarMonth = [];
calendarMonth = this.getPreviousMonthDays(calendarMonth);
calendarMonth = this.getCurrentMonthDays(calendarMonth);
calendarMonth = this.getNextMonthDays(calendarMonth);
return calendarMonth;
};
// Construction functions
// Construction functions
/**
* @return {?}
*/
CalendarComponent.prototype.constructCalendar =
// Construction functions
/**
* @return {?}
*/
function () {
/** @type {?} */
var calendarDays = this.populateCalendar();
/** @type {?} */
var calendarGrid = [];
while (calendarDays.length > 0) {
calendarGrid.push(calendarDays.splice(0, 7));
}
this.calendarGrid = calendarGrid;
};
/**
* @return {?}
*/
CalendarComponent.prototype.refreshSelected = /**
* @return {?}
*/
function () {
var _this = this;
this.calendarGrid.forEach((/**
* @param {?} grid
* @return {?}
*/
function (grid) {
grid.forEach((/**
* @param {?} day
* @return {?}
*/
function (day) {
day.selected =
(_this.selectedDay.date && day.date && day.date.toDateString() === _this.selectedDay.date.toDateString()) ||
(_this.selectedRangeFirst.date &&
day.date.toDateString() === _this.selectedRangeFirst.date.toDateString()) ||
(_this.selectedRangeLast.date &&
day.date.toDateString() === _this.selectedRangeLast.date.toDateString());
day.selectedFirst =
_this.selectedRangeFirst.date && day.date &&
day.date.toDateString() === _this.selectedRangeFirst.date.toDateString();
day.selectedLast =
_this.selectedRangeLast.date && day.date &&
day.date.toDateString() === _this.selectedRangeLast.date.toDateString();
day.selectedRange =
_this.selectedRangeFirst.date &&
day.date.getTime() > _this.selectedRangeFirst.date.getTime() &&
_this.selectedRangeLast.date &&
day.date.getTime() < _this.selectedRangeLast.date.getTime();
}));
}));
};
/**
* @return {?}
*/
CalendarComponent.prototype.updateDatePickerInputEmitter = /**
* @return {?}
*/
function () {
if (this.calType === 'single') {
this.emittedDate.selectedDay = this.selectedDay;
}
else {
this.emittedDate.selectedFirstDay = this.selectedRangeFirst;
this.emittedDate.selectedLastDay = this.selectedRangeLast;
}
if (this.dateFromDatePicker) {
this.dateFromDatePicker.next(this.emittedDate);
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.constructCalendarYearsList = /**
* @return {?}
*/
function () {
this.calendarYearsList = [];
for (var y = 0; y < 12; y++) {
this.calendarYearsList.push(this.firstYearCalendarList + y);
}
};
/**
* @param {?} year
* @param {?} i
* @return {?}
*/
CalendarComponent.prototype.getYearTabIndex = /**
* @param {?} year
* @param {?} i
* @return {?}
*/
function (year, i) {
var _this = this;
/** @type {?} */
var retVal = -1;
// tab index currently selected year
if (year === this.year) {
retVal = 0;
}
else {
// if no year on the calendarYearsList is selected, tab index the first
/** @type {?} */
var foundYear_1 = false;
this.calendarYearsList.forEach((/**
* @param {?} yearFromList
* @return {?}
*/
function (yearFromList) {
if (_this.year === yearFromList) {
foundYear_1 = true;
}
}));
if (!foundYear_1) {
if (i === 0) {
retVal = 0;
}
}
}
return retVal;
};
// Functions that handle calendar navigation
// Functions that handle calendar navigation
/**
* @return {?}
*/
CalendarComponent.prototype.goToPreviousMonth =
// Functions that handle calendar navigation
/**
* @return {?}
*/
function () {
this.setCurrentMonth(this.date.getMonth() - 1);
this.selectedMonth = this.month;
this.constructCalendar();
};
/**
* @return {?}
*/
CalendarComponent.prototype.goToNextMonth = /**
* @return {?}
*/
function () {
this.setCurrentMonth(this.date.getMonth() + 1);
this.selectedMonth = this.month;
this.constructCalendar();
};
/**
* @return {?}
*/
CalendarComponent.prototype.loadNextYearsList = /**
* @return {?}
*/
function () {
this.calendarYearsList = [];
this.firstYearCalendarList += 12;
this.constructCalendarYearsList();
};
/**
* @return {?}
*/
CalendarComponent.prototype.loadPrevYearsList = /**
* @return {?}
*/
function () {
this.calendarYearsList = [];
this.firstYearCalendarList -= 12;
this.constructCalendarYearsList();
};
// Functions that handle selection (day, month, year)
// Functions that handle selection (day, month, year)
/**
* @param {?} day
* @param {?=} formEvent
* @param {?=} event
* @param {?=} closeCalendar
* @return {?}
*/
CalendarComponent.prototype.selectDate =
// Functions that handle selection (day, month, year)
/**
* @param {?} day
* @param {?=} formEvent
* @param {?=} event
* @param {?=} closeCalendar
* @return {?}
*/
function (day, formEvent, event, closeCalendar) {
if (formEvent === void 0) { formEvent = true; }
if (event) {
event.stopPropagation();
}
if (!day.blocked && !day.disabled) {
if (this.calType === 'single') {
this.selectedDay = day;
this.selectedDayChange.emit(this.selectedDay);
this.refreshSelected();
if (this.init) {
this.updateDatePickerInputEmitter();
}
if (formEvent) {
this.onChange({ date: day.date });
}
if (closeCalendar) {
this.closeCalendar.emit();
}
}
else {
if (this.selectCounter === 2) {
this.selectCounter = 0;
}
if (this.selectCounter === 1 && day.date !== this.selectedRangeLast.date) {
this.selectedRangeLast = day;
this.selectedRangeLastChange.emit(this.selectedRangeLast);
this.selectCounter++;
this.refreshSelected();
if (this.init) {
this.updateDatePickerInputEmitter();
}
if (formEvent) {
this.onChange({ date: this.selectedRangeFirst.date, rangeEnd: day.date });
}
}
if (this.selectCounter === 0) {
this.selectedRangeLast = day;
this.selectedRangeLastChange.emit(this.selectedRangeLast);
this.selectedRangeFirst = day;
this.selectedRangeFirstChange.emit(this.selectedRangeFirst);
this.selectCounter++;
this.refreshSelected();
if (this.init) {
this.updateDatePickerInputEmitter();
}
if (formEvent) {
this.onChange({ date: day.date, rangeEnd: day.date });
}
}
if (this.selectedRangeFirst.date > this.selectedRangeLast.date) {
/** @type {?} */
var tempSelectedRangeFirst = this.selectedRangeFirst;
this.selectedRangeFirst = this.selectedRangeLast;
this.selectedRangeFirstChange.emit(this.selectedRangeFirst);
this.selectedRangeLast = tempSelectedRangeFirst;
this.selectedRangeLastChange.emit(this.selectedRangeLast);
this.refreshSelected();
if (this.init) {
this.updateDatePickerInputEmitter();
}
if (formEvent) {
this.onChange({ date: this.selectedRangeFirst.date, rangeEnd: this.selectedRangeLast.date });
}
}
}
}
this.isInvalidDateInput.emit(false);
};
/**
* @param {?} month
* @return {?}
*/
CalendarComponent.prototype.setCurrentMonth = /**
* @param {?} month
* @return {?}
*/
function (month) {
this.date.setMonth(month);
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.year = this.date.getFullYear();
};
/**
* @param {?} selectedMonth
* @param {?=} event
* @return {?}
*/
CalendarComponent.prototype.selectMonth = /**
* @param {?} selectedMonth
* @param {?=} event
* @return {?}
*/
function (selectedMonth, event) {
if (event) {
event.stopPropagation();
}
this.selectedMonth = selectedMonth;
this.setCurrentMonth(selectedMonth);
this.constructCalendar();
this.openDaySelection();
};
/**
* @param {?} year
* @return {?}
*/
CalendarComponent.prototype.setCurrentYear = /**
* @param {?} year
* @return {?}
*/
function (year) {
this.date.setFullYear(year);
this.year = this.date.getFullYear();
};
/**
* @param {?} selectedYear
* @param {?=} event
* @return {?}
*/
CalendarComponent.prototype.selectYear = /**
* @param {?} selectedYear
* @param {?=} event
* @return {?}
*/
function (selectedYear, event) {
if (event) {
event.stopPropagation();
}
this.selectedMonth = this.month;
this.setCurrentYear(selectedYear);
this.constructCalendar();
this.openDaySelection();
};
// Functions that handle the calendar content - show/hide calendar dates, months list, years list
// Functions that handle the calendar content - show/hide calendar dates, months list, years list
/**
* @return {?}
*/
CalendarComponent.prototype.openMonthSelection =
// Functions that handle the calendar content - show/hide calendar dates, months list, years list
/**
* @return {?}
*/
function () {
if (this.showCalendarYears) {
this.showCalendarYears = false;
this.showCalendarMonths = true;
this.showCalendarDates = false;
}
else {
this.showCalendarMonths = !this.showCalendarMonths;
this.showCalendarYears = false;
this.showCalendarDates = !this.showCalendarDates;
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.openYearSelection = /**
* @return {?}
*/
function () {
if (this.showCalendarMonths) {
this.showCalendarMonths = false;
this.showCalendarYears = true;
this.showCalendarDates = false;
}
else {
this.showCalendarYears = !this.showCalendarYears;
this.showCalendarMonths = false;
this.showCalendarDates = !this.showCalendarDates;
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.openDaySelection = /**
* @return {?}
*/
function () {
this.showCalendarMonths = false;
this.showCalendarYears = false;
this.showCalendarDates = true;
};
/**
* @return {?}
*/
CalendarComponent.prototype.onEscapeKeydownHandler = /**
* @return {?}
*/
function () {
this.showCalendarDates = true;
this.showCalendarMonths = false;
this.showCalendarYears = false;
};
/**
* @param {?} e
* @return {?}
*/
CalendarComponent.prototype.onClickHandler = /**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var target = e.target;
if (!this.eRef.nativeElement.contains(target)) {
this.showCalendarDates = true;
this.showCalendarMonths = false;
this.showCalendarYears = false;
}
};
/**
* @param {?} date
* @return {?}
*/
CalendarComponent.prototype.validateDateFromDatePicker = /**
* @param {?} date
* @return {?}
*/
function (date) {
/** @type {?} */
var isInvalid = false;
/** @type {?} */
var month = date[0];
/** @type {?} */
var day = date[1];
/** @type {?} */
var year = date[2];
/** @type {?} */
var numOfDaysInMonth = 0;
if (isNaN(month) || isNaN(day) || isNaN(year)) {
isInvalid = true;
return isInvalid;
}
if (year < 1000 || year > 3000 || month < 1 || month > 12) {
isInvalid = true;
return isInvalid;
}
else {
numOfDaysInMonth = this.daysPerMonth[month - 1];
if (day < 1 || day > numOfDaysInMonth) {
isInvalid = true;
return isInvalid;
}
}
return isInvalid;
};
/**
* @return {?}
*/
CalendarComponent.prototype.resetSelection = /**
* @return {?}
*/
function () {
if (this.calType === 'single') {
this.selectedDay = { date: null };
this.selectedDayChange.emit(this.selectedDay);
}
else {
this.selectedRangeFirst = { date: null };
this.selectedRangeFirstChange.emit(this.selectedRangeFirst);
this.selectedRangeLast = { date: null };
this.selectedRangeLastChange.emit(this.selectedRangeLast);
}
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.day = this.date.getDate();
this.selectedMonth = null;
this.firstYearCalendarList = this.year;
this.selectCounter = 0;
this.calendarYearsList = [];
this.constructCalendarYearsList();
this.constructCalendar();
};
/**
* @param {?} event
* @param {?} year
* @return {?}
*/
CalendarComponent.prototype.onKeydownYearHandler = /**
* @param {?} event
* @param {?} year
* @return {?}
*/
function (event, year) {
/** @type {?} */
var newFocusedYearId;
if (event.code === 'Space' || event.code === 'Enter') {
event.preventDefault();
this.selectYear(year);
}
else if (event.code === 'ArrowUp') {
event.preventDefault();
if (this.calendarYearsList.indexOf(year) <= 3) {
this.loadPrevYearsList();
this.cd.detectChanges();
}
newFocusedYearId = '#' + this.calendarId + '-fd-year-' + (year - 4);
}
else if (event.code === 'ArrowDown') {
event.preventDefault();
if (this.calendarYearsList.indexOf(year) >= 8) {
this.loadNextYearsList();
this.cd.detectChanges();
}
newFocusedYearId = '#' + this.calendarId + '-fd-year-' + (year + 4);
}
else if (event.code === 'ArrowLeft') {
event.preventDefault();
if (year === this.calendarYearsList[0]) {
this.loadPrevYearsList();
this.cd.detectChanges();
}
newFocusedYearId = '#' + this.calendarId + '-fd-year-' + (year - 1);
}
else if (event.code === 'ArrowRight') {
event.preventDefault();
if (year === this.calendarYearsList[this.calendarYearsList.length - 1]) {
this.loadNextYearsList();
this.cd.detectChanges();
}
newFocusedYearId = '#' + this.calendarId + '-fd-year-' + (year + 1);
}
else if (event.code === 'Tab' && !event.shiftKey) {
if (!this.isDateTimePicker) {
event.preventDefault();
this.focusElement('#arrowLeft');
}
}
if (newFocusedYearId) {
this.focusElement(newFocusedYearId);
}
};
/**
* @param {?} event
* @param {?} month
* @return {?}
*/
CalendarComponent.prototype.onKeydownMonthHandler = /**
* @param {?} event
* @param {?} month
* @return {?}
*/
function (event, month) {
/** @type {?} */
var newFocusedMonthId;
if (event.code === 'Space' || event.code === 'Enter') {
event.preventDefault();
this.selectMonth(month);
}
else if (event.code === 'ArrowUp') {
event.preventDefault();
newFocusedMonthId = '#' + this.calendarId + '-fd-month-' + (month - 4);
}
else if (event.code === 'ArrowDown') {
event.preventDefault();
newFocusedMonthId = '#' + this.calendarId + '-fd-month-' + (month + 4);
}
else if (event.code === 'ArrowLeft') {
event.preventDefault();
if (month === 0) {
newFocusedMonthId = '#' + this.calendarId + '-fd-month-11';
}
else {
newFocusedMonthId = '#' + this.calendarId + '-fd-month-' + (month - 1);
}
}
else if (event.code === 'ArrowRight') {
event.preventDefault();
if (month === 11) {
newFocusedMonthId = '#' + this.calendarId + '-fd-month-0';
}
else {
newFocusedMonthId = '#' + this.calendarId + '-fd-month-' + (month + 1);
}
}
else if (event.code === 'Tab' && !event.shiftKey) {
if (!this.isDateTimePicker) {
event.preventDefault();
this.focusElement('#arrowLeft');
}
}
if (newFocusedMonthId) {
this.focusElement(newFocusedMonthId);
}
};
/**
* @param {?} event
* @param {?} cell
* @return {?}
*/
CalendarComponent.prototype.onKeydownDayHandler = /**
* @param {?} event
* @param {?} cell
* @return {?}
*/
function (event, cell) {
if (event.code === 'Tab' && !event.shiftKey) {
if (!this.isDateTimePicker) {
event.preventDefault();
this.focusElement('#arrowLeft');
}
}
else {
// if the grid has 6 rows, the last cell id is 66, if it has 5 rows it's 56
/** @type {?} */
var lastDay = this.calendarGrid.length === 6 ? 66 : 56;
/** @type {?} */
var currentId = parseInt(event.currentTarget.id.split('-').pop(), 10);
if (event.code === 'Space' || event.code === 'Enter') {
event.preventDefault();
/** @type {?} */
var closeCalendarPopover = true;
this.selectDate(cell, true, null, closeCalendarPopover);
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + currentId;
}
else if (event.code === 'ArrowUp') {
event.preventDefault();
if (currentId >= 10 && currentId <= 16) {
// if first row, go to previous month
this.goToPreviousMonth();
/** @type {?} */
var lastDigit = currentId.toString().split('').pop();
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + this.calendarGrid.length.toString() + lastDigit;
}
else {
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId - 10);
}
}
else if (event.code === 'ArrowDown') {
event.preventDefault();
if (currentId >= lastDay - 6 && currentId <= lastDay) {
// if last row, go to next month
this.goToNextMonth();
/** @type {?} */
var lastDigit = currentId.toString().split('').pop();
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-1' + lastDigit;
}
else {
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId + 10);
}
}
else if (event.code === 'ArrowLeft') {
event.preventDefault();
if (currentId === 10) {
// if the first day is selected, go to the last day of the previous month
this.goToPreviousMonth();
lastDay = this.calendarGrid.length === 6 ? 66 : 56;
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + lastDay;
}
else if (currentId.toString().split('').pop() === '0') {
// if the last digit is 0, skip to the last day of the previous week
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId - 4);
}
else {
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId - 1);
}
}
else if (event.code === 'ArrowRight') {
event.preventDefault();
if (currentId === lastDay) {
// if the last day is selected, go to the first day of the next month
this.goToNextMonth();
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-10';
}
else if (currentId.toString().split('').pop() === '6') {
// else if the last digit is 6, skip to the first day of the next week
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId + 4);
}
else {
this.newFocusedDayId = '#' + this.calendarId + '-fd-day-' + (currentId + 1);
}
}
if (this.newFocusedDayId) {
this.focusElement(this.newFocusedDayId);
}
}
};
/**
* @param {?} elementSelector
* @return {?}
*/
CalendarComponent.prototype.focusElement = /**
* @param {?} elementSelector
* @return {?}
*/
function (elementSelector) {
/** @type {?} */
var elementToFocus = this.eRef.nativeElement.querySelector(elementSelector);
if (elementToFocus) {
elementToFocus.focus();
}
};
/**
* @param {?} date
* @return {?}
*/
CalendarComponent.prototype.updateFromDatePicker = /**
* @param {?} date
* @return {?}
*/
function (date) {
if (this.calType === 'single') {
/** @type {?} */
var singleDate = date.replace(/\s/g, '').split(/[/]+/);
this.invalidDate = this.validateDateFromDatePicker(singleDate);
if (!this.invalidDate) {
this.selectedDay.date = new Date(singleDate[2], singleDate[0] - 1, singleDate[1]);
this.date = new Date(singleDate[2], singleDate[0] - 1, singleDate[1]);
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.isInvalidDateInput.emit(this.invalidDate);
this.constructCalendar();
this.constructCalendarYearsList();
this.updateDatePickerInputEmitter();
}
else {
this.isInvalidDateInput.emit(this.invalidDate);
this.resetSelection();
}
}
else {
/** @type {?} */
var currentDates = date.replace(/\s/g, '').split(/[-,]+/);
/** @type {?} */
var firstDate = currentDates[0].split(/[/]+/);
/** @type {?} */
var secondDate = currentDates[1].split(/[/]+/);
this.invalidDate =
this.validateDateFromDatePicker(firstDate) || this.validateDateFromDatePicker(secondDate);
if (!this.invalidDate) {
/** @type {?} */
var fDate = new Date(firstDate[2], firstDate[0] - 1, firstDate[1]);
/** @type {?} */
var lDate = new Date(secondDate[2], secondDate[0] - 1, secondDate[1]);
if (fDate.getTime() > lDate.getTime()) {
this.selectedRangeFirst.date = lDate;
this.selectedRangeLast.date = fDate;
}
else {
this.selectedRangeFirst.date = fDate;
this.selectedRangeLast.date = lDate;
}
this.date = new Date(firstDate[2], firstDate[0] - 1, firstDate[1]);
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.isInvalidDateInput.emit(this.invalidDate);
this.constructCalendar();
this.constructCalendarYearsList();
this.updateDatePickerInputEmitter();
}
else {
this.resetSelection();
this.isInvalidDateInput.emit(this.invalidDate);
}
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.date) {
this.date = new Date();
}
this.constructCalendar();
this.constructCalendarYearsList();
this.calendarId = this.hasher.hash();
if (this.month) {
this.selectMonth(this.month);
}
else {
this.selectMonth(this.date.getMonth());
}
if (this.year) {
this.selectYear(this.year);
}
else {
this.selectMonth(this.date.getFullYear());
}
if (this.dateFromDatePicker) {
this.dateFromDatePicker.subscribe((/**
* @param {?} date
* @return {?}
*/
function (date) {
if (date && typeof date === 'string') {
_this.updateFromDatePicker(date);
}
_this.constructCalendarYearsList();
}));
}
this.init = true;
};
/**
* @return {?}
*/
CalendarComponent.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
if (this.newFocusedDayId) {
this.focusElement(this.newFocusedDayId);
this.newFocusedDayId = null;
}
};
/**
* @return {?}
*/
CalendarComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.dateFromDatePicker) {
this.dateFromDatePicker.unsubscribe();
}
};
/**
* @param {?} fn
* @return {?}
*/
CalendarComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
CalendarComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} isDisabled
* @return {?}
*/
CalendarComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
// void
};
/**
* @param {?} selected
* @return {?}
*/
CalendarComponent.prototype.writeValue = /**
* @param {?} selected
* @return {?}
*/
function (selected) {
if (selected && this.calType) {
if (selected.date && this.calType === 'single') {
this.singleFormsSetup(selected);
}
else if (selected.date && selected.rangeEnd && this.calType === 'range') {
this.rangeFormsSetup(selected);
}
}
};
/**
* @private
* @param {?} selected
* @return {?}
*/
CalendarComponent.prototype.singleFormsSetup = /**
* @private
* @param {?} selected
* @return {?}
*/
function (selected) {
this.selectedDay.date = new Date(selected.date.getFullYear(), selected.date.getMonth(), selected.date.getDate());
this.date = new Date(selected.date.getFullYear(), selected.date.getMonth(), selected.date.getDate());
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.firstYearCalendarList = this.year;
this.constructCalendar();
this.constructCalendarYearsList();
};
/**
* @private
* @param {?} selected
* @return {?}
*/
CalendarComponent.prototype.rangeFormsSetup = /**
* @private
* @param {?} selected
* @return {?}
*/
function (selected) {
/** @type {?} */
var fDate = new Date(selected.date.getFullYear(), selected.date.getMonth(), selected.date.getDate());
/** @type {?} */
var lDate = new Date(selected.rangeEnd.getFullYear(), selected.rangeEnd.getMonth(), selected.rangeEnd.getDate());
if (fDate.getTime() > lDate.getTime()) {
this.selectedRangeFirst.date = lDate;
this.selectedRangeLast.date = fDate;
}
else {
this.selectedRangeFirst.date = fDate;
this.selectedRangeLast.date = lDate;
}
this.date = new Date(selected.date.getFullYear(), selected.date.getMonth(), selected.date.getDate());
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.monthName = this.monthsFullName[this.date.getMonth()];
this.firstYearCalendarList = this.year;
this.constructCalendar();
this.constructCalendarYearsList();
};
CalendarComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-calendar',
template: "<header class=\"fd-calendar__header\">\n <div class=\"fd-calendar__navigation\">\n <div class=\"fd-calendar__action\">\n <button id=\"arrowLeft\" class=\" fd-button--toolbar fd-button--xs sap-icon--slim-arrow-left\"\n [attr.aria-label]=\"showCalendarYears ? 'previous year' : 'previous month'\"\n (click)=\"showCalendarYears ? loadPrevYearsList() : goToPreviousMonth()\"></button>\n </div>\n <div class=\"fd-calendar__action\">\n <button class=\" fd-button--light fd-button--s\"\n aria-label=\"month selection\"\n (click)=\"openMonthSelection()\">{{monthName}}</button>\n </div>\n <div class=\"fd-calendar__action\">\n <button class=\" fd-button--light fd-button--s\"\n aria-label=\"year selection\"\n (click)=\"openYearSelection()\">{{year}}</button>\n </div>\n <div class=\"fd-calendar__action\">\n <button class=\" fd-button--toolbar fd-button--xs sap-icon--slim-arrow-right\"\n [attr.aria-label]=\"showCalendarYears ? 'next year' : 'next month'\"\n (click)=\"showCalendarYears ? loadNextYearsList() : goToNextMonth()\"></button>\n </div>\n </div>\n</header>\n<div class=\"fd-calendar__content\">\n <div class=\"fd-calendar__years\"\n *ngIf=\"showCalendarYears\">\n <ul class=\"fd-calendar__list\">\n <li class=\"fd-calendar__item\"\n *ngFor=\"let listYear of calendarYearsList; let i = index;\"\n [ngClass]='(listYear===todayYear ? \" fd-calendar__item--current\" : \"\") + (listYear===year ? \" is-selected\" : \"\")'\n (click)=\"selectYear(listYear, $event)\">\n <span role=\"button\" [attr.tabIndex]=\"getYearTabIndex(listYear, i)\"\n [attr.id]=\"calendarId + '-fd-year-' + listYear\"\n (keydown)=\"onKeydownYearHandler($event, listYear)\"\n class=\"fd-calendar__text\">{{listYear}}</span>\n </li>\n </ul>\n </div>\n\n <div class=\"fd-calendar__months\"\n *ngIf=\"showCalendarMonths\">\n <ul class=\"fd-calendar__list\">\n <li class=\"fd-calendar__item\"\n *ngFor=\"let monthShortName of monthsShortName, let i=index\"\n [ngClass]='(i===todayMonth && year===todayYear ? \" fd-calendar__item--current\" : \"\") + (i===selectedMonth ? \" is-selected\" : \"\") '\n (click)=\"selectMonth(i, $event)\">\n <span role=\"button\" [attr.tabIndex]=\"i === selectedMonth ? 0 : -1\"\n [attr.id]=\"calendarId + '-fd-month-' + i\" (keydown)=\"onKeydownMonthHandler($event, i)\"\n class=\"fd-calendar__text\">{{monthShortName}}</span>\n </li>\n </ul>\n </div>\n\n <div class=\"fd-calendar__dates\"\n *ngIf=\"showCalendarDates\">\n <table class=\"fd-calendar__table\"\n role=\"grid\">\n <thead class=\"fd-calendar__group\">\n <tr class=\"fd-calendar__row\">\n <th class=\"fd-calendar__column-header\"\n *ngFor=\"let day of weekDays\">\n <span class=\"fd-calendar__day-of-week\">{{day}}</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"fd-calendar__group\" [attr.id]=\"calendarId + '-dates-table'\">\n <tr class=\"fd-calendar__row\"\n *ngFor=\"let row of calendarGrid; let i = index;\">\n <td class=\"fd-calendar__item\"\n role=\"gridcell\"\n aria-label=\"day of the month\"\n *ngFor=\"let cell of row; let cellIndex = index;\"\n [ngClass]='(cell.monthStatus !== \"current\" ? \" fd-calendar__item--other-month\": \"\") +\n (cell.selected ? \" is-selected\": \"\") + \n (calType===\"range\" && cell.selectedLast && selectedRangeFirst != selectedRangeLast ? \" is-selected-range-last\": \"\") + \n (calType===\"range\" && cell.selectedFirst && selectedRangeFirst != selectedRangeLast ? \" is-selected-range-first\": \"\") + \n (calType===\"range\" && cell.selectedRange && !cell.selectedFirst && !cell.selectedLast ? \" is-selected-range\": \"\") +\n (cell.today ? \" fd-calendar__item--current\": \"\") + \n (cell.disabled ? \" is-disabled\": \"\") +\n (cell.blocked ? \" is-blocked\": \"\")'\n (click)=\"