@nodro7/angular-mydatepicker
Version:
Angular datepicker
955 lines (942 loc) • 170 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Output, Input, ViewEncapsulation, Component, Directive, HostBinding, ViewChild, forwardRef, HostListener, NgModule } from '@angular/core';
/**
* Event key codes
*/
var KeyCode;
(function (KeyCode) {
KeyCode[KeyCode["enter"] = 13] = "enter";
KeyCode[KeyCode["esc"] = 27] = "esc";
KeyCode[KeyCode["space"] = 32] = "space";
KeyCode[KeyCode["leftArrow"] = 37] = "leftArrow";
KeyCode[KeyCode["upArrow"] = 38] = "upArrow";
KeyCode[KeyCode["rightArrow"] = 39] = "rightArrow";
KeyCode[KeyCode["downArrow"] = 40] = "downArrow";
KeyCode[KeyCode["tab"] = 9] = "tab";
KeyCode[KeyCode["shift"] = 16] = "shift";
})(KeyCode || (KeyCode = {}));
/**
* Event key names
*/
var KeyName;
(function (KeyName) {
KeyName["enter"] = "Enter";
KeyName["esc"] = "Escape|Esc";
KeyName["space"] = " |Spacebar";
KeyName["leftArrow"] = "ArrowLeft|Left";
KeyName["upArrow"] = "ArrowUp|Up";
KeyName["rightArrow"] = "ArrowRight|Right";
KeyName["downArrow"] = "ArrowDown|Down";
KeyName["tab"] = "Tab";
KeyName["shift"] = "Shift";
})(KeyName || (KeyName = {}));
/**
* Constants
*/
const D = "d";
const DD = "dd";
const M = "m";
const MM = "mm";
const MMM = "mmm";
const Y = "y";
const YYYY = "yyyy";
const ORDINAL = "##";
const ST = 'st';
const ND = "nd";
const RD = "rd";
const DATE_ROW_COUNT = 5;
const DATE_COL_COUNT = 6;
const MONTH_ROW_COUNT = 3;
const MONTH_COL_COUNT = 2;
const YEAR_ROW_COUNT = 4;
const YEAR_COL_COUNT = 4;
const DOT = ".";
const UNDER_LINE = "_";
const PIPE = "|";
const YEAR_SEPARATOR = " - ";
const SU = "su";
const MO = "mo";
const TU = "tu";
const WE = "we";
const TH = "th";
const FR = "fr";
const SA = "sa";
const DEFAULT_LOCALE = "en";
const ZERO_STR = "0";
const EMPTY_STR = "";
const SPACE_STR = " ";
const CLICK = "click";
const KEYUP = "keyup";
const BLUR = "blur";
const DISABLED = "disabled";
const BODY = "body";
const VALUE = "value";
const OPTIONS = "options";
const DEFAULT_MONTH = "defaultMonth";
const LOCALE = "locale";
const OBJECT = "object";
const PX = "px";
const STYLE = "style";
const INNER_HTML = "innerHTML";
const OPTS = "opts";
const YEARS_DURATION = "yearsDuration";
const YEARS = "years";
const VISIBLE_MONTH = "visibleMonth";
const SELECT_MONTH = "selectMonth";
const SELECT_YEAR = "selectYear";
const PREV_VIEW_DISABLED = "prevViewDisabled";
const NEXT_VIEW_DISABLED = "nextViewDisabled";
const DATES = "dates";
const WEEK_DAYS = "weekDays";
const SELECTED_DATE = "selectedDate";
const SELECTED_DATE_RANGE = "selectedDateRange";
const MONTHS = "months";
const ANIMATION_END = "animationend";
const ANIMATION_TIMEOUT = 550;
const MY_DP_ANIMATION = "myDpAnimation";
const ANIMATION_NAMES = ["Fade", "ScaleTop", "ScaleCenter", "Rotate", "FlipDiagonal", "Own"];
const IN = "In";
const OUT = "Out";
const TABINDEX = "tabindex";
const TD_SELECTOR = "table tbody tr td:not(.myDpDaycellWeekNbr)";
const PREVENT_CLOSE_TIMEOUT = 50;
class UtilService {
constructor() {
this.weekDays = [SU, MO, TU, WE, TH, FR, SA];
}
isDateValid(dateStr, options, validateOpts) {
const { dateFormat, minYear, maxYear, monthLabels } = options;
const returnDate = this.resetDate();
const datesInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const isMonthStr = dateFormat.indexOf(MMM) !== -1;
const delimeters = dateFormat.match(/[^(d#my)]{1,}/g);
if (!dateStr || dateStr === EMPTY_STR) {
return returnDate;
}
const dateValues = this.getDateValue(dateStr, dateFormat, delimeters);
let year = 0;
let month = 0;
let day = 0;
for (let dv of dateValues) {
if (dv.format.indexOf(ORDINAL) != -1) {
const dayNumber = parseInt(dv.value.replace(/\D/g, ''));
const ordinalStr = dv.value.replace(/[0-9]/g, '');
const ordinal = this.getOrdinal(dayNumber);
if (ordinal !== ordinalStr) {
return returnDate;
}
dv.value = dv.value.replace(ST, EMPTY_STR).replace(ND, EMPTY_STR).replace(RD, EMPTY_STR).replace(TH, EMPTY_STR);
dv.format = dv.format.replace(ORDINAL, EMPTY_STR);
}
const { value, format } = dv;
if (value && /^\d+$/.test(value) && Number(value) === 0) {
return returnDate;
}
if (format.indexOf(YYYY) !== -1) {
year = this.getNumberByValue(dv);
}
else if (format.indexOf(M) !== -1) {
month = isMonthStr ? this.getMonthNumberByMonthName(dv, monthLabels) : this.getNumberByValue(dv);
}
else if (format.indexOf(D) !== -1) {
day = this.getNumberByValue(dv);
}
}
const { validateDisabledDates, selectedValue } = validateOpts;
year = year === 0 && selectedValue ? selectedValue.year : year;
month = month === 0 && selectedValue ? selectedValue.month : month;
day = day === 0 && selectedValue ? selectedValue.day : day;
const today = this.getToday();
if (year === 0 && (month !== 0 || day !== 0)) {
year = today.year;
}
if (month === 0 && (year !== 0 || day !== 0)) {
month = today.month;
}
if (day === 0 && (year !== 0 || month !== 0)) {
day = today.day;
}
if (month !== -1 && day !== -1 && year !== -1) {
if (year < minYear || year > maxYear || month < 1 || month > 12) {
return returnDate;
}
const date = { year, month, day };
if (validateDisabledDates && this.isDisabledDate(date, options).disabled) {
return returnDate;
}
if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) {
datesInMonth[1] = 29;
}
if (day < 1 || day > datesInMonth[month - 1]) {
return returnDate;
}
// Valid date
return date;
}
return returnDate;
}
isDateValidDateRange(dateRangeStr, options, validateOpts) {
let dateRange = { begin: this.resetDate(), end: this.resetDate() };
if (dateRangeStr && dateRangeStr.length) {
const dates = dateRangeStr.split(options.dateRangeDatesDelimiter);
if (dates && dates.length === 2) {
const [beginDate, endDate] = dates;
let { selectedValue } = validateOpts;
if (selectedValue) {
validateOpts.selectedValue = selectedValue.begin;
}
const begin = this.isDateValid(beginDate, options, validateOpts);
if (this.isInitializedDate(begin)) {
if (selectedValue) {
validateOpts.selectedValue = selectedValue.end;
}
const end = this.isDateValid(endDate, options, validateOpts);
if (this.isInitializedDate(end) && this.isDateSameOrEarlier(begin, end)) {
dateRange = { begin, end };
}
}
}
}
return dateRange;
}
getDateValue(dateStr, dateFormat, delimeters) {
let del = EMPTY_STR;
if (delimeters) {
for (const d of delimeters) {
if (del.indexOf(d) === -1) {
del += d;
}
}
}
const re = new RegExp("[" + del + "]");
const ds = dateStr.split(re);
const df = dateFormat.split(re);
const da = [];
for (let i = 0; i < df.length; i++) {
if (df[i].indexOf(YYYY) !== -1) {
da.push({ value: ds[i], format: df[i] });
}
if (df[i].indexOf(M) !== -1) {
da.push({ value: ds[i], format: df[i] });
}
if (df[i].indexOf(D) !== -1) {
da.push({ value: ds[i], format: df[i] });
}
}
return da;
}
getMonthNumberByMonthName(df, monthLabels) {
if (df.value) {
for (let key = 1; key <= 12; key++) {
if (df.value.toLowerCase() === monthLabels[key].toLowerCase()) {
return key;
}
}
}
return -1;
}
getNumberByValue(df) {
if (!/^\d+$/.test(df.value)) {
return -1;
}
let nbr = Number(df.value);
if (df.format.length === 1 && df.value.length !== 1 && nbr < 10 || df.format.length === 1 && df.value.length !== 2 && nbr >= 10) {
nbr = -1;
}
else if (df.format.length === 2 && df.value.length > 2) {
nbr = -1;
}
return nbr;
}
parseDefaultMonth(monthString) {
const month = { monthTxt: EMPTY_STR, monthNbr: 0, year: 0 };
if (monthString !== EMPTY_STR) {
const split = monthString.split(monthString.match(/[^0-9]/)[0]);
month.monthNbr = split[0].length === 2 ? Number(split[0]) : Number(split[1]);
month.year = split[0].length === 2 ? Number(split[1]) : Number(split[0]);
}
return month;
}
isDisabledDate(date, options) {
const { minYear, maxYear, disableUntil, disableSince, disableWeekends, disableDates, disableDateRanges, disableWeekdays, enableDates } = options;
if (this.dateMatchToDates(date, enableDates)) {
return this.getDisabledValue(false, EMPTY_STR);
}
if (date.year < minYear && date.month === 12 || date.year > maxYear && date.month === 1) {
return this.getDisabledValue(true, EMPTY_STR);
}
const inputDates = disableDates;
const result = inputDates.find((d) => {
return d.dates;
});
if (!result) {
if (this.dateMatchToDates(date, inputDates)) {
return this.getDisabledValue(true, EMPTY_STR);
}
}
else {
for (const dd of inputDates) {
if (this.dateMatchToDates(date, dd.dates)) {
return this.getDisabledValue(true, dd.styleClass);
}
}
}
if (this.isDisabledByDisableUntil(date, disableUntil)) {
return this.getDisabledValue(true, EMPTY_STR);
}
if (this.isDisabledByDisableSince(date, disableSince)) {
return this.getDisabledValue(true, EMPTY_STR);
}
if (disableWeekends) {
const dayNbr = this.getDayNumber(date);
if (dayNbr === 0 || dayNbr === 6) {
return this.getDisabledValue(true, EMPTY_STR);
}
}
const dn = this.getDayNumber(date);
if (disableWeekdays.length > 0) {
for (const wd of disableWeekdays) {
if (dn === this.getWeekdayIndex(wd)) {
return this.getDisabledValue(true, EMPTY_STR);
}
}
}
if (this.isDisabledByDisableDateRange(date, date, disableDateRanges)) {
return this.getDisabledValue(true, EMPTY_STR);
}
return this.getDisabledValue(false, EMPTY_STR);
}
getDisabledValue(disabled, styleClass) {
return { disabled, styleClass };
}
dateMatchToDates(date, dates) {
for (const d of dates) {
if ((d.year === 0 || d.year === date.year) && (d.month === 0 || d.month === date.month) && d.day === date.day) {
return true;
}
}
return false;
}
isDisabledMonth(year, month, options) {
const { disableUntil, disableSince, disableDateRanges, enableDates } = options;
const dateEnd = { year, month, day: this.datesInMonth(month, year) };
const dateBegin = { year, month, day: 1 };
if (this.isDatesEnabled(dateBegin, dateEnd, enableDates)) {
return false;
}
if (this.isDisabledByDisableUntil(dateEnd, disableUntil)) {
return true;
}
if (this.isDisabledByDisableSince(dateBegin, disableSince)) {
return true;
}
if (this.isDisabledByDisableDateRange(dateBegin, dateEnd, disableDateRanges)) {
return true;
}
return false;
}
isDisabledYear(year, options) {
const { disableUntil, disableSince, disableDateRanges, enableDates, minYear, maxYear } = options;
const dateEnd = { year, month: 12, day: 31 };
const dateBegin = { year, month: 1, day: 1 };
if (this.isDatesEnabled(dateBegin, dateEnd, enableDates)) {
return false;
}
if (this.isDisabledByDisableUntil(dateEnd, disableUntil)) {
return true;
}
if (this.isDisabledByDisableSince(dateBegin, disableSince)) {
return true;
}
if (this.isDisabledByDisableDateRange(dateBegin, dateEnd, disableDateRanges)) {
return true;
}
if (year < minYear || year > maxYear) {
return true;
}
return false;
}
isDisabledByDisableUntil(date, disableUntil) {
return this.isInitializedDate(disableUntil) && this.getTimeInMilliseconds(date) <= this.getTimeInMilliseconds(disableUntil);
}
isDisabledByDisableSince(date, disableSince) {
return this.isInitializedDate(disableSince) && this.getTimeInMilliseconds(date) >= this.getTimeInMilliseconds(disableSince);
}
isPastDatesEnabled(date, enableDates) {
for (const d of enableDates) {
if (this.getTimeInMilliseconds(d) <= this.getTimeInMilliseconds(date)) {
return true;
}
}
return false;
}
isFutureDatesEnabled(date, enableDates) {
for (const d of enableDates) {
if (this.getTimeInMilliseconds(d) >= this.getTimeInMilliseconds(date)) {
return true;
}
}
return false;
}
isDatesEnabled(dateBegin, dateEnd, enableDates) {
for (const d of enableDates) {
if (this.getTimeInMilliseconds(d) >= this.getTimeInMilliseconds(dateBegin)
&& this.getTimeInMilliseconds(d) <= this.getTimeInMilliseconds(dateEnd)) {
return true;
}
}
return false;
}
isDisabledByDisableDateRange(dateBegin, dateEnd, disableDateRanges) {
const dateMsBegin = this.getTimeInMilliseconds(dateBegin);
const dateMsEnd = this.getTimeInMilliseconds(dateEnd);
for (const d of disableDateRanges) {
if (this.isInitializedDate(d.begin) && this.isInitializedDate(d.end)
&& dateMsBegin >= this.getTimeInMilliseconds(d.begin) && dateMsEnd <= this.getTimeInMilliseconds(d.end)) {
return true;
}
}
return false;
}
isMarkedDate(date, options) {
const { markDates, markWeekends } = options;
for (const md of markDates) {
if (this.dateMatchToDates(date, md.dates)) {
return this.getMarkedValue(true, md.color, md.styleClass);
}
}
if (markWeekends && markWeekends.marked) {
const dayNbr = this.getDayNumber(date);
if (dayNbr === 0 || dayNbr === 6) {
return this.getMarkedValue(true, markWeekends.color, EMPTY_STR);
}
}
return this.getMarkedValue(false, EMPTY_STR, EMPTY_STR);
}
getMarkedValue(marked, color, styleClass) {
return { marked, color: color ? color : EMPTY_STR, styleClass: styleClass ? styleClass : EMPTY_STR };
}
isHighlightedDate(date, options) {
const { sunHighlight, satHighlight, highlightDates } = options;
const dayNbr = this.getDayNumber(date);
if (sunHighlight && dayNbr === 0 || satHighlight && dayNbr === 6) {
return true;
}
if (this.dateMatchToDates(date, highlightDates)) {
return true;
}
return false;
}
getWeekNumber(date) {
const d = new Date(date.year, date.month - 1, date.day, 0, 0, 0, 0);
d.setDate(d.getDate() + (d.getDay() === 0 ? -3 : 4 - d.getDay()));
return Math.round(((d.getTime() - new Date(d.getFullYear(), 0, 4).getTime()) / 86400000) / 7) + 1;
}
getDateModel(date, dateRange, dateFormat, monthLabels, rangeDelimiter, dateStr = EMPTY_STR) {
let singleDateModel = null;
let dateRangeModel = null;
if (date) {
singleDateModel = {
date,
jsDate: this.myDateToJsDate(date),
formatted: dateStr.length ? dateStr : this.formatDate(date, dateFormat, monthLabels),
epoc: this.getEpocTime(date)
};
}
else {
dateRangeModel = {
beginDate: dateRange.begin,
beginJsDate: this.myDateToJsDate(dateRange.begin),
beginEpoc: this.getEpocTime(dateRange.begin),
endDate: dateRange.end,
endJsDate: this.myDateToJsDate(dateRange.end),
endEpoc: this.getEpocTime(dateRange.end),
formatted: this.formatDate(dateRange.begin, dateFormat, monthLabels) + rangeDelimiter + this.formatDate(dateRange.end, dateFormat, monthLabels)
};
}
return {
isRange: date === null,
singleDate: singleDateModel,
dateRange: dateRangeModel
};
}
formatDate(date, dateFormat, monthLabels) {
let formatted = dateFormat.replace(YYYY, String(date.year));
if (dateFormat.indexOf(MMM) !== -1) {
formatted = formatted.replace(MMM, monthLabels[date.month]);
}
else if (dateFormat.indexOf(MM) !== -1) {
formatted = formatted.replace(MM, this.preZero(date.month));
}
else {
formatted = formatted.replace(M, String(date.month));
}
if (dateFormat.indexOf(DD) !== -1) {
formatted = formatted.replace(DD, this.preZero(date.day));
}
else {
formatted = formatted.replace(D, String(date.day));
}
if (dateFormat.indexOf(ORDINAL) !== -1) {
formatted = formatted.replace(ORDINAL, this.getOrdinal(date.day));
}
return formatted;
}
getOrdinal(date) {
if (date > 3 && date < 21) {
return TH;
}
switch (date % 10) {
case 1:
return ST;
case 2:
return ND;
case 3:
return RD;
default:
return TH;
}
}
getFormattedDate(model) {
return !model.isRange ? model.singleDate.formatted : model.dateRange.formatted;
}
preZero(val) {
return val < 10 ? ZERO_STR + val : String(val);
}
isInitializedDate(date) {
return date.year !== 0 && date.month !== 0 && date.day !== 0;
}
isDateEarlier(firstDate, secondDate) {
return this.getTimeInMilliseconds(firstDate) < this.getTimeInMilliseconds(secondDate);
}
isDateSameOrEarlier(firstDate, secondDate) {
return this.getTimeInMilliseconds(firstDate) <= this.getTimeInMilliseconds(secondDate);
}
isDateSame(firstDate, secondDate) {
return this.getTimeInMilliseconds(firstDate) === this.getTimeInMilliseconds(secondDate);
}
isDateRangeBeginOrEndSame(dateRange, date) {
const dateMs = this.getTimeInMilliseconds(date);
return this.getTimeInMilliseconds(dateRange.begin) === dateMs || this.getTimeInMilliseconds(dateRange.end) === dateMs;
}
isDateRangeBegin(dateRange, date) {
const dateMs = this.getTimeInMilliseconds(date);
return this.getTimeInMilliseconds(dateRange.begin) === dateMs;
}
isDateRangeEnd(dateRange, date) {
const dateMs = this.getTimeInMilliseconds(date);
return this.getTimeInMilliseconds(dateRange.end) === dateMs;
}
isDateInRange(date, dateRange) {
if (!this.isInitializedDate(dateRange.begin) || !this.isInitializedDate(dateRange.end)) {
return false;
}
return this.isDateSameOrEarlier(dateRange.begin, date) && this.isDateSameOrEarlier(date, dateRange.end);
}
resetDate() {
return { year: 0, month: 0, day: 0 };
}
getTimeInMilliseconds(date) {
return this.myDateToJsDate(date).getTime();
}
getToday() {
const date = new Date();
return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
}
getDayNumber(date) {
return new Date(date.year, date.month - 1, date.day, 0, 0, 0, 0).getDay();
}
getWeekdayIndex(wd) {
return this.weekDays.indexOf(wd);
}
getEpocTime(date) {
return Math.round(this.getTimeInMilliseconds(date) / 1000.0);
}
jsDateToMyDate(date) {
return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
}
myDateToJsDate(date) {
const { year, month, day } = date;
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
datesInMonth(m, y) {
return new Date(y, m, 0).getDate();
}
datesInPrevMonth(m, y) {
const d = this.getJsDate(y, m, 1);
d.setMonth(d.getMonth() - 1);
return this.datesInMonth(d.getMonth() + 1, d.getFullYear());
}
getJsDate(year, month, day) {
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
getSelectedValue(selectedValue, dateRange) {
if (!selectedValue) {
return null;
}
if (!dateRange) {
return selectedValue.date;
}
else {
const { beginDate, endDate } = selectedValue;
return { begin: beginDate, end: endDate };
}
}
getKeyCodeFromEvent(event) {
let key = event.key || event.keyCode || event.which;
if (this.checkKeyName(key, KeyName.enter) || key === KeyCode.enter) {
return KeyCode.enter;
}
else if (this.checkKeyName(key, KeyName.esc) || key === KeyCode.esc) {
return KeyCode.esc;
}
else if (this.checkKeyName(key, KeyName.space) || key === KeyCode.space) {
return KeyCode.space;
}
else if (this.checkKeyName(key, KeyName.leftArrow) || key === KeyCode.leftArrow) {
return KeyCode.leftArrow;
}
else if (this.checkKeyName(key, KeyName.upArrow) || key === KeyCode.upArrow) {
return KeyCode.upArrow;
}
else if (this.checkKeyName(key, KeyName.rightArrow) || key === KeyCode.rightArrow) {
return KeyCode.rightArrow;
}
else if (this.checkKeyName(key, KeyName.downArrow) || key === KeyCode.downArrow) {
return KeyCode.downArrow;
}
else if (this.checkKeyName(key, KeyName.tab) || key === KeyCode.tab) {
return KeyCode.tab;
}
else if (this.checkKeyName(key, KeyName.shift) || key === KeyCode.shift) {
return KeyCode.shift;
}
else {
return null;
}
}
checkKeyName(key, keyName) {
const arr = keyName.split(PIPE);
return arr.indexOf(key) !== -1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UtilService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UtilService, decorators: [{
type: Injectable
}] });
var MonthId;
(function (MonthId) {
MonthId[MonthId["prev"] = 1] = "prev";
MonthId[MonthId["curr"] = 2] = "curr";
MonthId[MonthId["next"] = 3] = "next";
})(MonthId || (MonthId = {}));
var DefaultView;
(function (DefaultView) {
DefaultView[DefaultView["Date"] = 1] = "Date";
DefaultView[DefaultView["Month"] = 2] = "Month";
DefaultView[DefaultView["Year"] = 3] = "Year";
})(DefaultView || (DefaultView = {}));
var CalAnimation;
(function (CalAnimation) {
CalAnimation[CalAnimation["None"] = 0] = "None";
CalAnimation[CalAnimation["Fade"] = 1] = "Fade";
CalAnimation[CalAnimation["ScaleTop"] = 2] = "ScaleTop";
CalAnimation[CalAnimation["ScaleCenter"] = 3] = "ScaleCenter";
CalAnimation[CalAnimation["Rotate"] = 4] = "Rotate";
CalAnimation[CalAnimation["FlipDiagonal"] = 5] = "FlipDiagonal";
CalAnimation[CalAnimation["Own"] = 6] = "Own";
})(CalAnimation || (CalAnimation = {}));
var HeaderAction;
(function (HeaderAction) {
HeaderAction[HeaderAction["PrevBtnClick"] = 1] = "PrevBtnClick";
HeaderAction[HeaderAction["NextBtnClick"] = 2] = "NextBtnClick";
HeaderAction[HeaderAction["MonthBtnClick"] = 3] = "MonthBtnClick";
HeaderAction[HeaderAction["YearBtnClick"] = 4] = "YearBtnClick";
})(HeaderAction || (HeaderAction = {}));
class SelectionBarComponent {
constructor() {
this.prevNavigateBtnClicked = new EventEmitter();
this.nextNavigateBtnClicked = new EventEmitter();
this.monthViewBtnClicked = new EventEmitter();
this.yearViewBtnClicked = new EventEmitter();
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(OPTS)) {
this.opts = changes[OPTS].currentValue;
}
if (changes.hasOwnProperty(YEARS_DURATION)) {
this.yearsDuration = changes[YEARS_DURATION].currentValue;
}
if (changes.hasOwnProperty(VISIBLE_MONTH)) {
this.visibleMonth = changes[VISIBLE_MONTH].currentValue;
}
if (changes.hasOwnProperty(SELECT_MONTH)) {
this.selectMonth = changes[SELECT_MONTH].currentValue;
}
if (changes.hasOwnProperty(SELECT_YEAR)) {
this.selectYear = changes[SELECT_YEAR].currentValue;
}
if (changes.hasOwnProperty(PREV_VIEW_DISABLED)) {
this.prevViewDisabled = changes[PREV_VIEW_DISABLED].currentValue;
}
if (changes.hasOwnProperty(NEXT_VIEW_DISABLED)) {
this.nextViewDisabled = changes[NEXT_VIEW_DISABLED].currentValue;
}
}
onPrevNavigateBtnClicked(event) {
event.stopPropagation();
this.opts.rtl ? this.nextNavigateBtnClicked.emit() : this.prevNavigateBtnClicked.emit();
}
onNextNavigateBtnClicked(event) {
event.stopPropagation();
this.opts.rtl ? this.prevNavigateBtnClicked.emit() : this.nextNavigateBtnClicked.emit();
}
onMonthViewBtnClicked(event) {
event.stopPropagation();
this.monthViewBtnClicked.emit();
}
onYearViewBtnClicked(event) {
event.stopPropagation();
this.yearViewBtnClicked.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SelectionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: SelectionBarComponent, isStandalone: false, selector: "lib-selection-bar", inputs: { opts: "opts", yearsDuration: "yearsDuration", visibleMonth: "visibleMonth", selectMonth: "selectMonth", selectYear: "selectYear", prevViewDisabled: "prevViewDisabled", nextViewDisabled: "nextViewDisabled" }, outputs: { prevNavigateBtnClicked: "prevNavigateBtnClicked", nextNavigateBtnClicked: "nextNavigateBtnClicked", monthViewBtnClicked: "monthViewBtnClicked", yearViewBtnClicked: "yearViewBtnClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"myDpMonthYearSelBar\">\n <div class=\"myDpPrevBtn\">\n <button type=\"button\" [attr.aria-label]=\"opts.ariaLabelPrevMonth\" class=\"myDpHeaderBtn myDpIcon myDpIconLeftArrow myDpHeaderBtnEnabled\" (click)=\"onPrevNavigateBtnClicked($event)\" tabindex=\"{{!prevViewDisabled ? '0':'-1'}}\" [disabled]=\"prevViewDisabled\" [ngClass]=\"{'myDpHeaderBtnDisabled': prevViewDisabled}\"></button>\n </div>\n <div class=\"myDpMonthYearText\">\n @if (!selectYear) {\n <button type=\"button\" class=\"myDpHeaderBtn myDpMonthBtn\" (click)=\"opts.monthSelector && onMonthViewBtnClicked($event)\" tabindex=\"{{opts.monthSelector ? '0':'-1'}}\" [ngClass]=\"{'myDpMonthLabel': opts.monthSelector, 'myDpHeaderLabelBtnNotEdit': !opts.monthSelector}\">{{visibleMonth.monthTxt}}</button>\n }\n <button type=\"button\" class=\"myDpHeaderBtn myDpYearBtn\" (click)=\"opts.yearSelector && onYearViewBtnClicked($event)\" tabindex=\"{{opts.yearSelector ? '0':'-1'}}\" [ngClass]=\"{'myDpYearLabel': opts.yearSelector, 'myDpHeaderLabelBtnNotEdit': !opts.yearSelector}\">{{!selectYear ? visibleMonth.year : yearsDuration}}</button>\n </div>\n <div class=\"myDpNextBtn\">\n <button type=\"button\" [attr.aria-label]=\"opts.ariaLabelNextMonth\" class=\"myDpHeaderBtn myDpIcon myDpIconRightArrow myDpHeaderBtnEnabled\" (click)=\"onNextNavigateBtnClicked($event)\" tabindex=\"{{!nextViewDisabled ? '0':'-1'}}\" [disabled]=\"nextViewDisabled\" [ngClass]=\"{'myDpHeaderBtnDisabled': nextViewDisabled}\"></button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SelectionBarComponent, decorators: [{
type: Component,
args: [{ selector: "lib-selection-bar", encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"myDpMonthYearSelBar\">\n <div class=\"myDpPrevBtn\">\n <button type=\"button\" [attr.aria-label]=\"opts.ariaLabelPrevMonth\" class=\"myDpHeaderBtn myDpIcon myDpIconLeftArrow myDpHeaderBtnEnabled\" (click)=\"onPrevNavigateBtnClicked($event)\" tabindex=\"{{!prevViewDisabled ? '0':'-1'}}\" [disabled]=\"prevViewDisabled\" [ngClass]=\"{'myDpHeaderBtnDisabled': prevViewDisabled}\"></button>\n </div>\n <div class=\"myDpMonthYearText\">\n @if (!selectYear) {\n <button type=\"button\" class=\"myDpHeaderBtn myDpMonthBtn\" (click)=\"opts.monthSelector && onMonthViewBtnClicked($event)\" tabindex=\"{{opts.monthSelector ? '0':'-1'}}\" [ngClass]=\"{'myDpMonthLabel': opts.monthSelector, 'myDpHeaderLabelBtnNotEdit': !opts.monthSelector}\">{{visibleMonth.monthTxt}}</button>\n }\n <button type=\"button\" class=\"myDpHeaderBtn myDpYearBtn\" (click)=\"opts.yearSelector && onYearViewBtnClicked($event)\" tabindex=\"{{opts.yearSelector ? '0':'-1'}}\" [ngClass]=\"{'myDpYearLabel': opts.yearSelector, 'myDpHeaderLabelBtnNotEdit': !opts.yearSelector}\">{{!selectYear ? visibleMonth.year : yearsDuration}}</button>\n </div>\n <div class=\"myDpNextBtn\">\n <button type=\"button\" [attr.aria-label]=\"opts.ariaLabelNextMonth\" class=\"myDpHeaderBtn myDpIcon myDpIconRightArrow myDpHeaderBtnEnabled\" (click)=\"onNextNavigateBtnClicked($event)\" tabindex=\"{{!nextViewDisabled ? '0':'-1'}}\" [disabled]=\"nextViewDisabled\" [ngClass]=\"{'myDpHeaderBtnDisabled': nextViewDisabled}\"></button>\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { opts: [{
type: Input
}], yearsDuration: [{
type: Input
}], visibleMonth: [{
type: Input
}], selectMonth: [{
type: Input
}], selectYear: [{
type: Input
}], prevViewDisabled: [{
type: Input
}], nextViewDisabled: [{
type: Input
}], prevNavigateBtnClicked: [{
type: Output
}], nextNavigateBtnClicked: [{
type: Output
}], monthViewBtnClicked: [{
type: Output
}], yearViewBtnClicked: [{
type: Output
}] } });
var ActiveView;
(function (ActiveView) {
ActiveView[ActiveView["Date"] = 1] = "Date";
ActiveView[ActiveView["Month"] = 2] = "Month";
ActiveView[ActiveView["Year"] = 3] = "Year";
})(ActiveView || (ActiveView = {}));
class DayViewComponent {
constructor(utilService) {
this.utilService = utilService;
this.dayCellClicked = new EventEmitter();
this.dayCellKeyDown = new EventEmitter();
this.viewActivated = new EventEmitter();
this.prevMonthId = MonthId.prev;
this.currMonthId = MonthId.curr;
this.nextMonthId = MonthId.next;
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(OPTS)) {
this.opts = changes[OPTS].currentValue;
}
if (changes.hasOwnProperty(DATES)) {
this.dates = changes[DATES].currentValue;
}
if (changes.hasOwnProperty(WEEK_DAYS)) {
this.weekDays = changes[WEEK_DAYS].currentValue;
}
if (changes.hasOwnProperty(SELECTED_DATE)) {
this.selectedDate = changes[SELECTED_DATE].currentValue;
}
if (changes.hasOwnProperty(SELECTED_DATE_RANGE)) {
this.selectedDateRange = changes[SELECTED_DATE_RANGE].currentValue;
}
}
ngAfterViewInit() {
this.viewActivated.emit(ActiveView.Date);
}
onDayCellClicked(event, cell) {
event.stopPropagation();
if (cell.disabledDate.disabled) {
return;
}
this.dayCellClicked.emit(cell);
}
onDayCellKeyDown(event, cell) {
const keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode !== KeyCode.tab) {
event.preventDefault();
if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
this.onDayCellClicked(event, cell);
}
else if (this.opts.moveFocusByArrowKeys) {
this.dayCellKeyDown.emit(event);
}
}
}
onDayCellMouseEnter(cell) {
if (this.utilService.isInitializedDate(this.selectedDateRange.begin) && !this.utilService.isInitializedDate(this.selectedDateRange.end)) {
for (const w of this.dates) {
for (const day of w.week) {
day.range = this.utilService.isDateSameOrEarlier(this.selectedDateRange.begin, day.dateObj) && this.utilService.isDateSameOrEarlier(day.dateObj, cell.dateObj);
}
}
}
}
onDayCellMouseLeave() {
for (const w of this.dates) {
for (const day of w.week) {
day.range = false;
}
}
}
isDateInRange(date) {
return this.utilService.isDateInRange(date, this.selectedDateRange);
}
isDateSame(date) {
return this.utilService.isDateSame(this.selectedDate, date);
}
isDateRangeBeginOrEndSame(date) {
return this.utilService.isDateRangeBeginOrEndSame(this.selectedDateRange, date);
}
isDateRangeBegin(date) {
return this.utilService.isDateRangeBegin(this.selectedDateRange, date);
}
isDateRangeEnd(date) {
return this.utilService.isDateRangeEnd(this.selectedDateRange, date);
}
isDaySelected(day) {
return !this.opts.dateRange && this.isDateSame(day.dateObj) || this.opts.dateRange && this.isDateRangeBeginOrEndSame(day.dateObj);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DayViewComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: DayViewComponent, isStandalone: false, selector: "lib-day-view", inputs: { opts: "opts", dates: "dates", weekDays: "weekDays", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange", viewChanged: "viewChanged" }, outputs: { dayCellClicked: "dayCellClicked", dayCellKeyDown: "dayCellKeyDown", viewActivated: "viewActivated" }, providers: [UtilService], usesOnChanges: true, ngImport: i0, template: "<table class=\"myDpCalTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <thead>\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <th class=\"myDpWeekDayTitle myDpWeekDayTitleWeekNbr\">#</th>\n }\n @for (d of weekDays; track $index) {\n <th class=\"myDpWeekDayTitle\" scope=\"col\">{{d}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (w of dates; track $index) {\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <td class=\"myDpDaycellWeekNbr\">{{w.weekNbr}}</td>\n }\n @for (d of w.week; track $index) {\n <td\n id=\"d_{{d.row}}_{{d.col}}\"\n class=\"d_{{d.row}}_{{d.col}} myDpDaycell {{d.markedDate.styleClass}} {{d.disabledDate.styleClass}}\"\n [ngClass]=\"{'myDpRangeColor': isDateInRange(d.dateObj) || d.range,\n 'myDpPrevMonth': d.cmo === prevMonthId,\n 'myDpCurrMonth':d.cmo === currMonthId && !d.disabledDate.disabled,\n 'myDpNextMonth': d.cmo === nextMonthId,\n 'myDpSelectedDay':isDaySelected(d),\n 'myDpRangeBegin':this.opts.dateRange && isDateRangeBegin(d.dateObj),\n 'myDpRangeEnd':this.opts.dateRange && isDateRangeEnd(d.dateObj),\n 'myDpDisabled': d.disabledDate.disabled && !d.disabledDate.styleClass.length,\n 'myDpTableSingleDay': !d.disabledDate.disabled}\"\n [attr.aria-current]=\"d.currDay ? 'date' : null\"\n [attr.aria-disabled]=\"d.disabledDate.disabled || null\"\n [attr.aria-selected]=\"isDaySelected(d) || null\"\n [attr.tabindex]=\"!d.disabledDate.disabled ? 0 : -1\"\n (click)=\"onDayCellClicked($event, d)\"\n (keydown)=\"onDayCellKeyDown($event, d)\"\n (mouseenter)=\"onDayCellMouseEnter(d)\"\n (mouseleave)=\"onDayCellMouseLeave()\">\n @if (d.markedDate.marked && d.markedDate.color.length) {\n <span class=\"myDpMarkDate\" [ngStyle]=\"{'border-top': '8px solid ' + d.markedDate.color}\"></span>\n }\n <span class=\"myDpDayValue\"\n [attr.aria-label]=\"[(d.dateObj.month + '/' + d.dateObj.day + '/' + d.dateObj.year | date:'fullDate')]\"\n [ngClass]=\"{'myDpMarkCurrDay': d.currDay && opts.markCurrentDay, 'myDpDimDay': d.highlight && (d.cmo===prevMonthId || d.cmo===nextMonthId || d.disabledDate.disabled), 'myDpHighlight': d.highlight}\">{{d.dateObj.day}}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DayViewComponent, decorators: [{
type: Component,
args: [{ selector: "lib-day-view", providers: [UtilService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<table class=\"myDpCalTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <thead>\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <th class=\"myDpWeekDayTitle myDpWeekDayTitleWeekNbr\">#</th>\n }\n @for (d of weekDays; track $index) {\n <th class=\"myDpWeekDayTitle\" scope=\"col\">{{d}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (w of dates; track $index) {\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <td class=\"myDpDaycellWeekNbr\">{{w.weekNbr}}</td>\n }\n @for (d of w.week; track $index) {\n <td\n id=\"d_{{d.row}}_{{d.col}}\"\n class=\"d_{{d.row}}_{{d.col}} myDpDaycell {{d.markedDate.styleClass}} {{d.disabledDate.styleClass}}\"\n [ngClass]=\"{'myDpRangeColor': isDateInRange(d.dateObj) || d.range,\n 'myDpPrevMonth': d.cmo === prevMonthId,\n 'myDpCurrMonth':d.cmo === currMonthId && !d.disabledDate.disabled,\n 'myDpNextMonth': d.cmo === nextMonthId,\n 'myDpSelectedDay':isDaySelected(d),\n 'myDpRangeBegin':this.opts.dateRange && isDateRangeBegin(d.dateObj),\n 'myDpRangeEnd':this.opts.dateRange && isDateRangeEnd(d.dateObj),\n 'myDpDisabled': d.disabledDate.disabled && !d.disabledDate.styleClass.length,\n 'myDpTableSingleDay': !d.disabledDate.disabled}\"\n [attr.aria-current]=\"d.currDay ? 'date' : null\"\n [attr.aria-disabled]=\"d.disabledDate.disabled || null\"\n [attr.aria-selected]=\"isDaySelected(d) || null\"\n [attr.tabindex]=\"!d.disabledDate.disabled ? 0 : -1\"\n (click)=\"onDayCellClicked($event, d)\"\n (keydown)=\"onDayCellKeyDown($event, d)\"\n (mouseenter)=\"onDayCellMouseEnter(d)\"\n (mouseleave)=\"onDayCellMouseLeave()\">\n @if (d.markedDate.marked && d.markedDate.color.length) {\n <span class=\"myDpMarkDate\" [ngStyle]=\"{'border-top': '8px solid ' + d.markedDate.color}\"></span>\n }\n <span class=\"myDpDayValue\"\n [attr.aria-label]=\"[(d.dateObj.month + '/' + d.dateObj.day + '/' + d.dateObj.year | date:'fullDate')]\"\n [ngClass]=\"{'myDpMarkCurrDay': d.currDay && opts.markCurrentDay, 'myDpDimDay': d.highlight && (d.cmo===prevMonthId || d.cmo===nextMonthId || d.disabledDate.disabled), 'myDpHighlight': d.highlight}\">{{d.dateObj.day}}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
}], ctorParameters: () => [{ type: UtilService }], propDecorators: { opts: [{
type: Input
}], dates: [{
type: Input
}], weekDays: [{
type: Input
}], selectedDate: [{
type: Input
}], selectedDateRange: [{
type: Input
}], viewChanged: [{
type: Input
}], dayCellClicked: [{
type: Output
}], dayCellKeyDown: [{
type: Output
}], viewActivated: [{
type: Output
}] } });
class MonthViewComponent {
constructor(utilService) {
this.utilService = utilService;
this.monthCellClicked = new EventEmitter();
this.monthCellKeyDown = new EventEmitter();
this.viewActivated = new EventEmitter();
}
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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: MonthViewComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: MonthViewComponent, isStandalone: false, 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 @for (mr of months; track $index) {\n <tr>\n @for (m of mr; track $index) {\n <td\n id=\"m_{{m.row}}_{{m.col}}\"\n class=\"m_{{m.row}}_{{m.col}} myDpMonthcell\"\n [ngClass]=\"{'myDpSelectedMonth': m.selected, 'myDpDisabled': m.disabled, 'myDpTableSingleMonth': !m.disabled}\"\n [attr.aria-current]=\"m.currMonth ? 'date' : null\"\n [attr.aria-disabled]=\"m.disabled || null\"\n [attr.aria-selected]=\"m.selected || null\"\n [attr.tabindex]=\"!m.disabled ? 0 : -1\"\n (click)=\"onMonthCellClicked($event, m)\"\n (keydown)=\"onMonthCellKeyDown($event, m)\">\n @if (opts.showMonthNumber) {\n <span class=\"myDpMonthNbr\" aria-hidden=\"true\">{{m.nbr}}</span>\n }\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 }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: MonthViewComponent, decorators: [{
type: Component,
args: [{ selector: "lib-month-view", providers: [UtilService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<table class=\"myDpMonthTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <tbody>\n @for (mr of months; track $index) {\n <tr>\n @for (m of mr; track $index) {\n <td\n id=\"m_{{m.row}}_{{m.col}}\"\n class=\"m_{{m.row}}_{{m.col}} myDpMonthcell\"\n [ngClass]=\"{'myDpSelectedMonth': m.selected, 'myDpDisabled': m.disabled, 'myDpTableSingleMonth': !m.disabled}\"\n [attr.aria-current]=\"m.currMonth ? 'date' : null\"\n [attr.aria-disabled]=\"m.disabled || null\"\n [attr.aria-selected]=\"m.selected || null\"\n [attr.tabindex]=\"!m.disabled ? 0 : -1\"\n (click)=\"onMonthCellClicked($event, m)\"\n (keydown)=\"onMonthCellKeyDown($event, m)\">\n @if (opts.showMonthNumber) {\n <span class=\"myDpMonthNbr\" aria-hidden=\"true\">{{m.nbr}}</span>\n }\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 }\n </tr>\n }\n </tbody>\n</table>\n" }]
}], ctorParameters: () => [{ type: UtilService }], propDecorators: { opts: [{
type: Input
}], months: [{
type: Input
}], viewChanged: [{
type: Input
}], monthCellClicked: [{
type: Output
}], monthCellKeyDown: [{
type: Output
}], viewActivated: [{
type: Output
}] } });
class YearViewComponent {
constructor(utilService) {
this.utilService = utilService;
this.yearCellClicked = new EventEmitter();
this.yearCellKeyDown = new EventEmitter();
this.viewActivated = new EventEmitter();
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(OPTS)) {
this.opts = changes[OPTS].currentValue;
}
if (changes.hasOwnProperty(YEARS)) {
this.years = changes[YEARS].currentValue;
}
}
ngAfterViewInit() {
this.viewActivated.emit(ActiveView.Year);
}
onYearCellClicked(event, cell) {
event.stopPropagation();
if (cell.disabled) {
return;
}
this.yearCellClicked.emit(cell);
}
onYearCellKeyDown(event, cell) {
const keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode !== KeyCode.tab) {
event.preventDefault();
if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
this.onYearCellClicked(event, cell);
}
else if (this.opts.moveFocusByArrowKeys) {
this.yearCellKeyDown.emit(event);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: YearViewComponent, deps: [{ t