gramli-angular-mydatepicker
Version:
A highly configurable Angular datepicker and date range picker with no external dependencies. Lightweight, flexible, and feature-rich.
2,840 lines • 172 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: "21.0.3", ngImport: i0, type: UtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UtilService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", 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: "21.0.3", ngImport: i0, type: SelectionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "21.0.3", 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: "21.0.3", ngImport: i0, type: DayViewComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 d) {\n <th class=\"myDpWeekDayTitle\" scope=\"col\">{{d}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (w of dates; track w) {\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <td class=\"myDpDaycellWeekNbr\">{{w.weekNbr}}</td>\n }\n @for (d of w.week; track d) {\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: "21.0.3", 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 d) {\n <th class=\"myDpWeekDayTitle\" scope=\"col\">{{d}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (w of dates; track w) {\n <tr>\n @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') {\n <td class=\"myDpDaycellWeekNbr\">{{w.weekNbr}}</td>\n }\n @for (d of w.week; track d) {\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: "21.0.3", ngImport: i0, type: MonthViewComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 mr) {\n <tr>\n @for (m of mr; track m) {\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: "21.0.3", 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 mr) {\n <tr>\n @for (m of mr; track m) {\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: "21.0.3", ngImport: i0, type: YearViewComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: YearViewComponent, isStandalone: false, selector: "lib-year-view", inputs: { opts: "opts", years: "years", viewChanged: "viewChanged" }, outputs: { yearCellClicked: "yearCellClicked", yearCellKeyDown: "yearCellKeyDown", viewActivated: "viewActivated" }, providers: [UtilService], usesOnChanges: true, ngImport: i0, template: "<table class=\"myDpYearTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <tbody>\n @for (yr of years; track yr) {\n <tr>\n @for (y of yr; track y) {\n <td\n id=\"y_{{y.row}}_{{y.col}}\"\n class=\"y_{{y.row}}_{{y.col}} myDpYearcell\"\n [ngClass]=\"{'myDpSelectedYear': y.selected, 'myDpDisabled': y.disabled, 'myDpTableSingleYear': !y.disabled}\"\n [attr.aria-current]=\"y.currYear ? 'date' : null\"\n [attr.aria-disabled]=\"y.disabled || null\"\n [attr.aria-selected]=\"y.selected || null\"\n [attr.tabindex]=\"!y.disabled ? 0 : -1\"\n (click)=\"onYearCellClicked($event, y)\"\n (keydown)=\"onYearCellKeyDown($event, y)\">\n <span class=\"myDpYearValue\"\n [attr.aria-label]=\"[(1 + '/' + 1 + '/' + y.year | date:'yyyy')]\"\n [ngClass]=\"{'myDpMarkCurrYear': y.currYear && opts.markCurrentYear}\">{{y.year}}</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: "21.0.3", ngImport: i0, type: YearViewComponent, decorators: [{
type: Component,
args: [{ selector: "lib-year-view", providers: [UtilService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<table class=\"myDpYearTable\" [ngClass]=\"{'ng-myrtl': opts.rtl, 'myDpFooter': opts.showFooterToday, 'myDpNoFooter': !opts.showFooterToday, 'myDpViewChangeAnimation': opts.viewChangeAnimation && viewChanged}\">\n <tbody>\n @for (yr of years; track yr) {\n <tr>\n @for (y of yr; track y) {\n <td\n id=\"y_{{y.row}}_{{y.col}}\"\n class=\"y_{{y.row}}_{{y.col}} myDpYearcell\"\n [ngClass]=\"{'myDpSelectedYear': y.selected, 'myDpDisabled': y.disabled, 'myDpTableSingleYear': !y.disabled}\"\n [attr.aria-current]=\"y.currYear ? 'date' : null\"\n [attr.aria-disabled]=\"y.disabled || null\"\n [attr.aria-selected]=\"y.selected || null\"\n [attr.tabindex]=\"!y.disabled ? 0 : -1\"\n (click)=\"onYearCellClicked($event, y)\"\n (keydown)=\"onYearCellKeyDown($event, y)\">\n <span class=\"myDpYearValue\"\n [attr.aria-label]=\"[(1 + '/' + 1 + '/' + y.year | date:'yyyy')]\"\n [ngClass]=\"{'myDpMarkCurrYear': y.currYear && opts.markCurrentYear}\">{{y.year}}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
}], ctorParameters: () => [{ type: UtilService }], propDecorators: { opts: [{
type: Input
}], years: [{
type: Input
}], viewChanged: [{
type: Input
}], yearCellClicked: [{
type: Output
}], yearCellKeyDown: [{
type: Output
}], viewActivated: [{
type: Output
}] } });
class FooterBarComponent {
constructor(utilService) {
this.utilService = utilService;
this.footerBarTxtClicked = new EventEmitter();
this.footerBarTxt = EMPTY_STR;
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(OPTS)) {
this.opts = changes[OPTS].currentValue;
const { dateFormat, monthLabels, todayTxt } = this.opts;
const today = this.utilService.getToday();
this.footerBarTxt = todayTxt + (todayTxt.length > 0 ? SPACE_STR : EMPTY_STR) +
this.utilService.formatDate(today, dateFormat, monthLabels);
}
}
onFooterBarTxtClicked() {
this.footerBarTxtClicked.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FooterBarComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: FooterBarComponent, isStandalone: false, selector: "lib-footer-bar", inputs: { opts: "opts" }, outputs: { footerBarTxtClicked: "footerBarTxtClicked" }, providers: [UtilService], usesOnChanges: true, ngImport: i0, template: "<div class=\"myDpFooterBar\">\n <button type=\"button\" class=\"myDpHeaderBtn myDpFooterBtn\" (click)=\"onFooterBarTxtClicked()\">{{footerBarTxt}}</button>\n</div>", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FooterBarComponent, decorators: [{
type: Component,
args: [{ selector: "lib-footer-bar", providers: [UtilService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"myDpFooterBar\">\n <button type=\"button\" class=\"myDpHeaderBtn myDpFooterBtn\" (click)=\"onFooterBarTxtClicked()\">{{footerBarTxt}}</button>\n</div>" }]
}], ctorParameters: () => [{ type: UtilService }], propDecorators: { opts: [{
type: Input
}], footerBarTxtClicked: [{
type: Output
}] } });
class AngularMyDatePickerCalendarDirective {
constructor(el) {
this.el = el;
}
ngAfterViewInit() {
const { inline, selectorHeight, selectorWidth, selectorPos } = this.libAngularMyDatePickerCalendar;
const { style } = this.el.nativeElement;
style.height = selectorHeight;
style.width = selectorWidth;
style.top = !inline ? selectorPos.top : "0";
style.left = !inline ? selectorPos.left : "0";
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerCalendarDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: AngularMyDatePickerCalendarDirective, isStandalone: false, selector: "[libAngularMyDatePickerCalendar]", inputs: { libAngularMyDatePickerCalendar: "libAngularMyDatePickerCalendar" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerCalendarDirective, decorators: [{
type: Directive,
args: [{
selector: "[libAngularMyDatePickerCalendar]",
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { libAngularMyDatePickerCalendar: [{
type: Input
}] } });
class CalendarComponent {
constructor(elem, renderer, cdr, utilService) {
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, (event) => {
if ((this.opts.monthSelector || this.opts.yearSelector) && event.target) {
this.resetMonthYearSelect();
}
});
}
ngAfterViewInit() {
const { stylesData, calendarAnimation, inline } = this.opts;
if (stylesData.styles.length) {
const 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();
}
}
ngOnDestroy() {
this.clickListener();
}
initializeComponent(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;
const { defaultView, firstDayOfWeek, dayLabels } = opts;
this.weekDays.length = 0;
this.dayIdx = this.weekDayOpts.indexOf(firstDayOfWeek);
if (this.dayIdx !== -1) {
let idx = this.dayIdx;
for (let 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);
}
initializeView(defaultMonth, selectedValue, inputValue) {
const { dateRange } = this.opts;
// use today as a selected month
const today = this.utilService.getToday();
this.selectedMonth = { monthNbr: today.month, year: today.year };
// If default month attribute valur given use it as a selected month
const { defMonth, overrideSelection } = defaultMonth;
if (defMonth && defMonth.length) {
this.selectedMonth = this.utilService.parseDefaultMonth(defMonth);
}
let validateOpts = null;
if (!dateRange) {
// Single date mode - If date selected use it as selected month
validateOpts = { validateDisabledDates: false, selectedValue: this.utilService.getSelectedValue(selectedValue, dateRange) };
const 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) };
const { begin, end } = this.utilService.isDateValidDateRange(inputValue, this.opts, validateOpts);
if (this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end)) {
this.selectedDateRange = { begin, end };
if (!overrideSelection) {
this.selectedMonth = { monthNbr: begin.month, year: begin.year };
}
}
}
}
refreshComponent(opts, defaultMonth, selectedValue, inputValue) {
this.opts = opts;
const { defaultView } = opts;
this.initializeView(defaultMonth, selectedValue, inputValue);
this.setCalendarVisibleMonth();
this.setDefaultView(defaultView);
}
headerAction(headerAction) {
const { monthSelector, yearSelector } = this.opts;
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();
}
}
}
setDefaultView(defaultView) {
if (defaultView === DefaultView.Month) {
this.monthViewBtnClicked();
}
else if (defaultView === DefaultView.Year) {
this.yearViewBtnClicked();
}
}
setCalendarAnimation(calAnimation, isOpen) {
const { nativeElement } = this.selectorEl;
const { renderer } = this;
const classIn = MY_DP_ANIMATION + ANIMATION_NAMES[calAnimation.in - 1];
if (isOpen) {
renderer.addClass(nativeElement, classIn + IN);
}
else {
const classOut = MY_DP_ANIMATION + ANIMATION_NAMES[calAnimation.out - 1];
renderer.removeClass(nativeElement, classIn + IN);
renderer.addClass(nativeElement, classOut + OUT);
}
}
resetDateValue() {
if (!this.opts.dateRange) {
this.selectedDate = this.utilService.resetDate();
}
else {
this.selectedDateRange.begin = this.utilService.resetDate();
this.selectedDateRange.end = this.utilService.resetDate();
}
}
clearDate() {
const { month, year } = this.utilService.getToday();
this.selectedMonth = { monthNbr: month, year: year };
this.resetDateValue();
this.setCalendarVisibleMonth();
this.resetMonthYearSelect();
}
resetMonthYearSelect() {
this.selectMonth = false;
this.selectYear = false;
}
onMonthViewBtnClicked() {
this.viewChanged = true;
this.monthViewBtnClicked();
}
monthViewBtnClicked() {
this.selectMonth = !this.selectMonth;
this.selectYear = false;
this.cdr.detectChanges();
if (this.selectMonth) {
this.generateMonths();
}
else {
const { year, monthNbr } = this.selectedMonth;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr, year };
this.generateCalendar(monthNbr, year, true);
}
}
onMonthCellClicked(cell) {
this.viewChanged = true;
const { year, monthNbr } = this.visibleMonth;
const monthChange = cell.nbr !== monthNbr;
this.visibleMonth = { monthTxt: this.opts.monthLabels[cell.nbr], monthNbr: cell.nbr, year };
this.selectedMonth.year = year;
this.generateCalendar(cell.nbr, year, monthChange);
this.selectMonth = false;
this.focusToSelector();
}
onMonthCellKeyDown(event) {
// Move focus by arrow keys
const { sourceRow, sourceCol } = this.getSourceRowAndColumnFromEvent(event);
const { moveFocus, targetRow, targetCol, direction } = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, MONTH_ROW_COUNT, MONTH_COL_COUNT);
if (moveFocus) {
this.focusCellElement(M, targetRow, targetCol, direction, MONTH_COL_COUNT);
}
}
onYearViewBtnClicked() {
this.viewChanged = true;
this.yearViewBtnClicked();
}
yearViewBtnClicked() {
this.selectYear = !this.selectYear;
this.selectMonth = false;
this.cdr.detectChanges();
if (this.selectYear) {
this.generateYears(this.visibleMonth.year);
}
else {
const { year, monthNbr } = this.selectedMonth;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr, year };
this.generateCalendar(monthNbr, year, true);
}
}
onYearCellClicked(cell) {
this.viewChanged = true;
const { year, monthNbr, monthTxt } = this.visibleMonth;
const yc = cell.year !== year;
this.visibleMonth = { monthTxt, monthNbr, year: cell.year };
this.selectedMonth.year = cell.year;
this.generateCalendar(monthNbr, cell.year, yc);
this.selectYear = false;
this.focusToSelector();
}
onYearCellKeyDown(event) {
// Move focus by arrow keys
const { sourceRow, sourceCol } = this.getSourceRowAndColumnFromEvent(event);
const { moveFocus, targetRow, targetCol, direction } = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, YEAR_ROW_COUNT, YEAR_COL_COUNT);
if (moveFocus) {
this.focusCellElement(Y, targetRow, targetCol, direction, YEAR_COL_COUNT);
}
}
generateMonths() {
const today = this.utilService.getToday();
this.months.length = 0;
const { year, monthNbr } = this.visibleMonth;
const { rtl, monthLabels } = this.opts;
let row = 0;
for (let i = 1; i <= 12; i += 3) {
const rowData = [];
let col = rtl ? 2 : 0;
for (let j = i; j < i + 3; j++) {
const disabled = this.utilService.isDisabledMonth(year, j, this.opts);
rowData.push({
nbr: j,
year,
name: monthLabels[j],
currMonth: j === today.month && year === today.year,
selected: j === monthNbr && year === this.selectedMonth.year,
disabled,
row,
col: rtl ? col-- : col++
});
}
row++;
this.months.push(rowData);
}
this.setMonthViewHeaderBtnDisabledState(year);
}
generateYears(inputYear) {
const { minYear, maxYear, rtl } = this.opts;
let y = inputYear - 12;
if (inputYear < minYear) {
y = minYear;
}
if (inputYear + 25 > maxYear) {
y = maxYear - 24;
}
const { year } = this.visibleMonth;
this.years.length = 0;
const today = this.utilService.getToday();
let row = 0;
for (let i = y; i < y + 25; i += 5) {
const rowData = [];
let col = rtl ? 4 : 0;
for (let j = i; j < i + 5; j++) {
const disabled = this.utilService.isDisabledYear(j, this.opts);
rowData.push({
year: j,
currYear: j === today.year,
selected: j === year,
disabled,
row,
col: rtl ? col-- : col++
});
}
row++;
this.years.push(rowData);
}
const beginYear = this.getYearValueByRowAndCol(0, 0);
const endYear = beginYear + 24;
this.yearsDuration = (!rtl ? beginYear : endYear) + YEAR_SEPARATOR + (!rtl ? endYear : beginYear);
this.setYearViewHeaderBtnDisabledState(beginYear, endYear);
}
onTodayFooterClicked() {
const date = this.utilService.getToday();
this.selectDate(date);
}
getYearValueByRowAndCol(row, col) {
const { years } = this;
if (!years || years.length === 0) {
const { year } = this.utilService.getToday();
return year;
}
return years[row][col].year;
}
setCalendarVisibleMonth() {
// Sets visible month of calendar
const { year, monthNbr } = this.selectedMonth;
this.visibleMonth = { monthTxt: this.opts.monthLabels[monthNbr], monthNbr, year };
// Create current month
this.generateCalendar(monthNbr, year, true);
}
onViewActivated(event) {
this.viewActivated(event);
}
onPrevNavigateBtnClicked() {
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);
}
}
onNextNavigateBtnClicked() {
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);
}
}
setDateViewMonth(isNext) {
let change = isNext ? 1 : -1;
const { year, monthNbr } = this.visibleMonth;
const d = this.utilService.getJsDate(year, monthNbr, 1);
d.setMonth(d.getMonth() + change);
const y = d.getFullYear();
const m = d.getMonth() + 1;
this.visibleMonth = { monthTxt: this.opts.monthLabels[m], monthNbr: m, year: y };
this.generateCalendar(m, y, true);
}
onCloseSelector(event) {
const keyCode = this.utilService.getKeyCodeFromEvent(event);
if (keyCode === KeyCode.esc) {
this.closedByEsc();
}
}
onDayCellClicked(cell) {
// Cell clicked on the calendar
this.selectDate(cell.dateObj);
this.resetMonthYearSelect();
}
onDayCellKeyDown(event) {
// Move focus by arrow keys
const { sourceRow, sourceCol } = this.getSourceRowAndColumnFromEvent(event);
const { moveFocus, targetRow, targetCol, direction } = this.getTargetFocusRowAndColumn(event, sourceRow, sourceCol, DATE_ROW_COUNT, DATE_COL_COUNT);
if (moveFocus) {
this.focusCellElement(D, targetRow, targetCol, direction, DATE_COL_COUNT);
}
}
getSourceRowAndColumnFromEvent(event) {
let sourceRow = 0;
let sourceCol = 0;
if (event.target && event.target.id) {
// value of id is for example: m_0_1 (first number = row, second number = column)
const arr = event.target.id.split(UNDER_LINE);
sourceRow = Number(arr[1]);
sourceCol = Number(arr[2]);
}
return { sourceRow, sourceCol };
}
getTargetFocusRowAndColumn(event, row, col, rowCount, colCount) {
let moveFocus = true;
let targetRow = row;
let targetCol = col;
let direction = false;
const 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, targetRow, targetCol, direction };
}
focusCellElement(type, row, col, direction, colCount) {
const className = type + UNDER_LINE + row + UNDER_LINE + col;
let 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
let tdList = this.getCalendarElements();
const idx = row * (colCount + 1) + col;
let enabledElem = null;
if (direction) {
// find next enabled
enabledElem = tdList.slice(idx).find((td) => td.getAttribute(TABINDEX) === ZERO_STR);
}
else {
// find previous enabled
enabledElem = tdList.slice(0, idx).reverse().find((td) => td.getAttribute(TABINDEX) === ZERO_STR);
}
elem = enabledElem ? enabledElem : this.selectorEl.nativeElement;
}
else {
elem.focus();
}
}
focusToSelector() {
this.selectorEl.nativeElement.focus();
}
getCalendarElements() {
return Array.from(this.selectorEl.nativeElement.querySelectorAll(TD_SELECTOR));
}
selectDate(date) {
const { dateRange, dateFormat, monthLabels, dateRangeDatesDelimiter, closeSelectorOnDateSelect } = this.opts;
if (dateRange) {
// Date range
const isBeginDateInitialized = this.utilService.isInitializedDate(this.selectedDateRange.begin);
const 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,
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,
jsDate: this.utilService.myDateToJsDate(date),
dateFormat: dateFormat,
formatted: this.utilService.formatDate(date, dateFormat, monthLabels),
epoc: this.utilService.getEpocTime(date)
});
}
else {
// second selection
const firstDateEarlier = this.utilService.isDateEarlier(date, this.selectedDateRange.begin);
if (firstDateEarlier) {
this.selectedDateRange.begin = date;
this.rangeDateSelection({
isBegin: true,
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,
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);
}
}
monthStartIdx(y, m) {
// Month start index
const d = new Date();
d.setDate(1);
d.setMonth(m - 1);
d.setFullYear(y);
const idx = d.getDay() + this.sundayIdx();
return idx >= 7 ? idx - 7 : idx;
}
isCurrDay(d, m, y, today) {
// Check is a given date the today
return d === today.day && m === today.month && y === today.year;
}
getDayNumber(date) {
// Get day number: su=0, mo=1, tu=2, we=3 ...
const { year, month, day } = date;
const d = this.utilService.getJsDate(year, month, day);
return d.getDay();
}
getWeekday(date) {
// Get weekday: su, mo, tu, we ...
return this.weekDayOpts[this.getDayNumber(date)];
}
sundayIdx() {
// Index of Sunday day
return this.dayIdx > 0 ? 7 - this.dayIdx : 0;
}
generateCalendar(m, y, notifyChange) {
this.dates.length = 0;
const today = this.utilService.getToday();
const monthStart = this.monthStartIdx(y, m);
const dInThisM = this.utilService.datesInMonth(m, y);
const dInPrevM = this.utilService.datesInPrevMonth(m, y);
let dayNbr = 1;
let month = m;
let cmo = MonthId.prev;
const { rtl, showWeekNumbers, firstDayOfWeek } = this.opts;
for (let i = 1; i < 7; i++) {
let col = rtl ? 6 : 0;
const week = [];
if (i === 1) {
// First week
const pm = dInPrevM - monthStart + 1;
// Previous month
for (let j = pm; j <= dInPrevM; j++) {
const date = { year: m === 1 ? y - 1 : y, month: m === 1 ? 12 : m - 1, day: j };
week.push({
dateObj: date,
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
const daysLeft = 7 - week.length;
for (let j = 0; j < daysLeft; j++) {
const date = { year: y, month: m, day: dayNbr };
week.push({
dateObj: date,
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 (let j = 1; j < 8; j++) {
if (dayNbr > dInThisM) {
// Next month
dayNbr = 1;
cmo = MonthId.next;
month = m + 1;
}
const 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,
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++;
}
}
const weekNbr = showWeekNumbers && firstDayOfWeek === MO ? this.utilService.getWeekNumber(week[0].dateObj) : 0;
this.dates.push({ week, 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 }) } });
}
}
setDateViewHeaderBtnDisabledState(m, y) {
let dpm = false;
let dnm = false;
const { disableHeaderButtons, disableUntil, disableSince, enableDates, minYear, maxYear, rtl } = this.opts;
if (disableHeaderButtons) {
const 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) };
const 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();
}
}
setMonthViewHeaderBtnDisabledState(y) {
let dpm = false;
let dnm = false;
const { disableHeaderButtons, disableUntil, disableSince, enableDates, minYear, maxYear, rtl } = this.opts;
if (disableHeaderButtons) {
const duDate = { year: y - 1, month: 12, day: 31 };
const 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();
}
}
setYearViewHeaderBtnDisabledState(yp, yn) {
let dpy = false;
let dny = false;
const { disableHeaderButtons, disableUntil, disableSince, enableDates, minYear, maxYear, rtl } = this.opts;
if (disableHeaderButtons) {
const duDate = { year: yp - 1, month: 12, day: 31 };
const 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();
}
}
swapHeaderBtnDisabled() {
[this.prevViewDisabled, this.nextViewDisabled] = [this.nextViewDisabled, this.prevViewDisabled];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CalendarComponent, isStandalone: false, selector: "lib-angular-mydatepicker-calendar", host: { properties: { "style.position": "this.position" } }, providers: [UtilService], viewQueries: [{ propertyName: "selectorEl", first: true, predicate: ["selectorEl"], descendants: true, static: true }, { propertyName: "styleEl", first: true, predicate: ["styleEl"], descendants: true, static: true }], ngImport: i0, 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 @if (!selectMonth && !selectYear) {\n <lib-day-view [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\n @if (selectMonth) {\n <lib-month-view [opts]=\"opts\" [months]=\"months\" [viewChanged]=\"viewChanged\"\n (monthCellClicked)=\"onMonthCellClicked($event)\"\n (monthCellKeyDown)=\"onMonthCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-month-view>\n }\n\n @if (selectYear) {\n <lib-year-view [opts]=\"opts\" [years]=\"years\" [viewChanged]=\"viewChanged\"\n (yearCellClicked)=\"onYearCellClicked($event)\"\n (yearCellKeyDown)=\"onYearCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-year-view>\n }\n\n @if (opts.showFooterToday) {\n <lib-footer-bar [opts]=\"opts\"\n (footerBarTxtClicked)=\"onTodayFooterClicked()\"></lib-footer-bar>\n }\n </div>\n</div>\n", styles: [".ng-mydp{position:static}.ng-myrtl{direction:rtl}.ng-mydp *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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{animation:myDpViewChangeAnimation .2s linear}@keyframes myDpViewChangeAnimation{0%{transform:scale(.75);opacity:.1}to{transform:scale(1);opacity:1}}.myDpAnimationFadeIn{animation:myDpAnimationFadeIn .5s linear}@keyframes myDpAnimationFadeIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.myDpAnimationFadeOut{animation:myDpAnimationFadeOut .3s linear forwards}@keyframes myDpAnimationFadeOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}.myDpAnimationScaleTopIn{animation:myDpAnimationScaleTopIn .3s linear}@keyframes myDpAnimationScaleTopIn{0%{transform:scaleY(0);transform-origin:100% 0%}to{transform:scaleY(1);transform-origin:100% 0%}}.myDpAnimationScaleTopOut{animation:myDpAnimationScaleTopOut .3s linear forwards}@keyframes myDpAnimationScaleTopOut{0%{transform:scaleY(1);transform-origin:100% 0%;opacity:1}to{transform:scaleY(0);transform-origin:100% 0%;opacity:0}}.myDpAnimationScaleCenterIn{animation:myDpAnimationScaleCenterIn .3s linear}@keyframes myDpAnimationScaleCenterIn{0%{transform:scale(0)}to{transform:scale(1)}}.myDpAnimationScaleCenterOut{animation:myDpAnimationScaleCenterOut .3s linear forwards}@keyframes myDpAnimationScaleCenterOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.myDpAnimationRotateIn{animation:myDpAnimationRotateIn .3s linear}@keyframes myDpAnimationRotateIn{0%{transform:scale(.3) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.myDpAnimationRotateOut{animation:myDpAnimationRotateOut .3s linear forwards}@keyframes myDpAnimationRotateOut{0%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.3) rotate(-45deg);opacity:0}}.myDpAnimationFlipDiagonalIn{animation:myDpAnimationFlipDiagonalIn .3s linear}@keyframes myDpAnimationFlipDiagonalIn{0%{transform:rotate3d(1,1,0,-78deg)}to{transform:rotate3d(1,1,0,0)}}.myDpAnimationFlipDiagonalOut{animation:myDpAnimationFlipDiagonalOut .3s linear forwards}@keyframes myDpAnimationFlipDiagonalOut{0%{transform:rotate3d(1,1,0,0);opacity:1}to{transform:rotate3d(1,1,0,78deg);opacity:0}}.myDpSelectorAbsolute{position:absolute}.myDpSelectorPosInitial{position:initial}.myDpSelector:focus{box-shadow:-1px 1px 6px #add8e6;outline:none}.myDpSelectorArrow{background:#fff}.myDpSelectorArrow:after,.myDpSelectorArrow:before{bottom:100%;border:solid transparent;content:\" \";height:0;width:0;position:absolute}.myDpSelectorArrow:after{border-color:#fafafa00;border-bottom-color:#fafafa;border-width:10px;margin-left:-10px}.myDpSelectorArrow:before{border-color:#ccc0;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,.myDpMonthTable,.myDpYearTable,.myDpFooterBar{border-radius:0 0 4px 4px}.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:first-child,.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:first-child,.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:first-child{border-bottom-left-radius:4px}.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:last-child,.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:last-child,.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:last-child{border-bottom-right-radius:4px}.myDpCalTable,.myDpMonthTable,.myDpYearTable{table-layout:fixed;width:100%;background-color:#fff;font-size:14px}.myDpFooter{height:calc(100% - 60px)}.myDpNoFooter{height:calc(100% - 30px)}.myDpCalTable,.myDpMonthTable,.myDpYearTable,.myDpWeekDayTitle,.myDpDaycell,.myDpMonthcell,.myDpYearcell{border-collapse:collapse;color:#333;line-height:1.1}.myDpDaycell,.myDpMonthcell,.myDpYearcell{padding:4px;text-align:center;outline:none}.myDpDaycell{background-color:#fff;position:relative}.myDpWeekDayTitle{background-color:transparent;color:#333;font-size:13px;font-weight:400;vertical-align:middle;max-width:36px;overflow:hidden;white-space:nowrap;height:23px;text-align:center}.myDpWeekDayTitleWeekNbr{width:20px}.myDpMonthcell{background-color:#fff;overflow:hidden;white-space:nowrap}.myDpYearcell{background-color:#fff;width:20%}.myDpMonthNbr{font-size:10px;display:block}.myDpDaycellWeekNbr{font-size:9px;cursor:default;text-align:center;color:#333}.myDpPrevMonth,.myDpNextMonth{color:#999}.myDpMonthYearSelBar{display:flex;height:30px;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px}.myDpPrevBtn{margin-left:10px}.myDpNextBtn{margin-left:auto;margin-right:10px}.myDpMonthYearText{width:100%;line-height:30px;text-align:center}.myDpFooterBar{display:flex;align-items:center;justify-content:center;height:30px;background-color:#fff}.myDpHeaderBtn{background:transparent;padding:0;border:none;line-height:30px;height:28px;margin-top:1px;color:#000;outline:none;cursor:default}.myDpFooterBtn{margin:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.myDpMonthBtn,.myDpYearBtn{font-size:16px}.myDpMonthBtn{margin-right:6px}.myDpHighlight{color:#c30000}.myDpDimDay{opacity:.5}.myDpCurrMonth{background-color:#fff;font-weight:400}.myDpMarkDate{position:absolute;top:2px;left:2px;border-right:8px solid transparent}.myDpMarkCurrDay,.myDpMarkCurrMonth,.myDpMarkCurrYear{border-bottom:2px solid #333}.myDpHeaderLabelBtnNotEdit{cursor:default}.myDpHeaderBtn::-moz-focus-inner,.myDpPrevBtn::-moz-focus-inner,.myDpNextBtn::-moz-focus-inner{border:0}.myDpHeaderBtn:focus,.myDpMonthLabel:focus,.myDpYearLabel:focus,.myDpFooterBtn:focus{color:#66afe9;outline:none}.myDpDaycell:focus,.myDpMonthcell:focus,.myDpYearcell:focus{box-shadow:inset 0 0 0 1px #66afe9}.myDpTableSingleDay:hover,.myDpTableSingleMonth:hover,.myDpTableSingleYear:hover{background-color:#ddd}.myDpMonthLabel,.myDpYearLabel,.myDpDaycell,.myDpMonthcell,.myDpYearcell{cursor:pointer}.myDpHeaderBtnEnabled:hover,.myDpMonthLabel:hover,.myDpYearLabel:hover,.myDpFooterBtn:hover{color:#777}.myDpHeaderBtnEnabled{cursor:pointer}.myDpHeaderBtnDisabled{cursor:not-allowed;opacity:.65}.myDpDisabled{cursor:default;color:#777;background:repeating-linear-gradient(-45deg,#ccc 7px,#ccc 8px,transparent 7px,transparent 14px)}.myDpRangeColor{background-color:#dbeaff}.myDpRangeBegin,.myDpRangeEnd,.myDpSelectedDay,.myDpSelectedMonth,.myDpSelectedYear{border:none;background-color:#8ebfff}@font-face{font-family:angular-mydatepicker;src:url(data:application/octet-stream;base64,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) format(\"woff\");font-weight:400;font-style:normal}.myDpIcon{font-family:angular-mydatepicker;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#222;font-size:20px}.myDpIconLeftArrow:before{content:\"\\e800\"}.myDpIconRightArrow:before{content:\"\\e801\"}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectionBarComponent, selector: "lib-selection-bar", inputs: ["opts", "yearsDuration", "visibleMonth", "selectMonth", "selectYear", "prevViewDisabled", "nextViewDisabled"], outputs: ["prevNavigateBtnClicked", "nextNavigateBtnClicked", "monthViewBtnClicked", "yearViewBtnClicked"] }, { kind: "component", type: DayViewComponent, selector: "lib-day-view", inputs: ["opts", "dates", "weekDays", "selectedDate", "selectedDateRange", "viewChanged"], outputs: ["dayCellClicked", "dayCellKeyDown", "viewActivated"] }, { kind: "component", type: MonthViewComponent, selector: "lib-month-view", inputs: ["opts", "months", "viewChanged"], outputs: ["monthCellClicked", "monthCellKeyDown", "viewActivated"] }, { kind: "component", type: YearViewComponent, selector: "lib-year-view", inputs: ["opts", "years", "viewChanged"], outputs: ["yearCellClicked", "yearCellKeyDown", "viewActivated"] }, { kind: "component", type: FooterBarComponent, selector: "lib-footer-bar", inputs: ["opts"], outputs: ["footerBarTxtClicked"] }, { kind: "directive", type: AngularMyDatePickerCalendarDirective, selector: "[libAngularMyDatePickerCalendar]", inputs: ["libAngularMyDatePickerCalendar"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: "lib-angular-mydatepicker-calendar", providers: [UtilService], encapsulation: ViewEncapsulation.None, standalone: false, 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 @if (!selectMonth && !selectYear) {\n <lib-day-view [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\n @if (selectMonth) {\n <lib-month-view [opts]=\"opts\" [months]=\"months\" [viewChanged]=\"viewChanged\"\n (monthCellClicked)=\"onMonthCellClicked($event)\"\n (monthCellKeyDown)=\"onMonthCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-month-view>\n }\n\n @if (selectYear) {\n <lib-year-view [opts]=\"opts\" [years]=\"years\" [viewChanged]=\"viewChanged\"\n (yearCellClicked)=\"onYearCellClicked($event)\"\n (yearCellKeyDown)=\"onYearCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-year-view>\n }\n\n @if (opts.showFooterToday) {\n <lib-footer-bar [opts]=\"opts\"\n (footerBarTxtClicked)=\"onTodayFooterClicked()\"></lib-footer-bar>\n }\n </div>\n</div>\n", styles: [".ng-mydp{position:static}.ng-myrtl{direction:rtl}.ng-mydp *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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{animation:myDpViewChangeAnimation .2s linear}@keyframes myDpViewChangeAnimation{0%{transform:scale(.75);opacity:.1}to{transform:scale(1);opacity:1}}.myDpAnimationFadeIn{animation:myDpAnimationFadeIn .5s linear}@keyframes myDpAnimationFadeIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.myDpAnimationFadeOut{animation:myDpAnimationFadeOut .3s linear forwards}@keyframes myDpAnimationFadeOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}.myDpAnimationScaleTopIn{animation:myDpAnimationScaleTopIn .3s linear}@keyframes myDpAnimationScaleTopIn{0%{transform:scaleY(0);transform-origin:100% 0%}to{transform:scaleY(1);transform-origin:100% 0%}}.myDpAnimationScaleTopOut{animation:myDpAnimationScaleTopOut .3s linear forwards}@keyframes myDpAnimationScaleTopOut{0%{transform:scaleY(1);transform-origin:100% 0%;opacity:1}to{transform:scaleY(0);transform-origin:100% 0%;opacity:0}}.myDpAnimationScaleCenterIn{animation:myDpAnimationScaleCenterIn .3s linear}@keyframes myDpAnimationScaleCenterIn{0%{transform:scale(0)}to{transform:scale(1)}}.myDpAnimationScaleCenterOut{animation:myDpAnimationScaleCenterOut .3s linear forwards}@keyframes myDpAnimationScaleCenterOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.myDpAnimationRotateIn{animation:myDpAnimationRotateIn .3s linear}@keyframes myDpAnimationRotateIn{0%{transform:scale(.3) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.myDpAnimationRotateOut{animation:myDpAnimationRotateOut .3s linear forwards}@keyframes myDpAnimationRotateOut{0%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.3) rotate(-45deg);opacity:0}}.myDpAnimationFlipDiagonalIn{animation:myDpAnimationFlipDiagonalIn .3s linear}@keyframes myDpAnimationFlipDiagonalIn{0%{transform:rotate3d(1,1,0,-78deg)}to{transform:rotate3d(1,1,0,0)}}.myDpAnimationFlipDiagonalOut{animation:myDpAnimationFlipDiagonalOut .3s linear forwards}@keyframes myDpAnimationFlipDiagonalOut{0%{transform:rotate3d(1,1,0,0);opacity:1}to{transform:rotate3d(1,1,0,78deg);opacity:0}}.myDpSelectorAbsolute{position:absolute}.myDpSelectorPosInitial{position:initial}.myDpSelector:focus{box-shadow:-1px 1px 6px #add8e6;outline:none}.myDpSelectorArrow{background:#fff}.myDpSelectorArrow:after,.myDpSelectorArrow:before{bottom:100%;border:solid transparent;content:\" \";height:0;width:0;position:absolute}.myDpSelectorArrow:after{border-color:#fafafa00;border-bottom-color:#fafafa;border-width:10px;margin-left:-10px}.myDpSelectorArrow:before{border-color:#ccc0;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,.myDpMonthTable,.myDpYearTable,.myDpFooterBar{border-radius:0 0 4px 4px}.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:first-child,.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:first-child,.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:first-child{border-bottom-left-radius:4px}.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:last-child,.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:last-child,.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:last-child{border-bottom-right-radius:4px}.myDpCalTable,.myDpMonthTable,.myDpYearTable{table-layout:fixed;width:100%;background-color:#fff;font-size:14px}.myDpFooter{height:calc(100% - 60px)}.myDpNoFooter{height:calc(100% - 30px)}.myDpCalTable,.myDpMonthTable,.myDpYearTable,.myDpWeekDayTitle,.myDpDaycell,.myDpMonthcell,.myDpYearcell{border-collapse:collapse;color:#333;line-height:1.1}.myDpDaycell,.myDpMonthcell,.myDpYearcell{padding:4px;text-align:center;outline:none}.myDpDaycell{background-color:#fff;position:relative}.myDpWeekDayTitle{background-color:transparent;color:#333;font-size:13px;font-weight:400;vertical-align:middle;max-width:36px;overflow:hidden;white-space:nowrap;height:23px;text-align:center}.myDpWeekDayTitleWeekNbr{width:20px}.myDpMonthcell{background-color:#fff;overflow:hidden;white-space:nowrap}.myDpYearcell{background-color:#fff;width:20%}.myDpMonthNbr{font-size:10px;display:block}.myDpDaycellWeekNbr{font-size:9px;cursor:default;text-align:center;color:#333}.myDpPrevMonth,.myDpNextMonth{color:#999}.myDpMonthYearSelBar{display:flex;height:30px;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px}.myDpPrevBtn{margin-left:10px}.myDpNextBtn{margin-left:auto;margin-right:10px}.myDpMonthYearText{width:100%;line-height:30px;text-align:center}.myDpFooterBar{display:flex;align-items:center;justify-content:center;height:30px;background-color:#fff}.myDpHeaderBtn{background:transparent;padding:0;border:none;line-height:30px;height:28px;margin-top:1px;color:#000;outline:none;cursor:default}.myDpFooterBtn{margin:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.myDpMonthBtn,.myDpYearBtn{font-size:16px}.myDpMonthBtn{margin-right:6px}.myDpHighlight{color:#c30000}.myDpDimDay{opacity:.5}.myDpCurrMonth{background-color:#fff;font-weight:400}.myDpMarkDate{position:absolute;top:2px;left:2px;border-right:8px solid transparent}.myDpMarkCurrDay,.myDpMarkCurrMonth,.myDpMarkCurrYear{border-bottom:2px solid #333}.myDpHeaderLabelBtnNotEdit{cursor:default}.myDpHeaderBtn::-moz-focus-inner,.myDpPrevBtn::-moz-focus-inner,.myDpNextBtn::-moz-focus-inner{border:0}.myDpHeaderBtn:focus,.myDpMonthLabel:focus,.myDpYearLabel:focus,.myDpFooterBtn:focus{color:#66afe9;outline:none}.myDpDaycell:focus,.myDpMonthcell:focus,.myDpYearcell:focus{box-shadow:inset 0 0 0 1px #66afe9}.myDpTableSingleDay:hover,.myDpTableSingleMonth:hover,.myDpTableSingleYear:hover{background-color:#ddd}.myDpMonthLabel,.myDpYearLabel,.myDpDaycell,.myDpMonthcell,.myDpYearcell{cursor:pointer}.myDpHeaderBtnEnabled:hover,.myDpMonthLabel:hover,.myDpYearLabel:hover,.myDpFooterBtn:hover{color:#777}.myDpHeaderBtnEnabled{cursor:pointer}.myDpHeaderBtnDisabled{cursor:not-allowed;opacity:.65}.myDpDisabled{cursor:default;color:#777;background:repeating-linear-gradient(-45deg,#ccc 7px,#ccc 8px,transparent 7px,transparent 14px)}.myDpRangeColor{background-color:#dbeaff}.myDpRangeBegin,.myDpRangeEnd,.myDpSelectedDay,.myDpSelectedMonth,.myDpSelectedYear{border:none;background-color:#8ebfff}@font-face{font-family:angular-mydatepicker;src:url(data:application/octet-stream;base64,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) format(\"woff\");font-weight:400;font-style:normal}.myDpIcon{font-family:angular-mydatepicker;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#222;font-size:20px}.myDpIconLeftArrow:before{content:\"\\e800\"}.myDpIconRightArrow:before{content:\"\\e801\"}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: UtilService }], propDecorators: { selectorEl: [{
type: ViewChild,
args: ["selectorEl", { static: true }]
}], styleEl: [{
type: ViewChild,
args: ["styleEl", { static: true }]
}], position: [{
type: HostBinding,
args: ["style.position"]
}] } });
class LocaleService {
constructor() {
this.locales = {
"en": {
dayLabels: { su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
dateFormat: "mm/dd/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Today"
},
"he": {
dayLabels: { su: "רא", mo: "שנ", tu: "של", we: "רב", th: "חמ", fr: "שי", sa: "שב" },
monthLabels: { 1: "ינו", 2: "פבר", 3: "מרץ", 4: "אפר", 5: "מאי", 6: "יונ", 7: "יול", 8: "אוג", 9: "ספט", 10: "אוק", 11: "נוב", 12: "דצמ" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "su",
sunHighlight: false,
todayTxt: "היום"
},
"ja": {
dayLabels: { su: "日", mo: "月", tu: "火", we: "水", th: "木", fr: "金", sa: "土" },
monthLabels: { 1: "１月", 2: "２月", 3: "３月", 4: "４月", 5: "５月", 6: "６月", 7: "７月", 8: "８月", 9: "９月", 10: "１０月", 11: "１１月", 12: "１２月" },
dateFormat: "yyyy.mm.dd",
sunHighlight: false,
todayTxt: "今日"
},
"fr": {
dayLabels: { su: "Dim", mo: "Lun", tu: "Mar", we: "Mer", th: "Jeu", fr: "Ven", sa: "Sam" },
monthLabels: { 1: "Jan", 2: "Fév", 3: "Mar", 4: "Avr", 5: "Mai", 6: "Juin", 7: "Juil", 8: "Aoû", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Déc" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Aujourd'hui"
},
"fr-ch": {
dayLabels: { su: "Dim", mo: "Lun", tu: "Mar", we: "Mer", th: "Jeu", fr: "Ven", sa: "Sam" },
monthLabels: { 1: "Jan", 2: "Fév", 3: "Mar", 4: "Avr", 5: "Mai", 6: "Juin", 7: "Juil", 8: "Aoû", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Déc" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Aujourd'hui"
},
"fi": {
dayLabels: { su: "Su", mo: "Ma", tu: "Ti", we: "Ke", th: "To", fr: "Pe", sa: "La" },
monthLabels: { 1: "Tam", 2: "Hel", 3: "Maa", 4: "Huh", 5: "Tou", 6: "Kes", 7: "Hei", 8: "Elo", 9: "Syy", 10: "Lok", 11: "Mar", 12: "Jou" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Tänään"
},
"es": {
dayLabels: { su: "Do", mo: "Lu", tu: "Ma", we: "Mi", th: "Ju", fr: "Vi", sa: "Sa" },
monthLabels: { 1: "Ene", 2: "Feb", 3: "Mar", 4: "Abr", 5: "May", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dic" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Hoy"
},
"hu": {
dayLabels: { su: "Vas", mo: "Hét", tu: "Kedd", we: "Sze", th: "Csü", fr: "Pén", sa: "Szo" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Már", 4: "Ápr", 5: "Máj", 6: "Jún", 7: "Júl", 8: "Aug", 9: "Szep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Ma"
},
"sv": {
dayLabels: { su: "Sön", mo: "Mån", tu: "Tis", we: "Ons", th: "Tor", fr: "Fre", sa: "Lör" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Maj", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "Idag"
},
"nl": {
dayLabels: { su: "Zon", mo: "Maa", tu: "Din", we: "Woe", th: "Don", fr: "Vri", sa: "Zat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mei", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "d-m-yyyy",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "Vandaag"
},
"nl-be": {
dayLabels: { su: "Zon", mo: "Maa", tu: "Din", we: "Woe", th: "Don", fr: "Vri", sa: "Zat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mei", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "d/m/yyyy",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "Vandaag"
},
"ru": {
dayLabels: { su: "Вс", mo: "Пн", tu: "Вт", we: "Ср", th: "Чт", fr: "Пт", sa: "Сб" },
monthLabels: { 1: "Янв", 2: "Фев", 3: "Март", 4: "Апр", 5: "Май", 6: "Июнь", 7: "Июль", 8: "Авг", 9: "Сент", 10: "Окт", 11: "Ноя", 12: "Дек" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Сегодня"
},
"uk": {
dayLabels: { su: "Нд", mo: "Пн", tu: "Вт", we: "Ср", th: "Чт", fr: "Пт", sa: "Сб" },
monthLabels: { 1: "Січ", 2: "Лют", 3: "Бер", 4: "Кві", 5: "Тра", 6: "Чер", 7: "Лип", 8: "Сер", 9: "Вер", 10: "Жов", 11: "Лис", 12: "Гру" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Сьогодні"
},
"uz": {
dayLabels: { su: "Yak", mo: "Du", tu: "Se", we: "Cho", th: "Pay", fr: "Ju", sa: "Sha" },
monthLabels: { 1: "Yan", 2: "Fev", 3: "Mar", 4: "Apr", 5: "May", 6: "Iyn", 7: "Iyl", 8: "Avg", 9: "Sen", 10: "Okt", 11: "Noy", 12: "Dek" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Bugun"
},
"no": {
dayLabels: { su: "Søn", mo: "Man", tu: "Tir", we: "Ons", th: "Tor", fr: "Fre", sa: "Lør" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mai", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Des" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "I dag"
},
"tr": {
dayLabels: { su: "Paz", mo: "Pzt", tu: "Sal", we: "Çar", th: "Per", fr: "Cum", sa: "Cmt" },
monthLabels: { 1: "Oca", 2: "Şub", 3: "Mar", 4: "Nis", 5: "May", 6: "Haz", 7: "Tem", 8: "Ağu", 9: "Eyl", 10: "Eki", 11: "Kas", 12: "Ara" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "Bugün"
},
"pt": {
dayLabels: { su: "Dom", mo: "Seg", tu: "Ter", we: "Qua", th: "Qui", fr: "Sex", sa: "Sáb" },
monthLabels: { 1: "Jan", 2: "Fev", 3: "Mar", 4: "Abr", 5: "Mai", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Set", 10: "Out", 11: "Nov", 12: "Dez" },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "mo",
sunHighlight: false,
todayTxt: "Hoje"
},
"pt-br": {
dayLabels: { su: "Dom", mo: "Seg", tu: "Ter", we: "Qua", th: "Qui", fr: "Sex", sa: "Sab" },
monthLabels: { 1: "Jan", 2: "Fev", 3: "Mar", 4: "Abr", 5: "Mai", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Set", 10: "Out", 11: "Nov", 12: "Dez" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "Hoje"
},
"de": {
dayLabels: { su: "So", mo: "Mo", tu: "Di", we: "Mi", th: "Do", fr: "Fr", sa: "Sa" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mär", 4: "Apr", 5: "Mai", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dez" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Heute"
},
"de-ch": {
dayLabels: { su: "So", mo: "Mo", tu: "Di", we: "Mi", th: "Do", fr: "Fr", sa: "Sa" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mär", 4: "Apr", 5: "Mai", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dez" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Heute"
},
"it": {
dayLabels: { su: "Dom", mo: "Lun", tu: "Mar", we: "Mer", th: "Gio", fr: "Ven", sa: "Sab" },
monthLabels: { 1: "Gen", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mag", 6: "Giu", 7: "Lug", 8: "Ago", 9: "Set", 10: "Ott", 11: "Nov", 12: "Dic" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Oggi"
},
"it-ch": {
dayLabels: { su: "Dom", mo: "Lun", tu: "Mar", we: "Mer", th: "Gio", fr: "Ven", sa: "Sab" },
monthLabels: { 1: "Gen", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mag", 6: "Giu", 7: "Lug", 8: "Ago", 9: "Set", 10: "Ott", 11: "Nov", 12: "Dic" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Oggi"
},
"pl": {
dayLabels: { su: "Nie", mo: "Pon", tu: "Wto", we: "Śro", th: "Czw", fr: "Pią", sa: "Sob" },
monthLabels: { 1: "Sty", 2: "Lut", 3: "Mar", 4: "Kwi", 5: "Maj", 6: "Cze", 7: "Lip", 8: "Sie", 9: "Wrz", 10: "Paź", 11: "Lis", 12: "Gru" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Dzisiaj"
},
"my": {
dayLabels: { su: "တနင်္ဂနွေ", mo: "တနင်္လာ", tu: "အင်္ဂါ", we: "ဗုဒ္ဓဟူး", th: "ကြသပတေး", fr: "သောကြာ", sa: "စနေ" },
monthLabels: { 1: "ဇန်နဝါရီ", 2: "ဖေဖော်ဝါရီ", 3: "မတ်", 4: "ဧပြီ", 5: "မေ", 6: "ဇွန်", 7: "ဇူလိုင်", 8: "ဩဂုတ်", 9: "စက်တင်ဘာ", 10: "အောက်တိုဘာ", 11: "နိုဝင်ဘာ", 12: "ဒီဇင်ဘာ" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "ယနေ့"
},
"ms": {
dayLabels: { su: "Ahd", mo: "Isn", tu: "Sel", we: "Rab", th: "Kha", fr: "Jum", sa: "Sab" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mac", 4: "Apr", 5: "Mei", 6: "Jun", 7: "Jul", 8: "Ogo", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dis" },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "Hari ini"
},
"sk": {
dayLabels: { su: "Ne", mo: "Po", tu: "Ut", we: "St", th: "Št", fr: "Pi", sa: "So" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Máj", 6: "Jún", 7: "Júl", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Dnes"
},
"sl": {
dayLabels: { su: "Ned", mo: "Pon", tu: "Tor", we: "Sre", th: "Čet", fr: "Pet", sa: "Sob" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Maj", 6: "Jun", 7: "Jul", 8: "Avg", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "dd. mm. yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Danes"
},
"zh-cn": {
dayLabels: { su: "日", mo: "一", tu: "二", we: "三", th: "四", fr: "五", sa: "六" },
monthLabels: { 1: "1月", 2: "2月", 3: "3月", 4: "4月", 5: "5月", 6: "6月", 7: "7月", 8: "8月", 9: "9月", 10: "10月", 11: "11月", 12: "12月" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "今天"
},
"ro": {
dayLabels: { su: "du", mo: "lu", tu: "ma", we: "mi", th: "jo", fr: "vi", sa: "sa" },
monthLabels: { 1: "ian", 2: "feb", 3: "mart", 4: "apr", 5: "mai", 6: "iun", 7: "iul", 8: "aug", 9: "sept", 10: "oct", 11: "nov", 12: "dec" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Astăzi"
},
"ca": {
dayLabels: { su: "dg", mo: "dl", tu: "dt", we: "dc", th: "dj", fr: "dv", sa: "ds" },
monthLabels: { 1: "Gen", 2: "Febr", 3: "Març", 4: "Abr", 5: "Maig", 6: "Juny", 7: "Jul", 8: "Ag", 9: "Set", 10: "Oct", 11: "Nov", 12: "Des" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Avui"
},
"id": {
dayLabels: { su: "Min", mo: "Sen", tu: "Sel", we: "Rab", th: "Kam", fr: "Jum", sa: "Sab" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Mei", 6: "Jun", 7: "Jul", 8: "Ags", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Des" },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "Hari ini"
},
"en-au": {
dayLabels: { su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Today"
},
"en-gb": {
dayLabels: { su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Today"
},
"am-et": {
dayLabels: { su: "እሑድ", mo: "ሰኞ", tu: "ማክሰኞ", we: "ረቡዕ", th: "ሐሙስ", fr: "ዓርብ", sa: "ቅዳሜ" },
monthLabels: { 1: "ጃንዩ", 2: "ፌብሩ", 3: "ማርች", 4: "ኤፕረ", 5: "ሜይ", 6: "ጁን", 7: "ጁላይ", 8: "ኦገስ", 9: "ሴፕቴ", 10: "ኦክተ", 11: "ኖቬም", 12: "ዲሴም" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "ዛሬ"
},
"cs": {
dayLabels: { su: "Ne", mo: "Po", tu: "Út", we: "St", th: "Čt", fr: "Pá", sa: "So" },
monthLabels: { 1: "Led", 2: "Úno", 3: "Bře", 4: "Dub", 5: "Kvě", 6: "Čvn", 7: "Čvc", 8: "Srp", 9: "Zář", 10: "Říj", 11: "Lis", 12: "Pro" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Dnes"
},
"el": {
dayLabels: { su: "Κυρ", mo: "Δευ", tu: "Τρι", we: "Τετ", th: "Πεμ", fr: "Παρ", sa: "Σαβ" },
monthLabels: { 1: "Ιαν", 2: "Φεβ", 3: "Μαρ", 4: "Απρ", 5: "Μαι", 6: "Ιουν", 7: "Ιουλ", 8: "Αυγ", 9: "Σεπ", 10: "Οκτ", 11: "Νοε", 12: "Δεκ" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Σήμερα"
},
"kk": {
dayLabels: { su: "Жк", mo: "Дс", tu: "Сс", we: "Ср", th: "Бс", fr: "Жм", sa: "Сб" },
monthLabels: { 1: "Қаң", 2: "Ақп", 3: "Нау", 4: "Сәу", 5: "Мам", 6: "Мау", 7: "Шіл", 8: "Там", 9: "Қырк", 10: "Қаз", 11: "Қар", 12: "Желт" },
dateFormat: "dd-mmm-yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Бүгін"
},
"th": {
dayLabels: { su: "อา", mo: "จ", tu: "อ", we: "พ", th: "พฤ", fr: "ศ", sa: "ส" },
monthLabels: { 1: "ม.ค", 2: "ก.พ.", 3: "มี.ค.", 4: "เม.ย.", 5: "พ.ค.", 6: "มิ.ย.", 7: "ก.ค.", 8: "ส.ค.", 9: "ก.ย.", 10: "ต.ค.", 11: "พ.ย.", 12: "ธ.ค." },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "วันนี้"
},
"ko-kr": {
dayLabels: { su: "일", mo: "월", tu: "화", we: "수", th: "목", fr: "금", sa: "토" },
monthLabels: { 1: "1월", 2: "2월", 3: "3월", 4: "4월", 5: "5월", 6: "6월", 7: "7월", 8: "8월", 9: "9월", 10: "10월", 11: "11월", 12: "12월" },
dateFormat: "yyyy mm dd",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "오늘"
},
"da": {
dayLabels: { su: "Søn", mo: "Man", tu: "Tir", we: "Ons", th: "Tor", fr: "Fre", sa: "Lør" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "Maj", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "I dag"
},
"lt": {
dayLabels: { su: "Sk", mo: "Pr", tu: "An", we: "Tr", th: "Kt", fr: "Pn", sa: "Št" },
monthLabels: { 1: "Saus.", 2: "Vas.", 3: "Kov.", 4: "Bal.", 5: "Geg.", 6: "Birž.", 7: "Liep.", 8: "Rugp.", 9: "Rugs.", 10: "Sapl.", 11: "Lapkr.", 12: "Gruod." },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Šianien"
},
"vi": {
dayLabels: { su: "CN", mo: "T2", tu: "T3", we: "T4", th: "T5", fr: "T6", sa: "T7" },
monthLabels: { 1: "THG 1", 2: "THG 2", 3: "THG 3", 4: "THG 4", 5: "THG 5", 6: "THG 6", 7: "THG 7", 8: "THG 8", 9: "THG 9", 10: "THG 10", 11: "THG 11", 12: "THG 12" },
dateFormat: "dd/mm/yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Hôm nay"
},
"bn": {
dayLabels: { su: "রবি", mo: "সোম", tu: "মঙ্গল", we: "বুধ", th: "বৃহঃ", fr: "শুক্র", sa: "শনি" },
monthLabels: { 1: "জানু", 2: "ফেব্রু", 3: "মার্চ", 4: "এপ্রিল", 5: "মে", 6: "জুন", 7: "জুলাই", 8: "আগস্ট", 9: "সেপ্টে", 10: "অক্টো", 11: "নভে", 12: "ডিসে" },
dateFormat: "dd-mm-yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "আজ"
},
"bg": {
dayLabels: { su: "нд", mo: "пн", tu: "вт", we: "ср", th: "чт", fr: "пт", sa: "сб" },
monthLabels: { 1: "яну.", 2: "фев.", 3: "март", 4: "апр.", 5: "май", 6: "юни", 7: "юли", 8: "авг.", 9: "сеп.", 10: "окт.", 11: "ное.", 12: "дек." },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "днес"
},
"hr": {
dayLabels: { su: "Ne", mo: "Po", tu: "Ul", we: "Sr", th: "Če", fr: "Pe", sa: "Su" },
monthLabels: { 1: "Sij", 2: "Vel", 3: "Ožu", 4: "Tra", 5: "Svi", 6: "Lip", 7: "Srp", 8: "Kol", 9: "Ruj", 10: "Lis", 11: "Stu", 12: "Pro" },
dateFormat: "dd.mm.yyyy.",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "danas"
},
"ar": {
dayLabels: { su: "الأحد", mo: "الاثنين", tu: "الثلاثاء", we: "الاربعاء", th: "الخميس", fr: "الجمعة", sa: "السبت" },
monthLabels: { 1: "يناير", 2: "فبراير", 3: "مارس", 4: "ابريل", 5: "مايو", 6: "يونيو", 7: "يوليو", 8: "أغسطس", 9: "سبتمبر", 10: "أكتوبر", 11: "نوفمبر", 12: "ديسمبر" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "sa",
sunHighlight: true,
todayTxt: "اليوم"
},
"is": {
dayLabels: { su: "sun", mo: "mán", tu: "þri", we: "mið", th: "fim", fr: "fös", sa: "lau" },
monthLabels: { 1: "jan", 2: "feb", 3: "mar", 4: "apr", 5: "maí", 6: "jún", 7: "júl", 8: "ágú", 9: "sep", 10: "okt", 11: "nóv", 12: "des" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "su",
sunHighlight: true,
todayTxt: "Í dag"
},
"tw": {
dayLabels: { su: "週日", mo: "週一", tu: "週二", we: "週三", th: "週四", fr: "週五", sa: "週六" },
monthLabels: { 1: "一月", 2: "二月", 3: "三月", 4: "四月", 5: "五月", 6: "六月", 7: "七月", 8: "八月", 9: "九月", 10: "十月", 11: "十一月", 12: "十二月" },
dateFormat: "yyyy-mm-dd",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "今天"
},
"lv": {
dayLabels: { su: "S", mo: "P", tu: "O", we: "T", th: "C", fr: "P", sa: "S" },
monthLabels: { 1: "Janv", 2: "Febr", 3: "Marts", 4: "Apr", 5: "Maijs", 6: "Jūn", 7: "Jūl", 8: "Aug", 9: "Sept", 10: "Okt", 11: "Nov", 12: "Dec" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Šodien"
},
"et": {
dayLabels: { su: "P", mo: "E", tu: "T", we: "K", th: "N", fr: "R", sa: "L" },
monthLabels: { 1: "Jaan", 2: "Veebr", 3: "Märts", 4: "Apr", 5: "Mai", 6: "Juuni", 7: "Juuli", 8: "Aug", 9: "Sept", 10: "Okt", 11: "Nov", 12: "Dets" },
dateFormat: "dd.mm.yyyy",
firstDayOfWeek: "mo",
sunHighlight: true,
todayTxt: "Täna"
}
};
}
getLocaleOptions(locale = DEFAULT_LOCALE) {
const lowerCaseLocale = locale.toLowerCase();
return this.locales[lowerCaseLocale] || this.locales[DEFAULT_LOCALE];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LocaleService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LocaleService, decorators: [{
type: Injectable
}] });
var Year;
(function (Year) {
Year[Year["min"] = 1000] = "min";
Year[Year["max"] = 9999] = "max";
})(Year || (Year = {}));
class DefaultConfigService {
constructor() {
this.defaultConfig = {
dateRange: false,
inline: false,
dayLabels: { su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat" },
monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
dateFormat: "yyyy-mm-dd",
defaultView: DefaultView.Date,
firstDayOfWeek: "mo",
satHighlight: false,
sunHighlight: true,
highlightDates: [],
markCurrentDay: true,
markCurrentMonth: true,
markCurrentYear: true,
monthSelector: true,
yearSelector: true,
disableHeaderButtons: true,
showWeekNumbers: false,
selectorHeight: "266px",
selectorWidth: "266px",
disableUntil: { year: 0, month: 0, day: 0 },
disableSince: { year: 0, month: 0, day: 0 },
disableDates: [],
disableDateRanges: [],
disableWeekends: false,
disableWeekdays: [],
enableDates: [],
markDates: [],
markWeekends: { marked: false, color: "" },
alignSelectorRight: false,
openSelectorTopOfInput: false,
closeSelectorOnDateSelect: true,
closeSelectorOnDocumentClick: true,
minYear: Year.min,
maxYear: Year.max,
showSelectorArrow: true,
appendSelectorToBody: false,
focusInputOnDateSelect: true,
moveFocusByArrowKeys: true,
dateRangeDatesDelimiter: " - ",
inputFieldValidation: true,
showMonthNumber: true,
todayTxt: "",
showFooterToday: false,
calendarAnimation: { in: CalAnimation.None, out: CalAnimation.None },
viewChangeAnimation: true,
rtl: false,
stylesData: { selector: "", styles: "" },
divHostElement: { enabled: false, placeholder: "" },
ariaLabelPrevMonth: "Previous Month",
ariaLabelNextMonth: "Next Month"
};
}
getDefaultConfig() {
return this.defaultConfig;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultConfigService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultConfigService, decorators: [{
type: Injectable
}] });
var CalToggle;
(function (CalToggle) {
CalToggle[CalToggle["Open"] = 1] = "Open";
CalToggle[CalToggle["CloseByDateSel"] = 2] = "CloseByDateSel";
CalToggle[CalToggle["CloseByCalBtn"] = 3] = "CloseByCalBtn";
CalToggle[CalToggle["CloseByOutClick"] = 4] = "CloseByOutClick";
CalToggle[CalToggle["CloseByEsc"] = 5] = "CloseByEsc";
})(CalToggle || (CalToggle = {}));
const NGX_DP_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AngularMyDatePickerDirective),
multi: true
};
const NGX_DP_VALIDATORS = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => AngularMyDatePickerDirective),
multi: true
};
class AngularMyDatePickerDirective {
constructor(localeService, utilService, vcRef, renderer, cdr, elem, config) {
this.localeService = localeService;
this.utilService = utilService;
this.vcRef = vcRef;
this.renderer = renderer;
this.cdr = cdr;
this.elem = elem;
this.config = config;
this.defaultMonth = { defMonth: EMPTY_STR, overrideSelection: false };
this.dateChanged = new EventEmitter();
this.inputFieldChanged = new EventEmitter();
this.calendarViewChanged = new EventEmitter();
this.calendarToggle = new EventEmitter();
this.rangeDateSelection = new EventEmitter();
this.viewActivated = new EventEmitter();
this.cRef = null;
this.hostText = EMPTY_STR;
this.preventClose = false;
this.disabled = false;
this.selectedValue = null;
// Cleanup tracking
this.preventCloseTimeout = null;
this.focusTimeout = null;
this.animationTimeout = null;
this.onChangeCb = () => { };
this.onTouchedCb = () => { };
this.onClickWrapper = (event) => this.onClick(event);
this.onAnimateWrapper = (reason) => this.animationEnd(reason);
this.opts = this.config.getDefaultConfig();
this.parseOptions(this.opts);
}
onKeyUp(event) {
const keyCode = this.utilService.getKeyCodeFromEvent(event);
if (this.ignoreKeyPress(keyCode)) {
return;
}
if (keyCode === KeyCode.esc) {
this.closeSelector(CalToggle.CloseByEsc);
}
else {
const { dateRange, dateFormat, monthLabels, dateRangeDatesDelimiter } = this.opts;
const value = this.getHostValue();
let dateModel = null;
let valid = false;
let validateOpts = null;
if (!dateRange) {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, false) };
const date = this.utilService.isDateValid(value, this.opts, validateOpts);
valid = this.utilService.isInitializedDate(date);
if (valid) {
dateModel = this.utilService.getDateModel(date, null, dateFormat, monthLabels, dateRangeDatesDelimiter);
}
}
else {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, true) };
const range = this.utilService.isDateValidDateRange(value, this.opts, validateOpts);
const { begin, end } = range;
valid = this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end);
if (valid) {
dateModel = this.utilService.getDateModel(null, range, dateFormat, monthLabels, dateRangeDatesDelimiter);
}
}
this.onChangeCb(dateModel);
this.emitInputFieldChanged(value, valid);
}
}
onBlur() {
const { inputFieldValidation, dateRange, dateFormat, monthLabels, dateRangeDatesDelimiter, closeSelectorOnDateSelect } = this.opts;
if (inputFieldValidation) {
const value = this.getHostValue();
let valid = false;
let validateOpts = null;
if (!dateRange) {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, false) };
const date = this.utilService.isDateValid(value, this.opts, validateOpts);
valid = this.utilService.isInitializedDate(date);
if (valid && this.hostText !== value) {
// Valid date
const dateModel = this.utilService.getDateModel(date, null, dateFormat, monthLabels, dateRangeDatesDelimiter);
this.emitDateChanged(dateModel);
this.updateModel(dateModel);
if (closeSelectorOnDateSelect) {
this.closeSelector(CalToggle.CloseByDateSel);
}
}
}
else {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, true) };
const dateRange = this.utilService.isDateValidDateRange(value, this.opts, validateOpts);
const { begin, end } = dateRange;
valid = this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end);
if (valid && this.hostText !== value) {
// Valid date range
const dateModel = this.utilService.getDateModel(null, dateRange, dateFormat, monthLabels, dateRangeDatesDelimiter);
this.emitDateChanged(dateModel);
this.updateModel(dateModel);
if (closeSelectorOnDateSelect) {
this.closeSelector(CalToggle.CloseByDateSel);
}
}
}
if (!valid && this.hostText !== value) {
if (value === EMPTY_STR) {
this.clearDate();
}
else {
this.onChangeCb(null);
}
}
this.hostText = value;
}
this.onTouchedCb();
}
onClick(event) {
if (this.opts.closeSelectorOnDocumentClick && !this.preventClose && event.target && this.cRef
&& this.elem.nativeElement !== event.target && !this.cRef.location.nativeElement.contains(event.target)
&& !this.disabled) {
this.closeSelector(CalToggle.CloseByOutClick);
}
}
ngOnChanges(changes) {
if (changes.hasOwnProperty(LOCALE)) {
this.setLocaleOptions();
}
if (changes.hasOwnProperty(DEFAULT_MONTH)) {
let dm = changes[DEFAULT_MONTH].currentValue;
if (typeof dm === OBJECT) {
if (!dm.overrideSelection) {
dm.overrideSelection = false;
}
}
else {
dm = { defMonth: dm, overrideSelection: false };
}
this.defaultMonth = dm;
}
if (changes.hasOwnProperty(OPTIONS)) {
this.parseOptions(changes[OPTIONS].currentValue);
}
if (this.cRef) {
this.cRef.instance.refreshComponent(this.opts, this.defaultMonth, this.selectedValue, this.getHostValue());
}
}
ngOnDestroy() {
this.closeCalendar();
this.clearAllTimeouts();
this.removeDocumentClickListener();
}
clearAllTimeouts() {
if (this.preventCloseTimeout) {
clearTimeout(this.preventCloseTimeout);
this.preventCloseTimeout = null;
}
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
this.focusTimeout = null;
}
if (this.animationTimeout) {
clearTimeout(this.animationTimeout);
this.animationTimeout = null;
}
}
removeDocumentClickListener() {
document.removeEventListener(CLICK, this.onClickWrapper);
}
setLocaleOptions() {
const opts = this.localeService.getLocaleOptions(this.locale);
Object.keys(opts).forEach((k) => {
this.opts[k] = opts[k];
});
}
parseOptions(opts) {
if (opts) {
Object.keys(opts).forEach((k) => {
this.opts[k] = opts[k];
});
}
const { minYear, maxYear, openSelectorTopOfInput, inline } = this.opts;
if (minYear < Year.min) {
this.opts.minYear = Year.min;
}
if (maxYear > Year.max) {
this.opts.maxYear = Year.max;
}
if (openSelectorTopOfInput || inline) {
this.opts.showSelectorArrow = false;
}
if (inline) {
this.openCalendar();
}
}
writeValue(value) {
if (this.disabled) {
return;
}
let validateOpts = null;
const { dateFormat, monthLabels, dateRangeDatesDelimiter, inline } = this.opts;
if (!value) {
this.setHostValue(EMPTY_STR);
this.emitInputFieldChanged(EMPTY_STR, false);
if (this.cRef) {
this.cRef.instance.resetDateValue();
}
}
else if (!value.isRange && value.singleDate) {
// single date
let { date, jsDate } = value.singleDate;
if (!date) {
date = this.utilService.jsDateToMyDate(jsDate);
}
const formatted = this.utilService.formatDate(date, dateFormat, monthLabels);
validateOpts = { validateDisabledDates: false, selectedValue: this.utilService.getSelectedValue(this.selectedValue, false) };
const valid = this.utilService.isInitializedDate(this.utilService.isDateValid(formatted, this.opts, validateOpts));
if (valid) {
this.setHostValue(formatted);
this.emitInputFieldChanged(formatted, valid);
this.setSelectedValue(this.utilService.getDateModel(date, null, dateFormat, monthLabels, dateRangeDatesDelimiter));
if (this.cRef) {
this.cRef.instance.refreshComponent(this.opts, this.defaultMonth, this.selectedValue, this.getHostValue());
}
}
}
else if (value.isRange && value.dateRange) {
// date range
let { beginDate, beginJsDate, endDate, endJsDate } = value.dateRange;
if (!beginDate || !endDate) {
beginDate = this.utilService.jsDateToMyDate(beginJsDate);
endDate = this.utilService.jsDateToMyDate(endJsDate);
}
const formatted = this.utilService.formatDate(beginDate, dateFormat, monthLabels) + dateRangeDatesDelimiter +
this.utilService.formatDate(endDate, dateFormat, monthLabels);
validateOpts = { validateDisabledDates: false, selectedValue: this.utilService.getSelectedValue(this.selectedValue, true) };
const { begin, end } = this.utilService.isDateValidDateRange(formatted, this.opts, validateOpts);
const valid = this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end);
if (valid) {
this.setHostValue(formatted);
this.emitInputFieldChanged(formatted, valid);
const dateRange = { begin: beginDate, end: endDate };
this.setSelectedValue(this.utilService.getDateModel(null, dateRange, dateFormat, monthLabels, dateRangeDatesDelimiter));
if (this.cRef) {
this.cRef.instance.refreshComponent(this.opts, this.defaultMonth, this.selectedValue, this.getHostValue());
}
}
}
}
registerOnChange(fn) {
this.onChangeCb = fn;
}
registerOnTouched(fn) {
this.onTouchedCb = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.renderer.setProperty(this.elem.nativeElement, DISABLED, isDisabled);
if (isDisabled) {
this.closeCalendar();
}
}
validate(c) {
const value = this.getHostValue();
if (value === null || value === EMPTY_STR) {
return null;
}
let validateOpts = null;
if (!this.opts.dateRange) {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, false) };
const date = this.utilService.isDateValid(value, this.opts, validateOpts);
if (!this.utilService.isInitializedDate(date)) {
return { invalidDateFormat: true };
}
}
else {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, true) };
const { begin, end } = this.utilService.isDateValidDateRange(value, this.opts, validateOpts);
if (!this.utilService.isInitializedDate(begin) || !this.utilService.isInitializedDate(end)) {
return { invalidDateFormat: true };
}
}
return null;
}
openCalendar() {
if (this.disabled) {
return;
}
this.preventClose = true;
this.cdr.detectChanges();
if (this.cRef === null) {
this.cRef = this.vcRef.createComponent(CalendarComponent);
this.appendSelector(this.cRef.location.nativeElement);
this.cRef.instance.initializeComponent(this.opts, this.defaultMonth, this.selectedValue, this.getHostValue(), this.getSelectorPosition(this.elem.nativeElement), (dm, close) => {
this.focusToInput();
this.emitDateChanged(dm);
this.emitInputFieldChanged(this.utilService.getFormattedDate(dm), true);
this.updateModel(dm);
if (close) {
this.closeSelector(CalToggle.CloseByDateSel);
}
}, (cvc) => {
this.emitCalendarChanged(cvc);
}, (rds) => {
this.emitRangeDateSelection(rds);
}, (va) => {
this.emitViewActivated(va);
}, () => {
this.closeSelector(CalToggle.CloseByEsc);
});
this.emitCalendarToggle(CalToggle.Open);
if (!this.opts.inline) {
document.addEventListener(CLICK, this.onClickWrapper);
}
}
if (this.preventCloseTimeout) {
clearTimeout(this.preventCloseTimeout);
}
this.preventCloseTimeout = setTimeout(() => {
this.preventClose = false;
this.preventCloseTimeout = null;
}, PREVENT_CLOSE_TIMEOUT);
}
closeCalendar() {
this.closeSelector(CalToggle.CloseByCalBtn);
}
toggleCalendar() {
if (this.disabled) {
return;
}
const isOpen = this.cRef === null;
if (isOpen) {
this.openCalendar();
}
else {
this.closeSelector(CalToggle.CloseByCalBtn);
}
return isOpen;
}
clearDate() {
if (this.disabled) {
return;
}
const { inline } = this.opts;
this.setHostValue(EMPTY_STR);
this.emitDateChanged({
isRange: this.opts.dateRange,
singleDate: {
date: this.utilService.resetDate(),
jsDate: null,
formatted: EMPTY_STR,
epoc: 0
},
dateRange: {
beginDate: this.utilService.resetDate(),
beginJsDate: null,
beginEpoc: 0,
endDate: this.utilService.resetDate(),
endJsDate: null,
endEpoc: 0,
formatted: EMPTY_STR
}
});
this.onChangeCb(null);
this.onTouchedCb();
if (this.cRef) {
this.cRef.instance.clearDate();
}
if (!inline) {
this.closeSelector(CalToggle.CloseByCalBtn);
}
}
isDateValid() {
const value = this.getHostValue();
if (value === null || value === EMPTY_STR) {
return false;
}
let validateOpts = null;
if (!this.opts.dateRange) {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, false) };
const date = this.utilService.isDateValid(value, this.opts, validateOpts);
if (this.utilService.isInitializedDate(date)) {
this.emitInputFieldChanged(value, true);
return true;
}
}
else {
validateOpts = { validateDisabledDates: true, selectedValue: this.utilService.getSelectedValue(this.selectedValue, true) };
const { begin, end } = this.utilService.isDateValidDateRange(value, this.opts, validateOpts);
if (this.utilService.isInitializedDate(begin) && this.utilService.isInitializedDate(end)) {
this.emitInputFieldChanged(value, true);
return true;
}
}
this.emitInputFieldChanged(value, false);
return false;
}
headerAction(headerAction) {
if (this.cRef) {
this.cRef.instance.headerAction(headerAction);
}
}
setHostValue(value) {
const { divHostElement } = this.opts;
this.hostText = value;
const valueType = !divHostElement.enabled ? VALUE : INNER_HTML;
value = valueType === INNER_HTML && value === EMPTY_STR ? divHostElement.placeholder : value;
this.renderer.setProperty(this.elem.nativeElement, valueType, value);
}
ignoreKeyPress(keyCode) {
return keyCode === KeyCode.leftArrow || keyCode === KeyCode.rightArrow || keyCode === KeyCode.upArrow || keyCode === KeyCode.downArrow || keyCode === KeyCode.tab || keyCode === KeyCode.shift;
}
animationEnd(reason) {
if (this.cRef) {
this.cRef.instance.selectorEl.nativeElement.removeEventListener(ANIMATION_END, this.onAnimateWrapper);
if (this.animationTimeout) {
clearTimeout(this.animationTimeout);
this.animationTimeout = null;
}
this.removeComponent();
this.emitCalendarToggle(reason);
}
}
closeSelector(reason) {
const { inline, calendarAnimation } = this.opts;
if (this.cRef && !inline) {
if (calendarAnimation.out !== CalAnimation.None) {
const { instance } = this.cRef;
instance.selectorEl.nativeElement.addEventListener(ANIMATION_END, this.onAnimateWrapper.bind(this, reason));
instance.setCalendarAnimation(calendarAnimation, false);
// In case the animationend event is not fired
if (this.animationTimeout) {
clearTimeout(this.animationTimeout);
}
this.animationTimeout = setTimeout(this.onAnimateWrapper.bind(this, reason), ANIMATION_TIMEOUT);
}
else {
this.removeComponent();
this.emitCalendarToggle(reason);
}
this.removeDocumentClickListener();
}
}
removeComponent() {
if (this.vcRef !== null) {
this.vcRef.remove(this.vcRef.indexOf(this.cRef.hostView));
this.cRef = null;
}
}
updateModel(model) {
this.setHostValue(this.utilService.getFormattedDate(model));
this.onChangeCb(model);
this.onTouchedCb();
}
getHostValue() {
const { value, innerHTML } = this.elem.nativeElement;
return !this.opts.divHostElement.enabled ? value : innerHTML;
}
focusToInput() {
const { focusInputOnDateSelect, divHostElement } = this.opts;
if (focusInputOnDateSelect && !divHostElement.enabled) {
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
}
this.focusTimeout = setTimeout(() => {
if (this.elem && this.elem.nativeElement) {
this.elem.nativeElement.focus();
}
this.focusTimeout = null;
});
}
}
emitDateChanged(dateModel) {
this.dateChanged.emit(dateModel);
this.setSelectedValue(dateModel);
}
setSelectedValue(dateModel) {
const { isRange, dateRange, singleDate } = dateModel;
this.selectedValue = isRange ? dateRange : singleDate;
}
emitInputFieldChanged(value, valid) {
this.inputFieldChanged.emit({ value, dateFormat: this.opts.dateFormat, valid });
}
emitCalendarChanged(cvc) {
this.calendarViewChanged.emit(cvc);
}
emitRangeDateSelection(rds) {
this.rangeDateSelection.emit(rds);
}
emitViewActivated(va) {
this.viewActivated.emit(va);
}
emitCalendarToggle(reason) {
this.calendarToggle.emit(reason);
}
appendSelector(elem) {
if (this.opts.appendSelectorToBody) {
document.querySelector(BODY).appendChild(elem);
}
}
getSelectorPosition(elem) {
let top = 0;
let left = 0;
const { appendSelectorToBody, openSelectorTopOfInput, selectorHeight, selectorWidth, showSelectorArrow, alignSelectorRight } = this.opts;
if (appendSelectorToBody) {
const b = document.body.getBoundingClientRect();
const e = elem.getBoundingClientRect();
top = e.top - b.top;
left = e.left - b.left;
}
if (openSelectorTopOfInput) {
top = top - this.getSelectorDimension(selectorHeight) - 2;
}
else {
top = top + elem.offsetHeight + (showSelectorArrow ? 12 : 2);
}
if (alignSelectorRight) {
left = left + elem.offsetWidth - this.getSelectorDimension(selectorWidth);
}
return { top: top + PX, left: left + PX };
}
getSelectorDimension(value) {
return Number(value.replace(PX, EMPTY_STR));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerDirective, deps: [{ token: LocaleService }, { token: UtilService }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DefaultConfigService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: AngularMyDatePickerDirective, isStandalone: false, selector: "[angular-mydatepicker]", inputs: { options: "options", locale: "locale", defaultMonth: "defaultMonth" }, outputs: { dateChanged: "dateChanged", inputFieldChanged: "inputFieldChanged", calendarViewChanged: "calendarViewChanged", calendarToggle: "calendarToggle", rangeDateSelection: "rangeDateSelection", viewActivated: "viewActivated" }, host: { listeners: { "keyup": "onKeyUp($event)", "blur": "onBlur()" } }, providers: [UtilService, LocaleService, DefaultConfigService, NGX_DP_VALUE_ACCESSOR, NGX_DP_VALIDATORS], exportAs: ["angular-mydatepicker"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerDirective, decorators: [{
type: Directive,
args: [{
selector: "[angular-mydatepicker]",
exportAs: "angular-mydatepicker",
providers: [UtilService, LocaleService, DefaultConfigService, NGX_DP_VALUE_ACCESSOR, NGX_DP_VALIDATORS],
standalone: false
}]
}], ctorParameters: () => [{ type: LocaleService }, { type: UtilService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: DefaultConfigService }], propDecorators: { options: [{
type: Input
}], locale: [{
type: Input
}], defaultMonth: [{
type: Input
}], dateChanged: [{
type: Output
}], inputFieldChanged: [{
type: Output
}], calendarViewChanged: [{
type: Output
}], calendarToggle: [{
type: Output
}], rangeDateSelection: [{
type: Output
}], viewActivated: [{
type: Output
}], onKeyUp: [{
type: HostListener,
args: [KEYUP, ["$event"]]
}], onBlur: [{
type: HostListener,
args: [BLUR]
}] } });
class AngularMyDatePickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerModule, declarations: [CalendarComponent,
SelectionBarComponent,
DayViewComponent,
MonthViewComponent,
YearViewComponent,
FooterBarComponent,
AngularMyDatePickerDirective,
AngularMyDatePickerCalendarDirective], imports: [CommonModule, FormsModule], exports: [CalendarComponent,
SelectionBarComponent,
DayViewComponent,
MonthViewComponent,
YearViewComponent,
FooterBarComponent,
AngularMyDatePickerDirective,
AngularMyDatePickerCalendarDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AngularMyDatePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule],
declarations: [
CalendarComponent,
SelectionBarComponent,
DayViewComponent,
MonthViewComponent,
YearViewComponent,
FooterBarComponent,
AngularMyDatePickerDirective,
AngularMyDatePickerCalendarDirective
],
exports: [
CalendarComponent,
SelectionBarComponent,
DayViewComponent,
MonthViewComponent,
YearViewComponent,
FooterBarComponent,
AngularMyDatePickerDirective,
AngularMyDatePickerCalendarDirective
]
}]
}] });
/*
* Public API Surface of angular-mydatepicker
*/
/**
* Generated bundle index. Do not edit.
*/
export { ANIMATION_END, ANIMATION_NAMES, ANIMATION_TIMEOUT, ActiveView, AngularMyDatePickerCalendarDirective, AngularMyDatePickerDirective, AngularMyDatePickerModule, BLUR, BODY, CLICK, CalAnimation, CalToggle, CalendarComponent, D, DATES, DATE_COL_COUNT, DATE_ROW_COUNT, DD, DEFAULT_LOCALE, DEFAULT_MONTH, DISABLED, DOT, DayViewComponent, DefaultConfigService, DefaultView, EMPTY_STR, FR, FooterBarComponent, HeaderAction, IN, INNER_HTML, KEYUP, KeyCode, KeyName, LOCALE, LocaleService, M, MM, MMM, MO, MONTHS, MONTH_COL_COUNT, MONTH_ROW_COUNT, MY_DP_ANIMATION, MonthId, MonthViewComponent, ND, NEXT_VIEW_DISABLED, OBJECT, OPTIONS, OPTS, ORDINAL, OUT, PIPE, PREVENT_CLOSE_TIMEOUT, PREV_VIEW_DISABLED, PX, RD, SA, SELECTED_DATE, SELECTED_DATE_RANGE, SELECT_MONTH, SELECT_YEAR, SPACE_STR, ST, STYLE, SU, SelectionBarComponent, TABINDEX, TD_SELECTOR, TH, TU, UNDER_LINE, UtilService, VALUE, VISIBLE_MONTH, WE, WEEK_DAYS, Y, YEARS, YEARS_DURATION, YEAR_COL_COUNT, YEAR_ROW_COUNT, YEAR_SEPARATOR, YYYY, Year, YearViewComponent, ZERO_STR };
//# sourceMappingURL=gramli-angular-mydatepicker.mjs.map