ngx-daterangepicker-bootstrap
Version:
Date Range Picker - Angular 22 and Bootstrap 5
1,899 lines • 183 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, input, output, Component, signal, model, computed, viewChild, effect, ViewEncapsulation, ViewContainerRef, Injector, ApplicationRef, ElementRef, Renderer2, forwardRef, Directive, NgModule, makeEnvironmentProviders } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR, 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 { NgClass, 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 {
_config = inject(LOCALE_CONFIG);
get config() {
if (!this._config) {
return DefaultLocaleConfig;
}
return { ...DefaultLocaleConfig, ...this._config };
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerLocaleService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerLocaleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class RangesComponent {
rangesArray = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rangesArray" }] : /* istanbul ignore next */ []));
chosenRange = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "chosenRange" }] : /* istanbul ignore next */ []));
locale = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
ranges = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ranges" }] : /* istanbul ignore next */ []));
minDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
maxDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
rangeEvent = output();
clickRange($event, label) {
this.rangeEvent.emit({ $event: $event, label: label });
}
/**
* 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.minDate()) {
return false;
}
return date.isBefore(this.minDate());
});
const areBothAfter = rangeMarkers.every((date) => {
if (!this.maxDate()) {
return false;
}
return date.isAfter(this.maxDate());
});
return (areBothBefore || areBothAfter);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: RangesComponent, isStandalone: true, selector: "ranges", inputs: { rangesArray: { classPropertyName: "rangesArray", publicName: "rangesArray", isSignal: true, isRequired: false, transformFunction: null }, chosenRange: { classPropertyName: "chosenRange", publicName: "chosenRange", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeEvent: "rangeEvent" }, ngImport: i0, template: "@if (rangesArray()?.length) {\r\n <div class='ranges'>\r\n <ul>\r\n @for (range of rangesArray(); track $index) {\r\n <li>\r\n <button type='button'\r\n (click)='clickRange($event, range)'\r\n [disabled]='disableRange(range)'\r\n [ngClass]=\"{'active': range === chosenRange()}\">\r\n {{ range }}\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n", styles: [".show-ranges .drp-calendar.left{border-left:1px solid #ddd}.ranges{float:none;text-align:left;margin:0}.ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;border-radius:.375rem;text-align:left;cursor:pointer}.ranges ul li button.active{background-color:#08c;color:#fff}.ranges ul li button[disabled]{opacity:.3}.ranges ul li button:active{background:transparent}.ranges ul li:hover{background-color:#eee;border-radius:.375rem}.show-calendar .ranges{margin-top:8px}[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RangesComponent, decorators: [{
type: Component,
args: [{ selector: 'ranges', imports: [
NgClass
], template: "@if (rangesArray()?.length) {\r\n <div class='ranges'>\r\n <ul>\r\n @for (range of rangesArray(); track $index) {\r\n <li>\r\n <button type='button'\r\n (click)='clickRange($event, range)'\r\n [disabled]='disableRange(range)'\r\n [ngClass]=\"{'active': range === chosenRange()}\">\r\n {{ range }}\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n", styles: [".show-ranges .drp-calendar.left{border-left:1px solid #ddd}.ranges{float:none;text-align:left;margin:0}.ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;border-radius:.375rem;text-align:left;cursor:pointer}.ranges ul li button.active{background-color:#08c;color:#fff}.ranges ul li button[disabled]{opacity:.3}.ranges ul li button:active{background:transparent}.ranges ul li:hover{background-color:#eee;border-radius:.375rem}.show-calendar .ranges{margin-top:8px}[hidden]{display:none}\n"] }]
}], propDecorators: { rangesArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesArray", required: false }] }], chosenRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenRange", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], rangeEvent: [{ type: i0.Output, args: ["rangeEvent"] }] } });
var SideEnum;
(function (SideEnum) {
SideEnum["left"] = "left";
SideEnum["right"] = "right";
})(SideEnum || (SideEnum = {}));
class CalendarComponent {
sideEnum = SideEnum;
showCalInRanges = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showCalInRanges" }] : /* istanbul ignore next */ []));
singleDatePicker = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "singleDatePicker" }] : /* istanbul ignore next */ []));
calendarVariables = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "calendarVariables" }] : /* istanbul ignore next */ []));
showWeekNumbers = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showWeekNumbers" }] : /* istanbul ignore next */ []));
showISOWeekNumbers = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showISOWeekNumbers" }] : /* istanbul ignore next */ []));
linkedCalendars = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "linkedCalendars" }] : /* istanbul ignore next */ []));
showDropdowns = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showDropdowns" }] : /* istanbul ignore next */ []));
locale = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
timePicker = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "timePicker" }] : /* istanbul ignore next */ []));
startDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "startDate" }] : /* istanbul ignore next */ []));
timepickerVariables = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "timepickerVariables" }] : /* istanbul ignore next */ []));
timePickerSeconds = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "timePickerSeconds" }] : /* istanbul ignore next */ []));
timePicker24Hour = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "timePicker24Hour" }] : /* istanbul ignore next */ []));
prevEvent = output();
nextEvent = output();
monthChangedEvent = output();
yearChangedEvent = output();
dateEvent = output();
hoverDateEvent = output();
timeChangedEvent = output();
clickPrev($event, side) {
this.prevEvent.emit({ $event: $event, side: side });
}
clickNext($event, side) {
this.nextEvent.emit({ $event: $event, side: side });
}
monthChanged($event, side) {
this.monthChangedEvent.emit({ $event: $event, side: side });
}
yearChanged($event, side) {
this.yearChangedEvent.emit({ $event: $event, side: side });
}
clickDate($event, side, row, col) {
this.dateEvent.emit({ $event: $event, side: side, row: row, col: col });
}
hoverDate($event, side, row, col) {
this.hoverDateEvent.emit({ $event: $event, side: side, row: row, col: col });
}
timeChanged($event, side) {
this.timeChangedEvent.emit({ $event: $event, side: side });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: CalendarComponent, isStandalone: true, selector: "calendar", inputs: { showCalInRanges: { classPropertyName: "showCalInRanges", publicName: "showCalInRanges", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, calendarVariables: { classPropertyName: "calendarVariables", publicName: "calendarVariables", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showISOWeekNumbers: { classPropertyName: "showISOWeekNumbers", publicName: "showISOWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, timepickerVariables: { classPropertyName: "timepickerVariables", publicName: "timepickerVariables", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevEvent: "prevEvent", nextEvent: "nextEvent", monthChangedEvent: "monthChangedEvent", yearChangedEvent: "yearChangedEvent", dateEvent: "dateEvent", hoverDateEvent: "hoverDateEvent", timeChangedEvent: "timeChangedEvent" }, ngImport: i0, template: "@if (showCalInRanges()) {\r\n <div class='calendar' [ngClass]='{right: singleDatePicker(), left: !singleDatePicker()}'>\r\n @if (calendarVariables()) {\r\n <table class='table-condensed calendar-table'>\r\n <thead>\r\n <tr>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th></th>\r\n }\r\n @if (!calendarVariables().left.minDate || calendarVariables().left.minDate.isBefore(calendarVariables().left.calendar.firstDay) && (!linkedCalendars() || true)) {\r\n <th (click)='clickPrev($event, sideEnum.left)' class='prev available'></th>\r\n }\r\n @if (!(!calendarVariables().left.minDate || calendarVariables().left.minDate.isBefore(calendarVariables().left.calendar.firstDay) && (!linkedCalendars() || true))) {\r\n <th></th>\r\n }\r\n <th colspan='5' class='month drp-animate'>\r\n @if (showDropdowns() && calendarVariables().left.dropdowns) {\r\n <div class='dropdowns'>\r\n {{ locale().monthNames[calendarVariables().left.calendar?.[1][1].month()] }}\r\n <select class='monthselect' (change)='monthChanged($event, sideEnum.left)'>\r\n @for (m of calendarVariables().left.dropdowns.monthArrays; track $index) {\r\n <option [selected]='calendarVariables().left.dropdowns.currentMonth == m' [value]='m'\r\n [disabled]='(calendarVariables().left.dropdowns.inMinYear && m < calendarVariables().left.minDate.month())\r\n || (calendarVariables().left.dropdowns.inMaxYear && m > calendarVariables().left.maxDate.month())'>\r\n {{ locale().monthNames[m] }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class='dropdowns'>\r\n {{ calendarVariables().left.calendar?.[1][1].format(\" YYYY\") }}\r\n <select class='yearselect' (change)='yearChanged($event, sideEnum.left)'>\r\n @for (y of calendarVariables().left.dropdowns.yearArrays; track $index) {\r\n <option [selected]='y === calendarVariables().left.dropdowns.currentYear'>\r\n {{ y }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n @if (!showDropdowns() || !calendarVariables().left.dropdowns) {\r\n {{ locale().monthNames[calendarVariables().left.calendar?.[1][1].month()] }} {{ calendarVariables().left.calendar?.[1][1].format(\" YYYY\") }}\r\n }\r\n </th>\r\n @if ((!calendarVariables().left.maxDate || calendarVariables().left.maxDate.isAfter(calendarVariables().left.calendar.lastDay)) && (!linkedCalendars() || singleDatePicker())) {\r\n <th class='next available' (click)='clickNext($event, sideEnum.left)'></th>\r\n }\r\n @if (!((!calendarVariables().left.maxDate || calendarVariables().left.maxDate.isAfter(calendarVariables().left.calendar.lastDay)) && (!linkedCalendars() || singleDatePicker()))) {\r\n <th></th>\r\n }\r\n </tr>\r\n <tr class='week-days'>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th class='week'>\r\n <span>{{ locale().weekLabel }}</span>\r\n </th>\r\n }\r\n @for (dayofweek of locale().daysOfWeek; track $index) {\r\n <th>\r\n <span>{{ dayofweek }}</span>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class='drp-animate'>\r\n @for (row of calendarVariables().left.calRows; track $index) {\r\n <tr [class]='calendarVariables().left.classes[row].classList'>\r\n <!-- add week number -->\r\n @if (showWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().left.calendar?.[row][0].week() }}</span>\r\n </td>\r\n }\r\n @if (showISOWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().left.calendar?.[row][0].isoWeek() }}</span>\r\n </td>\r\n }\r\n <!-- cal -->\r\n @for (col of calendarVariables().left.calCols; track $index) {\r\n <td [class]='calendarVariables().left.classes[row][col]'\r\n (click)='clickDate($event, sideEnum.left, row, col)'\r\n (mouseenter)='hoverDate($event, sideEnum.left, row, col)'>\r\n <span>{{ calendarVariables().left.calendar?.[row][col].date() }}</span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n }\r\n @if (timePicker()) {\r\n <div class='calendar-time'>\r\n <div class='select'>\r\n <select class='select-item hourselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedHour'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.hours; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledHours.indexOf(i) > -1'>\r\n {{ i }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n :\r\n <div class='select'>\r\n <select class='select-item minuteselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedMinute'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.minutes; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledMinutes.indexOf(i) > -1'>\r\n {{ timepickerVariables().left.minutesLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n @if (timePickerSeconds()) {\r\n :\r\n <div class='select'>\r\n <select class='select-item secondselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedSecond'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.seconds; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledSeconds.indexOf(i) > -1'>\r\n {{ timepickerVariables().left.secondsLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n @if (!timePicker24Hour()) {\r\n <div class='select'>\r\n <select class='select-item ampmselect'\r\n [(ngModel)]='timepickerVariables().left.ampmModel'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n <option value='AM' [disabled]='timepickerVariables().left.amDisabled'>AM</option>\r\n <option value='PM' [disabled]='timepickerVariables().left.pmDisabled'>PM</option>\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n@if (showCalInRanges() && !singleDatePicker()) {\r\n <div class='calendar right'>\r\n @if (calendarVariables()) {\r\n <table class='table-condensed calendar-table'>\r\n <thead>\r\n <tr>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th></th>\r\n }\r\n @if ((!calendarVariables().right.minDate || calendarVariables().right.minDate.isBefore(calendarVariables().right.calendar.firstDay)) && (!linkedCalendars())) {\r\n <th (click)='clickPrev($event, sideEnum.right)' class='prev available'></th>\r\n }\r\n @if (!((!calendarVariables().right.minDate || calendarVariables().right.minDate.isBefore(calendarVariables().right.calendar.firstDay)) && (!linkedCalendars()))) {\r\n <th></th>\r\n }\r\n <th colspan='5' class='month'>\r\n @if (showDropdowns() && calendarVariables().right.dropdowns) {\r\n <div class='dropdowns'>\r\n {{ locale().monthNames[calendarVariables().right.calendar?.[1][1].month()] }}\r\n <select class='monthselect' (change)='monthChanged($event, sideEnum.right)'>\r\n @for (m of calendarVariables().right.dropdowns.monthArrays; track $index) {\r\n <option [selected]='calendarVariables().right.dropdowns.currentMonth == m' [value]='m'\r\n [disabled]='(calendarVariables().right.dropdowns.inMinYear && calendarVariables().right.minDate && m < calendarVariables().right.minDate.month())\r\n || (calendarVariables().right.dropdowns.inMaxYear && calendarVariables().right.maxDate && m > calendarVariables().right.maxDate.month())'>\r\n {{ locale().monthNames[m] }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class='dropdowns'>\r\n {{ calendarVariables().right.calendar?.[1][1].format(\" YYYY\") }}\r\n <select class='yearselect' (change)='yearChanged($event, sideEnum.right)'>\r\n @for (y of calendarVariables().right.dropdowns.yearArrays; track $index) {\r\n <option [selected]='y === calendarVariables().right.dropdowns.currentYear'>\r\n {{ y }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n @if (!showDropdowns() || !calendarVariables().right.dropdowns) {\r\n {{ locale().monthNames[calendarVariables().right.calendar?.[1][1].month()] }} {{ calendarVariables().right.calendar?.[1][1].format(\" YYYY\") }}\r\n }\r\n </th>\r\n @if (!calendarVariables().right.maxDate || calendarVariables().right.maxDate.isAfter(calendarVariables().right.calendar.lastDay) && (!linkedCalendars() || singleDatePicker() || true)) {\r\n <th class='next available' (click)='clickNext($event, sideEnum.right)'></th>\r\n }\r\n @if (!(!calendarVariables().right.maxDate || calendarVariables().right.maxDate.isAfter(calendarVariables().right.calendar.lastDay) && (!linkedCalendars() || singleDatePicker() || true))) {\r\n <th></th>\r\n }\r\n </tr>\r\n <tr class='week-days'>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th class='week'>\r\n <span>{{ locale().weekLabel }}</span>\r\n </th>\r\n }\r\n @for (dayofweek of locale().daysOfWeek; track $index) {\r\n <th>\r\n <span>{{ dayofweek }}</span>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of calendarVariables().right.calRows; track $index) {\r\n <tr [class]='calendarVariables().right.classes[row].classList'>\r\n @if (showWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().right.calendar?.[row][0].week() }}</span>\r\n </td>\r\n }\r\n @if (showISOWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().right.calendar?.[row][0].isoWeek() }}</span>\r\n </td>\r\n }\r\n @for (col of calendarVariables().right.calCols; track $index) {\r\n <td [class]='calendarVariables().right.classes[row][col]'\r\n (click)='clickDate($event, sideEnum.right, row, col)'\r\n (mouseenter)='hoverDate($event, sideEnum.right, row, col)'>\r\n <span>{{ calendarVariables().right.calendar?.[row][col].date() }}</span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n }\r\n @if (timePicker()) {\r\n <div class='calendar-time'>\r\n <div class='select'>\r\n <select class='select-item hourselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedHour'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.hours; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledHours.indexOf(i) > -1'>\r\n {{ i }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n :\r\n <div class='select'>\r\n <select class='select-item minuteselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedMinute'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.minutes; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledMinutes.indexOf(i) > -1'>\r\n {{ timepickerVariables().right.minutesLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n @if (timePickerSeconds()) {\r\n :\r\n <div class='select'>\r\n\r\n <select class='select-item secondselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedSecond'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.seconds; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledSeconds.indexOf(i) > -1'>\r\n {{ timepickerVariables().right.secondsLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n @if (!timePicker24Hour()) {\r\n <div class='select'>\r\n <select class='select-item ampmselect'\r\n [(ngModel)]='timepickerVariables().right.ampmModel'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n <option value='AM' [disabled]='timepickerVariables().right.amDisabled'>AM</option>\r\n <option value='PM' [disabled]='timepickerVariables().right.pmDisabled'>PM</option>\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".calendar{max-width:270px;margin:4px}.calendar.single .calendar-table{border:none}.calendar th,.calendar td{padding:0;white-space:nowrap;text-align:center;min-width:32px}.calendar th span,.calendar td span{pointer-events:none}.calendar-table{border:1px solid #fff;padding:4px;border-radius:50%;background-color:#fff}table{width:100%;margin:0;border-collapse:separate;border-spacing:1px}th{color:#000}td,th{text-align:center;border-radius:50%;white-space:nowrap;cursor:pointer;height:2em;width:2em}td.available.prev,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%}td.available.prev:hover,th.available.prev:hover{margin:0}td.available.next,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%}td.available.next:hover,th.available.next:hover{margin:0;transform:rotate(180deg)}td.available:hover,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}td.week,th.week{color:#ccc}td{margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}td.off,td.off.in-range,td.off.start-date,td.off.end-date{background-color:#fff;border-color:transparent;color:#999}td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}td.start-date{border-radius:50% 0 0 50%}td.end-date{border-radius:0 50% 50% 0}td.start-date.end-date{border-radius:50%}td.active{transition:background .3s ease-out}td.active,td.active:hover{background-color:#08c;border-color:transparent;color:#fff}th.month{width:auto}td.disabled,option.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.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=)}.dropdowns select{display:inline-block;background-color:#ffffffe6;width:100%;padding:5px;border:1px solid #f2f2f2;border-radius:calc(.5rem - 1px);height:3rem}.dropdowns select.monthselect,.dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.dropdowns select.hourselect,.dropdowns select.minuteselect,.dropdowns select.secondselect,.dropdowns select.ampmselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.dropdowns select.monthselect,.dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}th.month>div{position:relative;display:inline-block}.calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.calendar-time .select{display:inline;border:1px solid #eee;border-radius:calc(.5rem - 1px);background:#eee;padding:3px}.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}.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}.calendar-time .select .select-item:focus{outline:none}.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}.calendar-time select.disabled{color:#ccc;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'calendar', imports: [
NgClass,
FormsModule
], template: "@if (showCalInRanges()) {\r\n <div class='calendar' [ngClass]='{right: singleDatePicker(), left: !singleDatePicker()}'>\r\n @if (calendarVariables()) {\r\n <table class='table-condensed calendar-table'>\r\n <thead>\r\n <tr>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th></th>\r\n }\r\n @if (!calendarVariables().left.minDate || calendarVariables().left.minDate.isBefore(calendarVariables().left.calendar.firstDay) && (!linkedCalendars() || true)) {\r\n <th (click)='clickPrev($event, sideEnum.left)' class='prev available'></th>\r\n }\r\n @if (!(!calendarVariables().left.minDate || calendarVariables().left.minDate.isBefore(calendarVariables().left.calendar.firstDay) && (!linkedCalendars() || true))) {\r\n <th></th>\r\n }\r\n <th colspan='5' class='month drp-animate'>\r\n @if (showDropdowns() && calendarVariables().left.dropdowns) {\r\n <div class='dropdowns'>\r\n {{ locale().monthNames[calendarVariables().left.calendar?.[1][1].month()] }}\r\n <select class='monthselect' (change)='monthChanged($event, sideEnum.left)'>\r\n @for (m of calendarVariables().left.dropdowns.monthArrays; track $index) {\r\n <option [selected]='calendarVariables().left.dropdowns.currentMonth == m' [value]='m'\r\n [disabled]='(calendarVariables().left.dropdowns.inMinYear && m < calendarVariables().left.minDate.month())\r\n || (calendarVariables().left.dropdowns.inMaxYear && m > calendarVariables().left.maxDate.month())'>\r\n {{ locale().monthNames[m] }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class='dropdowns'>\r\n {{ calendarVariables().left.calendar?.[1][1].format(\" YYYY\") }}\r\n <select class='yearselect' (change)='yearChanged($event, sideEnum.left)'>\r\n @for (y of calendarVariables().left.dropdowns.yearArrays; track $index) {\r\n <option [selected]='y === calendarVariables().left.dropdowns.currentYear'>\r\n {{ y }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n @if (!showDropdowns() || !calendarVariables().left.dropdowns) {\r\n {{ locale().monthNames[calendarVariables().left.calendar?.[1][1].month()] }} {{ calendarVariables().left.calendar?.[1][1].format(\" YYYY\") }}\r\n }\r\n </th>\r\n @if ((!calendarVariables().left.maxDate || calendarVariables().left.maxDate.isAfter(calendarVariables().left.calendar.lastDay)) && (!linkedCalendars() || singleDatePicker())) {\r\n <th class='next available' (click)='clickNext($event, sideEnum.left)'></th>\r\n }\r\n @if (!((!calendarVariables().left.maxDate || calendarVariables().left.maxDate.isAfter(calendarVariables().left.calendar.lastDay)) && (!linkedCalendars() || singleDatePicker()))) {\r\n <th></th>\r\n }\r\n </tr>\r\n <tr class='week-days'>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th class='week'>\r\n <span>{{ locale().weekLabel }}</span>\r\n </th>\r\n }\r\n @for (dayofweek of locale().daysOfWeek; track $index) {\r\n <th>\r\n <span>{{ dayofweek }}</span>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody class='drp-animate'>\r\n @for (row of calendarVariables().left.calRows; track $index) {\r\n <tr [class]='calendarVariables().left.classes[row].classList'>\r\n <!-- add week number -->\r\n @if (showWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().left.calendar?.[row][0].week() }}</span>\r\n </td>\r\n }\r\n @if (showISOWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().left.calendar?.[row][0].isoWeek() }}</span>\r\n </td>\r\n }\r\n <!-- cal -->\r\n @for (col of calendarVariables().left.calCols; track $index) {\r\n <td [class]='calendarVariables().left.classes[row][col]'\r\n (click)='clickDate($event, sideEnum.left, row, col)'\r\n (mouseenter)='hoverDate($event, sideEnum.left, row, col)'>\r\n <span>{{ calendarVariables().left.calendar?.[row][col].date() }}</span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n }\r\n @if (timePicker()) {\r\n <div class='calendar-time'>\r\n <div class='select'>\r\n <select class='select-item hourselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedHour'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.hours; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledHours.indexOf(i) > -1'>\r\n {{ i }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n :\r\n <div class='select'>\r\n <select class='select-item minuteselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedMinute'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.minutes; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledMinutes.indexOf(i) > -1'>\r\n {{ timepickerVariables().left.minutesLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n @if (timePickerSeconds()) {\r\n :\r\n <div class='select'>\r\n <select class='select-item secondselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().left.selectedSecond'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n @for (i of timepickerVariables().left.seconds; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().left.disabledSeconds.indexOf(i) > -1'>\r\n {{ timepickerVariables().left.secondsLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n @if (!timePicker24Hour()) {\r\n <div class='select'>\r\n <select class='select-item ampmselect'\r\n [(ngModel)]='timepickerVariables().left.ampmModel'\r\n (ngModelChange)='timeChanged($event, sideEnum.left)'>\r\n <option value='AM' [disabled]='timepickerVariables().left.amDisabled'>AM</option>\r\n <option value='PM' [disabled]='timepickerVariables().left.pmDisabled'>PM</option>\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n@if (showCalInRanges() && !singleDatePicker()) {\r\n <div class='calendar right'>\r\n @if (calendarVariables()) {\r\n <table class='table-condensed calendar-table'>\r\n <thead>\r\n <tr>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th></th>\r\n }\r\n @if ((!calendarVariables().right.minDate || calendarVariables().right.minDate.isBefore(calendarVariables().right.calendar.firstDay)) && (!linkedCalendars())) {\r\n <th (click)='clickPrev($event, sideEnum.right)' class='prev available'></th>\r\n }\r\n @if (!((!calendarVariables().right.minDate || calendarVariables().right.minDate.isBefore(calendarVariables().right.calendar.firstDay)) && (!linkedCalendars()))) {\r\n <th></th>\r\n }\r\n <th colspan='5' class='month'>\r\n @if (showDropdowns() && calendarVariables().right.dropdowns) {\r\n <div class='dropdowns'>\r\n {{ locale().monthNames[calendarVariables().right.calendar?.[1][1].month()] }}\r\n <select class='monthselect' (change)='monthChanged($event, sideEnum.right)'>\r\n @for (m of calendarVariables().right.dropdowns.monthArrays; track $index) {\r\n <option [selected]='calendarVariables().right.dropdowns.currentMonth == m' [value]='m'\r\n [disabled]='(calendarVariables().right.dropdowns.inMinYear && calendarVariables().right.minDate && m < calendarVariables().right.minDate.month())\r\n || (calendarVariables().right.dropdowns.inMaxYear && calendarVariables().right.maxDate && m > calendarVariables().right.maxDate.month())'>\r\n {{ locale().monthNames[m] }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class='dropdowns'>\r\n {{ calendarVariables().right.calendar?.[1][1].format(\" YYYY\") }}\r\n <select class='yearselect' (change)='yearChanged($event, sideEnum.right)'>\r\n @for (y of calendarVariables().right.dropdowns.yearArrays; track $index) {\r\n <option [selected]='y === calendarVariables().right.dropdowns.currentYear'>\r\n {{ y }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n @if (!showDropdowns() || !calendarVariables().right.dropdowns) {\r\n {{ locale().monthNames[calendarVariables().right.calendar?.[1][1].month()] }} {{ calendarVariables().right.calendar?.[1][1].format(\" YYYY\") }}\r\n }\r\n </th>\r\n @if (!calendarVariables().right.maxDate || calendarVariables().right.maxDate.isAfter(calendarVariables().right.calendar.lastDay) && (!linkedCalendars() || singleDatePicker() || true)) {\r\n <th class='next available' (click)='clickNext($event, sideEnum.right)'></th>\r\n }\r\n @if (!(!calendarVariables().right.maxDate || calendarVariables().right.maxDate.isAfter(calendarVariables().right.calendar.lastDay) && (!linkedCalendars() || singleDatePicker() || true))) {\r\n <th></th>\r\n }\r\n </tr>\r\n <tr class='week-days'>\r\n @if (showWeekNumbers() || showISOWeekNumbers()) {\r\n <th class='week'>\r\n <span>{{ locale().weekLabel }}</span>\r\n </th>\r\n }\r\n @for (dayofweek of locale().daysOfWeek; track $index) {\r\n <th>\r\n <span>{{ dayofweek }}</span>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of calendarVariables().right.calRows; track $index) {\r\n <tr [class]='calendarVariables().right.classes[row].classList'>\r\n @if (showWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().right.calendar?.[row][0].week() }}</span>\r\n </td>\r\n }\r\n @if (showISOWeekNumbers()) {\r\n <td class='week'>\r\n <span>{{ calendarVariables().right.calendar?.[row][0].isoWeek() }}</span>\r\n </td>\r\n }\r\n @for (col of calendarVariables().right.calCols; track $index) {\r\n <td [class]='calendarVariables().right.classes[row][col]'\r\n (click)='clickDate($event, sideEnum.right, row, col)'\r\n (mouseenter)='hoverDate($event, sideEnum.right, row, col)'>\r\n <span>{{ calendarVariables().right.calendar?.[row][col].date() }}</span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n }\r\n @if (timePicker()) {\r\n <div class='calendar-time'>\r\n <div class='select'>\r\n <select class='select-item hourselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedHour'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.hours; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledHours.indexOf(i) > -1'>\r\n {{ i }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n :\r\n <div class='select'>\r\n <select class='select-item minuteselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedMinute'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.minutes; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledMinutes.indexOf(i) > -1'>\r\n {{ timepickerVariables().right.minutesLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n @if (timePickerSeconds()) {\r\n :\r\n <div class='select'>\r\n\r\n <select class='select-item secondselect' [disabled]='!startDate()'\r\n [(ngModel)]='timepickerVariables().right.selectedSecond'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n @for (i of timepickerVariables().right.seconds; track $index) {\r\n <option [value]='i' [disabled]='timepickerVariables().right.disabledSeconds.indexOf(i) > -1'>\r\n {{ timepickerVariables().right.secondsLabel[$index] }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n @if (!timePicker24Hour()) {\r\n <div class='select'>\r\n <select class='select-item ampmselect'\r\n [(ngModel)]='timepickerVariables().right.ampmModel'\r\n (ngModelChange)='timeChanged($event, sideEnum.right)'>\r\n <option value='AM' [disabled]='timepickerVariables().right.amDisabled'>AM</option>\r\n <option value='PM' [disabled]='timepickerVariables().right.pmDisabled'>PM</option>\r\n </select>\r\n <span class='select-highlight'></span>\r\n <span class='select-bar'></span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".calendar{max-width:270px;margin:4px}.calendar.single .calendar-table{border:none}.calendar th,.calendar td{padding:0;white-space:nowrap;text-align:center;min-width:32px}.calendar th span,.calendar td span{pointer-events:none}.calendar-table{border:1px solid #fff;padding:4px;border-radius:50%;background-color:#fff}table{width:100%;margin:0;border-collapse:separate;border-spacing:1px}th{color:#000}td,th{text-align:center;border-radius:50%;white-space:nowrap;cursor:pointer;height:2em;width:2em}td.available.prev,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%}td.available.prev:hover,th.available.prev:hover{margin:0}td.available.next,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%}td.available.next:hover,th.available.next:hover{margin:0;transform:rotate(180deg)}td.available:hover,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}td.week,th.week{color:#ccc}td{margin:.25em 0;border-radius:50%;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}td.off,td.off.in-range,td.off.start-date,td.off.end-date{background-color:#fff;border-color:transparent;color:#999}td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}td.start-date{border-radius:50% 0 0 50%}td.end-date{border-radius:0 50% 50% 0}td.start-date.end-date{border-radius:50%}td.active{transition:background .3s ease-out}td.active,td.active:hover{background-color:#08c;border-color:transparent;color:#fff}th.month{width:auto}td.disabled,option.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.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=)}.dropdowns select{display:inline-block;background-color:#ffffffe6;width:100%;padding:5px;border:1px solid #f2f2f2;border-radius:calc(.5rem - 1px);height:3rem}.dropdowns select.monthselect,.dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.dropdowns select.hourselect,.dropdowns select.minuteselect,.dropdowns select.secondselect,.dropdowns select.ampmselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.dropdowns select.monthselect,.dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}th.month>div{position:relative;display:inline-block}.calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.calendar-time .select{display:inline;border:1px solid #eee;border-radius:calc(.5rem - 1px);background:#eee;padding:3px}.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}.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}.calendar-time .select .select-item:focus{outline:none}.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}.calendar-time select.disabled{color:#ccc;cursor:not-allowed}\n"] }]
}], propDecorators: { showCalInRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalInRanges", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], calendarVariables: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarVariables", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showISOWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showISOWeekNumbers", required: false }] }], linkedCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedCalendars", required: false }] }], showDropdowns: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdowns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], timepickerVariables: [{ type: i0.Input, args: [{ isSignal: true, alias: "timepickerVariables", required: false }] }], timePickerSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerSeconds", required: false }] }], timePicker24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24Hour", required: false }] }], prevEvent: [{ type: i0.Output, args: ["prevEvent"] }], nextEvent: [{ type: i0.Output, args: ["nextEvent"] }], monthChangedEvent: [{ type: i0.Output, args: ["monthChangedEvent"] }], yearChangedEvent: [{ type: i0.Output, args: ["yearChangedEvent"] }], dateEvent: [{ type: i0.Output, args: ["dateEvent"] }], hoverDateEvent: [{ type: i0.Output, args: ["hoverDateEvent"] }], timeChangedEvent: [{ type: i0.Output, args: ["timeChangedEvent"] }] } });
class ActionsComponent {
rangesArray = input([], /* @ts-ignore */
...(ngDevMode ? [{ debugName: "rangesArray" }] : /* istanbul ignore next */ []));
autoApply = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "autoApply" }] : /* istanbul ignore next */ []));
showCalInRanges = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showCalInRanges" }] : /* istanbul ignore next */ []));
singleDatePicker = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "singleDatePicker" }] : /* istanbul ignore next */ []));
chosenLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "chosenLabel" }] : /* istanbul ignore next */ []));
applyBtnDisabled = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "applyBtnDisabled" }] : /* istanbul ignore next */ []));
locale = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
showCancel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showCancel" }] : /* istanbul ignore next */ []));
showClearButton = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showClearButton" }] : /* istanbul ignore next */ []));
applyEvent = output();
cancelEvent = output();
clearEvent = output();
clickApply($event) {
this.applyEvent.emit($event);
}
clickCancel($event) {
this.cancelEvent.emit($event);
}
clickClear($event) {
this.clearEvent.emit($event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ActionsComponent, isStandalone: true, selector: "actions", inputs: { rangesArray: { classPropertyName: "rangesArray", publicName: "rangesArray", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, showCalInRanges: { classPropertyName: "showCalInRanges", publicName: "showCalInRanges", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, chosenLabel: { classPropertyName: "chosenLabel", publicName: "chosenLabel", isSignal: true, isRequired: false, transformFunction: null }, applyBtnDisabled: { classPropertyName: "applyBtnDisabled", publicName: "applyBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyEvent: "applyEvent", cancelEvent: "cancelEvent", clearEvent: "clearEvent" }, ngImport: i0, template: "@if (!autoApply() && (!rangesArray().length || (showCalInRanges() && !singleDatePicker()))) {\r\n <div class=\"card-footer\">\r\n <span style=\"display: inline-block; padding: 7px;\">{{ chosenLabel() }}</span>\r\n <button type='button'\r\n class='btn btn-primary float-end'\r\n (click)='clickApply($event)'\r\n [disabled]='applyBtnDisabled()'>\r\n {{ locale().applyLabel }}\r\n </button>\r\n @if (showCancel()) {\r\n <button type='button'\r\n class='btn btn-secondary me-2 float-end'\r\n (click)='clickCancel($event)'>\r\n {{ locale().cancelLabel }}\r\n </button>\r\n }\r\n @if (showClearButton()) {\r\n <button type='button'\r\n class='btn btn-outline-dark me-2 float-end'\r\n (click)='clickClear($event)'\r\n [title]='locale().clearLabel'>\r\n {{ locale().clearLabel }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'actions', imports: [], template: "@if (!autoApply() && (!rangesArray().length || (showCalInRanges() && !singleDatePicker()))) {\r\n <div class=\"card-footer\">\r\n <span style=\"display: inline-block; padding: 7px;\">{{ chosenLabel() }}</span>\r\n <button type='button'\r\n class='btn btn-primary float-end'\r\n (click)='clickApply($event)'\r\n [disabled]='applyBtnDisabled()'>\r\n {{ locale().applyLabel }}\r\n </button>\r\n @if (showCancel()) {\r\n <button type='button'\r\n class='btn btn-secondary me-2 float-end'\r\n (click)='clickCancel($event)'>\r\n {{ locale().cancelLabel }}\r\n </button>\r\n }\r\n @if (showClearButton()) {\r\n <button type='button'\r\n class='btn btn-outline-dark me-2 float-end'\r\n (click)='clickClear($event)'\r\n [title]='locale().clearLabel'>\r\n {{ locale().clearLabel }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n" }]
}], propDecorators: { rangesArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesArray", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], showCalInRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalInRanges", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], chosenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenLabel", required: false }] }], applyBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyBtnDisabled", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], applyEvent: [{ type: i0.Output, args: ["applyEvent"] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], clearEvent: [{ type: i0.Output, args: ["clearEvent"] }] } });
dayjs.extend(localeData);
dayjs.extend(LocalizedFormat);
dayjs.extend(isoWeek);
dayjs.extend(week);
dayjs.extend(customParseFormat);
class NgxDaterangepickerBootstrapComponent {
_localeService = inject(NgxDaterangepickerLocaleService);
$event;
chosenLabel;
calendarVariables = { left: {}, right: {} };
timepickerVariables = { left: {}, right: {} };
applyBtnDisabled = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "applyBtnDisabled" }] : /* istanbul ignore next */ []));
chosenRange;
rangesArray = [];
inline = true;
showCalInRanges = false;
tooltiptext = []; // for storing tooltiptext
leftCalendar = {};
rightCalendar = {};
nowHoveredDate = null;
pickingDate = false;
_old = { start: null, end: null };
_minDate;
_maxDate;
// private _locale: LocaleConfig = {};
_ranges = {};
startDate = model(dayjs().startOf('day'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
endDate = model(dayjs().endOf('day'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
dateLimit = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dateLimit" }] : /* istanbul ignore next */ []));
autoApply = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "autoApply" }] : /* istanbul ignore next */ []));
singleDatePicker = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "singleDatePicker" }] : /* istanbul ignore next */ []));
showDropdowns = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showDropdowns" }] : /* istanbul ignore next */ []));
showWeekNumbers = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : /* istanbul ignore next */ []));
showISOWeekNumbers = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showISOWeekNumbers" }] : /* istanbul ignore next */ []));
linkedCalendars = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "linkedCalendars" }] : /* istanbul ignore next */ []));
autoUpdateInput = input(true, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "autoUpdateInput" }] : /* istanbul ignore next */ []));
alwaysShowCalendars = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "alwaysShowCalendars" }] : /* istanbul ignore next */ []));
maxSpan = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "maxSpan" }] : /* istanbul ignore next */ []));
lockStartDate = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lockStartDate" }] : /* istanbul ignore next */ []));
timePicker = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker" }] : /* istanbul ignore next */ []));
timePicker24Hour = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker24Hour" }] : /* istanbul ignore next */ []));
timePickerIncrement = input(1, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePickerIncrement" }] : /* istanbul ignore next */ []));
timePicker24HourInterval = input([0, 23], /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker24HourInterval" }] : /* istanbul ignore next */ []));
timePickerSeconds = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePickerSeconds" }] : /* istanbul ignore next */ []));
showClearButton = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
firstMonthDayClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "firstMonthDayClass" }] : /* istanbul ignore next */ []));
lastMonthDayClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lastMonthDayClass" }] : /* istanbul ignore next */ []));
emptyWeekRowClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyWeekRowClass" }] : /* istanbul ignore next */ []));
emptyWeekColumnClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyWeekColumnClass" }] : /* istanbul ignore next */ []));
firstDayOfNextMonthClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "firstDayOfNextMonthClass" }] : /* istanbul ignore next */ []));
lastDayOfPreviousMonthClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lastDayOfPreviousMonthClass" }] : /* istanbul ignore next */ []));
showCustomRangeLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showCustomRangeLabel" }] : /* istanbul ignore next */ []));
showCancel = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
keepCalendarOpeningWithRange = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "keepCalendarOpeningWithRange" }] : /* istanbul ignore next */ []));
showRangeLabelOnInput = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showRangeLabelOnInput" }] : /* istanbul ignore next */ []));
customRangeDirection = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "customRangeDirection" }] : /* istanbul ignore next */ []));
drops = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "drops" }] : /* istanbul ignore next */ []));
opens = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "opens" }] : /* istanbul ignore next */ []));
closeOnAutoApply = input(true, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "closeOnAutoApply" }] : /* istanbul ignore next */ []));
minDate = input(undefined, { ...(ngDevMode ? { debugName: "minDate" } : /* istanbul ignore next */ {}), transform: (value) => {
dayjs.isDayjs(value) ? this._minDate = value : this._minDate = dayjs(value);
return this._minDate;
} });
maxDate = input(undefined, { ...(ngDevMode ? { debugName: "maxDate" } : /* istanbul ignore next */ {}), transform: (value) => {
dayjs.isDayjs(value) ? this._maxDate = value : this._maxDate = dayjs(value);
return this._maxDate;
} });
locale = model({}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
_locale = computed(() => this.locale() !== null ? { ...this._localeService.config, ...this.locale() } : {}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
ranges = input({}, { ...(ngDevMode ? { debugName: "ranges" } : /* istanbul ignore next */ {}), // custom ranges
transform: (value) => {
this._ranges = value;
this.renderRanges();
return this._ranges;
} });
isInvalidDate = input(() => false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isInvalidDate" }] : /* istanbul ignore next */ []));
isCustomDate = input(() => false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isCustomDate" }] : /* istanbul ignore next */ []));
isTooltipDate = input(() => null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isTooltipDate" }] : /* istanbul ignore next */ []));
isShown = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isShown" }] : /* istanbul ignore next */ []));
pickerContainer = viewChild('pickerContainer', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "pickerContainer" }] : /* istanbul ignore next */ []));
chosenDate = output();
rangeClicked = output();
datesUpdated = output();
startDateChanged = output();
endDateChanged = output();
cancelClicked = output();
clearClicked = output();
constructor() {
effect(() => {
this.updateView();
});
}
ngOnInit() {
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.applyBtnDisabled.set(true);
this._old.start = this.startDate()?.clone();
this._old.end = this.endDate()?.clone();
}
const timePicker = this.timePicker();
if (this.startDate() && timePicker) {
this.setStartDate(this.startDate());
this.renderTimePicker(SideEnum.left);
}
if (this.endDate() && timePicker) {
this.setEndDate(this.endDate());
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
this.renderRanges();
}
renderRanges() {
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.minDate() && start.isBefore(this.minDate())) {
start = this.minDate()?.clone();
}
let maxDate = this.maxDate();
const maxSpan = this.maxSpan();
if (maxSpan && maxDate && start.clone().add(maxSpan).isAfter(maxDate)) {
maxDate = start.clone().add(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.
const timePicker = this.timePicker();
if ((this.minDate() && end.isBefore(this.minDate(), timePicker ? 'minute' : 'day'))
|| (maxDate && start.isAfter(maxDate, 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.set(this.startDate()?.startOf('day'));
this.endDate.set(this.endDate()?.endOf('day'));
}
}
}
renderTimePicker(side) {
let selected, minDate;
const maxDate = this.maxDate();
if (side === SideEnum.left) {
selected = this.startDate()?.clone();
minDate = this.minDate();
}
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 = this.startDate()?.clone(); // set it back to the start date the time was backwards
}
minDate = this.startDate();
}
const start = this.timePicker24Hour() ? this.timePicker24HourInterval()[0] : 1;
const end = this.timePicker24Hour() ? this.timePicker24HourInterval()[1] : 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) {
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.minDate() && calendar[row][col].format('YYYY-MM-DD') === this.minDate()?.format('YYYY-MM-DD') &&
calendar[row][col].isBefore(this.minDate()) && side === 'left') {
calendar[row][col] = this.minDate()?.clone();
}
if (this.maxDate() && calendar[row][col].format('YYYY-MM-DD') === this.maxDate()?.format('YYYY-MM-DD') &&
calendar[row][col].isAfter(this.maxDate()) && side === 'right') {
calendar[row][col] = this.maxDate()?.clone();
}
}
// 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.minDate() : this.startDate();
let maxDate = this.maxDate();
// adjust maxDate to reflect the dateLimit setting in order to
// grey out end dates beyond the dateLimit
const dateLimit = this.dateLimit();
if (this.endDate() === null && dateLimit) {
const maxLimit = this.startDate()?.clone().add(dateLimit, 'day').endOf('day');
if (!maxDate || maxLimit?.isBefore(maxDate))
maxDate = maxLimit;
if (this.customRangeDirection()) {
minDate = this.minDate();
const minLimit = this.startDate()?.clone().subtract(dateLimit, 'day').endOf('day');
if (!minDate || 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) {
if (typeof startDate === 'string')
this.startDate.set(dayjs(startDate, this._locale().format));
if (typeof startDate === 'object') {
this.pickingDate = true;
this.startDate.set(dayjs(startDate));
}
const timePicker = this.timePicker();
if (!timePicker) {
this.pickingDate = true;
this.startDate.set(this.startDate()?.startOf('day'));
}
const timePickerIncrement = this.timePickerIncrement();
if (timePicker && timePickerIncrement) {
this.startDate.set(this.startDate()?.minute(Math.round(this.startDate().minute() / timePickerIncrement) * timePickerIncrement));
}
if (this.minDate() && this.startDate()?.isBefore(this.minDate())) {
this.startDate.set(this.minDate()?.clone());
if (timePicker && timePickerIncrement) {
this.startDate.set(this.startDate()?.minute(Math.round(this.startDate().minute() / timePickerIncrement) * timePickerIncrement));
}
}
if (this.maxDate() && this.startDate()?.isAfter(this.maxDate())) {
this.startDate.set(this.maxDate()?.clone());
if (timePicker && timePickerIncrement) {
this.startDate.set(this.startDate()?.minute(Math.floor(this.startDate().minute() / timePickerIncrement) * timePickerIncrement));
}
}
if (!this.isShown()) {
this.updateElement();
}
this.startDateChanged.emit({ startDate: this.startDate() });
this.updateMonthsInView();
}
setEndDate(endDate) {
if (typeof endDate === 'string') {
this.endDate.set(dayjs(endDate, this._locale().format));
}
if (typeof endDate === 'object') {
this.pickingDate = false;
this.endDate.set(dayjs(endDate));
}
const timePicker = this.timePicker();
if (!timePicker) {
this.pickingDate = false;
this.endDate.set(this.endDate()?.add(1, 'd').startOf('day').subtract(1, 'second'));
}
const timePickerIncrement = this.timePickerIncrement();
if (timePicker && timePickerIncrement) {
this.endDate()?.minute(Math.round(this.endDate().minute() / timePickerIncrement) * timePickerIncrement);
}
if (this.endDate()?.isBefore(this.startDate())) {
this.endDate.set(this.startDate()?.clone());
}
if (this.maxDate() && this.endDate()?.isAfter(this.maxDate())) {
this.endDate.set(this.maxDate()?.clone());
}
const dateLimit = this.dateLimit();
if (dateLimit && this.startDate()?.clone().add(dateLimit, 'day').isBefore(this.endDate())) {
this.endDate.set(this.startDate().clone().add(dateLimit, 'day'));
}
if (!this.isShown()) {
// this.updateElement();
}
this.endDateChanged.emit({ endDate: this.endDate() });
this.updateMonthsInView();
}
updateView() {
if (this.timePicker()) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.updateCalendars();
}
updateMonthsInView() {
const singleDatePicker = this.singleDatePicker();
const linkedCalendars = this.linkedCalendars();
if (this.endDate()) {
// if both dates are visible already, do nothing
if (!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 (!linkedCalendars && (this.endDate()?.month() !== this.startDate()?.month() ||
this.endDate()?.year() !== this.startDate()?.year())) {
this.rightCalendar.month = this.endDate()?.clone().date(2);
}
else {
this.rightCalendar.month = this.startDate()?.clone().date(2).add(1, 'month');
}
}
}
else {
if (this.leftCalendar.month.format('YYYY-MM') !== this.startDate()?.format('YYYY-MM') &&
this.rightCalendar.month.format('YYYY-MM') !== this.startDate()?.format('YYYY-MM')) {
this.leftCalendar.month = this.startDate()?.clone().date(2);
this.rightCalendar.month = this.startDate()?.clone().date(2).add(1, 'month');
}
}
if (this.maxDate() && linkedCalendars && !singleDatePicker && this.rightCalendar.month > this.maxDate()) {
this.rightCalendar.month = this.maxDate()?.clone().date(2);
this.leftCalendar.month = this.maxDate()?.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() {
const format = this._locale().displayFormat ? this._locale().displayFormat : this._locale().format;
const autoUpdateInput = this.autoUpdateInput();
if (!this.singleDatePicker() && 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 (autoUpdateInput) {
this.chosenLabel = this.startDate()?.format(format);
}
}
remove() {
this.isShown.set(false);
}
/**
* this should calculate the label
*/
calculateChosenLabel() {
if (!this._locale() || !this._locale().separator) {
this._buildLocale();
}
let customRange = true;
let i = 0;
if (this.rangesArray.length > 0) {
for (const range in this.ranges()) {
if (this.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 (this.startDate()?.format(format) === this.ranges()[range][0].format(format)
&& this.endDate()?.format(format) === this.ranges()[range][1].format(format)) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
else {
// ignore times when comparing dates if time picker is not enabled
if (this.startDate()?.format('YYYY-MM-DD') === this.ranges()[range][0].format('YYYY-MM-DD')
&& this.endDate()?.format('YYYY-MM-DD') === this.ranges()[range][1].format('YYYY-MM-DD')) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
i++;
}
}
if (customRange) {
if (this.showCustomRangeLabel()) {
this.chosenRange = this._locale().customRangeLabel;
}
else {
this.chosenRange = null;
}
// if custom label: show calendar
this.showCalInRanges = true;
}
}
this.updateElement();
}
clickApply(e) {
if (this.inline)
this.applyBtnDisabled.set(true);
if (!this.singleDatePicker() && this.startDate() && !this.endDate()) {
this.endDate.set(this._getDateWithTime(this.startDate(), SideEnum.right));
this.calculateChosenLabel();
}
if (this.startDate() && this.endDate()) {
// get if there are invalid date between range
let date = this.startDate()?.clone();
while (date?.isBefore(this.endDate())) {
if (this.isInvalidDate()(date)) {
this.endDate.set(date.subtract(1, 'days'));
this.calculateChosenLabel();
break;
}
date = date.add(1, 'days');
}
}
if (this.chosenLabel) {
this.chosenDate.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.set(this._old.start);
this.endDate.set(this._old.end);
if (this.inline) {
this.updateView();
}
this.cancelClicked.emit();
this.hide();
this.clearIncompleteDateSelection();
}
/**
* called when month is changed
* @param object get month value in $event.target.value / side left or right
*/
monthChanged(object) {
const { $event, side } = object;
const year = this.calendarVariables[side].dropdowns.currentYear;
const month = parseInt($event.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
/**
* called when year is changed
* @param object get year value in $event.target.value / side left or right
*/
yearChanged(object) {
const { $event, side } = object;
const month = this.calendarVariables[side].dropdowns.currentMonth;
const year = parseInt($event.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
/**
* called when time is changed
* @param object time $event / side left or right
*/
timeChanged(object) {
const { $event, side } = object;
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 = this.startDate()?.clone();
start = start?.hour(hour);
start = start?.minute(minute);
start = start?.second(second);
this.setStartDate(start);
this.setEndDate(this.endDate()?.clone());
if (this.singleDatePicker()) {
this.endDate.set(this.startDate()?.clone());
}
else if (this.endDate() && this.endDate()?.format('YYYY-MM-DD') === start?.format('YYYY-MM-DD') && this.endDate()?.isBefore(start)) {
this.setEndDate(start?.clone());
}
else if (!this.endDate() && 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()) {
this.setStartDate(this.startDate()?.clone());
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();
}
this.applyBtnDisabled.set(false);
}
/**
* 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.minDate()) {
if (year < this.minDate().year() || (year === this.minDate().year() && month < this.minDate().month())) {
month = this.minDate().month();
year = this.minDate().year();
}
}
if (this.maxDate()) {
if (year > this.maxDate().year() || (year === this.maxDate().year() && month > this.maxDate().month())) {
month = this.maxDate().month();
year = this.maxDate().year();
}
}
this.calendarVariables[side].dropdowns.currentYear = year;
this.calendarVariables[side].dropdowns.currentMonth = month;
if (isLeft) {
this.leftCalendar.month = 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 object previous $event / side left or right calendar
*/
clickPrev(object) {
const { $event, side } = object;
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 object next $event / side left or right calendar
*/
clickNext(object) {
const { $event, side } = object;
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 object get value by $event.target.value / side left or right / row or col position of the current date clicked
*/
hoverDate(object) {
const { $event, side, row, col } = object;
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) {
$event.target.setAttribute('title', tooltip);
}
}
/**
* When selecting a date
* @param object get value by $event.target.value / side left or right / row or col position of the current date clicked
*/
clickDate(object) {
const { $event, side, row, col } = object;
if ($event.target.tagName === 'TD') {
if (!$event.target.classList.contains('available'))
return;
}
else if ($event.target.tagName === 'SPAN') {
if (!$event.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];
const customRangeDirection = this.customRangeDirection();
const autoApply = this.autoApply();
if ((this.endDate() || (date.isBefore(this.startDate(), 'day') && !customRangeDirection)) && !this.lockStartDate()) { // picking start
this.applyBtnDisabled.set(true);
if (this.timePicker()) {
date = this._getDateWithTime(date, SideEnum.left);
}
this.endDate.set(null);
this.setStartDate(date.clone());
}
else if (!this.endDate() && date.isBefore(this.startDate()) && !customRangeDirection) {
// special case: clicking the same date for start/end,
// but the time of the end date is before the start date
this.setEndDate(this.startDate()?.clone());
}
else { // picking end
this.applyBtnDisabled.set(false);
if (this.timePicker()) {
date = this._getDateWithTime(date, SideEnum.right);
}
if (date.isBefore(this.startDate(), 'day') === true && customRangeDirection) {
this.setEndDate(this.startDate());
this.setStartDate(date.clone());
}
else {
this.setEndDate(date.clone());
}
if (autoApply) {
this.calculateChosenLabel();
}
}
if (this.singleDatePicker()) {
this.applyBtnDisabled.set(false);
this.setEndDate(this.startDate());
this.updateElement();
}
this.updateView();
if (autoApply && this.startDate() && this.endDate()) {
this.clickApply();
}
// This is to cancel the blur event handler if the mouse was in one of the inputs
$event.stopPropagation();
}
/**
* Click on the custom range
* @param object $event / label
*/
clickRange(object) {
const { $event, label } = object;
this.chosenRange = label;
if (label === this._locale().customRangeLabel) {
this.isShown.set(true); // show calendars
this.showCalInRanges = true;
// disable apply button after selecting custom range
this.applyBtnDisabled.set(true);
}
else {
const dates = this.ranges()[label];
this.startDate.set(dates[0].clone());
this.endDate.set(dates[1].clone());
if (this.showRangeLabelOnInput() && label !== this._locale().customRangeLabel) {
this.chosenLabel = label;
}
else {
this.calculateChosenLabel();
}
this.showCalInRanges = (!this.rangesArray.length) || this.alwaysShowCalendars();
const timePicker = this.timePicker();
if (!timePicker) {
this.startDate.set(this.startDate()?.startOf('day'));
this.endDate.set(this.endDate()?.endOf('day'));
}
const alwaysShowCalendars = this.alwaysShowCalendars();
if (!alwaysShowCalendars) {
this.isShown.set(false); // hide calendars
}
this.rangeClicked.emit({ label: label, dates: dates });
if (!this.keepCalendarOpeningWithRange() || this.autoApply()) {
this.clickApply();
}
else {
if (!alwaysShowCalendars) {
return this.clickApply();
}
if (this.maxDate() && this.maxDate()?.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 (timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
// enable apply button after selecting a range
this.applyBtnDisabled.set(false);
}
}
}
show(e) {
if (this.isShown())
return;
this._old.start = this.startDate()?.clone();
this._old.end = this.endDate()?.clone();
this.isShown.set(true);
this.applyBtnDisabled.set(true);
this.updateView();
}
hide(e) {
if (!this.isShown())
return;
// incomplete date selection, revert to last values
if (!this.endDate()) {
if (this._old.start)
this.startDate.set(this._old.start.clone());
if (this._old.end)
this.endDate.set(this._old.end.clone());
this.clearIncompleteDateSelection();
}
// if a new date range was selected, invoke the user callback function
if (!this.startDate()?.isSame(this._old.start) || !this.endDate()?.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.set(false);
this.applyBtnDisabled.set(true);
}
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];
}
}
}
/**
* clear the daterange picker
*/
clickClear($event) {
const start = this.timePicker24HourInterval()[0];
const end = this.timePicker24HourInterval()[1];
this.startDate.set(this.timePicker24Hour() && start !== 0 ? dayjs().startOf('day').add(start, 'hours') : dayjs().startOf('day'));
this.endDate.set(this.timePicker24Hour() && end !== 23 ? dayjs().startOf('day').add(end, 'hours') : dayjs().endOf('day'));
this.chosenDate.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.minDate()) {
return false;
}
return date.isBefore(this.minDate());
});
const areBothAfter = rangeMarkers.every((date) => {
if (!this.maxDate()) {
return false;
}
return date.isAfter(this.maxDate());
});
return (areBothBefore || areBothAfter);
}
/**
*
* @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() {
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 = [];
const emptyWeekRowClass = this.emptyWeekRowClass();
if (emptyWeekRowClass &&
Array.from(Array(7).keys()).some((i) => calendar[row][i].month() !== this.calendarVariables[side].month)) {
rowClasses.push(emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];
// empty week row class
const emptyWeekColumnClass = this.emptyWeekColumnClass();
if (emptyWeekColumnClass) {
if (calendar[row][col].month() !== this.calendarVariables[side].month) {
classes.push(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
const lastDayOfPreviousMonthClass = this.lastDayOfPreviousMonthClass();
if (lastDayOfPreviousMonthClass && (calendar[row][col].month() < calendar[1][1].month() ||
calendar[1][1].month() === 0) && calendar[row][col].date() === this.calendarVariables[side].daysInLastMonth) {
classes.push(lastDayOfPreviousMonthClass);
}
// mark the first day of the next month in this calendar
const firstDayOfNextMonthClass = this.firstDayOfNextMonthClass();
if (firstDayOfNextMonthClass && (calendar[row][col].month() > calendar[1][1].month() ||
calendar[row][col].month() === 0) && calendar[row][col].date() === 1) {
classes.push(firstDayOfNextMonthClass);
}
}
// mark the first day of the current month with a custom class
const firstMonthDayClass = this.firstMonthDayClass();
if (firstMonthDayClass && calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(firstMonthDayClass);
}
// mark the last day of the current month with a custom class
const lastMonthDayClass = this.lastMonthDayClass();
if (lastMonthDayClass && calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(lastMonthDayClass);
}
// don't allow selection of dates before the minimum date
if (this.minDate() && calendar[row][col].isBefore(this.minDate(), '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(' ');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgxDaterangepickerBootstrapComponent, isStandalone: true, selector: "ngx-daterangepicker-bootstrap", inputs: { startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showISOWeekNumbers: { classPropertyName: "showISOWeekNumbers", publicName: "showISOWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, autoUpdateInput: { classPropertyName: "autoUpdateInput", publicName: "autoUpdateInput", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, maxSpan: { classPropertyName: "maxSpan", publicName: "maxSpan", isSignal: true, isRequired: false, transformFunction: null }, lockStartDate: { classPropertyName: "lockStartDate", publicName: "lockStartDate", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, timePicker24HourInterval: { classPropertyName: "timePicker24HourInterval", publicName: "timePicker24HourInterval", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, firstMonthDayClass: { classPropertyName: "firstMonthDayClass", publicName: "firstMonthDayClass", isSignal: true, isRequired: false, transformFunction: null }, lastMonthDayClass: { classPropertyName: "lastMonthDayClass", publicName: "lastMonthDayClass", isSignal: true, isRequired: false, transformFunction: null }, emptyWeekRowClass: { classPropertyName: "emptyWeekRowClass", publicName: "emptyWeekRowClass", isSignal: true, isRequired: false, transformFunction: null }, emptyWeekColumnClass: { classPropertyName: "emptyWeekColumnClass", publicName: "emptyWeekColumnClass", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfNextMonthClass: { classPropertyName: "firstDayOfNextMonthClass", publicName: "firstDayOfNextMonthClass", isSignal: true, isRequired: false, transformFunction: null }, lastDayOfPreviousMonthClass: { classPropertyName: "lastDayOfPreviousMonthClass", publicName: "lastDayOfPreviousMonthClass", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, keepCalendarOpeningWithRange: { classPropertyName: "keepCalendarOpeningWithRange", publicName: "keepCalendarOpeningWithRange", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, customRangeDirection: { classPropertyName: "customRangeDirection", publicName: "customRangeDirection", isSignal: true, isRequired: false, transformFunction: null }, drops: { classPropertyName: "drops", publicName: "drops", isSignal: true, isRequired: false, transformFunction: null }, opens: { classPropertyName: "opens", publicName: "opens", isSignal: true, isRequired: false, transformFunction: null }, closeOnAutoApply: { classPropertyName: "closeOnAutoApply", publicName: "closeOnAutoApply", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, isInvalidDate: { classPropertyName: "isInvalidDate", publicName: "isInvalidDate", isSignal: true, isRequired: false, transformFunction: null }, isCustomDate: { classPropertyName: "isCustomDate", publicName: "isCustomDate", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDate: { classPropertyName: "isTooltipDate", publicName: "isTooltipDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", locale: "localeChange", chosenDate: "chosenDate", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated", startDateChanged: "startDateChanged", endDateChanged: "endDateChanged", cancelClicked: "cancelClicked", clearClicked: "clearClicked" }, host: { listeners: { "click": "handleInternalClick($event)" } }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #pickerContainer\r\n class='card daterangepicker'\r\n [class]=\"drops() + ' ' + opens()\"\r\n [ngClass]=\"{\r\n 'show-ranges': rangesArray.length,\r\n 'shown': isShown() || inline,\r\n 'hidden': !isShown() && !inline,\r\n 'double': !singleDatePicker() && showCalInRanges,\r\n 'inline': inline,\r\n 'ltr': _locale().direction === 'ltr',\r\n 'rtl': this._locale().direction === 'rtl'\r\n }\">\r\n\r\n <div class=\"card-body p-2\">\r\n <ranges\r\n [rangesArray]=\"rangesArray\"\r\n [chosenRange]=\"chosenRange\"\r\n [locale]=\"_locale()\"\r\n [ranges]=\"ranges()\"\r\n [minDate]=\"minDate()\"\r\n [maxDate]=\"maxDate()\"\r\n (rangeEvent)='clickRange($event)'\r\n />\r\n <calendar\r\n [showCalInRanges]=\"showCalInRanges\"\r\n [singleDatePicker]=\"singleDatePicker()\"\r\n [calendarVariables]=\"calendarVariables\"\r\n [showWeekNumbers]=\"showWeekNumbers()\"\r\n [showISOWeekNumbers]=\"showISOWeekNumbers()\"\r\n [linkedCalendars]=\"linkedCalendars()\"\r\n [showDropdowns]=\"showDropdowns()\"\r\n [locale]=\"_locale()\"\r\n [timePicker]=\"timePicker()\"\r\n [startDate]=\"startDate()\"\r\n [timepickerVariables]=\"timepickerVariables\"\r\n [timePickerSeconds]=\"timePickerSeconds()\"\r\n [timePicker24Hour]=\"timePicker24Hour()\"\r\n (prevEvent)='clickPrev($event)'\r\n (nextEvent)='clickNext($event)'\r\n (monthChangedEvent)='monthChanged($event)'\r\n (yearChangedEvent)='yearChanged($event)'\r\n (dateEvent)='clickDate($event)'\r\n (hoverDateEvent)='hoverDate($event)'\r\n (timeChangedEvent)='timeChanged($event)'\r\n />\r\n </div>\r\n <actions\r\n [autoApply]=\"autoApply()\"\r\n [rangesArray]=\"rangesArray\"\r\n [showCalInRanges]=\"showCalInRanges\"\r\n [singleDatePicker]=\"singleDatePicker()\"\r\n [chosenLabel]=\"chosenLabel\"\r\n [applyBtnDisabled]=\"applyBtnDisabled()\"\r\n [locale]=\"_locale()\"\r\n [showCancel]=\"showCancel()\"\r\n [showClearButton]=\"showClearButton()\"\r\n (applyEvent)='clickApply($event)'\r\n (cancelEvent)='clickCancel($event)'\r\n (clearEvent)='clickClear($event)'\r\n />\r\n</div>\r\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;-moz-user-select:none;-ms-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;-moz-user-select:none;-ms-user-select:none;user-select:none}.daterangepicker.hidden .calendar{display:none}.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: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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: RangesComponent, selector: "ranges", inputs: ["rangesArray", "chosenRange", "locale", "ranges", "minDate", "maxDate"], outputs: ["rangeEvent"] }, { kind: "component", type: CalendarComponent, selector: "calendar", inputs: ["showCalInRanges", "singleDatePicker", "calendarVariables", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "showDropdowns", "locale", "timePicker", "startDate", "timepickerVariables", "timePickerSeconds", "timePicker24Hour"], outputs: ["prevEvent", "nextEvent", "monthChangedEvent", "yearChangedEvent", "dateEvent", "hoverDateEvent", "timeChangedEvent"] }, { kind: "component", type: ActionsComponent, selector: "actions", inputs: ["rangesArray", "autoApply", "showCalInRanges", "singleDatePicker", "chosenLabel", "applyBtnDisabled", "locale", "showCancel", "showClearButton"], outputs: ["applyEvent", "cancelEvent", "clearEvent"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-daterangepicker-bootstrap', imports: [
NgClass,
FormsModule,
RangesComponent,
CalendarComponent,
ActionsComponent,
], host: {
'(click)': 'handleInternalClick($event)'
}, encapsulation: ViewEncapsulation.None, template: "<div #pickerContainer\r\n class='card daterangepicker'\r\n [class]=\"drops() + ' ' + opens()\"\r\n [ngClass]=\"{\r\n 'show-ranges': rangesArray.length,\r\n 'shown': isShown() || inline,\r\n 'hidden': !isShown() && !inline,\r\n 'double': !singleDatePicker() && showCalInRanges,\r\n 'inline': inline,\r\n 'ltr': _locale().direction === 'ltr',\r\n 'rtl': this._locale().direction === 'rtl'\r\n }\">\r\n\r\n <div class=\"card-body p-2\">\r\n <ranges\r\n [rangesArray]=\"rangesArray\"\r\n [chosenRange]=\"chosenRange\"\r\n [locale]=\"_locale()\"\r\n [ranges]=\"ranges()\"\r\n [minDate]=\"minDate()\"\r\n [maxDate]=\"maxDate()\"\r\n (rangeEvent)='clickRange($event)'\r\n />\r\n <calendar\r\n [showCalInRanges]=\"showCalInRanges\"\r\n [singleDatePicker]=\"singleDatePicker()\"\r\n [calendarVariables]=\"calendarVariables\"\r\n [showWeekNumbers]=\"showWeekNumbers()\"\r\n [showISOWeekNumbers]=\"showISOWeekNumbers()\"\r\n [linkedCalendars]=\"linkedCalendars()\"\r\n [showDropdowns]=\"showDropdowns()\"\r\n [locale]=\"_locale()\"\r\n [timePicker]=\"timePicker()\"\r\n [startDate]=\"startDate()\"\r\n [timepickerVariables]=\"timepickerVariables\"\r\n [timePickerSeconds]=\"timePickerSeconds()\"\r\n [timePicker24Hour]=\"timePicker24Hour()\"\r\n (prevEvent)='clickPrev($event)'\r\n (nextEvent)='clickNext($event)'\r\n (monthChangedEvent)='monthChanged($event)'\r\n (yearChangedEvent)='yearChanged($event)'\r\n (dateEvent)='clickDate($event)'\r\n (hoverDateEvent)='hoverDate($event)'\r\n (timeChangedEvent)='timeChanged($event)'\r\n />\r\n </div>\r\n <actions\r\n [autoApply]=\"autoApply()\"\r\n [rangesArray]=\"rangesArray\"\r\n [showCalInRanges]=\"showCalInRanges\"\r\n [singleDatePicker]=\"singleDatePicker()\"\r\n [chosenLabel]=\"chosenLabel\"\r\n [applyBtnDisabled]=\"applyBtnDisabled()\"\r\n [locale]=\"_locale()\"\r\n [showCancel]=\"showCancel()\"\r\n [showClearButton]=\"showClearButton()\"\r\n (applyEvent)='clickApply($event)'\r\n (cancelEvent)='clickCancel($event)'\r\n (clearEvent)='clickClear($event)'\r\n />\r\n</div>\r\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;-moz-user-select:none;-ms-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;-moz-user-select:none;-ms-user-select:none;user-select:none}.daterangepicker.hidden .calendar{display:none}.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: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: () => [], propDecorators: { startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], showDropdowns: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdowns", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showISOWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showISOWeekNumbers", required: false }] }], linkedCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedCalendars", required: false }] }], autoUpdateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpdateInput", required: false }] }], alwaysShowCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowCalendars", required: false }] }], maxSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSpan", required: false }] }], lockStartDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockStartDate", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], timePicker24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24Hour", required: false }] }], timePickerIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerIncrement", required: false }] }], timePicker24HourInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24HourInterval", required: false }] }], timePickerSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerSeconds", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], firstMonthDayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstMonthDayClass", required: false }] }], lastMonthDayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastMonthDayClass", required: false }] }], emptyWeekRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyWeekRowClass", required: false }] }], emptyWeekColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyWeekColumnClass", required: false }] }], firstDayOfNextMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfNextMonthClass", required: false }] }], lastDayOfPreviousMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastDayOfPreviousMonthClass", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], keepCalendarOpeningWithRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepCalendarOpeningWithRange", required: false }] }], showRangeLabelOnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabelOnInput", required: false }] }], customRangeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRangeDirection", required: false }] }], drops: [{ type: i0.Input, args: [{ isSignal: true, alias: "drops", required: false }] }], opens: [{ type: i0.Input, args: [{ isSignal: true, alias: "opens", required: false }] }], closeOnAutoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnAutoApply", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }, { type: i0.Output, args: ["localeChange"] }], ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], isInvalidDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalidDate", required: false }] }], isCustomDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCustomDate", required: false }] }], isTooltipDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipDate", required: false }] }], pickerContainer: [{ type: i0.ViewChild, args: ['pickerContainer', { isSignal: true }] }], chosenDate: [{ type: i0.Output, args: ["chosenDate"] }], rangeClicked: [{ type: i0.Output, args: ["rangeClicked"] }], datesUpdated: [{ type: i0.Output, args: ["datesUpdated"] }], startDateChanged: [{ type: i0.Output, args: ["startDateChanged"] }], endDateChanged: [{ type: i0.Output, args: ["endDateChanged"] }], cancelClicked: [{ type: i0.Output, args: ["cancelClicked"] }], clearClicked: [{ type: i0.Output, args: ["clearClicked"] }] } });
class NgxDaterangepickerBootstrapDirective {
viewContainerRef = inject(ViewContainerRef);
injector = inject(Injector);
applicationRef = inject(ApplicationRef);
elementRef = inject(ElementRef);
_renderer = inject(Renderer2);
_localeService = inject(NgxDaterangepickerLocaleService);
$event;
daterangepicker;
daterangepickerRef;
daterangepickerElement;
firstMonthDayClass;
_onChange = Function.prototype;
_onTouched = Function.prototype;
_disabled;
_value;
_resizeObserver;
minDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
maxDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
autoApply = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "autoApply" }] : /* istanbul ignore next */ []));
alwaysShowCalendars = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "alwaysShowCalendars" }] : /* istanbul ignore next */ []));
showCustomRangeLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "showCustomRangeLabel" }] : /* istanbul ignore next */ []));
linkedCalendars = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "linkedCalendars" }] : /* istanbul ignore next */ []));
dateLimit = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dateLimit" }] : /* istanbul ignore next */ []));
singleDatePicker = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "singleDatePicker" }] : /* istanbul ignore next */ []));
showWeekNumbers = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : /* istanbul ignore next */ []));
showISOWeekNumbers = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showISOWeekNumbers" }] : /* istanbul ignore next */ []));
showDropdowns = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showDropdowns" }] : /* istanbul ignore next */ []));
isInvalidDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "isInvalidDate" }] : /* istanbul ignore next */ []));
isCustomDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "isCustomDate" }] : /* istanbul ignore next */ []));
isTooltipDate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "isTooltipDate" }] : /* istanbul ignore next */ []));
showClearButton = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
customRangeDirection = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "customRangeDirection" }] : /* istanbul ignore next */ []));
ranges = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "ranges" }] : /* istanbul ignore next */ []));
opens = model('right', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "opens" }] : /* istanbul ignore next */ []));
drops = model('down', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "drops" }] : /* istanbul ignore next */ []));
lastMonthDayClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lastMonthDayClass" }] : /* istanbul ignore next */ []));
emptyWeekRowClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyWeekRowClass" }] : /* istanbul ignore next */ []));
emptyWeekColumnClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyWeekColumnClass" }] : /* istanbul ignore next */ []));
firstDayOfNextMonthClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "firstDayOfNextMonthClass" }] : /* istanbul ignore next */ []));
lastDayOfPreviousMonthClass = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lastDayOfPreviousMonthClass" }] : /* istanbul ignore next */ []));
keepCalendarOpeningWithRange = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "keepCalendarOpeningWithRange" }] : /* istanbul ignore next */ []));
showRangeLabelOnInput = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showRangeLabelOnInput" }] : /* istanbul ignore next */ []));
showCancel = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
lockStartDate = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "lockStartDate" }] : /* istanbul ignore next */ []));
closeOnAutoApply = input(true, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "closeOnAutoApply" }] : /* istanbul ignore next */ []));
timePicker = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker" }] : /* istanbul ignore next */ []));
timePicker24Hour = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker24Hour" }] : /* istanbul ignore next */ []));
timePickerIncrement = input(1, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePickerIncrement" }] : /* istanbul ignore next */ []));
timePicker24HourInterval = input([0, 23], /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePicker24HourInterval" }] : /* istanbul ignore next */ []));
timePickerSeconds = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "timePickerSeconds" }] : /* istanbul ignore next */ []));
formlyCustomField = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "formlyCustomField" }] : /* istanbul ignore next */ [])); // if you use ngx-formly and create custom field this library
startKey = model('startDate', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "startKey" }] : /* istanbul ignore next */ []));
endKey = model('endDate', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "endKey" }] : /* istanbul ignore next */ []));
locale = model({}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
_startKey = computed(() => this.startKey() !== null ? this.startKey() : 'startDate', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_startKey" }] : /* istanbul ignore next */ []));
_endKey = computed(() => this.endKey() !== null ? this.endKey() : 'endDate', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_endKey" }] : /* istanbul ignore next */ []));
_locale = computed(() => this.locale() !== null ? { ...this._localeService.config, ...this.locale() } : {}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
change = output();
rangeClicked = output();
datesUpdated = output();
startDateChanged = output();
endDateChanged = output();
clearClicked = output();
get disabled() {
return this._disabled;
}
get value() {
return this._value || null;
}
set value(val) {
this._value = val;
this._onChange(val);
}
rangeClickedSubs;
datesUpdatedSubs;
startDateChangedSubs;
endDateChangedSubs;
clearClickedSubs;
chosenDateSubs;
constructor() {
this.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
effect(() => {
this.daterangepicker.updateLocale(this._locale());
});
}
ngOnInit() {
this.daterangepickerRef?.setInput('autoApply', this.autoApply());
this.daterangepickerRef?.setInput('alwaysShowCalendars', this.alwaysShowCalendars());
this.daterangepickerRef?.setInput('showCustomRangeLabel', this.showCustomRangeLabel());
this.daterangepickerRef?.setInput('linkedCalendars', this.linkedCalendars());
this.daterangepickerRef?.setInput('dateLimit', this.dateLimit());
this.daterangepickerRef?.setInput('singleDatePicker', this.singleDatePicker());
this.daterangepickerRef?.setInput('showWeekNumbers', this.showWeekNumbers());
this.daterangepickerRef?.setInput('showISOWeekNumbers', this.showISOWeekNumbers());
this.daterangepickerRef?.setInput('showDropdowns', this.showDropdowns());
this.daterangepickerRef?.setInput('showClearButton', this.showClearButton());
this.daterangepickerRef?.setInput('customRangeDirection', this.customRangeDirection());
this.daterangepickerRef?.setInput('locale', this.locale());
this.daterangepickerRef?.setInput('ranges', this.ranges());
this.daterangepickerRef?.setInput('opens', this.opens());
this.daterangepickerRef?.setInput('drops', this.drops());
this.daterangepickerRef?.setInput('lastMonthDayClass', this.lastMonthDayClass());
this.daterangepickerRef?.setInput('emptyWeekRowClass', this.emptyWeekRowClass());
this.daterangepickerRef?.setInput('emptyWeekColumnClass', this.emptyWeekColumnClass());
this.daterangepickerRef?.setInput('firstDayOfNextMonthClass', this.firstDayOfNextMonthClass());
this.daterangepickerRef?.setInput('lastDayOfPreviousMonthClass', this.lastDayOfPreviousMonthClass());
this.daterangepickerRef?.setInput('keepCalendarOpeningWithRange', this.keepCalendarOpeningWithRange());
this.daterangepickerRef?.setInput('showRangeLabelOnInput', this.showRangeLabelOnInput());
this.daterangepickerRef?.setInput('showCancel', this.showCancel());
this.daterangepickerRef?.setInput('lockStartDate', this.lockStartDate());
this.daterangepickerRef?.setInput('closeOnAutoApply', this.closeOnAutoApply());
this.daterangepickerRef?.setInput('timePicker', this.timePicker());
this.daterangepickerRef?.setInput('timePicker24Hour', this.timePicker24Hour());
this.daterangepickerRef?.setInput('timePicker24HourInterval', this.timePicker24HourInterval());
this.daterangepickerRef?.setInput('timePickerIncrement', this.timePickerIncrement());
this.daterangepickerRef?.setInput('timePickerSeconds', this.timePickerSeconds());
this.daterangepickerRef?.setInput('firstMonthDayClass', this.firstMonthDayClass);
if (this.minDate() !== undefined)
this.daterangepickerRef?.setInput('minDate', this.minDate());
if (this.maxDate() !== undefined)
this.daterangepickerRef?.setInput('maxDate', this.maxDate());
if (this.isInvalidDate() !== undefined)
this.daterangepickerRef?.setInput('isInvalidDate', this.isInvalidDate());
if (this.isCustomDate() !== undefined)
this.daterangepickerRef?.setInput('isCustomDate', this.isCustomDate());
if (this.isTooltipDate() !== undefined)
this.daterangepickerRef?.setInput('isTooltipDate', this.isTooltipDate());
this.rangeClickedSubs = this.daterangepicker.rangeClicked.subscribe((range) => this.rangeClicked.emit(range));
this.datesUpdatedSubs = this.daterangepicker.datesUpdated.subscribe((range) => this.datesUpdated.emit(range));
this.startDateChangedSubs = this.daterangepicker.startDateChanged.subscribe((itemChanged) => this.startDateChanged.emit(itemChanged));
this.endDateChangedSubs = this.daterangepicker.endDateChanged.subscribe((itemChanged) => this.endDateChanged.emit(itemChanged));
this.clearClickedSubs = this.daterangepicker.clearClicked.subscribe(() => this.clearClicked.emit());
this.chosenDateSubs = this.daterangepicker.chosenDate.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.elementRef.nativeElement.value = change.chosenLabel;
}
}
});
this.pickerResizeObserver();
}
ngOnDestroy() {
this._resizeObserver?.unobserve(this.daterangepicker.pickerContainer().nativeElement);
if (this.daterangepickerElement !== null)
document.body.removeChild(this.daterangepickerElement);
this.applicationRef.detachView(this.daterangepickerRef.hostView);
this.rangeClickedSubs?.unsubscribe();
this.datesUpdatedSubs?.unsubscribe();
this.startDateChangedSubs?.unsubscribe();
this.endDateChangedSubs?.unsubscribe();
this.clearClickedSubs?.unsubscribe();
this.chosenDateSubs?.unsubscribe();
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.
}
ngAfterViewChecked() {
if (this.daterangepicker.isShown())
this.setPosition();
}
onWindowResize(event) {
if (this.daterangepicker.isShown())
this.setPosition();
}
open(event) {
if (this.disabled)
return;
this.daterangepicker.show(event);
if (this.daterangepicker.isShown())
this.setPosition();
}
hide(event) {
this.daterangepicker.hide(event);
}
onBlur() {
this._onTouched();
}
toggle(event) {
this.daterangepicker.isShown() ? this.hide(event) : this.open(event);
}
clear() {
this.daterangepicker.clickClear();
}
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.elementRef.nativeElement.value = this.daterangepicker.chosenLabel;
}
}
else {
this.daterangepicker.clickClear();
}
}
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.elementRef.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(event) {
if (event.target.tagName.toLowerCase() !== 'input')
return;
if (!event.target.value.length)
return;
const dateString = event.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(event.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 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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: NgxDaterangepickerBootstrapDirective, isStandalone: true, selector: "input[ngxDaterangepickerBootstrap]", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showISOWeekNumbers: { classPropertyName: "showISOWeekNumbers", publicName: "showISOWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, isInvalidDate: { classPropertyName: "isInvalidDate", publicName: "isInvalidDate", isSignal: true, isRequired: false, transformFunction: null }, isCustomDate: { classPropertyName: "isCustomDate", publicName: "isCustomDate", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDate: { classPropertyName: "isTooltipDate", publicName: "isTooltipDate", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, customRangeDirection: { classPropertyName: "customRangeDirection", publicName: "customRangeDirection", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, opens: { classPropertyName: "opens", publicName: "opens", isSignal: true, isRequired: false, transformFunction: null }, drops: { classPropertyName: "drops", publicName: "drops", isSignal: true, isRequired: false, transformFunction: null }, lastMonthDayClass: { classPropertyName: "lastMonthDayClass", publicName: "lastMonthDayClass", isSignal: true, isRequired: false, transformFunction: null }, emptyWeekRowClass: { classPropertyName: "emptyWeekRowClass", publicName: "emptyWeekRowClass", isSignal: true, isRequired: false, transformFunction: null }, emptyWeekColumnClass: { classPropertyName: "emptyWeekColumnClass", publicName: "emptyWeekColumnClass", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfNextMonthClass: { classPropertyName: "firstDayOfNextMonthClass", publicName: "firstDayOfNextMonthClass", isSignal: true, isRequired: false, transformFunction: null }, lastDayOfPreviousMonthClass: { classPropertyName: "lastDayOfPreviousMonthClass", publicName: "lastDayOfPreviousMonthClass", isSignal: true, isRequired: false, transformFunction: null }, keepCalendarOpeningWithRange: { classPropertyName: "keepCalendarOpeningWithRange", publicName: "keepCalendarOpeningWithRange", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, lockStartDate: { classPropertyName: "lockStartDate", publicName: "lockStartDate", isSignal: true, isRequired: false, transformFunction: null }, closeOnAutoApply: { classPropertyName: "closeOnAutoApply", publicName: "closeOnAutoApply", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, timePicker24HourInterval: { classPropertyName: "timePicker24HourInterval", publicName: "timePicker24HourInterval", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, formlyCustomField: { classPropertyName: "formlyCustomField", publicName: "formlyCustomField", isSignal: true, isRequired: false, transformFunction: null }, startKey: { classPropertyName: "startKey", publicName: "startKey", isSignal: true, isRequired: false, transformFunction: null }, endKey: { classPropertyName: "endKey", publicName: "endKey", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opens: "opensChange", drops: "dropsChange", startKey: "startKeyChange", endKey: "endKeyChange", locale: "localeChange", change: "change", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated", startDateChanged: "startDateChanged", endDateChanged: "endDateChanged", clearClicked: "clearClicked" }, host: { listeners: { "click": "open()", "blur": "onBlur()", "keyup": "inputChanged($event)", "keyup.esc": "hide()", "window:resize": "onWindowResize($event)", "document:click": "outsideClick($event)" }, properties: { "disabled": "disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapDirective),
multi: true
}
], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[ngxDaterangepickerBootstrap]',
host: {
'[disabled]': 'disabled',
'(click)': 'open()',
'(blur)': 'onBlur()',
'(keyup)': 'inputChanged($event)',
'(keyup.esc)': 'hide()',
'(window:resize)': 'onWindowResize($event)',
'(document:click)': 'outsideClick($event)'
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxDaterangepickerBootstrapDirective),
multi: true
}
],
}]
}], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], alwaysShowCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowCalendars", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], linkedCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedCalendars", required: false }] }], dateLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLimit", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showISOWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showISOWeekNumbers", required: false }] }], showDropdowns: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdowns", required: false }] }], isInvalidDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalidDate", required: false }] }], isCustomDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCustomDate", required: false }] }], isTooltipDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipDate", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], customRangeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRangeDirection", required: false }] }], ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], opens: [{ type: i0.Input, args: [{ isSignal: true, alias: "opens", required: false }] }, { type: i0.Output, args: ["opensChange"] }], drops: [{ type: i0.Input, args: [{ isSignal: true, alias: "drops", required: false }] }, { type: i0.Output, args: ["dropsChange"] }], lastMonthDayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastMonthDayClass", required: false }] }], emptyWeekRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyWeekRowClass", required: false }] }], emptyWeekColumnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyWeekColumnClass", required: false }] }], firstDayOfNextMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfNextMonthClass", required: false }] }], lastDayOfPreviousMonthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastDayOfPreviousMonthClass", required: false }] }], keepCalendarOpeningWithRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepCalendarOpeningWithRange", required: false }] }], showRangeLabelOnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabelOnInput", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], lockStartDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockStartDate", required: false }] }], closeOnAutoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnAutoApply", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], timePicker24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24Hour", required: false }] }], timePickerIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerIncrement", required: false }] }], timePicker24HourInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24HourInterval", required: false }] }], timePickerSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerSeconds", required: false }] }], formlyCustomField: [{ type: i0.Input, args: [{ isSignal: true, alias: "formlyCustomField", required: false }] }], startKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "startKey", required: false }] }, { type: i0.Output, args: ["startKeyChange"] }], endKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "endKey", required: false }] }, { type: i0.Output, args: ["endKeyChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }, { type: i0.Output, args: ["localeChange"] }], change: [{ type: i0.Output, args: ["change"] }], rangeClicked: [{ type: i0.Output, args: ["rangeClicked"] }], datesUpdated: [{ type: i0.Output, args: ["datesUpdated"] }], startDateChanged: [{ type: i0.Output, args: ["startDateChanged"] }], endDateChanged: [{ type: i0.Output, args: ["endDateChanged"] }], clearClicked: [{ type: i0.Output, args: ["clearClicked"] }] } });
class NgxDaterangepickerBootstrapModule {
static forRoot(config = {}) {
return {
ngModule: NgxDaterangepickerBootstrapModule,
providers: [
{ provide: LOCALE_CONFIG, useValue: config },
{ provide: NgxDaterangepickerLocaleService, useClass: NgxDaterangepickerLocaleService, deps: [LOCALE_CONFIG] }
]
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective], exports: [NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
NgxDaterangepickerBootstrapComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgxDaterangepickerBootstrapModule, decorators: [{
type: NgModule,
args: [{
declarations: [],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective
],
exports: [
NgxDaterangepickerBootstrapComponent,
NgxDaterangepickerBootstrapDirective
]
}]
}] });
function provideDaterangepickerLocale(config = {}) {
return makeEnvironmentProviders([
{ provide: LOCALE_CONFIG, useValue: config },
{ provide: NgxDaterangepickerLocaleService, useClass: NgxDaterangepickerLocaleService, deps: [LOCALE_CONFIG] }
]);
}
/*
* Public API Surface of ngx-daterangepicker-bootstrap
*/
/**
* Generated bundle index. Do not edit.
*/
export { DefaultLocaleConfig, LOCALE_CONFIG, NgxDaterangepickerBootstrapComponent, NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapModule, NgxDaterangepickerLocaleService, provideDaterangepickerLocale };
//# sourceMappingURL=ngx-daterangepicker-bootstrap.mjs.map