angular-mydatepicker-ivy
Version:
Angular datepicker and date range picker
710 lines • 143 kB
JavaScript
import { Component, ViewEncapsulation, ViewChild, HostBinding } from "@angular/core";
import { UtilService } from "../../services/angular-mydatepicker.util.service";
import { KeyCode } from "../../enums/key-code.enum";
import { MonthId } from "../../enums/month-id.enum";
import { DefaultView } from "../../enums/default-view.enum";
import { CalAnimation } from "../../enums/cal-animation.enum";
import { HeaderAction } from "../../enums/header-action.enum";
import { DOT, UNDER_LINE, D, M, Y, DATE_ROW_COUNT, DATE_COL_COUNT, MONTH_ROW_COUNT, MONTH_COL_COUNT, YEAR_ROW_COUNT, YEAR_COL_COUNT, SU, MO, TU, WE, TH, FR, SA, EMPTY_STR, CLICK, STYLE, MY_DP_ANIMATION, ANIMATION_NAMES, IN, OUT, TABINDEX, TD_SELECTOR, ZERO_STR, YEAR_SEPARATOR } from "../../constants/constants";
import * as i0 from "@angular/core";
import * as i1 from "../../services/angular-mydatepicker.util.service";
import * as i2 from "@angular/common";
import * as i3 from "../selection-bar/selection-bar.component";
import * as i4 from "../day-view/day-view.component";
import * as i5 from "../month-view/month-view.component";
import * as i6 from "../year-view/year-view.component";
import * as i7 from "../footer-bar/footer-bar.component";
import * as i8 from "../../directives/angular-mydatepicker-calendar.directive";
export class CalendarComponent {
elem;
renderer;
cdr;
utilService;
selectorEl;
styleEl;
position = "static";
opts;
visibleMonth = { monthTxt: EMPTY_STR, monthNbr: 0, year: 0 };
selectedMonth = { monthNbr: 0, year: 0 };
selectedDate = { year: 0, month: 0, day: 0 };
selectedDateRange = { begin: { year: 0, month: 0, day: 0 }, end: { year: 0, month: 0, day: 0 } };
weekDays = [];
dates = [];
months = [];
years = [];
yearsDuration = "";
dayIdx = 0;
weekDayOpts = [SU, MO, TU, WE, TH, FR, SA];
selectMonth = false;
selectYear = false;
viewChanged = false;
dateChanged;
calendarViewChanged;
rangeDateSelection;
viewActivated;
closedByEsc;
selectorPos = null;
prevViewDisabled = false;
nextViewDisabled = false;
clickListener;
constructor(elem, renderer, cdr, utilService) {
this.elem = elem;
this.renderer = renderer;
this.cdr = cdr;
this.utilService = utilService;
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 (const item of this.weekDayOpts) {
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 };
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) {
const 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
const 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,
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,
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,
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,
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: CalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: CalendarComponent, 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 <lib-day-view *ngIf=\"!selectMonth && !selectYear\" [opts]=\"opts\" [dates]=\"dates\" [weekDays]=\"weekDays\"\n [selectedDate]=\"selectedDate\" [selectedDateRange]=\"selectedDateRange\" [viewChanged]=\"viewChanged\"\n (dayCellClicked)=\"onDayCellClicked($event)\"\n (dayCellKeyDown)=\"onDayCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-day-view>\n\n <lib-month-view *ngIf=\"selectMonth\" [opts]=\"opts\" [months]=\"months\" [viewChanged]=\"viewChanged\"\n (monthCellClicked)=\"onMonthCellClicked($event)\"\n (monthCellKeyDown)=\"onMonthCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-month-view>\n\n <lib-year-view *ngIf=\"selectYear\" [opts]=\"opts\" [years]=\"years\" [viewChanged]=\"viewChanged\"\n (yearCellClicked)=\"onYearCellClicked($event)\"\n (yearCellKeyDown)=\"onYearCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-year-view>\n\n <lib-footer-bar *ngIf=\"opts.showFooterToday\" [opts]=\"opts\"\n (footerBarTxtClicked)=\"onTodayFooterClicked()\"></lib-footer-bar>\n </div>\n</div>\n", styles: [".ng-mydp{position:static}.ng-myrtl{direction:rtl}.ng-mydp *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;padding:0;margin:0}.ng-mydp table{display:table;border-spacing:0}.ng-mydp table td,.ng-mydp table th{padding:0;margin:0;vertical-align:middle;border:none}.myDpSelector{padding:4px;border:1px solid #CCC;background-color:#fff;border-radius:4px;z-index:100000}.myDpViewChangeAnimation{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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SelectionBarComponent, selector: "lib-selection-bar", inputs: ["opts", "yearsDuration", "visibleMonth", "selectMonth", "selectYear", "prevViewDisabled", "nextViewDisabled"], outputs: ["prevNavigateBtnClicked", "nextNavigateBtnClicked", "monthViewBtnClicked", "yearViewBtnClicked"] }, { kind: "component", type: i4.DayViewComponent, selector: "lib-day-view", inputs: ["opts", "dates", "weekDays", "selectedDate", "selectedDateRange", "viewChanged"], outputs: ["dayCellClicked", "dayCellKeyDown", "viewActivated"] }, { kind: "component", type: i5.MonthViewComponent, selector: "lib-month-view", inputs: ["opts", "months", "viewChanged"], outputs: ["monthCellClicked", "monthCellKeyDown", "viewActivated"] }, { kind: "component", type: i6.YearViewComponent, selector: "lib-year-view", inputs: ["opts", "years", "viewChanged"], outputs: ["yearCellClicked", "yearCellKeyDown", "viewActivated"] }, { kind: "component", type: i7.FooterBarComponent, selector: "lib-footer-bar", inputs: ["opts"], outputs: ["footerBarTxtClicked"] }, { kind: "directive", type: i8.AngularMyDatePickerCalendarDirective, selector: "[libAngularMyDatePickerCalendar]", inputs: ["libAngularMyDatePickerCalendar"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: "lib-angular-mydatepicker-calendar", providers: [UtilService], encapsulation: ViewEncapsulation.None, template: "<span #styleEl></span>\n<div class=\"ng-mydp {{opts.stylesData?.selector || ''}}\">\n <div class=\"myDpSelector\" #selectorEl \n [libAngularMyDatePickerCalendar]=\"{inline: opts.inline, selectorWidth: opts.selectorWidth, selectorHeight: opts.selectorHeight, selectorPos: selectorPos}\" \n [ngClass]=\"{'myDpSelectorArrow': opts.showSelectorArrow, 'myDpSelectorArrowLeft': opts.showSelectorArrow && !opts.alignSelectorRight, \n 'myDpSelectorArrowRight': opts.showSelectorArrow&&opts.alignSelectorRight, 'myDpSelectorAbsolute': !opts.inline, 'myDpSelectorPosInitial': opts.inline}\" \n (keyup)=\"onCloseSelector($event)\" tabindex=\"0\">\n\n <lib-selection-bar [opts]=\"opts\" [yearsDuration]=\"yearsDuration\" [visibleMonth]=\"visibleMonth\" [selectMonth]=\"selectMonth\" [selectYear]=\"selectYear\"\n [prevViewDisabled]=\"prevViewDisabled\" [nextViewDisabled]=\"nextViewDisabled\"\n (prevNavigateBtnClicked)=\"onPrevNavigateBtnClicked()\" (nextNavigateBtnClicked)=\"onNextNavigateBtnClicked()\"\n (monthViewBtnClicked)=\"onMonthViewBtnClicked()\" (yearViewBtnClicked)=\"onYearViewBtnClicked()\"></lib-selection-bar>\n\n <lib-day-view *ngIf=\"!selectMonth && !selectYear\" [opts]=\"opts\" [dates]=\"dates\" [weekDays]=\"weekDays\"\n [selectedDate]=\"selectedDate\" [selectedDateRange]=\"selectedDateRange\" [viewChanged]=\"viewChanged\"\n (dayCellClicked)=\"onDayCellClicked($event)\"\n (dayCellKeyDown)=\"onDayCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-day-view>\n\n <lib-month-view *ngIf=\"selectMonth\" [opts]=\"opts\" [months]=\"months\" [viewChanged]=\"viewChanged\"\n (monthCellClicked)=\"onMonthCellClicked($event)\"\n (monthCellKeyDown)=\"onMonthCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-month-view>\n\n <lib-year-view *ngIf=\"selectYear\" [opts]=\"opts\" [years]=\"years\" [viewChanged]=\"viewChanged\"\n (yearCellClicked)=\"onYearCellClicked($event)\"\n (yearCellKeyDown)=\"onYearCellKeyDown($event)\"\n (viewActivated)=\"onViewActivated($event)\"></lib-year-view>\n\n <lib-footer-bar *ngIf=\"opts.showFooterToday\" [opts]=\"opts\"\n (footerBarTxtClicked)=\"onTodayFooterClicked()\"></lib-footer-bar>\n </div>\n</div>\n", styles: [".ng-mydp{position:static}.ng-myrtl{direction:rtl}.ng-mydp *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;padding:0;margin:0}.ng-mydp table{display:table;border-spacing:0}.ng-mydp table td,.ng-mydp table th{padding:0;margin:0;vertical-align:middle;border:none}.myDpSelector{padding:4px;border:1px solid #CCC;background-color:#fff;border-radius:4px;z-index:100000}.myDpViewChangeAnimation{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