ardhrizk-ngx-daterangepicker-bootstrap
Version:
Date Range Picker - Forced to Angular 16 and Bootstrap 5
1,840 lines • 140 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Inject, EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, ViewChild, reflectComponentType, Directive, HostBinding, HostListener, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import LocalizedFormat from 'dayjs/plugin/localizedFormat';
import isoWeek from 'dayjs/plugin/isoWeek';
import week from 'dayjs/plugin/weekOfYear';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
dayjs.extend(localeData);
const LOCALE_CONFIG = new InjectionToken('daterangepicker.config');
/**
* DefaultLocaleConfig
*/
const DefaultLocaleConfig = {
direction: 'ltr',
separator: ' - ',
weekLabel: 'W',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
customRangeLabel: 'Custom range',
daysOfWeek: dayjs.weekdaysMin(),
monthNames: dayjs.monthsShort(),
firstDay: dayjs.localeData().firstDayOfWeek()
};
class NgxDaterangepickerLocaleService {
constructor(_config) {
this._config = _config;
}
get config() {
if (!this._config) {
return DefaultLocaleConfig;
}
return Object.assign(Object.assign({}, DefaultLocaleConfig), this._config);
}
}
NgxDaterangepickerLocaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerLocaleService, deps: [{ token: LOCALE_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
NgxDaterangepickerLocaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerLocaleService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerLocaleService, decorators: [{
type: Injectable
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [LOCALE_CONFIG]
}] }];
} });
dayjs.extend(localeData);
dayjs.extend(LocalizedFormat);
dayjs.extend(isoWeek);
dayjs.extend(week);
dayjs.extend(customParseFormat);
var SideEnum;
(function (SideEnum) {
SideEnum["left"] = "left";
SideEnum["right"] = "right";
})(SideEnum || (SideEnum = {}));
class NgxDaterangepickerBootstrapComponent {
set minDate(value) {
if (dayjs.isDayjs(value)) {
this._minDate = value;
}
else {
this._minDate = dayjs(value);
}
}
set maxDate(value) {
if (dayjs.isDayjs(value)) {
this._maxDate = value;
}
else {
this._maxDate = dayjs(value);
}
}
set locale(value) {
this._locale = Object.assign(Object.assign({}, this._localeService.config), value);
}
set ranges(value) {
this._ranges = value;
this.renderRanges();
}
getMinDate() {
return this._minDate;
}
getMaxDate() {
return this._maxDate;
}
get locale() {
return this._locale;
}
get ranges() {
return this._ranges;
}
constructor(el, _ref, _localeService) {
this.el = el;
this._ref = _ref;
this._localeService = _localeService;
this.calendarVariables = { left: {}, right: {} };
this.timepickerVariables = { left: {}, right: {} };
this.applyBtn = { disabled: false };
this.sideEnum = SideEnum; // used in template for compile time support of enum values.
this.rangesArray = [];
this.isShown = false;
this.inline = true;
this.showCalInRanges = false;
this.tooltiptext = []; // for storing tooltiptext
this.leftCalendar = {};
this.rightCalendar = {};
this.nowHoveredDate = null;
this.pickingDate = false;
this._old = { start: null, end: null };
this._locale = {};
this._ranges = {};
this.startDate = dayjs().startOf('day');
this.endDate = dayjs().endOf('day');
this.dateLimit = 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.lockStartDate = 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.emptyWeekColumnClass = null;
this.firstDayOfNextMonthClass = null;
this.lastDayOfPreviousMonthClass = null;
this.showCancel = false;
this.keepCalendarOpeningWithRange = false;
this.showRangeLabelOnInput = false;
this.customRangeDirection = false;
this.closeOnAutoApply = true;
this.choosedDate = new EventEmitter();
this.rangeClicked = new EventEmitter();
this.datesUpdated = new EventEmitter();
this.startDateChanged = new EventEmitter();
this.endDateChanged = new EventEmitter();
this.cancelClicked = new EventEmitter();
this.clearClicked = new EventEmitter();
}
ngOnChanges(changes) {
if ((changes['startDate'] || changes['endDate']) && this.inline) {
this.updateView();
}
}
ngOnInit() {
var _a, _b;
this._buildLocale();
const daysOfWeek = [...this.locale.daysOfWeek];
this.locale.firstDay = this.locale.firstDay % 7;
if (this.locale.firstDay !== 0) {
let iterator = this.locale.firstDay;
while (iterator > 0) {
daysOfWeek.push(daysOfWeek.shift());
iterator--;
}
}
this.locale.daysOfWeek = daysOfWeek;
if (this.inline) {
this.applyBtn.disabled = true;
this._old.start = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.clone();
this._old.end = (_b = this.endDate) === null || _b === void 0 ? void 0 : _b.clone();
}
if (this.startDate && this.timePicker) {
this.setStartDate(this.startDate);
this.renderTimePicker(SideEnum.left);
}
if (this.endDate && this.timePicker) {
this.setEndDate(this.endDate);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
this.renderRanges();
}
renderRanges() {
var _a, _b, _c;
this.rangesArray = [];
let start, end;
if (typeof this.ranges === 'object') {
for (const range in this.ranges) {
if (this.ranges[range]) {
if (typeof this.ranges[range][0] === 'string') {
start = dayjs(this.ranges[range][0], this.locale.format);
}
else {
start = dayjs(this.ranges[range][0]);
}
if (typeof this.ranges[range][1] === 'string') {
end = dayjs(this.ranges[range][1], this.locale.format);
}
else {
end = dayjs(this.ranges[range][1]);
}
// If the start or end date exceed those allowed by the minDate or maxSpan
// options, shorten the range to the allowable period.
if (this.getMinDate() && start.isBefore(this.getMinDate())) {
start = (_a = this.getMinDate()) === null || _a === void 0 ? void 0 : _a.clone();
}
let maxDate = this.getMaxDate();
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 the end of the range is before the minimum or the start of the range is
// after the maximum, don't display this range option at all.
if ((this.getMinDate() && end.isBefore(this.getMinDate(), this.timePicker ? 'minute' : 'day'))
|| (maxDate && start.isAfter(maxDate, this.timePicker ? 'minute' : 'day'))) {
continue;
}
// Support unicode chars in the range names.
const elem = document.createElement('textarea');
elem.innerHTML = range;
const rangeHtml = elem.value;
this.ranges[rangeHtml] = [start, end];
}
}
for (const range in this.ranges) {
if (this.ranges[range]) {
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 = (_b = this.startDate) === null || _b === void 0 ? void 0 : _b.startOf('day');
this.endDate = (_c = this.endDate) === null || _c === void 0 ? void 0 : _c.endOf('day');
}
}
}
renderTimePicker(side) {
var _a, _b;
let selected, minDate;
const maxDate = this.getMaxDate();
if (side === SideEnum.left) {
selected = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.clone();
minDate = this.getMinDate();
}
else if (side === SideEnum.right && this.endDate) {
selected = this.endDate.clone();
minDate = this.startDate;
}
else if (side === SideEnum.right && !this.endDate) {
// don't have an end date, use the start date then put the selected time for the right side as the time
selected = this._getDateWithTime(this.startDate, SideEnum.right);
if (selected.isBefore(this.startDate)) {
selected = (_b = this.startDate) === null || _b === void 0 ? void 0 : _b.clone(); // set it back to the start date the time was backwards
}
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
};
// generate hours
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);
}
}
// generate minutes
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);
}
}
// generate seconds
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);
}
}
}
// generate AM/PM
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) {
var _a, _b, _c, _d, _e, _f;
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 = dayjs(new Date(year, month)).daysInMonth();
const firstDay = dayjs(new Date(year, month, 1));
const lastDay = dayjs(new Date(year, month, daysInMonth));
const lastMonth = dayjs(firstDay).subtract(1, 'month').month();
const lastYear = dayjs(firstDay).subtract(1, 'month').year();
const daysInLastMonth = dayjs(new Date(lastYear, lastMonth)).daysInMonth();
const dayOfWeek = firstDay.day();
// initialize a 6 rows x 7 columns array for the calendar
const calendar = [];
calendar.firstDay = firstDay;
calendar.lastDay = lastDay;
for (let i = 0; i < 6; i++)
calendar[i] = [];
// populate the calendar with date objects
let startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1;
if (startDay > daysInLastMonth)
startDay -= 7;
if (dayOfWeek === this.locale.firstDay)
startDay = daysInLastMonth - 6;
let curDate = dayjs(new Date(lastYear, lastMonth, startDay, 12, minute, second));
for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = dayjs(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 = curDate.hour(12);
if (this.getMinDate() && calendar[row][col].format('YYYY-MM-DD') === ((_a = this.getMinDate()) === null || _a === void 0 ? void 0 : _a.format('YYYY-MM-DD')) &&
calendar[row][col].isBefore(this.getMinDate()) && side === 'left') {
calendar[row][col] = (_b = this.getMinDate()) === null || _b === void 0 ? void 0 : _b.clone();
}
if (this.getMaxDate() && calendar[row][col].format('YYYY-MM-DD') === ((_c = this.getMaxDate()) === null || _c === void 0 ? void 0 : _c.format('YYYY-MM-DD')) &&
calendar[row][col].isAfter(this.getMaxDate()) && side === 'right') {
calendar[row][col] = (_d = this.getMaxDate()) === null || _d === void 0 ? void 0 : _d.clone();
}
}
// make the calendar object available to hoverDate/clickDate
if (side === SideEnum.left) {
this.leftCalendar.calendar = calendar;
}
else {
this.rightCalendar.calendar = calendar;
}
//
// Display the calendar
//
let minDate = side === 'left' ? this.getMinDate() : this.startDate;
let maxDate = this.getMaxDate();
// adjust maxDate to reflect the dateLimit setting in order to
// grey out end dates beyond the dateLimit
if (this.endDate === null && this.dateLimit) {
const maxLimit = (_e = this.startDate) === null || _e === void 0 ? void 0 : _e.clone().add(this.dateLimit, 'day').endOf('day');
if (!maxDate || (maxLimit === null || maxLimit === void 0 ? void 0 : maxLimit.isBefore(maxDate)))
maxDate = maxLimit;
if (this.customRangeDirection) {
minDate = this.getMinDate();
const minLimit = (_f = this.startDate) === null || _f === void 0 ? void 0 : _f.clone().subtract(this.dateLimit, 'day').endOf('day');
if (!minDate || (minLimit === null || minLimit === void 0 ? void 0 : minLimit.isAfter(minDate))) {
minDate = minLimit;
}
}
}
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,
// other vars
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 realCurrentYear = dayjs().year();
const maxYear = (maxDate && maxDate.year()) || (realCurrentYear + 5);
const minYear = (minDate && minDate.year()) || (realCurrentYear - 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) {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (typeof startDate === 'string')
this.startDate = dayjs(startDate, this.locale.format);
if (typeof startDate === 'object') {
this.pickingDate = true;
this.startDate = dayjs(startDate);
}
if (!this.timePicker) {
this.pickingDate = true;
this.startDate = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.startOf('day');
}
if (this.timePicker && this.timePickerIncrement) {
this.startDate = (_b = this.startDate) === null || _b === void 0 ? void 0 : _b.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if (this.getMinDate() && ((_c = this.startDate) === null || _c === void 0 ? void 0 : _c.isBefore(this.getMinDate()))) {
this.startDate = (_d = this.getMinDate()) === null || _d === void 0 ? void 0 : _d.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate = (_e = this.startDate) === null || _e === void 0 ? void 0 : _e.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (this.getMaxDate() && ((_f = this.startDate) === null || _f === void 0 ? void 0 : _f.isAfter(this.getMaxDate()))) {
this.startDate = (_g = this.getMaxDate()) === null || _g === void 0 ? void 0 : _g.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate = (_h = this.startDate) === null || _h === void 0 ? void 0 : _h.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (!this.isShown) {
this.updateElement();
}
this.startDateChanged.emit({ startDate: this.startDate });
this.updateMonthsInView();
}
setEndDate(endDate) {
var _a, _b, _c, _d, _e, _f, _g;
if (typeof endDate === 'string') {
this.endDate = dayjs(endDate, this.locale.format);
}
if (typeof endDate === 'object') {
this.pickingDate = false;
this.endDate = dayjs(endDate);
}
if (!this.timePicker) {
this.pickingDate = false;
this.endDate = (_a = this.endDate) === null || _a === void 0 ? void 0 : _a.add(1, 'd').startOf('day').subtract(1, 'second');
}
if (this.timePicker && this.timePickerIncrement) {
(_b = this.endDate) === null || _b === void 0 ? void 0 : _b.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if ((_c = this.endDate) === null || _c === void 0 ? void 0 : _c.isBefore(this.startDate)) {
this.endDate = (_d = this.startDate) === null || _d === void 0 ? void 0 : _d.clone();
}
if (this.getMaxDate() && ((_e = this.endDate) === null || _e === void 0 ? void 0 : _e.isAfter(this.getMaxDate()))) {
this.endDate = (_f = this.getMaxDate()) === null || _f === void 0 ? void 0 : _f.clone();
}
if (this.dateLimit && ((_g = this.startDate) === null || _g === void 0 ? void 0 : _g.clone().add(this.dateLimit, 'day').isBefore(this.endDate))) {
this.endDate = this.startDate.clone().add(this.dateLimit, 'day');
}
if (!this.isShown) {
// this.updateElement();
}
this.endDateChanged.emit({ endDate: this.endDate });
this.updateMonthsInView();
}
isInvalidDate(date) {
return false;
}
isCustomDate(date) {
return false;
}
isTooltipDate(date) {
return null;
}
updateView() {
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.updateCalendars();
}
updateMonthsInView() {
var _a, _b, _c, _d, _e, _f;
if (this.endDate) {
// if both dates are visible already, do nothing
if (!this.singleDatePicker && 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.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') !== ((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.format('YYYY-MM')) &&
this.rightCalendar.month.format('YYYY-MM') !== ((_b = this.startDate) === null || _b === void 0 ? void 0 : _b.format('YYYY-MM'))) {
this.leftCalendar.month = (_c = this.startDate) === null || _c === void 0 ? void 0 : _c.clone().date(2);
this.rightCalendar.month = (_d = this.startDate) === null || _d === void 0 ? void 0 : _d.clone().date(2).add(1, 'month');
}
}
if (this.getMaxDate() && this.linkedCalendars && !this.singleDatePicker && this.rightCalendar.month > this.getMaxDate()) {
this.rightCalendar.month = (_e = this.getMaxDate()) === null || _e === void 0 ? void 0 : _e.clone().date(2);
this.leftCalendar.month = (_f = this.getMaxDate()) === null || _f === void 0 ? void 0 : _f.clone().date(2).subtract(1, 'month');
}
}
/**
* This is responsible for updating the calendars
*/
updateCalendars() {
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
if (this.endDate === null) {
return;
}
this.calculateChosenLabel();
}
updateElement() {
var _a;
const format = this.locale.displayFormat ? this.locale.displayFormat : this.locale.format;
if (!this.singleDatePicker && this.autoUpdateInput) {
if (this.startDate && this.endDate) {
// if we use ranges and should show range label on input
if (this.rangesArray.length && this.showRangeLabelOnInput && this.chosenRange &&
this.locale.customRangeLabel !== this.chosenRange) {
this.chosenLabel = this.chosenRange;
}
else {
this.chosenLabel = this.startDate.format(format) +
this.locale.separator + this.endDate.format(format);
}
}
}
else if (this.autoUpdateInput) {
this.chosenLabel = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.format(format);
}
}
remove() {
this.isShown = false;
}
/**
* this should calculate the label
*/
calculateChosenLabel() {
var _a, _b, _c, _d;
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.ranges[range]) {
if (this.timePicker) {
const format = this.timePickerSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
// ignore times when comparing dates if time picker seconds is not enabled
if (((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.format(format)) === this.ranges[range][0].format(format)
&& ((_b = this.endDate) === null || _b === void 0 ? void 0 : _b.format(format)) === this.ranges[range][1].format(format)) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
else {
// ignore times when comparing dates if time picker is not enabled
if (((_c = this.startDate) === null || _c === void 0 ? void 0 : _c.format('YYYY-MM-DD')) === this.ranges[range][0].format('YYYY-MM-DD')
&& ((_d = this.endDate) === null || _d === void 0 ? void 0 : _d.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;
}
// if custom label: show calendar
this.showCalInRanges = true;
}
}
this.updateElement();
}
clickApply(e) {
if (this.inline)
this.applyBtn.disabled = true;
if (!this.singleDatePicker && this.startDate && !this.endDate) {
this.endDate = this._getDateWithTime(this.startDate, SideEnum.right);
this.calculateChosenLabel();
}
if (this.startDate && this.endDate) {
// get if there are invalid date between range
let d = this.startDate.clone();
while (d.isBefore(this.endDate)) {
if (this.isInvalidDate(d)) {
this.endDate = d.subtract(1, 'days');
this.calculateChosenLabel();
break;
}
d = 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, label: this.chosenRange });
if (e || (this.closeOnAutoApply && !e)) {
this.hide();
}
}
clickCancel(e) {
this.startDate = this._old.start;
this.endDate = this._old.end;
if (this.inline) {
this.updateView();
}
this.cancelClicked.emit();
this.hide();
this.clearIncompleteDateSelection();
}
/**
* called when month is changed
* @param monthEvent get value in event.target.value
* @param side left or right
*/
monthChanged(monthEvent, side) {
const year = this.calendarVariables[side].dropdowns.currentYear;
const month = parseInt(monthEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
/**
* called when year is changed
* @param yearEvent get value in event.target.value
* @param side left or right
*/
yearChanged(yearEvent, side) {
const month = this.calendarVariables[side].dropdowns.currentMonth;
const year = parseInt(yearEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
/**
* called when time is changed
* @param timeEvent an event
* @param side left or right
*/
timeChanged(timeEvent, side) {
var _a, _b;
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) {
let start = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.clone();
start = start === null || start === void 0 ? void 0 : start.hour(hour);
start = start === null || start === void 0 ? void 0 : start.minute(minute);
start = start === null || start === void 0 ? void 0 : start.second(second);
this.setStartDate(start);
if (this.singleDatePicker) {
this.endDate = (_b = this.startDate) === null || _b === void 0 ? void 0 : _b.clone();
}
else if (this.endDate && this.endDate.format('YYYY-MM-DD') === (start === null || start === void 0 ? void 0 : start.format('YYYY-MM-DD')) && this.endDate.isBefore(start)) {
this.setEndDate(start.clone());
}
else if (!this.endDate && this.timePicker) {
const startClone = this._getDateWithTime(start, SideEnum.right);
if (startClone.isBefore(start)) {
this.timepickerVariables[SideEnum.right].selectedHour = hour;
this.timepickerVariables[SideEnum.right].selectedMinute = minute;
this.timepickerVariables[SideEnum.right].selectedSecond = second;
}
}
}
else if (this.endDate) {
let end = this.endDate.clone();
end = end.hour(hour);
end = end.minute(minute);
end = end.second(second);
this.setEndDate(end);
}
// update the calendars so all clickable dates reflect the new time component
this.updateCalendars();
// re-render the time pickers because changing one selection can affect what's enabled in another
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
if (this.autoApply) {
this.clickApply();
}
}
/**
* call when month or year changed
* @param month month number 0 -11
* @param year year eg: 1995
* @param side left or 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.getMinDate()) {
if (year < this.getMinDate().year() || (year === this.getMinDate().year() && month < this.getMinDate().month())) {
month = this.getMinDate().month();
year = this.getMinDate().year();
}
}
if (this.getMaxDate()) {
if (year > this.getMaxDate().year() || (year === this.getMaxDate().year() && month > this.getMaxDate().month())) {
month = this.getMaxDate().month();
year = this.getMaxDate().year();
}
}
this.calendarVariables[side].dropdowns.currentYear = year;
this.calendarVariables[side].dropdowns.currentMonth = month;
if (isLeft) {
this.leftCalendar.month = this.leftCalendar.month.month(month).year(year);
if (this.linkedCalendars) {
this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month');
}
}
else {
this.rightCalendar.month = this.rightCalendar.month.month(month).year(year);
if (this.linkedCalendars) {
this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month');
}
}
this.updateCalendars();
}
/**
* Click on previous month
* @param side left or right calendar
*/
clickPrev(side) {
if (side === SideEnum.left) {
this.leftCalendar.month = this.leftCalendar.month.subtract(1, 'month');
if (this.linkedCalendars) {
this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month');
}
}
else {
this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month');
}
this.updateCalendars();
}
/**
* Click on next month
* @param side left or right calendar
*/
clickNext(side) {
if (side === SideEnum.left) {
this.leftCalendar.month = this.leftCalendar.month.add(1, 'month');
}
else {
this.rightCalendar.month = this.rightCalendar.month.add(1, 'month');
if (this.linkedCalendars) {
this.leftCalendar.month = this.leftCalendar.month.add(1, 'month');
}
}
this.updateCalendars();
}
/**
* When hovering a date
* @param e event: get value by e.target.value
* @param side left or right
* @param row row position of the current date clicked
* @param col col position of the current date clicked
*/
hoverDate(e, side, row, col) {
const leftCalDate = this.calendarVariables.left.calendar[row][col];
const rightCalDate = this.calendarVariables.right.calendar[row][col];
if (this.pickingDate) {
this.nowHoveredDate = side === SideEnum.left ? leftCalDate : rightCalDate;
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
}
const tooltip = side === SideEnum.left ? this.tooltiptext[leftCalDate] : this.tooltiptext[rightCalDate];
if (tooltip.length > 0) {
e.target.setAttribute('title', tooltip);
}
}
/**
* When selecting a date
* @param e event: get value by e.target.value
* @param side left or right
* @param row row position of the current date clicked
* @param col col position of the current date clicked
*/
clickDate(e, side, row, col) {
var _a;
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') && !this.customRangeDirection)) && !this.lockStartDate) { // picking start
this.applyBtn.disabled = true;
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.customRangeDirection) {
// special case: clicking the same date for start/end,
// but the time of the end date is before the start date
this.setEndDate((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.clone());
}
else { // picking end
this.applyBtn.disabled = false;
if (this.timePicker) {
date = this._getDateWithTime(date, SideEnum.right);
}
if (date.isBefore(this.startDate, 'day') === true && this.customRangeDirection) {
this.setEndDate(this.startDate);
this.setStartDate(date.clone());
}
else {
this.setEndDate(date.clone());
}
if (this.autoApply) {
this.calculateChosenLabel();
}
}
if (this.singleDatePicker) {
this.applyBtn.disabled = false;
this.setEndDate(this.startDate);
this.updateElement();
if (this.autoApply) {
this.clickApply();
}
}
this.updateView();
if (this.autoApply && this.startDate && this.endDate) {
this.clickApply();
}
// This is to cancel the blur event handler if the mouse was in one of the inputs
e.stopPropagation();
}
/**
* Click on the custom range
* @param e: Event
* @param label
*/
clickRange(e, label) {
var _a, _b, _c;
this.chosenRange = label;
if (label === this.locale.customRangeLabel) {
this.isShown = true; // show calendars
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 = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.startOf('day');
this.endDate = (_b = this.endDate) === null || _b === void 0 ? void 0 : _b.endOf('day');
}
if (!this.alwaysShowCalendars) {
this.isShown = false; // hide calendars
}
this.rangeClicked.emit({ label: label, dates: dates });
if (!this.keepCalendarOpeningWithRange || this.autoApply) {
this.clickApply();
}
else {
if (!this.alwaysShowCalendars) {
return this.clickApply();
}
if (this.getMaxDate() && ((_c = this.getMaxDate()) === null || _c === void 0 ? void 0 : _c.isSame(dates[0], 'month'))) {
this.rightCalendar.month = this.rightCalendar.month.month(dates[0].month());
this.rightCalendar.month = this.rightCalendar.month.year(dates[0].year());
this.leftCalendar.month = this.leftCalendar.month.month(dates[0].month() - 1);
this.leftCalendar.month = this.leftCalendar.month.year(dates[1].year());
}
else {
this.leftCalendar.month = this.leftCalendar.month.month(dates[0].month());
this.leftCalendar.month = this.leftCalendar.month.year(dates[0].year());
// get the next year
const nextMonth = dates[0].clone().add(1, 'month');
this.rightCalendar.month = this.rightCalendar.month.month(nextMonth.month());
this.rightCalendar.month = this.rightCalendar.month.year(nextMonth.year());
}
this.updateCalendars();
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
}
}
}
show(e) {
var _a, _b;
if (this.isShown)
return;
this._old.start = (_a = this.startDate) === null || _a === void 0 ? void 0 : _a.clone();
this._old.end = (_b = this.endDate) === null || _b === void 0 ? void 0 : _b.clone();
this.isShown = true;
this.applyBtn.disabled = true;
this.updateView();
}
hide(e) {
var _a, _b;
if (!this.isShown)
return;
// incomplete date selection, revert to last values
if (!this.endDate) {
if (this._old.start)
this.startDate = this._old.start.clone();
if (this._old.end)
this.endDate = this._old.end.clone();
this.clearIncompleteDateSelection();
}
// if a new date range was selected, invoke the user callback function
if (!((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.isSame(this._old.start)) || !((_b = this.endDate) === null || _b === void 0 ? void 0 : _b.isSame(this._old.end))) {
// this.callback(this.startDate, this.endDate, this.chosenLabel);
}
// if picker is attached to a text input, update it
this.updateElement();
this.isShown = false;
this.applyBtn.disabled = true;
this._ref.detectChanges();
}
clearIncompleteDateSelection() {
this.nowHoveredDate = null;
this.pickingDate = false;
}
/**
* handle click on all element in the component, useful for outside of click
* @param e event
*/
handleInternalClick(e) {
e.stopPropagation();
}
/**
* update the locale options
* @param locale
*/
updateLocale(locale) {
for (const key in locale) {
if (locale.hasOwnProperty(key)) {
this.locale[key] = locale[key];
if (key === 'customRangeLabel') {
this.renderRanges();
}
}
}
}
/**
* clear the daterange picker
*/
clear() {
this.startDate = dayjs().startOf('day');
this.endDate = dayjs().endOf('day');
this.choosedDate.emit({ chosenLabel: '', startDate: null, endDate: null });
this.datesUpdated.emit({ startDate: null, endDate: null });
this.clearClicked.emit();
this.hide();
}
/**
* Find out if the selected range should be disabled if it doesn't
* fit into minDate and maxDate limitations.
*/
disableRange(range) {
if (range === this.locale.customRangeLabel) {
return false;
}
const rangeMarkers = this.ranges[range];
const areBothBefore = rangeMarkers.every((date) => {
if (!this.getMinDate()) {
return false;
}
return date.isBefore(this.getMinDate());
});
const areBothAfter = rangeMarkers.every((date) => {
if (!this.getMaxDate()) {
return false;
}
return date.isAfter(this.getMaxDate());
});
return (areBothBefore || areBothAfter);
}
/**
*
* @param date the date to add time
* @param side left or right
*/
_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);
}
/**
* build the locale config
*/
_buildLocale() {
this.locale = Object.assign(Object.assign({}, this._localeService.config), this.locale);
if (!this.locale.format) {
if (this.timePicker) {
this.locale.format = dayjs.localeData().longDateFormat('lll');
}
else {
this.locale.format = dayjs.localeData().longDateFormat('L');
}
}
}
_buildCells(calendar, side) {
for (let row = 0; row < 6; row++) {
this.calendarVariables[side].classes[row] = {};
const rowClasses = [];
if (this.emptyWeekRowClass &&
Array.from(Array(7).keys()).some(i => calendar[row][i].month() !== this.calendarVariables[side].month)) {
rowClasses.push(this.emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];
// empty week row class
if (this.emptyWeekColumnClass) {
if (calendar[row][col].month() !== this.calendarVariables[side].month) {
classes.push(this.emptyWeekColumnClass);
}
}
// highlight today's date
if (calendar[row][col].isSame(new Date(), 'day'))
classes.push('today');
// highlight weekends
if (calendar[row][col].isoWeekday() > 5)
classes.push('weekend');
// grey out the dates in other months displayed at beginning and end of this calendar
if (calendar[row][col].month() !== calendar[1][1].month()) {
classes.push('off');
// mark the last day of the previous month in this calendar
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);
}
// mark the first day of the next month in this calendar
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);
}
}
// mark the first day of the current month with a custom class
if (this.firstMonthDayClass && calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(this.firstMonthDayClass);
}
// mark the last day of the current month with a custom class
if (this.lastMonthDayClass && calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(this.lastMonthDayClass);
}
// don't allow selection of dates before the minimum date
if (this.getMinDate() && calendar[row][col].isBefore(this.getMinDate(), 'day')) {
classes.push('off', 'disabled');
}
// don't allow selection of dates after the maximum date
if (this.calendarVariables[side].maxDate && calendar[row][col].isAfter(this.calendarVariables[side].maxDate, 'day')) {
classes.push('off', 'disabled');
}
// don't allow selection of date if a custom function decides it's invalid
if (this.isInvalidDate(calendar[row][col])) {
classes.push('off', 'disabled', 'invalid');
}
// highlight the currently selected start date
if (this.startDate && calendar[row][col].format('YYYY-MM-DD') === this.startDate.format('YYYY-MM-DD')) {
classes.push('active', 'start-date');
}
// highlight the currently selected end date
if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') === this.endDate.format('YYYY-MM-DD')) {
classes.push('active', 'end-date');
}
// highlight dates in-between the selected dates
if (((this.nowHoveredDate != null && this.pickingDate) || this.endDate != null) &&
(calendar[row][col] > this.startDate &&
(calendar[row][col] < this.endDate || (calendar[row][col] < this.nowHoveredDate && this.pickingDate))) &&
(!classes.find(el => el === 'off'))) {
classes.push('in-range');
}
// apply custom classes for this date
const isCustom = this.isCustomDate(calendar[row][col]);
if (isCustom !== false) {
if (typeof isCustom === 'string') {
classes.push(isCustom);
}
else {
Array.prototype.push.apply(classes, isCustom);
}
}
// apply custom tooltip for this date
const isTooltip = this.isTooltipDate(calendar[row][col]);
if (isTooltip) {
if (typeof isTooltip === 'string') {
this.tooltiptext[calendar[row][col]] = isTooltip; // setting tooltiptext for custom date
}
else {
this.tooltiptext[calendar[row][col]] = 'Put the tooltip as the returned value of isTooltipDate';
}
}
else {
this.tooltiptext[calendar[row][col]] = '';
}
// store classes var
let cname = '', 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(' ');
}
}
}
NgxDaterangepickerBootstrapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: NgxDaterangepickerLocaleService }], target: i0.ɵɵFactoryTarget.Component });
NgxDaterangepickerBootstrapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NgxDaterangepickerBootstrapComponent, selector: "ngx-daterangepicker-bootstrap", inputs: { startDate: "startDate", endDate: "endDate", dateLimit: "dateLimit", autoApply: "autoApply", singleDatePicker: "singleDatePicker", showDropdowns: "showDropdowns", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", linkedCalendars: "linkedCalendars", autoUpdateInput: "autoUpdateInput", alwaysShowCalendars: "alwaysShowCalendars", maxSpan: "maxSpan", lockStartDate: "lockStartDate", timePicker: "timePicker", timePicker24Hour: "timePicker24Hour", timePickerIncrement: "timePickerIncrement", timePickerSeconds: "timePickerSeconds", showClearButton: "showClearButton", firstMonthDayClass: "firstMonthDayClass", lastMonthDayClass: "lastMonthDayClass", emptyWeekRowClass: "emptyWeekRowClass", emptyWeekColumnClass: "emptyWeekColumnClass", firstDayOfNextMonthClass: "firstDayOfNextMonthClass", lastDayOfPreviousMonthClass: "lastDayOfPreviousMonthClass", showCustomRangeLabel: "showCustomRangeLabel", showCancel: "showCancel", keepCalendarOpeningWithRange: "keepCalendarOpeningWithRange", showRangeLabelOnInput: "showRangeLabelOnInput", customRangeDirection: "customRangeDirection", drops: "drops", opens: "opens", closeOnAutoApply: "closeOnAutoApply", minDate: "minDate", maxDate: "maxDate", locale: "locale", ranges: "ranges", isInvalidDate: "isInvalidDate", isCustomDate: "isCustomDate", isTooltipDate: "isTooltipDate" }, outputs: { choosedDate: "choosedDate", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated", startDateChanged: "startDateChanged", endDateChanged: "endDateChanged", cancelClicked: "cancelClicked", clearClicked: "clearClicked" }, host: { listeners: { "click": "handleInternalClick($event)" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapComponent),
multi: true
}], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class='card daterangepicker'\n #pickerContainer\n [class]=\"drops + ' ' + opens\"\n [ngClass]=\"{\n 'show-ranges': rangesArray.length,\n 'shown': isShown || inline,\n 'hidden': !isShown && !inline,\n 'double': !singleDatePicker && showCalInRanges,\n 'inline': inline,\n 'ltr': locale.direction === 'ltr',\n 'rtl': this.locale.direction === 'rtl'\n }\">\n\n <div class=\"card-body p-2\">\n <ng-container *ngIf='rangesArray.length'>\n <div class='ranges'>\n <ul>\n <li *ngFor='let range of rangesArray'>\n <button\n type='button'\n (click)='clickRange($event, range)'\n [disabled]='disableRange(range)'\n [ngClass]=\"{'active': range === chosenRange}\">{{range}}</button>\n </li>\n </ul>\n </div>\n </ng-container>\n <div class='calendar' [ngClass]='{right: singleDatePicker, left: !singleDatePicker}'\n *ngIf='showCalInRanges'>\n <table class='table-condensed calendar-table' *ngIf='calendarVariables'>\n <thead>\n <tr>\n <th *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></th>\n </ng-container>\n <th 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(\" 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 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></th>\n </ng-container>\n </tr>\n <tr class='week-days'>\n <th *ngIf='showWeekNumbers || showISOWeekNumbers' class='week'><span>{{this.locale.weekLabel}}</span></th>\n <th *ngFor='let dayofweek of locale.daysOfWeek'><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 (mouseenter)='hoverDate($event, sideEnum.left, row, col)'>\n <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n <div class='calendar-time' *ngIf='timePicker'>\n <div class='select'>\n <select class='hourselect select-item' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedHour'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.hours'\n [value]='i'\n [disabled]='timepickerVariables.left.disabledHours.indexOf(i) > -1'>{{i}}</option>\n </select>\n </div>\n :\n <div class='select'>\n <select class='select-item minuteselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedMinute'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.minutes; let index = index;'\n [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 :\n <div class='select'>\n <select class='select-item secondselect' *ngIf='timePickerSeconds' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedSecond'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.seconds; let index = index;'\n [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' *ngIf='!timePicker24Hour'>\n <select class='select-item ampmselect'\n [(ngModel)]='timepickerVariables.left.ampmModel' (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 <table class='table-condensed calendar-table' *ngIf='calendarVariables'>\n <thead>\n <tr>\n <th *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></th>\n </ng-container>\n <th 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 && calendarVariables.right.minDate && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && calendarVariables.right.maxDate && 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(\" YYYY\")}}\n </ng-container>\n </th>\n <ng-container\n *ngIf='!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)'>\n <th class='next available' (click)='clickNext(sideEnum.right)'>\n </th>\n </ng-container>\n <ng-container\n *ngIf='!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))'>\n <th></th>\n </ng-container>\n </tr>\n\n <tr class='week-days'>\n <th *ngIf='showWeekNumbers || showISOWeekNumbers' class='week'><span>{{this.locale.weekLabel}}</span></th>\n <th *ngFor='let dayofweek of locale.daysOfWeek'><span>{{dayofweek}}</span></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor='let row of calendarVariables.right.calRows'\n [class]='calendarVariables.right.classes[row].classList'>\n <td class='week' *ngIf='showWeekNumbers'>\n <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n </td>\n <td class='week' *ngIf='showISOWeekNumbers'>\n <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n </td>\n <td *ngFor='let col of calendarVariables.right.calCols' [class]='calendarVariables.right.classes[row][col]'\n (click)='clickDate($event, sideEnum.right, row, col)'\n (mouseenter)='hoverDate($event, sideEnum.right, row, col)'>\n <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n <div class='calendar-time' *ngIf='timePicker'>\n <div class='select'>\n <select class='select-item hourselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedHour'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.hours'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledHours.indexOf(i) > -1'>{{i}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n :\n <div class='select'>\n <select class='select-item minuteselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedMinute'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.minutes; let index = index;'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledMinutes.indexOf(i) > -1'>{{timepickerVariables.right.minutesLabel[index]}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n :\n <div class='select'>\n <select *ngIf='timePickerSeconds' class='select-item secondselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedSecond'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.seconds; let index = index;'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledSeconds.indexOf(i) > -1'>{{timepickerVariables.right.secondsLabel[index]}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n <div class='select' *ngIf='!timePicker24Hour'>\n <select class='select-item ampmselect'\n [(ngModel)]='timepickerVariables.right.ampmModel'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option value='AM' [disabled]='timepickerVariables.right.amDisabled'>AM</option>\n <option value='PM' [disabled]='timepickerVariables.right.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>\n <div class=\"card-footer\" *ngIf='!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))'>\n <span style=\"display: inline-block; padding: 7px;\">{{chosenLabel}}</span>\n <button class='btn btn-primary float-end'\n [disabled]='applyBtn.disabled'\n type='button'\n (click)='clickApply($event)'>\n {{locale.applyLabel}}\n </button>\n <button class='btn btn-secondary me-2 float-end'\n *ngIf='showCancel'\n type='button'\n (click)='clickCancel($event)'>\n {{locale.cancelLabel}}\n </button>\n <button *ngIf='showClearButton'\n class='btn btn-outline-dark me-2 float-end'\n type='button' (click)='clear()'\n [title]='locale.clearLabel'>\n {{locale.clearLabel}}\n </button>\n </div>\n</div>\n", styles: [".unwrap.on{display:contents}.unwrap.off{overflow:hidden;height:0;width:0}.daterangepicker{position:absolute;width:auto;z-index:3001;margin-top:6px;margin-bottom:6px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid #fff}.daterangepicker.left:before{right:9px}.daterangepicker.left:after{right:10px}.daterangepicker.center:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.center:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.right:before{left:9px}.daterangepicker.right:after{left:10px}.daterangepicker.up{margin-top:-7px}.daterangepicker.up:before{top:initial;bottom:-7px;border-bottom:initial;border-top:7px solid #ccc}.daterangepicker.up:after{top:initial;bottom:-6px;border-bottom:initial;border-top:6px solid #fff}.daterangepicker.single .ranges,.daterangepicker.single .calendar{float:none}.daterangepicker.double{width:auto}.daterangepicker.inline{position:relative;display:inline-grid}.daterangepicker.inline:before{content:none}.daterangepicker.inline:after{content:none}.daterangepicker.shown{transform:scale(1);transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.daterangepicker.shown .calendar{display:block}.daterangepicker.hidden{transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.daterangepicker.hidden .calendar{display:none}.daterangepicker .calendar{max-width:270px;margin:4px}.daterangepicker .calendar.single .calendar-table{border:none}.daterangepicker .calendar th,.daterangepicker .calendar td{padding:0;white-space:nowrap;text-align:center;min-width:32px}.daterangepicker .calendar th span,.daterangepicker .calendar td span{pointer-events:none}.daterangepicker .calendar-table{border:1px solid #fff;padding:4px;border-radius:50%;background-color:#fff}.daterangepicker table{width:100%;margin:0;border-collapse:separate;border-spacing:1px}.daterangepicker th{color:#000}.daterangepicker td,.daterangepicker th{text-align:center;border-radius:50%;white-space:nowrap;cursor:pointer;height:2em;width:2em}.daterangepicker td.available.prev,.daterangepicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;transition:background-color .2s ease;border-radius:50%}.daterangepicker td.available.prev:hover,.daterangepicker th.available.prev:hover{margin:0}.daterangepicker td.available.next,.daterangepicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;transition:background-color .2s ease;border-radius:50%}.daterangepicker td.available.next:hover,.daterangepicker th.available.next:hover{margin:0;transform:rotate(180deg)}.daterangepicker td.available:hover,.daterangepicker th.available:hover{background-color:#eee;border-color:transparent;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.daterangepicker td.week,.daterangepicker th.week{color:#ccc}.daterangepicker td{margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.daterangepicker td.off,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date,.daterangepicker td.off.end-date{background-color:#fff;border-color:transparent;color:#999}.daterangepicker td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}.daterangepicker td.start-date{border-radius:50% 0 0 50%}.daterangepicker td.end-date{border-radius:0 50% 50% 0}.daterangepicker td.start-date.end-date{border-radius:50%}.daterangepicker td.active{transition:background .3s ease-out;background:rgba(0,0,0,.1)}.daterangepicker td.active,.daterangepicker td.active:hover{background-color:#08c;border-color:transparent;color:#fff}.daterangepicker th.month{width:auto}.daterangepicker td.disabled,.daterangepicker option.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.daterangepicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.daterangepicker .dropdowns select{display:inline-block;background-color:#ffffffe6;width:100%;padding:5px;border:1px solid #f2f2f2;border-radius:calc(.5rem - 1px);height:3rem}.daterangepicker .dropdowns select.monthselect,.daterangepicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.daterangepicker .dropdowns select.hourselect,.daterangepicker .dropdowns select.minuteselect,.daterangepicker .dropdowns select.secondselect,.daterangepicker .dropdowns select.ampmselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.daterangepicker .dropdowns select.monthselect,.daterangepicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.daterangepicker th.month>div{position:relative;display:inline-block}.daterangepicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.daterangepicker .calendar-time .select{display:inline;border:1px solid #eee;border-radius:calc(.5rem - 1px);background:#eeeeee;padding:3px}.daterangepicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:0 10px 0 0;border-radius:calc(.5rem - 1px);border:none}.daterangepicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.daterangepicker .calendar-time .select .select-item:focus{outline:none}.daterangepicker .calendar-time .select .select-item .select-label{color:#00000042;font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.daterangepicker .calendar-time select.disabled{color:#ccc;cursor:not-allowed}.daterangepicker .label-input{border:1px solid #ccc;border-radius:calc(.5rem - 1px);color:#555;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.daterangepicker .label-input.active{border:1px solid #08c;border-radius:calc(.5rem - 1px)}.daterangepicker .daterangepicker_input{position:relative;padding:0 30px 0 0}.daterangepicker .daterangepicker_input i,.daterangepicker .daterangepicker_input svg{position:absolute;left:8px;top:8px}.daterangepicker.rtl .label-input{padding-right:28px;padding-left:6px}.daterangepicker.rtl .daterangepicker_input i,.daterangepicker.rtl .daterangepicker_input svg{left:auto;right:8px}.daterangepicker .show-ranges .drp-calendar.left{border-left:1px solid #ddd}.daterangepicker .ranges{float:none;text-align:left;margin:0}.daterangepicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.daterangepicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;border-radius:.375rem;text-align:left;cursor:pointer}.daterangepicker .ranges ul li button.active{background-color:#08c;color:#fff}.daterangepicker .ranges ul li button[disabled]{opacity:.3}.daterangepicker .ranges ul li button:active{background:transparent}.daterangepicker .ranges ul li:hover{background-color:#eee;border-radius:.375rem}.daterangepicker .show-calendar .ranges{margin-top:8px}.daterangepicker [hidden]{display:none}.daterangepicker:before,.daterangepicker:after{position:absolute;display:inline-block;border-bottom-color:#0003;content:\"\"}.daterangepicker:before{top:-7px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid #ccc}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.daterangepicker.opensright:before{left:9px}.daterangepicker.opensright:after{left:10px}@media (min-width: 564px){.daterangepicker{width:auto}.daterangepicker.single .calendar.left{clear:none}.daterangepicker.ltr{direction:ltr;text-align:left}.daterangepicker.ltr .calendar.left{clear:left}.daterangepicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.ltr .calendar.right{margin-left:0}.daterangepicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.ltr .left .daterangepicker_input,.daterangepicker.ltr .right .daterangepicker_input{padding-right:35px}.daterangepicker.ltr .calendar.left .calendar-table{padding-right:12px}.daterangepicker.ltr .ranges,.daterangepicker.ltr .calendar{float:left}.daterangepicker.rtl{direction:rtl;text-align:right}.daterangepicker.rtl .calendar.left{clear:right;margin-left:0}.daterangepicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.rtl .calendar.right{margin-right:0}.daterangepicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.rtl .left .daterangepicker_input,.daterangepicker.rtl .calendar.left .calendar-table{padding-left:12px}.daterangepicker.rtl .ranges,.daterangepicker.rtl .calendar{text-align:right;float:right}}@media (min-width: 730px){.daterangepicker .ranges{width:auto}.daterangepicker.ltr .ranges{float:left}.daterangepicker.rtl .ranges{float:right}.daterangepicker .calendar.left{clear:none!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-daterangepicker-bootstrap', host: {
'(click)': 'handleInternalClick($event)'
}, encapsulation: ViewEncapsulation.None, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapComponent),
multi: true
}], template: "<div class='card daterangepicker'\n #pickerContainer\n [class]=\"drops + ' ' + opens\"\n [ngClass]=\"{\n 'show-ranges': rangesArray.length,\n 'shown': isShown || inline,\n 'hidden': !isShown && !inline,\n 'double': !singleDatePicker && showCalInRanges,\n 'inline': inline,\n 'ltr': locale.direction === 'ltr',\n 'rtl': this.locale.direction === 'rtl'\n }\">\n\n <div class=\"card-body p-2\">\n <ng-container *ngIf='rangesArray.length'>\n <div class='ranges'>\n <ul>\n <li *ngFor='let range of rangesArray'>\n <button\n type='button'\n (click)='clickRange($event, range)'\n [disabled]='disableRange(range)'\n [ngClass]=\"{'active': range === chosenRange}\">{{range}}</button>\n </li>\n </ul>\n </div>\n </ng-container>\n <div class='calendar' [ngClass]='{right: singleDatePicker, left: !singleDatePicker}'\n *ngIf='showCalInRanges'>\n <table class='table-condensed calendar-table' *ngIf='calendarVariables'>\n <thead>\n <tr>\n <th *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></th>\n </ng-container>\n <th 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(\" 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 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></th>\n </ng-container>\n </tr>\n <tr class='week-days'>\n <th *ngIf='showWeekNumbers || showISOWeekNumbers' class='week'><span>{{this.locale.weekLabel}}</span></th>\n <th *ngFor='let dayofweek of locale.daysOfWeek'><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 (mouseenter)='hoverDate($event, sideEnum.left, row, col)'>\n <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n <div class='calendar-time' *ngIf='timePicker'>\n <div class='select'>\n <select class='hourselect select-item' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedHour'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.hours'\n [value]='i'\n [disabled]='timepickerVariables.left.disabledHours.indexOf(i) > -1'>{{i}}</option>\n </select>\n </div>\n :\n <div class='select'>\n <select class='select-item minuteselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedMinute'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.minutes; let index = index;'\n [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 :\n <div class='select'>\n <select class='select-item secondselect' *ngIf='timePickerSeconds' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.left.selectedSecond'\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\n <option *ngFor='let i of timepickerVariables.left.seconds; let index = index;'\n [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' *ngIf='!timePicker24Hour'>\n <select class='select-item ampmselect'\n [(ngModel)]='timepickerVariables.left.ampmModel' (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 <table class='table-condensed calendar-table' *ngIf='calendarVariables'>\n <thead>\n <tr>\n <th *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></th>\n </ng-container>\n <th 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 && calendarVariables.right.minDate && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && calendarVariables.right.maxDate && 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(\" YYYY\")}}\n </ng-container>\n </th>\n <ng-container\n *ngIf='!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)'>\n <th class='next available' (click)='clickNext(sideEnum.right)'>\n </th>\n </ng-container>\n <ng-container\n *ngIf='!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))'>\n <th></th>\n </ng-container>\n </tr>\n\n <tr class='week-days'>\n <th *ngIf='showWeekNumbers || showISOWeekNumbers' class='week'><span>{{this.locale.weekLabel}}</span></th>\n <th *ngFor='let dayofweek of locale.daysOfWeek'><span>{{dayofweek}}</span></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor='let row of calendarVariables.right.calRows'\n [class]='calendarVariables.right.classes[row].classList'>\n <td class='week' *ngIf='showWeekNumbers'>\n <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n </td>\n <td class='week' *ngIf='showISOWeekNumbers'>\n <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n </td>\n <td *ngFor='let col of calendarVariables.right.calCols' [class]='calendarVariables.right.classes[row][col]'\n (click)='clickDate($event, sideEnum.right, row, col)'\n (mouseenter)='hoverDate($event, sideEnum.right, row, col)'>\n <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n <div class='calendar-time' *ngIf='timePicker'>\n <div class='select'>\n <select class='select-item hourselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedHour'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.hours'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledHours.indexOf(i) > -1'>{{i}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n :\n <div class='select'>\n <select class='select-item minuteselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedMinute'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.minutes; let index = index;'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledMinutes.indexOf(i) > -1'>{{timepickerVariables.right.minutesLabel[index]}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n :\n <div class='select'>\n <select *ngIf='timePickerSeconds' class='select-item secondselect' [disabled]='!startDate'\n [(ngModel)]='timepickerVariables.right.selectedSecond'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option *ngFor='let i of timepickerVariables.right.seconds; let index = index;'\n [value]='i'\n [disabled]='timepickerVariables.right.disabledSeconds.indexOf(i) > -1'>{{timepickerVariables.right.secondsLabel[index]}}</option>\n </select>\n <span class='select-highlight'></span>\n <span class='select-bar'></span>\n </div>\n <div class='select' *ngIf='!timePicker24Hour'>\n <select class='select-item ampmselect'\n [(ngModel)]='timepickerVariables.right.ampmModel'\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\n <option value='AM' [disabled]='timepickerVariables.right.amDisabled'>AM</option>\n <option value='PM' [disabled]='timepickerVariables.right.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>\n <div class=\"card-footer\" *ngIf='!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))'>\n <span style=\"display: inline-block; padding: 7px;\">{{chosenLabel}}</span>\n <button class='btn btn-primary float-end'\n [disabled]='applyBtn.disabled'\n type='button'\n (click)='clickApply($event)'>\n {{locale.applyLabel}}\n </button>\n <button class='btn btn-secondary me-2 float-end'\n *ngIf='showCancel'\n type='button'\n (click)='clickCancel($event)'>\n {{locale.cancelLabel}}\n </button>\n <button *ngIf='showClearButton'\n class='btn btn-outline-dark me-2 float-end'\n type='button' (click)='clear()'\n [title]='locale.clearLabel'>\n {{locale.clearLabel}}\n </button>\n </div>\n</div>\n", styles: [".unwrap.on{display:contents}.unwrap.off{overflow:hidden;height:0;width:0}.daterangepicker{position:absolute;width:auto;z-index:3001;margin-top:6px;margin-bottom:6px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid #fff}.daterangepicker.left:before{right:9px}.daterangepicker.left:after{right:10px}.daterangepicker.center:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.center:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.right:before{left:9px}.daterangepicker.right:after{left:10px}.daterangepicker.up{margin-top:-7px}.daterangepicker.up:before{top:initial;bottom:-7px;border-bottom:initial;border-top:7px solid #ccc}.daterangepicker.up:after{top:initial;bottom:-6px;border-bottom:initial;border-top:6px solid #fff}.daterangepicker.single .ranges,.daterangepicker.single .calendar{float:none}.daterangepicker.double{width:auto}.daterangepicker.inline{position:relative;display:inline-grid}.daterangepicker.inline:before{content:none}.daterangepicker.inline:after{content:none}.daterangepicker.shown{transform:scale(1);transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.daterangepicker.shown .calendar{display:block}.daterangepicker.hidden{transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.daterangepicker.hidden .calendar{display:none}.daterangepicker .calendar{max-width:270px;margin:4px}.daterangepicker .calendar.single .calendar-table{border:none}.daterangepicker .calendar th,.daterangepicker .calendar td{padding:0;white-space:nowrap;text-align:center;min-width:32px}.daterangepicker .calendar th span,.daterangepicker .calendar td span{pointer-events:none}.daterangepicker .calendar-table{border:1px solid #fff;padding:4px;border-radius:50%;background-color:#fff}.daterangepicker table{width:100%;margin:0;border-collapse:separate;border-spacing:1px}.daterangepicker th{color:#000}.daterangepicker td,.daterangepicker th{text-align:center;border-radius:50%;white-space:nowrap;cursor:pointer;height:2em;width:2em}.daterangepicker td.available.prev,.daterangepicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;transition:background-color .2s ease;border-radius:50%}.daterangepicker td.available.prev:hover,.daterangepicker th.available.prev:hover{margin:0}.daterangepicker td.available.next,.daterangepicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;transition:background-color .2s ease;border-radius:50%}.daterangepicker td.available.next:hover,.daterangepicker th.available.next:hover{margin:0;transform:rotate(180deg)}.daterangepicker td.available:hover,.daterangepicker th.available:hover{background-color:#eee;border-color:transparent;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.daterangepicker td.week,.daterangepicker th.week{color:#ccc}.daterangepicker td{margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.daterangepicker td.off,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date,.daterangepicker td.off.end-date{background-color:#fff;border-color:transparent;color:#999}.daterangepicker td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}.daterangepicker td.start-date{border-radius:50% 0 0 50%}.daterangepicker td.end-date{border-radius:0 50% 50% 0}.daterangepicker td.start-date.end-date{border-radius:50%}.daterangepicker td.active{transition:background .3s ease-out;background:rgba(0,0,0,.1)}.daterangepicker td.active,.daterangepicker td.active:hover{background-color:#08c;border-color:transparent;color:#fff}.daterangepicker th.month{width:auto}.daterangepicker td.disabled,.daterangepicker option.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.daterangepicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.daterangepicker .dropdowns select{display:inline-block;background-color:#ffffffe6;width:100%;padding:5px;border:1px solid #f2f2f2;border-radius:calc(.5rem - 1px);height:3rem}.daterangepicker .dropdowns select.monthselect,.daterangepicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.daterangepicker .dropdowns select.hourselect,.daterangepicker .dropdowns select.minuteselect,.daterangepicker .dropdowns select.secondselect,.daterangepicker .dropdowns select.ampmselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.daterangepicker .dropdowns select.monthselect,.daterangepicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.daterangepicker th.month>div{position:relative;display:inline-block}.daterangepicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.daterangepicker .calendar-time .select{display:inline;border:1px solid #eee;border-radius:calc(.5rem - 1px);background:#eeeeee;padding:3px}.daterangepicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:0 10px 0 0;border-radius:calc(.5rem - 1px);border:none}.daterangepicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.daterangepicker .calendar-time .select .select-item:focus{outline:none}.daterangepicker .calendar-time .select .select-item .select-label{color:#00000042;font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.daterangepicker .calendar-time select.disabled{color:#ccc;cursor:not-allowed}.daterangepicker .label-input{border:1px solid #ccc;border-radius:calc(.5rem - 1px);color:#555;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.daterangepicker .label-input.active{border:1px solid #08c;border-radius:calc(.5rem - 1px)}.daterangepicker .daterangepicker_input{position:relative;padding:0 30px 0 0}.daterangepicker .daterangepicker_input i,.daterangepicker .daterangepicker_input svg{position:absolute;left:8px;top:8px}.daterangepicker.rtl .label-input{padding-right:28px;padding-left:6px}.daterangepicker.rtl .daterangepicker_input i,.daterangepicker.rtl .daterangepicker_input svg{left:auto;right:8px}.daterangepicker .show-ranges .drp-calendar.left{border-left:1px solid #ddd}.daterangepicker .ranges{float:none;text-align:left;margin:0}.daterangepicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.daterangepicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;border-radius:.375rem;text-align:left;cursor:pointer}.daterangepicker .ranges ul li button.active{background-color:#08c;color:#fff}.daterangepicker .ranges ul li button[disabled]{opacity:.3}.daterangepicker .ranges ul li button:active{background:transparent}.daterangepicker .ranges ul li:hover{background-color:#eee;border-radius:.375rem}.daterangepicker .show-calendar .ranges{margin-top:8px}.daterangepicker [hidden]{display:none}.daterangepicker:before,.daterangepicker:after{position:absolute;display:inline-block;border-bottom-color:#0003;content:\"\"}.daterangepicker:before{top:-7px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid #ccc}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.daterangepicker.opensright:before{left:9px}.daterangepicker.opensright:after{left:10px}@media (min-width: 564px){.daterangepicker{width:auto}.daterangepicker.single .calendar.left{clear:none}.daterangepicker.ltr{direction:ltr;text-align:left}.daterangepicker.ltr .calendar.left{clear:left}.daterangepicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.ltr .calendar.right{margin-left:0}.daterangepicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.ltr .left .daterangepicker_input,.daterangepicker.ltr .right .daterangepicker_input{padding-right:35px}.daterangepicker.ltr .calendar.left .calendar-table{padding-right:12px}.daterangepicker.ltr .ranges,.daterangepicker.ltr .calendar{float:left}.daterangepicker.rtl{direction:rtl;text-align:right}.daterangepicker.rtl .calendar.left{clear:right;margin-left:0}.daterangepicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.rtl .calendar.right{margin-right:0}.daterangepicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.rtl .left .daterangepicker_input,.daterangepicker.rtl .calendar.left .calendar-table{padding-left:12px}.daterangepicker.rtl .ranges,.daterangepicker.rtl .calendar{text-align:right;float:right}}@media (min-width: 730px){.daterangepicker .ranges{width:auto}.daterangepicker.ltr .ranges{float:left}.daterangepicker.rtl .ranges{float:right}.daterangepicker .calendar.left{clear:none!important}}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: NgxDaterangepickerLocaleService }]; }, propDecorators: { startDate: [{
type: Input
}], endDate: [{
type: Input
}], dateLimit: [{
type: Input
}], autoApply: [{
type: Input
}], singleDatePicker: [{
type: Input
}], showDropdowns: [{
type: Input
}], showWeekNumbers: [{
type: Input
}], showISOWeekNumbers: [{
type: Input
}], linkedCalendars: [{
type: Input
}], autoUpdateInput: [{
type: Input
}], alwaysShowCalendars: [{
type: Input
}], maxSpan: [{
type: Input
}], lockStartDate: [{
type: Input
}], timePicker: [{
type: Input
}], timePicker24Hour: [{
type: Input
}], timePickerIncrement: [{
type: Input
}], timePickerSeconds: [{
type: Input
}], showClearButton: [{
type: Input
}], firstMonthDayClass: [{
type: Input
}], lastMonthDayClass: [{
type: Input
}], emptyWeekRowClass: [{
type: Input
}], emptyWeekColumnClass: [{
type: Input
}], firstDayOfNextMonthClass: [{
type: Input
}], lastDayOfPreviousMonthClass: [{
type: Input
}], showCustomRangeLabel: [{
type: Input
}], showCancel: [{
type: Input
}], keepCalendarOpeningWithRange: [{
type: Input
}], showRangeLabelOnInput: [{
type: Input
}], customRangeDirection: [{
type: Input
}], drops: [{
type: Input
}], opens: [{
type: Input
}], closeOnAutoApply: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], locale: [{
type: Input
}], ranges: [{
type: Input
}], choosedDate: [{
type: Output
}], rangeClicked: [{
type: Output
}], datesUpdated: [{
type: Output
}], startDateChanged: [{
type: Output
}], endDateChanged: [{
type: Output
}], cancelClicked: [{
type: Output
}], clearClicked: [{
type: Output
}], pickerContainer: [{
type: ViewChild,
args: ['pickerContainer', { static: true }]
}], isInvalidDate: [{
type: Input
}], isCustomDate: [{
type: Input
}], isTooltipDate: [{
type: Input
}] } });
class NgxDaterangepickerBootstrapDirective {
set startKey(value) {
if (value !== null) {
this._startKey = value;
}
else {
this._startKey = 'startDate';
}
}
set endKey(value) {
if (value !== null) {
this._endKey = value;
}
else {
this._endKey = 'endDate';
}
}
set locale(value) {
this._locale = Object.assign(Object.assign({}, this._localeService.config), value);
}
get disabled() {
return this._disabled;
}
get locale() {
return this._locale;
}
get value() {
return this._value || null;
}
set value(val) {
this._value = val;
this._onChange(val);
this._changeDetectorRef.markForCheck();
}
constructor(viewContainerRef, injector, applicationRef, differs, elementRef, _changeDetectorRef, _el, _renderer, _localeService) {
this.viewContainerRef = viewContainerRef;
this.injector = injector;
this.applicationRef = applicationRef;
this.differs = differs;
this.elementRef = elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._el = _el;
this._renderer = _renderer;
this._localeService = _localeService;
this._onChange = Function.prototype;
this._onTouched = Function.prototype;
this._locale = {};
this.dateLimit = null;
this.showCancel = false;
this.lockStartDate = false;
this.closeOnAutoApply = true;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.formlyCustomField = false; // if you use ngx-formly and create custom field this library
this.change = new EventEmitter();
this.rangeClicked = new EventEmitter();
this.datesUpdated = new EventEmitter();
this.startDateChanged = new EventEmitter();
this.endDateChanged = new EventEmitter();
this.clearClicked = new EventEmitter();
this.notForChangesProperty = [
'locale',
'endKey',
'startKey'
];
this.endKey = 'endDate';
this.startKey = 'startDate';
this.drops = 'down';
this.opens = 'right';
viewContainerRef.clear();
this.daterangepickerRef = this.viewContainerRef.createComponent(NgxDaterangepickerBootstrapComponent, { injector: this.injector });
this.daterangepickerElement = this.daterangepickerRef.hostView.rootNodes[0];
CSS.supports('display', 'contents') // unwrap or hide daterangepickerElement from DOM body, to fix clickOutside
? this.daterangepickerElement.classList.add('unwrap', 'on')
: this.daterangepickerElement.classList.add('unwrap', 'off');
document.body.appendChild(this.daterangepickerElement); // add daterangepickerElement to DOM body, to fix position top left issues
this.daterangepicker = this.daterangepickerRef.instance;
this.daterangepicker.inline = false; // set inline to false for all directive usage
}
ngOnInit() {
this.daterangepicker.rangeClicked.asObservable().subscribe((range) => {
this.rangeClicked.emit(range);
});
this.daterangepicker.datesUpdated.asObservable().subscribe((range) => {
this.datesUpdated.emit(range);
});
this.daterangepicker.startDateChanged.asObservable().subscribe((itemChanged) => {
this.startDateChanged.emit(itemChanged);
});
this.daterangepicker.endDateChanged.asObservable().subscribe((itemChanged) => {
this.endDateChanged.emit(itemChanged);
});
this.daterangepicker.clearClicked.asObservable().subscribe(() => {
this.clearClicked.emit();
});
this.daterangepicker.choosedDate.asObservable().subscribe((change) => {
if (change) {
const value = {};
value[this._startKey] = change.startDate;
value[this._endKey] = change.endDate;
this.value = value;
this.change.emit(value);
if (typeof change.chosenLabel === 'string') {
this._el.nativeElement.value = change.chosenLabel;
}
}
});
this.pickerResizeObserver();
this.daterangepicker.firstMonthDayClass = this.firstMonthDayClass;
this.daterangepicker.lastMonthDayClass = this.lastMonthDayClass;
this.daterangepicker.emptyWeekRowClass = this.emptyWeekRowClass;
this.daterangepicker.emptyWeekColumnClass = this.emptyWeekColumnClass;
this.daterangepicker.firstDayOfNextMonthClass = this.firstDayOfNextMonthClass;
this.daterangepicker.lastDayOfPreviousMonthClass = this.lastDayOfPreviousMonthClass;
this.daterangepicker.drops = this.drops;
this.daterangepicker.opens = this.opens;
this.localeDiffer = this.differs.find(this.locale).create();
this.daterangepicker.closeOnAutoApply = this.closeOnAutoApply;
if (this.localeDiffer) {
const changes = this.localeDiffer.diff(this.locale);
if (changes) {
this.daterangepicker.updateLocale(this.locale);
}
}
}
ngOnDestroy() {
var _a;
(_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.daterangepicker.pickerContainer.nativeElement);
const reflectComponent = reflectComponentType(NgxDaterangepickerBootstrapComponent);
const selector = document.querySelector(reflectComponent.selector);
if (selector !== null)
document.body.removeChild(selector);
this.applicationRef.detachView(this.daterangepickerRef.hostView);
this.daterangepickerRef.destroy();
}
ngAfterViewInit() {
if (this.formlyCustomField)
this.writeValue(this.locale); // If you use ngx-formly custom field, remove [(ngModel)]
// from the input and set [formlyCustomField]='true' instead, to avoid Expression has changed after it was checked.
}
ngOnChanges(changes) {
for (const change in changes) {
if (changes.hasOwnProperty(change)) {
if (this.notForChangesProperty.indexOf(change) === -1) {
this.daterangepicker[change] = changes[change].currentValue;
}
}
}
}
onBlur() {
this._onTouched();
}
open(event) {
if (this.disabled)
return;
this.daterangepicker.show(event);
if (this.daterangepicker.isShown)
this.setPosition();
}
hide(e) {
this.daterangepicker.hide(e);
}
toggle(e) {
this.daterangepicker.isShown ? this.hide(e) : this.open(e);
}
clear() {
this.daterangepicker.clear();
}
writeValue(value) {
this.setValue(value);
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
setDisabledState(state) {
this._disabled = state;
}
setValue(val) {
if (val) {
this.value = val;
if (val[this._startKey]) {
this.daterangepicker.setStartDate(val[this._startKey]);
}
if (val[this._endKey]) {
this.daterangepicker.setEndDate(val[this._endKey]);
}
this.daterangepicker.calculateChosenLabel();
if (this.daterangepicker.chosenLabel) {
this._el.nativeElement.value = this.daterangepicker.chosenLabel;
}
}
else {
this.daterangepicker.clear();
}
}
ngAfterViewChecked() {
if (this.daterangepicker.isShown)
this.setPosition();
}
onWindowResize() {
if (this.daterangepicker.isShown)
this.setPosition();
}
pickerResizeObserver() {
this._resizeObserver = new ResizeObserver(() => {
// if (this.daterangepicker.isShown) this.setPosition();
});
this._resizeObserver.observe(this.daterangepicker.pickerContainer.nativeElement);
}
/**
* Set position of the calendar, this works as expected only if you add daterangepickerElement to DOM body
*/
setPosition() {
const pickerContainer = this.daterangepicker.pickerContainer.nativeElement;
const inputOffset = this.getOffset(this._el.nativeElement);
let containerTop;
let containerBottom;
if (this.drops && this.drops === 'down') {
containerTop = inputOffset.top + inputOffset.height + 'px';
containerBottom = 'auto';
}
if (this.drops && this.drops === 'up') {
containerTop = 'auto';
containerBottom = window.innerHeight - inputOffset.top + 'px';
}
let style;
if (this.opens === 'right') {
style = {
top: containerTop,
right: 'auto',
bottom: containerBottom,
left: inputOffset.left + 'px',
};
}
if (this.opens === 'center') {
style = {
top: containerTop,
right: 'auto',
bottom: containerBottom,
left: inputOffset.left + (inputOffset.width - pickerContainer.offsetWidth) / 2 + 'px',
};
}
if (this.opens === 'left') {
style = {
top: containerTop,
right: window.innerWidth - (inputOffset.left + inputOffset.width) + 'px',
bottom: containerBottom,
left: 'auto',
};
}
if (style) {
/* inset: top right bottom left */
this._renderer.setStyle(pickerContainer, 'top', style.top);
this._renderer.setStyle(pickerContainer, 'right', style.right);
this._renderer.setStyle(pickerContainer, 'bottom', style.bottom);
this._renderer.setStyle(pickerContainer, 'left', style.left);
}
}
getOffset(element) {
const rect = element.getBoundingClientRect();
return {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
height: rect.height,
width: rect.width,
};
}
inputChanged(e) {
if (e.target.tagName.toLowerCase() !== 'input')
return;
if (!e.target.value.length)
return;
const dateString = e.target.value.split(this.daterangepicker.locale.separator);
let start = null, end = null;
if (dateString.length === 2) {
start = dayjs(dateString[0], this.daterangepicker.locale.format);
end = dayjs(dateString[1], this.daterangepicker.locale.format);
}
if (this.singleDatePicker || start === null || end === null) {
start = dayjs(e.target.value, this.daterangepicker.locale.format);
end = start;
}
if (!start.isValid() || !end.isValid())
return;
this.daterangepicker.setStartDate(start);
this.daterangepicker.setEndDate(end);
this.daterangepicker.updateView();
}
/**
* For click outside of the calendar's container
* @param event event object
*/
outsideClick(event) {
if (!event.target || event.target.classList.contains('ngx-daterangepicker-action'))
return;
if (!this.elementRef.nativeElement.contains(event.target))
this.hide();
}
}
NgxDaterangepickerBootstrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NgxDaterangepickerLocaleService }], target: i0.ɵɵFactoryTarget.Directive });
NgxDaterangepickerBootstrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: NgxDaterangepickerBootstrapDirective, selector: "input[ngxDaterangepickerBootstrap]", inputs: { minDate: "minDate", maxDate: "maxDate", autoApply: "autoApply", alwaysShowCalendars: "alwaysShowCalendars", showCustomRangeLabel: "showCustomRangeLabel", linkedCalendars: "linkedCalendars", dateLimit: "dateLimit", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", showDropdowns: "showDropdowns", isInvalidDate: "isInvalidDate", isCustomDate: "isCustomDate", isTooltipDate: "isTooltipDate", showClearButton: "showClearButton", customRangeDirection: "customRangeDirection", ranges: "ranges", opens: "opens", drops: "drops", lastMonthDayClass: "lastMonthDayClass", emptyWeekRowClass: "emptyWeekRowClass", emptyWeekColumnClass: "emptyWeekColumnClass", firstDayOfNextMonthClass: "firstDayOfNextMonthClass", lastDayOfPreviousMonthClass: "lastDayOfPreviousMonthClass", keepCalendarOpeningWithRange: "keepCalendarOpeningWithRange", showRangeLabelOnInput: "showRangeLabelOnInput", showCancel: "showCancel", lockStartDate: "lockStartDate", closeOnAutoApply: "closeOnAutoApply", timePicker: "timePicker", timePicker24Hour: "timePicker24Hour", timePickerIncrement: "timePickerIncrement", timePickerSeconds: "timePickerSeconds", formlyCustomField: "formlyCustomField", startKey: "startKey", endKey: "endKey", locale: "locale" }, outputs: { change: "change", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated", startDateChanged: "startDateChanged", endDateChanged: "endDateChanged", clearClicked: "clearClicked" }, host: { listeners: { "click": "open()", "keyup.esc": "hide()", "blur": "onBlur()", "keyup": "inputChanged($event)", "window:resize": "onWindowResize($event)", "document:click": "outsideClick($event)" }, properties: { "disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapDirective), multi: true
}
], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[ngxDaterangepickerBootstrap]',
host: {
'(click)': 'open()',
'(keyup.esc)': 'hide()',
'(blur)': 'onBlur()',
'(keyup)': 'inputChanged($event)'
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapDirective), multi: true
}
]
}]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.KeyValueDiffers }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NgxDaterangepickerLocaleService }]; }, propDecorators: { minDate: [{
type: Input
}], maxDate: [{
type: Input
}], autoApply: [{
type: Input
}], alwaysShowCalendars: [{
type: Input
}], showCustomRangeLabel: [{
type: Input
}], linkedCalendars: [{
type: Input
}], dateLimit: [{
type: Input
}], singleDatePicker: [{
type: Input
}], showWeekNumbers: [{
type: Input
}], showISOWeekNumbers: [{
type: Input
}], showDropdowns: [{
type: Input
}], isInvalidDate: [{
type: Input
}], isCustomDate: [{
type: Input
}], isTooltipDate: [{
type: Input
}], showClearButton: [{
type: Input
}], customRangeDirection: [{
type: Input
}], ranges: [{
type: Input
}], opens: [{
type: Input
}], drops: [{
type: Input
}], lastMonthDayClass: [{
type: Input
}], emptyWeekRowClass: [{
type: Input
}], emptyWeekColumnClass: [{
type: Input
}], firstDayOfNextMonthClass: [{
type: Input
}], lastDayOfPreviousMonthClass: [{
type: Input
}], keepCalendarOpeningWithRange: [{
type: Input
}], showRangeLabelOnInput: [{
type: Input
}], showCancel: [{
type: Input
}], lockStartDate: [{
type: Input
}], closeOnAutoApply: [{
type: Input
}], timePicker: [{
type: Input
}], timePicker24Hour: [{
type: Input
}], timePickerIncrement: [{
type: Input
}], timePickerSeconds: [{
type: Input
}], formlyCustomField: [{
type: Input
}], startKey: [{
type: Input
}], endKey: [{
type: Input
}], locale: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['disabled']
}], change: [{
type: Output
}], rangeClicked: [{
type: Output
}], datesUpdated: [{
type: Output
}], startDateChanged: [{
type: Output
}], endDateChanged: [{
type: Output
}], clearClicked: [{
type: Output
}], onWindowResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}], outsideClick: [{
type: HostListener,
args: ['document:click', ['$event']]
}] } });
class NgxDaterangepickerBootstrapModule {
constructor() {
}
static forRoot(config = {}) {
return {
ngModule: NgxDaterangepickerBootstrapModule,
providers: [
{ provide: LOCALE_CONFIG, useValue: config },
{ provide: NgxDaterangepickerLocaleService, useClass: NgxDaterangepickerLocaleService, deps: [LOCALE_CONFIG] }
]
};
}
}
NgxDaterangepickerBootstrapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxDaterangepickerBootstrapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapModule, declarations: [NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective], imports: [CommonModule,
FormsModule,
ReactiveFormsModule], exports: [NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective] });
NgxDaterangepickerBootstrapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NgxDaterangepickerBootstrapModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [
NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective
],
entryComponents: [
NgxDaterangepickerBootstrapComponent
]
}]
}], ctorParameters: function () { return []; } });
/*
* Public API Surface of ngx-daterangepicker-bootstrap
*/
/**
* Generated bundle index. Do not edit.
*/
export { DefaultLocaleConfig, LOCALE_CONFIG, NgxDaterangepickerBootstrapComponent, NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapModule, NgxDaterangepickerLocaleService, SideEnum };
//# sourceMappingURL=ngx-daterangepicker-bootstrap.mjs.map