ngx-daterangepicker-bootstrap
Version:
Date Range Picker - Angular 20 and Bootstrap 5
150 lines (145 loc) • 165 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, input, output, ChangeDetectionStrategy, 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: "20.1.4", ngImport: i0, type: NgxDaterangepickerLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxDaterangepickerLocaleService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxDaterangepickerLocaleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class RangesComponent {
rangesArray = input(...(ngDevMode ? [undefined, { debugName: "rangesArray" }] : []));
chosenRange = input(...(ngDevMode ? [undefined, { debugName: "chosenRange" }] : []));
locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
ranges = input(...(ngDevMode ? [undefined, { debugName: "ranges" }] : []));
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
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: "20.1.4", ngImport: i0, type: RangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RangesComponent, decorators: [{
type: Component,
args: [{ selector: 'ranges', imports: [
NgClass
], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
}] });
var SideEnum;
(function (SideEnum) {
SideEnum["left"] = "left";
SideEnum["right"] = "right";
})(SideEnum || (SideEnum = {}));
class CalendarComponent {
sideEnum = SideEnum;
showCalInRanges = input(...(ngDevMode ? [undefined, { debugName: "showCalInRanges" }] : []));
singleDatePicker = input(...(ngDevMode ? [undefined, { debugName: "singleDatePicker" }] : []));
calendarVariables = input(...(ngDevMode ? [undefined, { debugName: "calendarVariables" }] : []));
showWeekNumbers = input(...(ngDevMode ? [undefined, { debugName: "showWeekNumbers" }] : []));
showISOWeekNumbers = input(...(ngDevMode ? [undefined, { debugName: "showISOWeekNumbers" }] : []));
linkedCalendars = input(...(ngDevMode ? [undefined, { debugName: "linkedCalendars" }] : []));
showDropdowns = input(...(ngDevMode ? [undefined, { debugName: "showDropdowns" }] : []));
locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
timePicker = input(...(ngDevMode ? [undefined, { debugName: "timePicker" }] : []));
startDate = input(...(ngDevMode ? [undefined, { debugName: "startDate" }] : []));
timepickerVariables = input(...(ngDevMode ? [undefined, { debugName: "timepickerVariables" }] : []));
timePickerSeconds = input(...(ngDevMode ? [undefined, { debugName: "timePickerSeconds" }] : []));
timePicker24Hour = input(...(ngDevMode ? [undefined, { debugName: "timePicker24Hour" }] : []));
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: "20.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'calendar', imports: [
NgClass,
FormsModule
], changeDetection: ChangeDetectionStrategy.OnPush, 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.amDis