ontimize-web-ngx
Version:
Ontimize Web framework using Angular 15
923 lines • 226 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
import moment from 'moment';
import { BooleanInputConverter } from '../../../decorators/input-converter';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/extended";
import * as i3 from "@angular/forms";
import * as i4 from "../../../pipes/o-translate.pipe";
export var SideEnum;
(function (SideEnum) {
SideEnum["left"] = "left";
SideEnum["right"] = "right";
})(SideEnum || (SideEnum = {}));
export class DaterangepickerComponent {
set ranges(value) {
this._ranges = value;
this.renderRanges();
}
get ranges() {
return this._ranges;
}
constructor(_ref) {
this._ref = _ref;
this._old = { start: null, end: null };
this.calendarVariables = { left: {}, right: {} };
this.timepickerVariables = { left: {}, right: {} };
this.daterangepicker = { start: new UntypedFormControl(), end: new UntypedFormControl() };
this.applyBtn = { disabled: false };
this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.dateLimit = null;
this.sideEnum = SideEnum;
this.minDate = null;
this.maxDate = null;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.showWeekNumbers = false;
this.showISOWeekNumbers = false;
this.linkedCalendars = false;
this.autoUpdateInput = true;
this.alwaysShowCalendars = false;
this.maxSpan = false;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.showClearButton = false;
this.firstMonthDayClass = null;
this.lastMonthDayClass = null;
this.emptyWeekRowClass = null;
this.firstDayOfNextMonthClass = null;
this.lastDayOfPreviousMonthClass = null;
this._ranges = {};
this.showCancel = false;
this.keepCalendarOpeningWithRange = false;
this.showRangeLabelOnInput = false;
this.rangesArray = [];
this.pickingDate = false;
this.isShown = false;
this.inline = true;
this.leftCalendar = {};
this.rightCalendar = {};
this.showCalInRanges = false;
this.adjustedDaysOfWeek = [];
this.options = {};
this.choosedDate = new EventEmitter();
this.rangeClicked = new EventEmitter();
this.datesUpdated = new EventEmitter();
}
ngOnInit() {
this._buildLocale();
const daysOfWeek = [...this.locale.daysOfWeek];
this.adjustedDaysOfWeek = [...daysOfWeek];
if (this.locale.firstDay !== 0) {
let iterator = this.locale.firstDay;
while (iterator > 0) {
this.adjustedDaysOfWeek.push(this.adjustedDaysOfWeek.shift());
iterator--;
}
}
if (this.inline) {
this._old.start = this.startDate.clone();
this._old.end = this.endDate.clone();
}
this.updateMonthsInView();
this.renderCalendar(SideEnum.left);
if (!this.singleDatePicker) {
this.renderCalendar(SideEnum.right);
}
this.renderRanges();
}
renderRanges() {
this.rangesArray = [];
let start;
let end;
if (typeof this.ranges === 'object') {
for (const range in this.ranges) {
if (typeof this.ranges[range][0] === 'string') {
start = moment(this.ranges[range][0], this.locale.format);
}
else {
start = moment(this.ranges[range][0]);
}
if (typeof this.ranges[range][1] === 'string') {
end = moment(this.ranges[range][1], this.locale.format);
}
else {
end = moment(this.ranges[range][1]);
}
if (this.minDate && start.isBefore(this.minDate)) {
start = this.minDate.clone();
}
let maxDate = this.maxDate;
if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate)) {
maxDate = start.clone().add(this.maxSpan);
}
if (maxDate && end.isAfter(maxDate)) {
end = maxDate.clone();
}
if ((this.minDate && end.isBefore(this.minDate, this.timePicker ? 'minute' : 'day'))
|| (maxDate && start.isAfter(maxDate, this.timePicker ? 'minute' : 'day'))) {
continue;
}
let elem = document.createElement('textarea');
elem.innerHTML = range;
let rangeHtml = elem.value;
this.ranges[rangeHtml] = [start, end];
}
for (const range in this.ranges) {
this.rangesArray.push(range);
}
if (this.showCustomRangeLabel) {
this.rangesArray.push(this.locale.customRangeLabel);
}
this.showCalInRanges = (!this.rangesArray.length) || this.alwaysShowCalendars;
if (!this.timePicker) {
this.startDate = this.startDate.startOf('day');
this.endDate = this.endDate.endOf('day');
}
if (this.timePicker && this.autoApply) {
this.autoApply = false;
}
}
}
renderTimePicker(side) {
if (side === SideEnum.right && !this.endDate) {
return;
}
let selected;
let minDate;
const maxDate = this.maxDate;
if (side === SideEnum.left) {
selected = this.startDate.clone();
minDate = this.minDate;
}
else if (side === SideEnum.right) {
selected = this.endDate.clone();
minDate = this.startDate;
}
const start = this.timePicker24Hour ? 0 : 1;
const end = this.timePicker24Hour ? 23 : 12;
this.timepickerVariables[side] = {
hours: [],
minutes: [],
minutesLabel: [],
seconds: [],
secondsLabel: [],
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
selectedHour: 0,
selectedMinute: 0,
selectedSecond: 0,
};
for (let i = start; i <= end; i++) {
let i_in_24 = i;
if (!this.timePicker24Hour) {
i_in_24 = selected.hour() >= 12 ? (i === 12 ? 12 : i + 12) : (i === 12 ? 0 : i);
}
const time = selected.clone().hour(i_in_24);
let disabled = false;
if (minDate && time.minute(59).isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.minute(0).isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].hours.push(i);
if (i_in_24 === selected.hour() && !disabled) {
this.timepickerVariables[side].selectedHour = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledHours.push(i);
}
}
for (let i = 0; i < 60; i += this.timePickerIncrement) {
const padded = i < 10 ? '0' + i : i;
const time = selected.clone().minute(i);
let disabled = false;
if (minDate && time.second(59).isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.second(0).isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].minutes.push(i);
this.timepickerVariables[side].minutesLabel.push(padded);
if (selected.minute() === i && !disabled) {
this.timepickerVariables[side].selectedMinute = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledMinutes.push(i);
}
}
if (this.timePickerSeconds) {
for (let i = 0; i < 60; i++) {
const padded = i < 10 ? '0' + i : i;
const time = selected.clone().second(i);
let disabled = false;
if (minDate && time.isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].seconds.push(i);
this.timepickerVariables[side].secondsLabel.push(padded);
if (selected.second() === i && !disabled) {
this.timepickerVariables[side].selectedSecond = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledSeconds.push(i);
}
}
}
if (!this.timePicker24Hour) {
if (minDate && selected.clone().hour(12).minute(0).second(0).isBefore(minDate)) {
this.timepickerVariables[side].amDisabled = true;
}
if (maxDate && selected.clone().hour(0).minute(0).second(0).isAfter(maxDate)) {
this.timepickerVariables[side].pmDisabled = true;
}
if (selected.hour() >= 12) {
this.timepickerVariables[side].ampmModel = 'PM';
}
else {
this.timepickerVariables[side].ampmModel = 'AM';
}
}
this.timepickerVariables[side].selected = selected;
}
renderCalendar(side) {
const mainCalendar = (side === SideEnum.left) ? this.leftCalendar : this.rightCalendar;
const month = mainCalendar.month.month();
const year = mainCalendar.month.year();
const hour = mainCalendar.month.hour();
const minute = mainCalendar.month.minute();
const second = mainCalendar.month.second();
const daysInMonth = moment([year, month]).daysInMonth();
const firstDay = moment([year, month, 1]);
const lastDay = moment([year, month, daysInMonth]);
const lastMonth = moment(firstDay).subtract(1, 'month').month();
const lastYear = moment(firstDay).subtract(1, 'month').year();
const daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth();
const dayOfWeek = firstDay.day();
const calendar = [];
calendar.firstDay = firstDay;
calendar.lastDay = lastDay;
for (let i = 0; i < 6; i++) {
calendar[i] = [];
}
let startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1;
if (startDay > daysInLastMonth) {
startDay -= 7;
}
if (dayOfWeek === this.locale.firstDay) {
startDay = daysInLastMonth - 6;
}
let curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]);
for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) {
if (i > 0 && col % 7 === 0) {
col = 0;
row++;
}
calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);
curDate.hour(12);
if (this.minDate && calendar[row][col].format('YYYY-MM-DD') === this.minDate.format('YYYY-MM-DD') &&
calendar[row][col].isBefore(this.minDate) && side === 'left') {
calendar[row][col] = this.minDate.clone();
}
if (this.maxDate && calendar[row][col].format('YYYY-MM-DD') === this.maxDate.format('YYYY-MM-DD') &&
calendar[row][col].isAfter(this.maxDate) && side === 'right') {
calendar[row][col] = this.maxDate.clone();
}
}
if (side === SideEnum.left) {
this.leftCalendar.calendar = calendar;
}
else {
this.rightCalendar.calendar = calendar;
}
const minDate = side === 'left' ? this.minDate : this.startDate;
let maxDate = this.maxDate;
if (this.endDate === null && this.dateLimit) {
const maxLimit = this.startDate.clone().add(this.dateLimit, 'day').endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit;
}
}
this.calendarVariables[side] = {
month: month,
year: year,
hour: hour,
minute: minute,
second: second,
daysInMonth: daysInMonth,
firstDay: firstDay,
lastDay: lastDay,
lastMonth: lastMonth,
lastYear: lastYear,
daysInLastMonth: daysInLastMonth,
dayOfWeek: dayOfWeek,
calRows: Array.from(Array(6).keys()),
calCols: Array.from(Array(7).keys()),
classes: {},
minDate: minDate,
maxDate: maxDate,
calendar: calendar
};
if (this.showDropdowns) {
const currentMonth = calendar[1][1].month();
const currentYear = calendar[1][1].year();
const maxYear = (maxDate && maxDate.year()) || (currentYear + 5);
const minYear = (minDate && minDate.year()) || (currentYear - 50);
const inMinYear = currentYear === minYear;
const inMaxYear = currentYear === maxYear;
const years = [];
for (let y = minYear; y <= maxYear; y++) {
years.push(y);
}
this.calendarVariables[side].dropdowns = {
currentMonth: currentMonth,
currentYear: currentYear,
maxYear: maxYear,
minYear: minYear,
inMinYear: inMinYear,
inMaxYear: inMaxYear,
monthArrays: Array.from(Array(12).keys()),
yearArrays: years
};
}
this._buildCells(calendar, side);
}
setStartDate(startDate) {
if (typeof startDate === 'string') {
this.startDate = moment(startDate, this.locale.format);
}
if (typeof startDate === 'object') {
this.startDate = moment(startDate);
}
if (!this.timePicker) {
this.startDate = this.startDate.startOf('day');
}
if (this.timePicker && this.timePickerIncrement) {
this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if (this.minDate && this.startDate.isBefore(this.minDate)) {
this.startDate = this.minDate.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (this.maxDate && this.startDate.isAfter(this.maxDate)) {
this.startDate = this.maxDate.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (!this.isShown) {
this.updateElement();
}
this.updateMonthsInView();
}
setEndDate(endDate) {
if (typeof endDate === 'string') {
this.endDate = moment(endDate, this.locale.format);
}
if (typeof endDate === 'object') {
this.endDate = moment(endDate);
}
if (!this.timePicker) {
this.endDate = this.endDate.add(1, 'd').startOf('day').subtract(1, 'second');
}
if (this.timePicker && this.timePickerIncrement) {
this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if (this.endDate.isBefore(this.startDate)) {
this.endDate = this.startDate.clone();
}
if (this.maxDate && this.endDate.isAfter(this.maxDate)) {
this.endDate = this.maxDate.clone();
}
if (this.dateLimit && this.startDate.clone().add(this.dateLimit, 'day').isBefore(this.endDate)) {
this.endDate = this.startDate.clone().add(this.dateLimit, 'day');
}
if (!this.isShown) {
}
this.updateMonthsInView();
}
isInvalidDate(date) {
return false;
}
isCustomDate(date) {
return false;
}
updateView() {
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.updateCalendars();
}
updateMonthsInView() {
if (this.endDate) {
if (this.leftCalendar.month && this.rightCalendar.month &&
((this.startDate && this.leftCalendar && this.startDate.format('YYYY-MM') === this.leftCalendar.month.format('YYYY-MM')) ||
(this.startDate && this.rightCalendar && this.startDate.format('YYYY-MM') === this.rightCalendar.month.format('YYYY-MM')))
&&
(this.endDate.format('YYYY-MM') === this.leftCalendar.month.format('YYYY-MM') ||
this.endDate.format('YYYY-MM') === this.rightCalendar.month.format('YYYY-MM'))) {
return;
}
if ((!this.singleDatePicker || (this.singleDatePicker && !this.pickingDate)) && this.startDate) {
this.leftCalendar.month = this.startDate.clone().date(2);
if (!this.linkedCalendars && (this.endDate.month() !== this.startDate.month() ||
this.endDate.year() !== this.startDate.year())) {
this.rightCalendar.month = this.endDate.clone().date(2);
}
else {
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
}
}
}
else {
if (this.leftCalendar.month.format('YYYY-MM') !== this.startDate.format('YYYY-MM') &&
this.rightCalendar.month.format('YYYY-MM') !== this.startDate.format('YYYY-MM')) {
this.leftCalendar.month = this.startDate.clone().date(2);
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
}
}
if (this.maxDate && this.linkedCalendars && this.rightCalendar.month > this.maxDate) {
this.rightCalendar.month = this.maxDate.clone().date(2);
this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month');
}
}
updateCalendars() {
this.renderCalendar(SideEnum.left);
if (!this.singleDatePicker) {
this.renderCalendar(SideEnum.right);
}
if (this.endDate === null) {
return;
}
this.calculateChosenLabel();
}
updateElement() {
if (this.autoUpdateInput) {
if (this.startDate && this.endDate) {
if (this.rangesArray.length && this.showRangeLabelOnInput === true && this.chosenRange &&
this.locale.customRangeLabel !== this.chosenRange) {
this.chosenLabel = this.chosenRange;
}
else {
this.chosenLabel = this.startDate.format(this.locale.format) +
this.locale.separator + this.endDate.format(this.locale.format);
}
}
}
}
remove() {
this.isShown = false;
}
calculateChosenLabel() {
if (!this.locale || !this.locale.separator) {
this._buildLocale();
}
let customRange = true;
let i = 0;
if (this.rangesArray.length > 0) {
for (const range in this.ranges) {
if (this.timePicker) {
const format = this.timePickerSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
if (this.startDate.format(format) === this.ranges[range][0].format(format) && this.endDate.format(format) === this.ranges[range][1].format(format)) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
else {
if (this.startDate.format('YYYY-MM-DD') === this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') === this.ranges[range][1].format('YYYY-MM-DD')) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
i++;
}
if (customRange) {
if (this.showCustomRangeLabel) {
this.chosenRange = this.locale.customRangeLabel;
}
else {
this.chosenRange = null;
}
this.showCalInRanges = true;
}
}
this.updateElement();
}
clickApply(e) {
if (this.startDate && !this.endDate) {
this.endDate = this.startDate.clone();
this.calculateChosenLabel();
}
if (this.isInvalidDate && this.startDate && this.endDate) {
const d = this.startDate.clone();
while (d.isBefore(this.endDate)) {
if (this.isInvalidDate(d)) {
this.endDate = d.subtract(1, 'days');
this.calculateChosenLabel();
break;
}
d.add(1, 'days');
}
}
if (this.chosenLabel) {
this.choosedDate.emit({ chosenLabel: this.chosenLabel, startDate: this.startDate, endDate: this.endDate });
}
this.datesUpdated.emit({ startDate: this.startDate, endDate: this.endDate });
this.hide();
}
clickCancel(e) {
this.startDate = this._old.start;
this.endDate = this._old.end;
if (this.inline) {
this.updateView();
}
this.hide();
}
monthChanged(monthEvent, side) {
const year = this.calendarVariables[side].dropdowns.currentYear;
const month = parseInt(monthEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
yearChanged(yearEvent, side) {
const month = this.calendarVariables[side].dropdowns.currentMonth;
const year = parseInt(yearEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
timeChanged(timeEvent, side) {
let hour = parseInt(this.timepickerVariables[side].selectedHour, 10);
const minute = parseInt(this.timepickerVariables[side].selectedMinute, 10);
const second = this.timePickerSeconds ? parseInt(this.timepickerVariables[side].selectedSecond, 10) : 0;
if (!this.timePicker24Hour) {
const ampm = this.timepickerVariables[side].ampmModel;
if (ampm === 'PM' && hour < 12) {
hour += 12;
}
if (ampm === 'AM' && hour === 12) {
hour = 0;
}
}
if (side === SideEnum.left) {
const start = this.startDate.clone();
start.hour(hour);
start.minute(minute);
start.second(second);
this.setStartDate(start);
if (this.endDate && this.endDate.format('YYYY-MM-DD') === start.format('YYYY-MM-DD') && this.endDate.isBefore(start)) {
this.setEndDate(start.clone());
}
}
else if (this.endDate) {
const end = this.endDate.clone();
end.hour(hour);
end.minute(minute);
end.second(second);
this.setEndDate(end);
}
this.updateCalendars();
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
monthOrYearChanged(month, year, side) {
const isLeft = side === SideEnum.left;
if (!isLeft) {
if (year < this.startDate.year() || (year === this.startDate.year() && month < this.startDate.month())) {
month = this.startDate.month();
year = this.startDate.year();
}
}
if (this.minDate) {
if (year < this.minDate.year() || (year === this.minDate.year() && month < this.minDate.month())) {
month = this.minDate.month();
year = this.minDate.year();
}
}
if (this.maxDate) {
if (year > this.maxDate.year() || (year === this.maxDate.year() && month > this.maxDate.month())) {
month = this.maxDate.month();
year = this.maxDate.year();
}
}
this.calendarVariables[side].dropdowns.currentYear = year;
this.calendarVariables[side].dropdowns.currentMonth = month;
if (isLeft) {
this.leftCalendar.month.month(month).year(year);
if (this.linkedCalendars) {
this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month');
}
}
else {
this.rightCalendar.month.month(month).year(year);
if (this.linkedCalendars) {
this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month');
}
}
this.updateCalendars();
}
clickPrev(side) {
if (side === SideEnum.left) {
this.leftCalendar.month.subtract(1, 'month');
if (this.linkedCalendars) {
this.rightCalendar.month.subtract(1, 'month');
}
}
else {
this.rightCalendar.month.subtract(1, 'month');
}
this.updateCalendars();
}
clickNext(side) {
if (side === SideEnum.left) {
this.leftCalendar.month.add(1, 'month');
}
else {
this.rightCalendar.month.add(1, 'month');
if (this.linkedCalendars) {
this.leftCalendar.month.add(1, 'month');
}
}
this.updateCalendars();
}
clickDate(e, side, row, col) {
this.pickingDate = true;
if (e.target.tagName === 'TD') {
if (!e.target.classList.contains('available')) {
return;
}
}
else if (e.target.tagName === 'SPAN') {
if (!e.target.parentElement.classList.contains('available')) {
return;
}
}
if (this.rangesArray.length) {
this.chosenRange = this.locale.customRangeLabel;
}
let date = side === SideEnum.left ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
if (this.endDate || date.isBefore(this.startDate, 'day')) {
if (this.timePicker) {
date = this._getDateWithTime(date, SideEnum.left);
}
this.endDate = null;
this.setStartDate(date.clone());
}
else if (!this.endDate && date.isBefore(this.startDate)) {
this.setEndDate(this.startDate.clone());
}
else {
if (this.timePicker) {
date = this._getDateWithTime(date, SideEnum.right);
}
this.setEndDate(date.clone());
if (this.autoApply) {
this.calculateChosenLabel();
this.clickApply();
}
}
this.updateView();
this.pickingDate = false;
e.stopPropagation();
}
clickRange(e, label) {
this.chosenRange = label;
if (label === this.locale.customRangeLabel) {
this.isShown = true;
this.showCalInRanges = true;
}
else {
const dates = this.ranges[label];
this.startDate = dates[0].clone();
this.endDate = dates[1].clone();
if (this.showRangeLabelOnInput && label !== this.locale.customRangeLabel) {
this.chosenLabel = label;
}
else {
this.calculateChosenLabel();
}
this.showCalInRanges = (!this.rangesArray.length) || this.alwaysShowCalendars;
if (!this.timePicker) {
this.startDate.startOf('day');
this.endDate.endOf('day');
}
if (!this.alwaysShowCalendars) {
this.isShown = false;
}
this.rangeClicked.emit({ label: label, dates: dates });
if (!this.keepCalendarOpeningWithRange) {
this.clickApply();
}
else {
if (this.maxDate && this.maxDate.isSame(dates[0], 'month')) {
this.rightCalendar.month.month(dates[0].month());
this.rightCalendar.month.year(dates[0].year());
this.leftCalendar.month.month(dates[0].month() - 1);
this.leftCalendar.month.year(dates[1].year());
}
else {
this.leftCalendar.month.month(dates[0].month());
this.leftCalendar.month.year(dates[0].year());
const nextMonth = dates[0].clone().add(1, 'month');
this.rightCalendar.month.month(nextMonth.month());
this.rightCalendar.month.year(nextMonth.year());
}
this.updateCalendars();
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
}
}
}
show(e) {
if (this.isShown) {
return;
}
this._old.start = this.startDate.clone();
this._old.end = this.endDate.clone();
this.isShown = true;
this.updateView();
}
hide(e) {
if (!this.isShown) {
return;
}
if (!this.endDate) {
if (this._old.start) {
this.startDate = this._old.start.clone();
}
if (this._old.end) {
this.endDate = this._old.end.clone();
}
}
if (!this.startDate.isSame(this._old.start) || !this.endDate.isSame(this._old.end)) {
}
this.updateElement();
this.isShown = false;
this._ref.detectChanges();
}
handleInternalClick(e) {
e.stopPropagation();
}
updateLocale(locale) {
for (const key in locale) {
if (locale.hasOwnProperty(key)) {
this.locale[key] = locale[key];
}
}
}
clear() {
this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.choosedDate.emit({ chosenLabel: '', startDate: null, endDate: null });
this.datesUpdated.emit({ startDate: null, endDate: null });
this.hide();
}
disableRange(range) {
if (range === this.locale.customRangeLabel) {
return false;
}
const rangeMarkers = this.ranges[range];
const areBothBefore = rangeMarkers.every(date => {
if (!this.minDate) {
return false;
}
return date.isBefore(this.minDate);
});
const areBothAfter = rangeMarkers.every(date => {
if (!this.maxDate) {
return false;
}
return date.isAfter(this.maxDate);
});
return (areBothBefore || areBothAfter);
}
_getDateWithTime(date, side) {
let hour = parseInt(this.timepickerVariables[side].selectedHour, 10);
if (!this.timePicker24Hour) {
const ampm = this.timepickerVariables[side].ampmModel;
if (ampm === 'PM' && hour < 12) {
hour += 12;
}
if (ampm === 'AM' && hour === 12) {
hour = 0;
}
}
const minute = parseInt(this.timepickerVariables[side].selectedMinute, 10);
const second = this.timePickerSeconds ? parseInt(this.timepickerVariables[side].selectedSecond, 10) : 0;
return date.clone().hour(hour).minute(minute).second(second);
}
_buildLocale() {
if (!this.locale.format) {
if (this.timePicker) {
this.locale.format = moment.localeData().longDateFormat('lll');
}
else {
this.locale.format = moment.localeData().longDateFormat('L');
}
}
}
_buildCells(calendar, side) {
for (let row = 0; row < 6; row++) {
this.calendarVariables[side].classes[row] = {};
const rowClasses = [];
if (this.emptyWeekRowClass && !this.hasCurrentMonthDays(this.calendarVariables[side].month, calendar[row])) {
rowClasses.push(this.emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];
if (calendar[row][col].isSame(new Date(), 'day')) {
classes.push('today');
}
if (calendar[row][col].isoWeekday() > 5) {
classes.push('weekend');
}
if (calendar[row][col].month() !== calendar[1][1].month()) {
classes.push('off');
if (this.lastDayOfPreviousMonthClass && (calendar[row][col].month() < calendar[1][1].month() || calendar[1][1].month() === 0) && calendar[row][col].date() === this.calendarVariables[side].daysInLastMonth) {
classes.push(this.lastDayOfPreviousMonthClass);
}
if (this.firstDayOfNextMonthClass && (calendar[row][col].month() > calendar[1][1].month() || calendar[row][col].month() === 0) && calendar[row][col].date() === 1) {
classes.push(this.firstDayOfNextMonthClass);
}
}
if (this.firstMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(this.firstMonthDayClass);
}
if (this.lastMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(this.lastMonthDayClass);
}
if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day')) {
classes.push('off', 'disabled');
}
if (this.calendarVariables[side].maxDate && calendar[row][col].isAfter(this.calendarVariables[side].maxDate, 'day')) {
classes.push('off', 'disabled');
}
if (this.isInvalidDate(calendar[row][col])) {
classes.push('off', 'disabled');
}
if (this.startDate && calendar[row][col].format('YYYY-MM-DD') === this.startDate.format('YYYY-MM-DD')) {
classes.push('active', 'start-date');
}
if (this.endDate !== null && calendar[row][col].format('YYYY-MM-DD') === this.endDate.format('YYYY-MM-DD')) {
classes.push('active', 'end-date');
}
if (this.endDate !== null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate) {
classes.push('in-range');
}
const isCustom = this.isCustomDate(calendar[row][col]);
if (isCustom !== false) {
if (typeof isCustom === 'string') {
classes.push(isCustom);
}
else {
Array.prototype.push.apply(classes, isCustom);
}
}
let cname = '';
let disabled = false;
for (let i = 0; i < classes.length; i++) {
cname += classes[i] + ' ';
if (classes[i] === 'disabled') {
disabled = true;
}
}
if (!disabled) {
cname += 'available';
}
this.calendarVariables[side].classes[row][col] = cname.replace(/^\s+|\s+$/g, '');
}
this.calendarVariables[side].classes[row].classList = rowClasses.join(' ');
}
}
hasCurrentMonthDays(currentMonth, row) {
for (let day = 0; day < 7; day++) {
if (row[day].month() === currentMonth) {
return true;
}
}
return false;
}
}
DaterangepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DaterangepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DaterangepickerComponent, selector: "o-daterange-picker", inputs: { dateLimit: "dateLimit", minDate: "minDate", maxDate: "maxDate", autoApply: "autoApply", singleDatePicker: "singleDatePicker", showDropdowns: "showDropdowns", showISOWeekNumbers: "showISOWeekNumbers", linkedCalendars: "linkedCalendars", autoUpdateInput: "autoUpdateInput", alwaysShowCalendars: "alwaysShowCalendars", maxSpan: "maxSpan", timePicker: "timePicker", timePicker24Hour: "timePicker24Hour", timePickerIncrement: "timePickerIncrement", timePickerSeconds: "timePickerSeconds", showClearButton: "showClearButton", firstMonthDayClass: "firstMonthDayClass", lastMonthDayClass: "lastMonthDayClass", emptyWeekRowClass: "emptyWeekRowClass", firstDayOfNextMonthClass: "firstDayOfNextMonthClass", lastDayOfPreviousMonthClass: "lastDayOfPreviousMonthClass", locale: "locale", ranges: "ranges", showCustomRangeLabel: "showCustomRangeLabel", showCancel: "showCancel", keepCalendarOpeningWithRange: "keepCalendarOpeningWithRange", showRangeLabelOnInput: "showRangeLabelOnInput", drops: "drops", opens: "opens", isInvalidDate: "isInvalidDate", isCustomDate: "isCustomDate" }, outputs: { choosedDate: "choosedDate", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated" }, host: { listeners: { "click": "handleInternalClick($event)" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DaterangepickerComponent),
multi: true
}], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n ltr: locale.direction === 'ltr',\n rtl: this.locale.direction === 'rtl',\n 'shown': isShown || inline,\n 'hidden': !isShown && !inline,\n 'inline': inline,\n 'double': !singleDatePicker && showCalInRanges,\n 'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n <div class=\"ranges\">\n <ul>\n <li *ngFor=\"let range of rangesArray\">\n <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n </li>\n </ul>\n </div>\n <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n <div class=\"calendar-table\">\n <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n <thead>\n <tr>\n <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n <ng-container\n *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n </th>\n </ng-container>\n <ng-container\n *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n <th scope=\"col\"></th>\n </ng-container>\n <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n <div class=\"dropdowns\">\n {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n <option\n [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n {{locale.monthNames[m]}}\n </option>\n </select>\n </div>\n <div class=\"dropdowns\">\n {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n {{y}}\n </option>\n </select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n YYYY\")}}\n </ng-container>\n </th>\n <ng-container\n *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n </th>\n </ng-container>\n <ng-container\n *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n <th scope=\"col\"></th>\n </ng-container>\n </tr>\n <tr class='week-days'>\n <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n </tr>\n </thead>\n <tbody class=\"drp-animate\">\n <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n <!-- add week number -->\n <td class=\"week\" *ngIf=\"showWeekNumbers\">\n <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n </td>\n <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n </td>\n <!-- cal -->\n <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n (click)=\"clickDate($event, sideEnum.left, row, col)\">\n <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"calendar-time\" *ngIf=\"timePicker\">\n <div class=\"select\">\n <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n {{i}}</option>\n </select>\n </div>\n <div class=\"select\">\n <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n </select>\n <span class=\"select-highlight\"></span>\n <span class=\"select-bar\"></span>\n </div>\n <div class=\"select\">\n <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n </select>\n <span class=\"select-highlight\"></span>\n <span class=\"select-bar\"></span>\n </div>\n <div class=\"select\">\n <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n </select>\n <span class=\"select-highlight\"></span>\n <span class=\"select-bar\"></span>\n </div>\n </div>\n </div>\n <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n <div class=\"calendar-table\">\n <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n <thead>\n <tr>\n <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n <ng-container\n *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n </th>\n </ng-container>\n <ng-container\n *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n <th scope=\"col\"></th>\n </ng-container>\n <th scope=\"col\" colspan=\"5\" class=\"month\">\n <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n <div class=\"dropdowns\">\n {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n <option\n [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n {{locale.monthNames[m]}}\n </option>\n </select>\n </div>\n <div class=\"dropdowns\">\n {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n {{y}}\n </option>\n </select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n YYYY\")}}\n </ng-container>\n </th>\n <ng-container\n *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!l