ngx-daterangepicker-bootstrap/fesm2022/ngx-daterangepicker-bootstrap.mjs.map

Date Range Picker - Angular 20 and Bootstrap 5

{"version":3,"file":"ngx-daterangepicker-bootstrap.mjs","sources":["../../../projects/ngx-daterangepicker-bootstrap/src/lib/utils/ngx-daterangepicker-locale.config.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/services/ngx-daterangepicker-locale.service.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/ranges/ranges.component.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/ranges/ranges.component.html","../../../projects/ngx-daterangepicker-bootstrap/src/lib/model/daterangepicker.model.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/calendar/calendar.component.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/calendar/calendar.component.html","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/actions/actions.component.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/actions/actions.component.html","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/daterangepicker/ngx-daterangepicker-bootstrap.component.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/components/daterangepicker/ngx-daterangepicker-bootstrap.component.html","../../../projects/ngx-daterangepicker-bootstrap/src/lib/directives/ngx-daterangepicker-bootstrap.directive.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/modules/ngx-daterangepicker-bootstrap.module.ts","../../../projects/ngx-daterangepicker-bootstrap/src/lib/utils/ngx-daterangepicker-locale.provider.ts","../../../projects/ngx-daterangepicker-bootstrap/src/public-api.ts","../../../projects/ngx-daterangepicker-bootstrap/src/ngx-daterangepicker-bootstrap.ts"],"sourcesContent":["import {InjectionToken} from '@angular/core';\r\nimport dayjs from 'dayjs';\r\nimport localeData from 'dayjs/plugin/localeData';\r\n\r\ndayjs.extend(localeData);\r\n\r\nexport const LOCALE_CONFIG = new InjectionToken<LocaleConfig>('daterangepicker.config');\r\n\r\n/**\r\n *  LocaleConfig Interface\r\n */\r\nexport interface LocaleConfig {\r\n  direction?: string;\r\n  separator?: string;\r\n  weekLabel?: string;\r\n  applyLabel?: string;\r\n  cancelLabel?: string;\r\n  clearLabel?: string;\r\n  customRangeLabel?: string;\r\n  daysOfWeek?: string[];\r\n  monthNames?: string[];\r\n  firstDay?: number;\r\n  format?: string;\r\n  displayFormat?: string;\r\n  startDate?: string;\r\n  endDate?: string;\r\n}\r\n\r\n/**\r\n *  DefaultLocaleConfig\r\n */\r\nexport const DefaultLocaleConfig: LocaleConfig = {\r\n  direction: 'ltr',\r\n  separator: ' - ',\r\n  weekLabel: 'W',\r\n  applyLabel: 'Apply',\r\n  cancelLabel: 'Cancel',\r\n  clearLabel: 'Clear',\r\n  customRangeLabel: 'Custom range',\r\n  daysOfWeek: dayjs.weekdaysMin(),\r\n  monthNames: dayjs.monthsShort(),\r\n  firstDay: dayjs.localeData().firstDayOfWeek()\r\n};\r\n","import {inject, Injectable} from '@angular/core';\r\nimport {DefaultLocaleConfig, LOCALE_CONFIG, LocaleConfig} from '../utils/ngx-daterangepicker-locale.config';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class NgxDaterangepickerLocaleService {\r\n\r\n  private _config = inject<LocaleConfig>(LOCALE_CONFIG);\r\n\r\n  get config() {\r\n    if (!this._config) {\r\n      return DefaultLocaleConfig;\r\n    }\r\n    return {...DefaultLocaleConfig, ...this._config};\r\n  }\r\n\r\n}\r\n","import {ChangeDetectionStrategy, Component, input, InputSignal, output, OutputEmitterRef} from '@angular/core';\r\nimport {NgClass} from '@angular/common';\r\nimport {Dayjs} from 'dayjs';\r\n\r\n@Component({\r\n  selector: 'ranges',\r\n  imports: [\r\n    NgClass\r\n  ],\r\n  templateUrl: './ranges.component.html',\r\n  styleUrl: './ranges.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class RangesComponent {\r\n\r\n  readonly rangesArray: InputSignal<Array<any> | undefined> = input<Array<any>>();\r\n  readonly chosenRange: InputSignal<any> = input<any>();\r\n  readonly locale: InputSignal<any> = input<any>();\r\n  readonly ranges: InputSignal<any> = input<any>();\r\n  readonly minDate: InputSignal<Dayjs | null | undefined> = input<Dayjs | null | undefined>();\r\n  readonly maxDate: InputSignal<Dayjs | null | undefined> = input<Dayjs | null | undefined>();\r\n  readonly rangeEvent: OutputEmitterRef<{ $event: MouseEvent, label: string }> = output();\r\n\r\n  clickRange($event: MouseEvent, label: string): void {\r\n    this.rangeEvent.emit({$event: $event, label: label})\r\n  }\r\n\r\n  /**\r\n   * Find out if the selected range should be disabled if it doesn't\r\n   * fit into minDate and maxDate limitations.\r\n   */\r\n  disableRange(range: any): boolean {\r\n    if (range === this.locale().customRangeLabel) {\r\n      return false;\r\n    }\r\n    const rangeMarkers: any = this.ranges()[range];\r\n    const areBothBefore: boolean = rangeMarkers.every((date: Dayjs): boolean => {\r\n      if (!this.minDate()) {\r\n        return false;\r\n      }\r\n      return date.isBefore(this.minDate());\r\n    });\r\n    const areBothAfter: boolean = rangeMarkers.every((date: Dayjs): boolean => {\r\n      if (!this.maxDate()) {\r\n        return false;\r\n      }\r\n      return date.isAfter(this.maxDate());\r\n    });\r\n    return (areBothBefore || areBothAfter);\r\n  }\r\n\r\n}\r\n","@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","import {Dayjs} from \"dayjs\";\r\n\r\nexport enum SideEnum {\r\n  left = 'left',\r\n  right = 'right'\r\n}\r\n\r\nexport interface DateRanges {\r\n  [index: string]: [Dayjs, Dayjs];\r\n}\r\n\r\nexport interface DateRange {\r\n  label: string;\r\n  dates: [Dayjs, Dayjs];\r\n}\r\n\r\nexport interface ChosenDate {\r\n  chosenLabel: string;\r\n  startDate: Dayjs;\r\n  endDate: Dayjs;\r\n}\r\n\r\nexport interface TimePeriod {\r\n  [index: string]: Dayjs;\r\n\r\n  startDate: Dayjs;\r\n  endDate: Dayjs;\r\n}\r\n\r\nexport interface StartDate {\r\n  startDate: Dayjs;\r\n}\r\n\r\nexport interface EndDate {\r\n  endDate: Dayjs;\r\n}\r\n\r\ninterface TimePickerVariables {\r\n  secondsLabel: string[];\r\n  selectedMinute: number;\r\n  selectedSecond: number;\r\n  hours: number[];\r\n  seconds: number[];\r\n  disabledHours: number[];\r\n  disabledMinutes: number[];\r\n  minutes: number[];\r\n  minutesLabel: string[];\r\n  selectedHour: number;\r\n  disabledSeconds: number[];\r\n  amDisabled?: boolean;\r\n  pmDisabled?: boolean;\r\n  ampmModel?: string;\r\n  selected: Dayjs;\r\n}\r\n\r\ninterface TimePickerVariablesHolder {\r\n  [index: string]: TimePickerVariables;\r\n}\r\n\r\ninterface CalendarRowClasses {\r\n  [index: number]: string;\r\n\r\n  classList: string;\r\n}\r\n\r\ninterface CalendarClasses {\r\n  [index: number]: CalendarRowClasses;\r\n}\r\n\r\ninterface Dropdowns {\r\n  inMaxYear: boolean;\r\n  yearArrays: number[];\r\n  maxYear: number;\r\n  minYear: number;\r\n  currentMonth: number;\r\n  inMinYear: boolean;\r\n  monthArrays: number[];\r\n  currentYear: number;\r\n}\r\n\r\ntype CalendarArrayWithProps<T> = T[] & { firstDay?: Dayjs; lastDay?: Dayjs };\r\n\r\ninterface CalendarVariables {\r\n  calRows: number[];\r\n  calCols: number[];\r\n  calendar: CalendarArrayWithProps<Dayjs[]>;\r\n  minDate: Dayjs;\r\n  year: number;\r\n  classes: CalendarClasses;\r\n  lastMonth: number;\r\n  minute: number;\r\n  second: number;\r\n  daysInMonth: number;\r\n  dayOfWeek: number;\r\n  month: number;\r\n  hour: number;\r\n  firstDay: Dayjs;\r\n  lastYear: number;\r\n  lastDay: Dayjs;\r\n  maxDate: Dayjs;\r\n  daysInLastMonth: number;\r\n  dropdowns?: Dropdowns;\r\n}\r\n\r\ninterface CalendarVariableHolder {\r\n  [index: string]: CalendarVariables;\r\n}\r\n\r\ninterface VisibleCalendar {\r\n  month: Dayjs;\r\n  calendar: CalendarArrayWithProps<Dayjs[]>;\r\n}\r\n","import {ChangeDetectionStrategy, Component, input, InputSignal, output, OutputEmitterRef} from '@angular/core';\r\nimport {NgClass} from '@angular/common';\r\nimport {FormsModule} from '@angular/forms';\r\nimport {SideEnum} from \"../../model/daterangepicker.model\";\r\n\r\n@Component({\r\n  selector: 'calendar',\r\n  imports: [\r\n    NgClass,\r\n    FormsModule\r\n  ],\r\n  templateUrl: './calendar.component.html',\r\n  styleUrl: './calendar.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class CalendarComponent {\r\n\r\n  protected readonly sideEnum: typeof SideEnum = SideEnum;\r\n\r\n  readonly showCalInRanges: InputSignal<any> = input<any>();\r\n  readonly singleDatePicker: InputSignal<any> = input<any>();\r\n  readonly calendarVariables: InputSignal<any> = input<any>();\r\n  readonly showWeekNumbers: InputSignal<any> = input<any>();\r\n  readonly showISOWeekNumbers: InputSignal<any> = input<any>();\r\n  readonly linkedCalendars: InputSignal<any> = input<any>();\r\n  readonly showDropdowns: InputSignal<any> = input<any>();\r\n  readonly locale: InputSignal<any> = input<any>();\r\n  readonly timePicker: InputSignal<any> = input<any>();\r\n  readonly startDate: InputSignal<any> = input<any>();\r\n  readonly timepickerVariables: InputSignal<any> = input<any>();\r\n  readonly timePickerSeconds: InputSignal<any> = input<any>();\r\n  readonly timePicker24Hour: InputSignal<any> = input<any>();\r\n  readonly prevEvent: OutputEmitterRef<{ $event: MouseEvent, side: SideEnum }> = output();\r\n  readonly nextEvent: OutputEmitterRef<{ $event: MouseEvent, side: SideEnum }> = output();\r\n  readonly monthChangedEvent: OutputEmitterRef<{ $event: Event, side: SideEnum }> = output();\r\n  readonly yearChangedEvent: OutputEmitterRef<{ $event: Event, side: SideEnum }> = output();\r\n  readonly dateEvent: OutputEmitterRef<{ $event: Event, side: SideEnum, row: number, col: number }> = output();\r\n  readonly hoverDateEvent: OutputEmitterRef<{ $event: Event, side: SideEnum, row: number, col: number }> = output();\r\n  readonly timeChangedEvent: OutputEmitterRef<{ $event: Event, side: SideEnum }> = output();\r\n\r\n  clickPrev($event: MouseEvent, side: SideEnum): void {\r\n    this.prevEvent.emit({$event: $event, side: side})\r\n  }\r\n\r\n  clickNext($event: MouseEvent, side: SideEnum): void {\r\n    this.nextEvent.emit({$event: $event, side: side})\r\n  }\r\n\r\n  monthChanged($event: Event, side: SideEnum): void {\r\n    this.monthChangedEvent.emit({$event: $event, side: side})\r\n  }\r\n\r\n  yearChanged($event: Event, side: SideEnum): void {\r\n    this.yearChangedEvent.emit({$event: $event, side: side})\r\n  }\r\n\r\n  clickDate($event: Event, side: SideEnum, row: number, col: number): void {\r\n    this.dateEvent.emit({$event: $event, side: side, row: row, col: col})\r\n  }\r\n\r\n  hoverDate($event: Event, side: SideEnum, row: number, col: number): void {\r\n    this.hoverDateEvent.emit({$event: $event, side: side, row: row, col: col})\r\n  }\r\n\r\n  timeChanged($event: Event, side: SideEnum): void {\r\n    this.timeChangedEvent.emit({$event: $event, side: side})\r\n  }\r\n\r\n}\r\n","@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","import {ChangeDetectionStrategy, Component, input, output, OutputEmitterRef} from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'actions',\r\n  imports: [],\r\n  templateUrl: './actions.component.html',\r\n  styleUrl: './actions.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ActionsComponent {\r\n\r\n  readonly rangesArray = input<Array<any>>([]);\r\n  readonly autoApply = input<any>();\r\n  readonly showCalInRanges = input<any>();\r\n  readonly singleDatePicker = input<any>();\r\n  readonly chosenLabel = input<any>();\r\n  readonly applyBtnDisabled = input<any>();\r\n  readonly locale = input<any>();\r\n  readonly showCancel = input<any>();\r\n  readonly showClearButton = input<any>();\r\n  readonly applyEvent: OutputEmitterRef<MouseEvent> = output();\r\n  readonly cancelEvent: OutputEmitterRef<MouseEvent> = output();\r\n  readonly clearEvent: OutputEmitterRef<MouseEvent> = output();\r\n\r\n  clickApply($event: any) {\r\n    this.applyEvent.emit($event)\r\n  }\r\n\r\n  clickCancel($event: any) {\r\n    this.cancelEvent.emit($event)\r\n  }\r\n\r\n  clickClear($event: any) {\r\n    this.clearEvent.emit($event)\r\n  }\r\n\r\n}\r\n","@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","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  ElementRef,\r\n  inject,\r\n  input,\r\n  InputSignal,\r\n  InputSignalWithTransform,\r\n  model,\r\n  ModelSignal,\r\n  OnInit,\r\n  output,\r\n  OutputEmitterRef,\r\n  signal,\r\n  Signal,\r\n  viewChild,\r\n  ViewEncapsulation,\r\n  WritableSignal\r\n} from '@angular/core';\r\nimport {FormsModule} from \"@angular/forms\";\r\nimport {NgxDaterangepickerLocaleService} from \"../../services/ngx-daterangepicker-locale.service\";\r\nimport dayjs, {Dayjs} from \"dayjs\";\r\nimport localeData from \"dayjs/plugin/localeData\";\r\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat';\r\nimport isoWeek from 'dayjs/plugin/isoWeek';\r\nimport week from 'dayjs/plugin/weekOfYear';\r\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\r\nimport {NgClass} from \"@angular/common\";\r\nimport {RangesComponent} from '../ranges/ranges.component';\r\nimport {CalendarComponent} from '../calendar/calendar.component';\r\nimport {ActionsComponent} from '../actions/actions.component';\r\nimport {SideEnum} from \"../../model/daterangepicker.model\";\r\n\r\ndayjs.extend(localeData);\r\ndayjs.extend(LocalizedFormat);\r\ndayjs.extend(isoWeek);\r\ndayjs.extend(week);\r\ndayjs.extend(customParseFormat);\r\n\r\n@Component({\r\n  selector: 'ngx-daterangepicker-bootstrap',\r\n  imports: [\r\n    NgClass,\r\n    FormsModule,\r\n    RangesComponent,\r\n    CalendarComponent,\r\n    ActionsComponent,\r\n  ],\r\n  templateUrl: './ngx-daterangepicker-bootstrap.component.html',\r\n  styleUrl: './ngx-daterangepicker-bootstrap.component.scss',\r\n  host: {\r\n    '(click)': 'handleInternalClick($event)'\r\n  },\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxDaterangepickerBootstrapComponent implements OnInit {\r\n\r\n  private _localeService = inject(NgxDaterangepickerLocaleService);\r\n\r\n  public $event: any;\r\n  public chosenLabel?: string;\r\n  public calendarVariables: { left: any, right: any } = {left: {}, right: {}};\r\n  public timepickerVariables: { left: any, right: any } = {left: {}, right: {}};\r\n  readonly applyBtnDisabled: WritableSignal<Boolean> = signal<Boolean>(false);\r\n  public chosenRange?: string | null;\r\n  public rangesArray: Array<any> = [];\r\n  public inline = true;\r\n  public showCalInRanges: Boolean = false;\r\n  private tooltiptext: any = [];  // for storing tooltiptext\r\n  private leftCalendar: any = {};\r\n  private rightCalendar: any = {};\r\n  private nowHoveredDate: null = null;\r\n  private pickingDate: Boolean = false;\r\n  private _old: { start: any, end: any } = {start: null, end: null};\r\n  public _minDate?: Dayjs | null;\r\n  public _maxDate?: Dayjs | null;\r\n  // private _locale: LocaleConfig = {};\r\n  private _ranges: any = {};\r\n\r\n  readonly startDate: ModelSignal<Dayjs | null | undefined> = model<Dayjs | null | undefined>(dayjs().startOf('day'));\r\n  readonly endDate: ModelSignal<Dayjs | null | undefined> = model<Dayjs | null | undefined>(dayjs().endOf('day'));\r\n  readonly dateLimit: InputSignal<number | null> = input<number | null>(null);\r\n  readonly autoApply: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly singleDatePicker: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly showDropdowns: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly showWeekNumbers: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly showISOWeekNumbers: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly linkedCalendars: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly autoUpdateInput: InputSignal<Boolean> = input<Boolean>(true);\r\n  readonly alwaysShowCalendars: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly maxSpan: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly lockStartDate: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly timePicker: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly timePicker24Hour: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly timePickerIncrement: InputSignal<number> = input(1);\r\n  readonly timePicker24HourInterval: InputSignal<number[]> = input([0, 23]);\r\n  readonly timePickerSeconds: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly showClearButton: InputSignal<Boolean> = input<Boolean>(false);\r\n  readonly firstMonthDayClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly lastMonthDayClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly emptyWeekRowClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly emptyWeekColumnClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly firstDayOfNextMonthClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly lastDayOfPreviousMonthClass: InputSignal<string | null | undefined> = input<string | null | undefined>(null);\r\n  readonly showCustomRangeLabel: InputSignal<boolean | undefined> = input<boolean>();\r\n  readonly showCancel: InputSignal<boolean> = input(false);\r\n  readonly keepCalendarOpeningWithRange: InputSignal<boolean> = input(false);\r\n  readonly showRangeLabelOnInput: InputSignal<boolean> = input(false);\r\n  readonly customRangeDirection: InputSignal<boolean> = input(false);\r\n  readonly drops: InputSignal<string | undefined> = input<string>();\r\n  readonly opens: InputSignal<string | undefined> = input<string>();\r\n  readonly closeOnAutoApply: InputSignal<boolean> = input(true);\r\n\r\n  readonly minDate: InputSignalWithTransform<Dayjs | null | undefined, Dayjs | string> = input(undefined, {\r\n    transform: (value: Dayjs | string): Dayjs | null | undefined => {\r\n      dayjs.isDayjs(value) ? this._minDate = value : this._minDate = dayjs(value);\r\n      return this._minDate;\r\n    }\r\n  });\r\n\r\n  readonly maxDate: InputSignalWithTransform<Dayjs | null | undefined, Dayjs | string> = input(undefined, {\r\n    transform: (value: Dayjs | string): Dayjs | null | undefined => {\r\n      dayjs.isDayjs(value) ? this._maxDate = value : this._maxDate = dayjs(value);\r\n      return this._maxDate;\r\n    }\r\n  });\r\n\r\n  readonly locale: InputSignal<any> = model<any>({});\r\n  readonly _locale: Signal<any> = computed((): any => this.locale() !== null ? {...this._localeService.config, ...this.locale()} : {});\r\n\r\n  readonly ranges: InputSignalWithTransform<any, any> = input({}, { // custom ranges\r\n    transform: (value: any): any => {\r\n      this._ranges = value;\r\n      this.renderRanges();\r\n      return this._ranges;\r\n    }\r\n  });\r\n\r\n  readonly isInvalidDate: InputSignal<Function | null | undefined> = input<Function | null | undefined>((): boolean => false);\r\n  readonly isCustomDate: InputSignal<Function | null | undefined> = input<Function | null | undefined>((): boolean => false);\r\n  readonly isTooltipDate: InputSignal<Function | null | undefined> = input<Function | null | undefined>((): null => null);\r\n\r\n  readonly isShown: WritableSignal<Boolean> = signal<Boolean>(false);\r\n  readonly pickerContainer: Signal<ElementRef | undefined> = viewChild<ElementRef>('pickerContainer');\r\n\r\n  readonly chosenDate: OutputEmitterRef<Object> = output();\r\n  readonly rangeClicked: OutputEmitterRef<Object> = output();\r\n  readonly datesUpdated: OutputEmitterRef<Object> = output();\r\n  readonly startDateChanged: OutputEmitterRef<Object> = output();\r\n  readonly endDateChanged: OutputEmitterRef<Object> = output();\r\n  readonly cancelClicked: OutputEmitterRef<void> = output();\r\n  readonly clearClicked: OutputEmitterRef<void> = output();\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      this.updateView();\r\n    });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this._buildLocale();\r\n    const daysOfWeek: any[] = [...this._locale().daysOfWeek];\r\n    this._locale().firstDay = this._locale().firstDay % 7;\r\n    if (this._locale().firstDay !== 0) {\r\n      let iterator: any = this._locale().firstDay;\r\n      while (iterator > 0) {\r\n        daysOfWeek.push(daysOfWeek.shift());\r\n        iterator--;\r\n      }\r\n    }\r\n    this._locale().daysOfWeek = daysOfWeek;\r\n    if (this.inline) {\r\n      this.applyBtnDisabled.set(true);\r\n      this._old.start = this.startDate()?.clone();\r\n      this._old.end = this.endDate()?.clone();\r\n    }\r\n    const timePicker: Boolean = this.timePicker();\r\n    if (this.startDate() && timePicker) {\r\n      this.setStartDate(this.startDate());\r\n      this.renderTimePicker(SideEnum.left);\r\n    }\r\n    if (this.endDate() && timePicker) {\r\n      this.setEndDate(this.endDate());\r\n      this.renderTimePicker(SideEnum.right);\r\n    }\r\n    this.updateMonthsInView();\r\n    this.renderCalendar(SideEnum.left);\r\n    this.renderCalendar(SideEnum.right);\r\n    this.renderRanges();\r\n  }\r\n\r\n  renderRanges(): void {\r\n    this.rangesArray = [];\r\n    let start: any, end: any;\r\n    if (typeof this.ranges() === 'object') {\r\n      for (const range in this.ranges()) {\r\n        if (this.ranges()[range]) {\r\n          if (typeof this.ranges()[range][0] === 'string') {\r\n            start = dayjs(this.ranges()[range][0], this._locale().format);\r\n          } else {\r\n            start = dayjs(this.ranges()[range][0]);\r\n          }\r\n          if (typeof this.ranges()[range][1] === 'string') {\r\n            end = dayjs(this.ranges()[range][1], this._locale().format);\r\n          } else {\r\n            end = dayjs(this.ranges()[range][1]);\r\n          }\r\n          // If the start or end date exceed those allowed by the minDate or maxSpan\r\n          // options, shorten the range to the allowable period.\r\n          if (this.minDate() && start.isBefore(this.minDate())) {\r\n            start = this.minDate()?.clone();\r\n          }\r\n          let maxDate: Dayjs | null | undefined = this.maxDate();\r\n          const maxSpan: Boolean = this.maxSpan();\r\n          if (maxSpan && maxDate && start.clone().add(maxSpan).isAfter(maxDate)) {\r\n            maxDate = start.clone().add(maxSpan);\r\n          }\r\n          if (maxDate && end.isAfter(maxDate)) {\r\n            end = maxDate.clone();\r\n          }\r\n          // If the end of the range is before the minimum or the start of the range is\r\n          // after the maximum, don't display this range option at all.\r\n          const timePicker: Boolean = this.timePicker();\r\n          if ((this.minDate() && end.isBefore(this.minDate(), timePicker ? 'minute' : 'day'))\r\n            || (maxDate && start.isAfter(maxDate, timePicker ? 'minute' : 'day'))) {\r\n            continue;\r\n          }\r\n          // Support unicode chars in the range names.\r\n          const elem: HTMLTextAreaElement = document.createElement('textarea');\r\n          elem.innerHTML = range;\r\n          const rangeHtml: string = elem.value;\r\n          this.ranges()[rangeHtml] = [start, end];\r\n        }\r\n      }\r\n      for (const range in this.ranges()) {\r\n        if (this.ranges()[range]) {\r\n          this.rangesArray.push(range);\r\n        }\r\n      }\r\n      if (this.showCustomRangeLabel()) {\r\n        this.rangesArray.push(this._locale().customRangeLabel);\r\n      }\r\n      this.showCalInRanges = (!this.rangesArray.length) || this.alwaysShowCalendars();\r\n      if (!this.timePicker()) {\r\n        this.startDate.set(this.startDate()?.startOf('day'));\r\n        this.endDate.set(this.endDate()?.endOf('day'));\r\n      }\r\n    }\r\n  }\r\n\r\n  renderTimePicker(side: SideEnum): void {\r\n    let selected: any, minDate: any;\r\n    const maxDate: Dayjs | null | undefined = this.maxDate();\r\n    if (side === SideEnum.left) {\r\n      selected = this.startDate()?.clone();\r\n      minDate = this.minDate();\r\n    } else if (side === SideEnum.right && this.endDate()) {\r\n      selected = this.endDate()?.clone();\r\n      minDate = this.startDate();\r\n    } else if (side === SideEnum.right && !this.endDate()) {\r\n      // don't have an end date, use the start date then put the selected time for the right side as the time\r\n      selected = this._getDateWithTime(this.startDate(), SideEnum.right);\r\n      if (selected.isBefore(this.startDate())) {\r\n        selected = this.startDate()?.clone();  // set it back to the start date the time was backwards\r\n      }\r\n      minDate = this.startDate();\r\n    }\r\n    const start: number = this.timePicker24Hour() ? this.timePicker24HourInterval()[0] : 1;\r\n    const end: number = this.timePicker24Hour() ? this.timePicker24HourInterval()[1] : 12;\r\n    this.timepickerVariables[side] = {\r\n      hours: [],\r\n      minutes: [],\r\n      minutesLabel: [],\r\n      seconds: [],\r\n      secondsLabel: [],\r\n      disabledHours: [],\r\n      disabledMinutes: [],\r\n      disabledSeconds: [],\r\n      selectedHour: 0,\r\n      selectedMinute: 0,\r\n      selectedSecond: 0\r\n    };\r\n    // generate hours\r\n    for (let i: number = start; i <= end; i++) {\r\n      let i_in_24: number = i;\r\n      if (!this.timePicker24Hour()) {\r\n        i_in_24 = selected.hour() >= 12 ? (i === 12 ? 12 : i + 12) : (i === 12 ? 0 : i);\r\n      }\r\n      const time: any = selected.clone().hour(i_in_24);\r\n      let disabled: boolean = false;\r\n      if (minDate && time.minute(59).isBefore(minDate)) {\r\n        disabled = true;\r\n      }\r\n      if (maxDate && time.minute(0).isAfter(maxDate)) {\r\n        disabled = true;\r\n      }\r\n      this.timepickerVariables[side].hours.push(i);\r\n      if (i_in_24 === selected.hour() && !disabled) {\r\n        this.timepickerVariables[side].selectedHour = i;\r\n      } else if (disabled) {\r\n        this.timepickerVariables[side].disabledHours.push(i);\r\n      }\r\n    }\r\n    // generate minutes\r\n    for (let i: number = 0; i < 60; i += this.timePickerIncrement()) {\r\n      const padded: string | number = i < 10 ? '0' + i : i;\r\n      const time: any = selected.clone().minute(i);\r\n      let disabled: boolean = false;\r\n      if (minDate && time.second(59).isBefore(minDate)) {\r\n        disabled = true;\r\n      }\r\n      if (maxDate && time.second(0).isAfter(maxDate)) {\r\n        disabled = true;\r\n      }\r\n      this.timepickerVariables[side].minutes.push(i);\r\n      this.timepickerVariables[side].minutesLabel.push(padded);\r\n      if (selected.minute() === i && !disabled) {\r\n        this.timepickerVariables[side].selectedMinute = i;\r\n      } else if (disabled) {\r\n        this.timepickerVariables[side].disabledMinutes.push(i);\r\n      }\r\n    }\r\n    // generate seconds\r\n    if (this.timePickerSeconds()) {\r\n      for (let i: number = 0; i < 60; i++) {\r\n        const padded: string | number = i < 10 ? '0' + i : i;\r\n        const time: any = selected.clone().second(i);\r\n        let disabled: boolean = false;\r\n        if (minDate && time.isBefore(minDate)) {\r\n          disabled = true;\r\n        }\r\n        if (maxDate && time.isAfter(maxDate)) {\r\n          disabled = true;\r\n        }\r\n        this.timepickerVariables[side].seconds.push(i);\r\n        this.timepickerVariables[side].secondsLabel.push(padded);\r\n        if (selected.second() === i && !disabled) {\r\n          this.timepickerVariables[side].selectedSecond = i;\r\n        } else if (disabled) {\r\n          this.timepickerVariables[side].disabledSeconds.push(i);\r\n        }\r\n      }\r\n    }\r\n    // generate AM/PM\r\n    if (!this.timePicker24Hour()) {\r\n      if (minDate && selected.clone().hour(12).minute(0).second(0).isBefore(minDate)) {\r\n        this.timepickerVariables[side].amDisabled = true;\r\n      }\r\n      if (maxDate && selected.clone().hour(0).minute(0).second(0).isAfter(maxDate)) {\r\n        this.timepickerVariables[side].pmDisabled = true;\r\n      }\r\n      if (selected.hour() >= 12) {\r\n        this.timepickerVariables[side].ampmModel = 'PM';\r\n      } else {\r\n        this.timepickerVariables[side].ampmModel = 'AM';\r\n      }\r\n    }\r\n    this.timepickerVariables[side].selected = selected;\r\n  }\r\n\r\n  renderCalendar(side: SideEnum): void { // side model\r\n    const mainCalendar: any = (side === SideEnum.left) ? this.leftCalendar : this.rightCalendar;\r\n    const month: any = mainCalendar.month.month();\r\n    const year: any = mainCalendar.month.year();\r\n    const hour: any = mainCalendar.month.hour();\r\n    const minute: any = mainCalendar.month.minute();\r\n    const second: any = mainCalendar.month.second();\r\n    const daysInMonth: number = dayjs(new Date(year, month)).daysInMonth();\r\n    const firstDay: Dayjs = dayjs(new Date(year, month, 1));\r\n    const lastDay: Dayjs = dayjs(new Date(year, month, daysInMonth));\r\n    const lastMonth: number = dayjs(firstDay).subtract(1, 'month').month();\r\n    const lastYear: number = dayjs(firstDay).subtract(1, 'month').year();\r\n    const daysInLastMonth: number = dayjs(new Date(lastYear, lastMonth)).daysInMonth();\r\n    const dayOfWeek: number = firstDay.day();\r\n    // initialize a 6 rows x 7 columns array for the calendar\r\n    const calendar: any = [];\r\n    calendar.firstDay = firstDay;\r\n    calendar.lastDay = lastDay;\r\n    for (let i: number = 0; i < 6; i++) calendar[i] = [];\r\n    // populate the calendar with date objects\r\n    let startDay: any = daysInLastMonth - dayOfWeek + this._locale().firstDay + 1;\r\n    if (startDay > daysInLastMonth) startDay -= 7;\r\n    if (dayOfWeek === this._locale().firstDay) startDay = daysInLastMonth - 6;\r\n    let curDate: Dayjs = dayjs(new Date(lastYear, lastMonth, startDay, 12, minute, second));\r\n    for (let i: number = 0, col: number = 0, row: number = 0; i < 42; i++, col++, curDate = dayjs(curDate).add(24, 'hour')) {\r\n      if (i > 0 && col % 7 === 0) {\r\n        col = 0;\r\n        row++;\r\n      }\r\n      calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);\r\n      curDate = curDate.hour(12);\r\n      if (this.minDate() && calendar[row][col].format('YYYY-MM-DD') === this.minDate()?.format('YYYY-MM-DD') &&\r\n        calendar[row][col].isBefore(this.minDate()) && side === 'left') {\r\n        calendar[row][col] = this.minDate()?.clone();\r\n      }\r\n      if (this.maxDate() && calendar[row][col].format('YYYY-MM-DD') === this.maxDate()?.format('YYYY-MM-DD') &&\r\n        calendar[row][col].isAfter(this.maxDate()) && side === 'right') {\r\n        calendar[row][col] = this.maxDate()?.clone();\r\n      }\r\n    }\r\n    // make the calendar object available to hoverDate/clickDate\r\n    if (side === SideEnum.left) {\r\n      this.leftCalendar.calendar = calendar;\r\n    } else {\r\n      this.rightCalendar.calendar = calendar;\r\n    }\r\n    //\r\n    // Display the calendar\r\n    //\r\n    let minDate: Dayjs | null | undefined = side === 'left' ? this.minDate() : this.startDate();\r\n    let maxDate: Dayjs | null | undefined = this.maxDate();\r\n    // adjust maxDate to reflect the dateLimit setting in order to\r\n    // grey out end dates beyond the dateLimit\r\n    const dateLimit: number | null = this.dateLimit();\r\n    if (this.endDate() === null && dateLimit) {\r\n      const maxLimit: Dayjs | undefined = this.startDate()?.clone().add(dateLimit, 'day').endOf('day');\r\n      if (!maxDate || maxLimit?.isBefore(maxDate)) maxDate = maxLimit;\r\n      if (this.customRangeDirection()) {\r\n        minDate = this.minDate();\r\n        const minLimit: Dayjs | undefined = this.startDate()?.clone().subtract(dateLimit, 'day').endOf('day');\r\n        if (!minDate || minLimit?.isAfter(minDate)) {\r\n          minDate = minLimit;\r\n        }\r\n      }\r\n    }\r\n    this.calendarVariables[side] = {\r\n      month: month,\r\n      year: year,\r\n      hour: hour,\r\n      minute: minute,\r\n      second: second,\r\n      daysInMonth: daysInMonth,\r\n      firstDay: firstDay,\r\n      lastDay: lastDay,\r\n      lastMonth: lastMonth,\r\n      lastYear: lastYear,\r\n      daysInLastMonth: daysInLastMonth,\r\n      dayOfWeek: dayOfWeek,\r\n      // other vars\r\n      calRows: Array.from(Array(6).keys()),\r\n      calCols: Array.from(Array(7).keys()),\r\n      classes: {},\r\n      minDate: minDate,\r\n      maxDate: maxDate,\r\n      calendar: calendar\r\n    };\r\n    if (this.showDropdowns()) {\r\n      const currentMonth: any = calendar[1][1].month();\r\n      const currentYear: any = calendar[1][1].year();\r\n      const realCurrentYear: number = dayjs().year();\r\n      const maxYear: number = (maxDate && maxDate.year()) || (realCurrentYear + 5);\r\n      const minYear: number = (minDate && minDate.year()) || (realCurrentYear - 50);\r\n      const inMinYear: boolean = currentYear === minYear;\