ng2-date-picker
Version:
[](https://travis-ci.org/vlio20/angular-datepicker) [](#backers) [![Sponsor
1,117 lines (1,107 loc) • 135 kB
JavaScript
import { __decorate, __assign, __metadata, __param } from 'tslib';
import { Injectable, Input, HostBinding, Output, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, ViewChild, ElementRef, HostListener, Renderer, Directive, Optional, ViewContainerRef, ComponentFactoryResolver, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import * as momentNs from 'moment';
var ECalendarMode;
(function (ECalendarMode) {
ECalendarMode[ECalendarMode["Day"] = 0] = "Day";
ECalendarMode[ECalendarMode["DayTime"] = 1] = "DayTime";
ECalendarMode[ECalendarMode["Month"] = 2] = "Month";
ECalendarMode[ECalendarMode["Time"] = 3] = "Time";
})(ECalendarMode || (ECalendarMode = {}));
var ECalendarValue;
(function (ECalendarValue) {
ECalendarValue[ECalendarValue["Moment"] = 1] = "Moment";
ECalendarValue[ECalendarValue["MomentArr"] = 2] = "MomentArr";
ECalendarValue[ECalendarValue["String"] = 3] = "String";
ECalendarValue[ECalendarValue["StringArr"] = 4] = "StringArr";
})(ECalendarValue || (ECalendarValue = {}));
var SelectEvent;
(function (SelectEvent) {
SelectEvent["INPUT"] = "input";
SelectEvent["SELECTION"] = "selection";
})(SelectEvent || (SelectEvent = {}));
var DomHelper = /** @class */ (function () {
function DomHelper() {
}
DomHelper_1 = DomHelper;
DomHelper.setYAxisPosition = function (element, container, anchor, drops) {
var anchorRect = anchor.getBoundingClientRect();
var containerRect = container.getBoundingClientRect();
var bottom = anchorRect.bottom - containerRect.top;
var top = anchorRect.top - containerRect.top;
if (drops === 'down') {
element.style.top = (bottom + 1 + 'px');
}
else {
element.style.top = (top - 1 - element.scrollHeight) + 'px';
}
};
DomHelper.setXAxisPosition = function (element, container, anchor, dimElem, opens) {
var anchorRect = anchor.getBoundingClientRect();
var containerRect = container.getBoundingClientRect();
var left = anchorRect.left - containerRect.left;
if (opens === 'right') {
element.style.left = left + 'px';
}
else {
element.style.left = left - dimElem.offsetWidth + anchor.offsetWidth + 'px';
}
};
DomHelper.isTopInView = function (el) {
var top = el.getBoundingClientRect().top;
return (top >= 0);
};
DomHelper.isBottomInView = function (el) {
var bottom = el.getBoundingClientRect().bottom;
return (bottom <= window.innerHeight);
};
DomHelper.isLeftInView = function (el) {
var left = el.getBoundingClientRect().left;
return (left >= 0);
};
DomHelper.isRightInView = function (el) {
var right = el.getBoundingClientRect().right;
return (right <= window.innerWidth);
};
DomHelper.prototype.appendElementToPosition = function (config) {
var _this = this;
var container = config.container, element = config.element;
if (!container.style.position || container.style.position === 'static') {
container.style.position = 'relative';
}
if (element.style.position !== 'absolute') {
element.style.position = 'absolute';
}
element.style.visibility = 'hidden';
setTimeout(function () {
_this.setElementPosition(config);
element.style.visibility = 'visible';
});
};
DomHelper.prototype.setElementPosition = function (_a) {
var element = _a.element, container = _a.container, anchor = _a.anchor, dimElem = _a.dimElem, drops = _a.drops, opens = _a.opens;
DomHelper_1.setYAxisPosition(element, container, anchor, 'down');
DomHelper_1.setXAxisPosition(element, container, anchor, dimElem, 'right');
if (drops !== 'down' && drops !== 'up') {
if (DomHelper_1.isBottomInView(dimElem)) {
DomHelper_1.setYAxisPosition(element, container, anchor, 'down');
}
else if (DomHelper_1.isTopInView(dimElem)) {
DomHelper_1.setYAxisPosition(element, container, anchor, 'up');
}
}
else {
DomHelper_1.setYAxisPosition(element, container, anchor, drops);
}
if (opens !== 'left' && opens !== 'right') {
if (DomHelper_1.isRightInView(dimElem)) {
DomHelper_1.setXAxisPosition(element, container, anchor, dimElem, 'right');
}
else if (DomHelper_1.isLeftInView(dimElem)) {
DomHelper_1.setXAxisPosition(element, container, anchor, dimElem, 'left');
}
}
else {
DomHelper_1.setXAxisPosition(element, container, anchor, dimElem, opens);
}
};
var DomHelper_1;
DomHelper = DomHelper_1 = __decorate([
Injectable()
], DomHelper);
return DomHelper;
}());
var moment = momentNs;
var UtilsService = /** @class */ (function () {
function UtilsService() {
}
UtilsService.debounce = function (func, wait) {
var timeout;
return function () {
var context = this, args = arguments;
timeout = clearTimeout(timeout);
setTimeout(function () {
func.apply(context, args);
}, wait);
};
};
UtilsService.prototype.createArray = function (size) {
return new Array(size).fill(1);
};
UtilsService.prototype.convertToMoment = function (date, format) {
if (!date) {
return null;
}
else if (typeof date === 'string') {
return moment(date, format);
}
else {
return date.clone();
}
};
UtilsService.prototype.isDateValid = function (date, format) {
if (date === '') {
return true;
}
return moment(date, format, true).isValid();
};
// todo:: add unit test
UtilsService.prototype.getDefaultDisplayDate = function (current, selected, allowMultiSelect, minDate) {
if (current) {
return current.clone();
}
else if (minDate && minDate.isAfter(moment())) {
return minDate.clone();
}
else if (allowMultiSelect) {
if (selected && selected[selected.length]) {
return selected[selected.length].clone();
}
}
else if (selected && selected[0]) {
return selected[0].clone();
}
return moment();
};
// todo:: add unit test
UtilsService.prototype.getInputType = function (value, allowMultiSelect) {
if (Array.isArray(value)) {
if (!value.length) {
return ECalendarValue.MomentArr;
}
else if (typeof value[0] === 'string') {
return ECalendarValue.StringArr;
}
else if (moment.isMoment(value[0])) {
return ECalendarValue.MomentArr;
}
}
else {
if (typeof value === 'string') {
return ECalendarValue.String;
}
else if (moment.isMoment(value)) {
return ECalendarValue.Moment;
}
}
return allowMultiSelect ? ECalendarValue.MomentArr : ECalendarValue.Moment;
};
// todo:: add unit test
UtilsService.prototype.convertToMomentArray = function (value, format, allowMultiSelect) {
switch (this.getInputType(value, allowMultiSelect)) {
case (ECalendarValue.String):
return value ? [moment(value, format, true)] : [];
case (ECalendarValue.StringArr):
return value.map(function (v) { return v ? moment(v, format, true) : null; }).filter(Boolean);
case (ECalendarValue.Moment):
return value ? [value.clone()] : [];
case (ECalendarValue.MomentArr):
return (value || []).map(function (v) { return v.clone(); });
default:
return [];
}
};
// todo:: add unit test
UtilsService.prototype.convertFromMomentArray = function (format, value, convertTo) {
switch (convertTo) {
case (ECalendarValue.String):
return value[0] && value[0].format(format);
case (ECalendarValue.StringArr):
return value.filter(Boolean).map(function (v) { return v.format(format); });
case (ECalendarValue.Moment):
return value[0] ? value[0].clone() : value[0];
case (ECalendarValue.MomentArr):
return value ? value.map(function (v) { return v.clone(); }) : value;
default:
return value;
}
};
UtilsService.prototype.convertToString = function (value, format) {
var _this = this;
var tmpVal;
if (typeof value === 'string') {
tmpVal = [value];
}
else if (Array.isArray(value)) {
if (value.length) {
tmpVal = value.map(function (v) {
return _this.convertToMoment(v, format).format(format);
});
}
else {
tmpVal = value;
}
}
else if (moment.isMoment(value)) {
tmpVal = [value.format(format)];
}
else {
return '';
}
return tmpVal.filter(Boolean).join(' | ');
};
// todo:: add unit test
UtilsService.prototype.clearUndefined = function (obj) {
if (!obj) {
return obj;
}
Object.keys(obj).forEach(function (key) { return (obj[key] === undefined) && delete obj[key]; });
return obj;
};
UtilsService.prototype.updateSelected = function (isMultiple, currentlySelected, date, granularity) {
if (granularity === void 0) { granularity = 'day'; }
if (isMultiple) {
return !date.selected
? currentlySelected.concat([date.date])
: currentlySelected.filter(function (d) { return !d.isSame(date.date, granularity); });
}
else {
return !date.selected ? [date.date] : [];
}
};
UtilsService.prototype.closestParent = function (element, selector) {
if (!element) {
return undefined;
}
var match = element.querySelector(selector);
return match || this.closestParent(element.parentElement, selector);
};
UtilsService.prototype.onlyTime = function (m) {
return m && moment.isMoment(m) && moment(m.format('HH:mm:ss'), 'HH:mm:ss');
};
UtilsService.prototype.granularityFromType = function (calendarType) {
switch (calendarType) {
case 'time':
return 'second';
case 'daytime':
return 'second';
default:
return calendarType;
}
};
UtilsService.prototype.createValidator = function (_a, format, calendarType) {
var _this = this;
var minDate = _a.minDate, maxDate = _a.maxDate, minTime = _a.minTime, maxTime = _a.maxTime;
var isValid;
var value;
var validators = [];
var granularity = this.granularityFromType(calendarType);
if (minDate) {
var md_1 = this.convertToMoment(minDate, format);
validators.push({
key: 'minDate',
isValid: function () {
var _isValid = value.every(function (val) { return val.isSameOrAfter(md_1, granularity); });
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (maxDate) {
var md_2 = this.convertToMoment(maxDate, format);
validators.push({
key: 'maxDate',
isValid: function () {
var _isValid = value.every(function (val) { return val.isSameOrBefore(md_2, granularity); });
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (minTime) {
var md_3 = this.onlyTime(this.convertToMoment(minTime, format));
validators.push({
key: 'minTime',
isValid: function () {
var _isValid = value.every(function (val) { return _this.onlyTime(val).isSameOrAfter(md_3); });
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (maxTime) {
var md_4 = this.onlyTime(this.convertToMoment(maxTime, format));
validators.push({
key: 'maxTime',
isValid: function () {
var _isValid = value.every(function (val) { return _this.onlyTime(val).isSameOrBefore(md_4); });
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
return function (inputVal) {
isValid = true;
value = _this.convertToMomentArray(inputVal, format, true).filter(Boolean);
if (!value.every(function (val) { return val.isValid(); })) {
return {
format: {
given: inputVal
}
};
}
var errors = validators.reduce(function (map, err) {
if (!err.isValid()) {
map[err.key] = {
given: value
};
}
return map;
}, {});
return !isValid ? errors : null;
};
};
UtilsService.prototype.datesStringToStringArray = function (value) {
return (value || '').split('|').map(function (m) { return m.trim(); }).filter(Boolean);
};
UtilsService.prototype.getValidMomentArray = function (value, format) {
var _this = this;
return this.datesStringToStringArray(value)
.filter(function (d) { return _this.isDateValid(d, format); })
.map(function (d) { return moment(d, format); });
};
UtilsService.prototype.shouldShowCurrent = function (showGoToCurrent, mode, min, max) {
return showGoToCurrent &&
mode !== 'time' &&
this.isDateInRange(moment(), min, max);
};
UtilsService.prototype.isDateInRange = function (date, from, to) {
return date.isBetween(from, to, 'day', '[]');
};
UtilsService.prototype.convertPropsToMoment = function (obj, format, props) {
var _this = this;
props.forEach(function (prop) {
if (obj.hasOwnProperty(prop)) {
obj[prop] = _this.convertToMoment(obj[prop], format);
}
});
};
UtilsService.prototype.shouldResetCurrentView = function (prevConf, currentConf) {
if (prevConf && currentConf) {
if (!prevConf.min && currentConf.min) {
return true;
}
else if (prevConf.min && currentConf.min && !prevConf.min.isSame(currentConf.min, 'd')) {
return true;
}
else if (!prevConf.max && currentConf.max) {
return true;
}
else if (prevConf.max && currentConf.max && !prevConf.max.isSame(currentConf.max, 'd')) {
return true;
}
return false;
}
return false;
};
UtilsService.prototype.getNativeElement = function (elem) {
if (!elem) {
return null;
}
else if (typeof elem === 'string') {
return document.querySelector(elem);
}
else {
return elem;
}
};
UtilsService = __decorate([
Injectable()
], UtilsService);
return UtilsService;
}());
var moment$1 = momentNs;
var DayCalendarService = /** @class */ (function () {
function DayCalendarService(utilsService) {
this.utilsService = utilsService;
this.DAYS = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
this.DEFAULT_CONFIG = {
showNearMonthDays: true,
showWeekNumbers: false,
firstDayOfWeek: 'su',
weekDayFormat: 'ddd',
format: 'DD-MM-YYYY',
allowMultiSelect: false,
monthFormat: 'MMM, YYYY',
enableMonthSelector: true,
locale: moment$1.locale(),
dayBtnFormat: 'DD',
unSelectOnClick: true
};
}
DayCalendarService.prototype.removeNearMonthWeeks = function (currentMonth, monthArray) {
if (monthArray[monthArray.length - 1].find(function (day) { return day.date.isSame(currentMonth, 'month'); })) {
return monthArray;
}
else {
return monthArray.slice(0, -1);
}
};
DayCalendarService.prototype.getConfig = function (config) {
var _config = __assign({}, this.DEFAULT_CONFIG, this.utilsService.clearUndefined(config));
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
moment$1.locale(_config.locale);
return _config;
};
DayCalendarService.prototype.generateDaysMap = function (firstDayOfWeek) {
var firstDayIndex = this.DAYS.indexOf(firstDayOfWeek);
var daysArr = this.DAYS.slice(firstDayIndex, 7).concat(this.DAYS.slice(0, firstDayIndex));
return daysArr.reduce(function (map, day, index) {
map[day] = index;
return map;
}, {});
};
DayCalendarService.prototype.generateMonthArray = function (config, month, selected) {
var _this = this;
var monthArray = [];
var firstDayOfWeekIndex = this.DAYS.indexOf(config.firstDayOfWeek);
var firstDayOfBoard = month.clone().startOf('month');
while (firstDayOfBoard.day() !== firstDayOfWeekIndex) {
firstDayOfBoard.subtract(1, 'day');
}
var current = firstDayOfBoard.clone();
var prevMonth = month.clone().subtract(1, 'month');
var nextMonth = month.clone().add(1, 'month');
var today = moment$1();
var daysOfCalendar = this.utilsService.createArray(42)
.reduce(function (array) {
array.push({
date: current.clone(),
selected: !!selected.find(function (selectedDay) { return current.isSame(selectedDay, 'day'); }),
currentMonth: current.isSame(month, 'month'),
prevMonth: current.isSame(prevMonth, 'month'),
nextMonth: current.isSame(nextMonth, 'month'),
currentDay: current.isSame(today, 'day'),
disabled: _this.isDateDisabled(current, config)
});
current.add(1, 'day');
return array;
}, []);
daysOfCalendar.forEach(function (day, index) {
var weekIndex = Math.floor(index / 7);
if (!monthArray[weekIndex]) {
monthArray.push([]);
}
monthArray[weekIndex].push(day);
});
if (!config.showNearMonthDays) {
monthArray = this.removeNearMonthWeeks(month, monthArray);
}
return monthArray;
};
DayCalendarService.prototype.generateWeekdays = function (firstDayOfWeek) {
var weekdayNames = {
su: moment$1().day(0),
mo: moment$1().day(1),
tu: moment$1().day(2),
we: moment$1().day(3),
th: moment$1().day(4),
fr: moment$1().day(5),
sa: moment$1().day(6)
};
var weekdays = [];
var daysMap = this.generateDaysMap(firstDayOfWeek);
for (var dayKey in daysMap) {
if (daysMap.hasOwnProperty(dayKey)) {
weekdays[daysMap[dayKey]] = weekdayNames[dayKey];
}
}
return weekdays;
};
DayCalendarService.prototype.isDateDisabled = function (date, config) {
if (config.isDayDisabledCallback) {
return config.isDayDisabledCallback(date);
}
if (config.min && date.isBefore(config.min, 'day')) {
return true;
}
return !!(config.max && date.isAfter(config.max, 'day'));
};
// todo:: add unit tests
DayCalendarService.prototype.getHeaderLabel = function (config, month) {
if (config.monthFormatter) {
return config.monthFormatter(month);
}
return month.format(config.monthFormat);
};
// todo:: add unit tests
DayCalendarService.prototype.shouldShowLeft = function (min, currentMonthView) {
return min ? min.isBefore(currentMonthView, 'month') : true;
};
// todo:: add unit tests
DayCalendarService.prototype.shouldShowRight = function (max, currentMonthView) {
return max ? max.isAfter(currentMonthView, 'month') : true;
};
DayCalendarService.prototype.generateDaysIndexMap = function (firstDayOfWeek) {
var firstDayIndex = this.DAYS.indexOf(firstDayOfWeek);
var daysArr = this.DAYS.slice(firstDayIndex, 7).concat(this.DAYS.slice(0, firstDayIndex));
return daysArr.reduce(function (map, day, index) {
map[index] = day;
return map;
}, {});
};
DayCalendarService.prototype.getMonthCalendarConfig = function (componentConfig) {
return this.utilsService.clearUndefined({
min: componentConfig.min,
max: componentConfig.max,
format: componentConfig.format,
isNavHeaderBtnClickable: true,
allowMultiSelect: false,
yearFormat: componentConfig.yearFormat,
yearFormatter: componentConfig.yearFormatter,
monthBtnFormat: componentConfig.monthBtnFormat,
monthBtnFormatter: componentConfig.monthBtnFormatter,
monthBtnCssClassCallback: componentConfig.monthBtnCssClassCallback,
multipleYearsNavigateBy: componentConfig.multipleYearsNavigateBy,
showMultipleYearsNavigation: componentConfig.showMultipleYearsNavigation,
showGoToCurrent: componentConfig.showGoToCurrent
});
};
DayCalendarService.prototype.getDayBtnText = function (config, day) {
if (config.dayBtnFormatter) {
return config.dayBtnFormatter(day);
}
return day.format(config.dayBtnFormat);
};
DayCalendarService.prototype.getDayBtnCssClass = function (config, day) {
if (config.dayBtnCssClassCallback) {
return config.dayBtnCssClassCallback(day);
}
return '';
};
DayCalendarService = __decorate([
Injectable(),
__metadata("design:paramtypes", [UtilsService])
], DayCalendarService);
return DayCalendarService;
}());
var moment$2 = momentNs;
var DayCalendarComponent = /** @class */ (function () {
function DayCalendarComponent(dayCalendarService, utilsService, cd) {
this.dayCalendarService = dayCalendarService;
this.utilsService = utilsService;
this.cd = cd;
this.onSelect = new EventEmitter();
this.onMonthSelect = new EventEmitter();
this.onNavHeaderBtnClick = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
this.onLeftNav = new EventEmitter();
this.onRightNav = new EventEmitter();
this.CalendarMode = ECalendarMode;
this.isInited = false;
this.currentCalendarMode = ECalendarMode.Day;
this._shouldShowCurrent = true;
this.api = {
moveCalendarsBy: this.moveCalendarsBy.bind(this),
moveCalendarTo: this.moveCalendarTo.bind(this),
toggleCalendarMode: this.toggleCalendarMode.bind(this)
};
}
DayCalendarComponent_1 = DayCalendarComponent;
Object.defineProperty(DayCalendarComponent.prototype, "selected", {
get: function () {
return this._selected;
},
set: function (selected) {
this._selected = selected;
this.onChangeCallback(this.processOnChangeCallback(selected));
},
enumerable: true,
configurable: true
});
Object.defineProperty(DayCalendarComponent.prototype, "currentDateView", {
get: function () {
return this._currentDateView;
},
set: function (current) {
this._currentDateView = current.clone();
this.weeks = this.dayCalendarService
.generateMonthArray(this.componentConfig, this._currentDateView, this.selected);
this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
this.showLeftNav = this.dayCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
this.showRightNav = this.dayCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
},
enumerable: true,
configurable: true
});
DayCalendarComponent.prototype.ngOnInit = function () {
this.isInited = true;
this.init();
this.initValidators();
};
DayCalendarComponent.prototype.init = function () {
this.componentConfig = this.dayCalendarService.getConfig(this.config);
this.selected = this.selected || [];
this.currentDateView = this.displayDate
? this.utilsService.convertToMoment(this.displayDate, this.componentConfig.format).clone()
: this.utilsService
.getDefaultDisplayDate(this.currentDateView, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min);
this.weekdays = this.dayCalendarService
.generateWeekdays(this.componentConfig.firstDayOfWeek);
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
this.monthCalendarConfig = this.dayCalendarService.getMonthCalendarConfig(this.componentConfig);
this._shouldShowCurrent = this.shouldShowCurrent();
};
DayCalendarComponent.prototype.ngOnChanges = function (changes) {
if (this.isInited) {
var minDate = changes.minDate, maxDate = changes.maxDate, config = changes.config;
this.handleConfigChange(config);
this.init();
if (minDate || maxDate) {
this.initValidators();
}
}
};
DayCalendarComponent.prototype.writeValue = function (value) {
this.inputValue = value;
if (value) {
this.selected = this.utilsService
.convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect);
this.inputValueType = this.utilsService
.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
}
else {
this.selected = [];
}
this.weeks = this.dayCalendarService
.generateMonthArray(this.componentConfig, this.currentDateView, this.selected);
this.cd.markForCheck();
};
DayCalendarComponent.prototype.registerOnChange = function (fn) {
this.onChangeCallback = fn;
};
DayCalendarComponent.prototype.onChangeCallback = function (_) {
};
DayCalendarComponent.prototype.registerOnTouched = function (fn) {
};
DayCalendarComponent.prototype.validate = function (formControl) {
if (this.minDate || this.maxDate) {
return this.validateFn(formControl.value);
}
else {
return function () { return null; };
}
};
DayCalendarComponent.prototype.processOnChangeCallback = function (value) {
return this.utilsService.convertFromMomentArray(this.componentConfig.format, value, this.componentConfig.returnedValueType || this.inputValueType);
};
DayCalendarComponent.prototype.initValidators = function () {
this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, 'day');
this.onChangeCallback(this.processOnChangeCallback(this.selected));
};
DayCalendarComponent.prototype.dayClicked = function (day) {
if (day.selected && !this.componentConfig.unSelectOnClick) {
return;
}
this.selected = this.utilsService
.updateSelected(this.componentConfig.allowMultiSelect, this.selected, day);
this.weeks = this.dayCalendarService
.generateMonthArray(this.componentConfig, this.currentDateView, this.selected);
this.onSelect.emit(day);
};
DayCalendarComponent.prototype.getDayBtnText = function (day) {
return this.dayCalendarService.getDayBtnText(this.componentConfig, day.date);
};
DayCalendarComponent.prototype.getDayBtnCssClass = function (day) {
var cssClasses = {
'dp-selected': day.selected,
'dp-current-month': day.currentMonth,
'dp-prev-month': day.prevMonth,
'dp-next-month': day.nextMonth,
'dp-current-day': day.currentDay
};
var customCssClass = this.dayCalendarService.getDayBtnCssClass(this.componentConfig, day.date);
if (customCssClass) {
cssClasses[customCssClass] = true;
}
return cssClasses;
};
DayCalendarComponent.prototype.onLeftNavClick = function () {
var from = this.currentDateView.clone();
this.moveCalendarsBy(this.currentDateView, -1, 'month');
var to = this.currentDateView.clone();
this.onLeftNav.emit({ from: from, to: to });
};
DayCalendarComponent.prototype.onRightNavClick = function () {
var from = this.currentDateView.clone();
this.moveCalendarsBy(this.currentDateView, 1, 'month');
var to = this.currentDateView.clone();
this.onRightNav.emit({ from: from, to: to });
};
DayCalendarComponent.prototype.onMonthCalendarLeftClick = function (change) {
this.onLeftNav.emit(change);
};
DayCalendarComponent.prototype.onMonthCalendarRightClick = function (change) {
this.onRightNav.emit(change);
};
DayCalendarComponent.prototype.onMonthCalendarSecondaryLeftClick = function (change) {
this.onRightNav.emit(change);
};
DayCalendarComponent.prototype.onMonthCalendarSecondaryRightClick = function (change) {
this.onLeftNav.emit(change);
};
DayCalendarComponent.prototype.getWeekdayName = function (weekday) {
if (this.componentConfig.weekDayFormatter) {
return this.componentConfig.weekDayFormatter(weekday.day());
}
return weekday.format(this.componentConfig.weekDayFormat);
};
DayCalendarComponent.prototype.toggleCalendarMode = function (mode) {
if (this.currentCalendarMode !== mode) {
this.currentCalendarMode = mode;
this.onNavHeaderBtnClick.emit(mode);
}
this.cd.markForCheck();
};
DayCalendarComponent.prototype.monthSelected = function (month) {
this.currentDateView = month.date.clone();
this.currentCalendarMode = ECalendarMode.Day;
this.onMonthSelect.emit(month);
};
DayCalendarComponent.prototype.moveCalendarsBy = function (current, amount, granularity) {
if (granularity === void 0) { granularity = 'month'; }
this.currentDateView = current.clone().add(amount, granularity);
this.cd.markForCheck();
};
DayCalendarComponent.prototype.moveCalendarTo = function (to) {
if (to) {
this.currentDateView = this.utilsService.convertToMoment(to, this.componentConfig.format);
}
this.cd.markForCheck();
};
DayCalendarComponent.prototype.shouldShowCurrent = function () {
return this.utilsService.shouldShowCurrent(this.componentConfig.showGoToCurrent, 'day', this.componentConfig.min, this.componentConfig.max);
};
DayCalendarComponent.prototype.goToCurrent = function () {
this.currentDateView = moment$2();
this.onGoToCurrent.emit();
};
DayCalendarComponent.prototype.handleConfigChange = function (config) {
if (config) {
var prevConf = this.dayCalendarService.getConfig(config.previousValue);
var currentConf = this.dayCalendarService.getConfig(config.currentValue);
if (this.utilsService.shouldResetCurrentView(prevConf, currentConf)) {
this._currentDateView = null;
}
}
};
var DayCalendarComponent_1;
__decorate([
Input(),
__metadata("design:type", Object)
], DayCalendarComponent.prototype, "config", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], DayCalendarComponent.prototype, "displayDate", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], DayCalendarComponent.prototype, "minDate", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], DayCalendarComponent.prototype, "maxDate", void 0);
__decorate([
HostBinding('class'), Input(),
__metadata("design:type", String)
], DayCalendarComponent.prototype, "theme", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onSelect", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onMonthSelect", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onNavHeaderBtnClick", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onGoToCurrent", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onLeftNav", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DayCalendarComponent.prototype, "onRightNav", void 0);
DayCalendarComponent = DayCalendarComponent_1 = __decorate([
Component({
selector: 'dp-day-calendar',
template: "<div class=\"dp-day-calendar-container\" *ngIf=\"currentCalendarMode === CalendarMode.Day\">\n <dp-calendar-nav\n [label]=\"navLabel\"\n [showLeftNav]=\"showLeftNav\"\n [showRightNav]=\"showRightNav\"\n [isLabelClickable]=\"componentConfig.enableMonthSelector\"\n [showGoToCurrent]=\"_shouldShowCurrent\"\n [theme]=\"theme\"\n (onLeftNav)=\"onLeftNavClick()\"\n (onRightNav)=\"onRightNavClick()\"\n (onLabelClick)=\"toggleCalendarMode(CalendarMode.Month)\"\n (onGoToCurrent)=\"goToCurrent()\">\n </dp-calendar-nav>\n\n <div class=\"dp-calendar-wrapper\"\n [ngClass]=\"{'dp-hide-near-month': !componentConfig.showNearMonthDays}\">\n <div class=\"dp-weekdays\">\n <span class=\"dp-calendar-weekday\"\n *ngFor=\"let weekday of weekdays\"\n [innerText]=\"getWeekdayName(weekday)\">\n </span>\n </div>\n <div class=\"dp-calendar-week\" *ngFor=\"let week of weeks\">\n <span class=\"dp-week-number\"\n *ngIf=\"componentConfig.showWeekNumbers\"\n [innerText]=\"week[0].date.isoWeek()\">\n </span>\n <button type=\"button\"\n class=\"dp-calendar-day\"\n *ngFor=\"let day of week\"\n [attr.data-date]=\"day.date.format(componentConfig.format)\"\n (click)=\"dayClicked(day)\"\n [disabled]=\"day.disabled\"\n [ngClass]=\"getDayBtnCssClass(day)\"\n [innerText]=\"getDayBtnText(day)\">\n </button>\n </div>\n </div>\n</div>\n\n<dp-month-calendar\n *ngIf=\"currentCalendarMode === CalendarMode.Month\"\n [config]=\"monthCalendarConfig\"\n [displayDate]=\"_currentDateView\"\n [theme]=\"theme\"\n (onSelect)=\"monthSelected($event)\"\n (onNavHeaderBtnClick)=\"toggleCalendarMode(CalendarMode.Day)\"\n (onLeftNav)=\"onMonthCalendarLeftClick($event)\"\n (onRightNav)=\"onMonthCalendarRightClick($event)\"\n (onLeftSecondaryNav)=\"onMonthCalendarSecondaryLeftClick($event)\"\n (onRightSecondaryNav)=\"onMonthCalendarSecondaryRightClick($event)\">\n</dp-month-calendar>\n",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
DayCalendarService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return DayCalendarComponent_1; }),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(function () { return DayCalendarComponent_1; }),
multi: true
}
],
styles: ["dp-day-calendar{display:inline-block}dp-day-calendar .dp-day-calendar-container{background:#fff}dp-day-calendar .dp-calendar-wrapper{box-sizing:border-box;border:1px solid #000}dp-day-calendar .dp-calendar-wrapper .dp-calendar-weekday:first-child{border-left:none}dp-day-calendar .dp-weekdays{font-size:15px;margin-bottom:5px}dp-day-calendar .dp-calendar-weekday{box-sizing:border-box;display:inline-block;width:30px;text-align:center;border-left:1px solid #000;border-bottom:1px solid #000}dp-day-calendar .dp-calendar-day{box-sizing:border-box;width:30px;height:30px;cursor:pointer}dp-day-calendar .dp-selected{background:#106cc8;color:#fff}dp-day-calendar .dp-next-month,dp-day-calendar .dp-prev-month{opacity:.5}dp-day-calendar .dp-hide-near-month .dp-next-month,dp-day-calendar .dp-hide-near-month .dp-prev-month{visibility:hidden}dp-day-calendar .dp-week-number{position:absolute;font-size:9px}dp-day-calendar.dp-material .dp-calendar-weekday{height:25px;width:30px;line-height:25px;color:#7a7a7a;border:none}dp-day-calendar.dp-material .dp-calendar-wrapper{border:1px solid #e0e0e0}dp-day-calendar.dp-material .dp-calendar-day,dp-day-calendar.dp-material .dp-calendar-month{box-sizing:border-box;background:#fff;border-radius:50%;border:none;outline:0}dp-day-calendar.dp-material .dp-calendar-day:hover,dp-day-calendar.dp-material .dp-calendar-month:hover{background:#e0e0e0}dp-day-calendar.dp-material .dp-selected{background:#106cc8;color:#fff}dp-day-calendar.dp-material .dp-selected:hover{background:#106cc8}dp-day-calendar.dp-material .dp-current-day{border:1px solid #106cc8}"]
}),
__metadata("design:paramtypes", [DayCalendarService,
UtilsService,
ChangeDetectorRef])
], DayCalendarComponent);
return DayCalendarComponent;
}());
var moment$3 = momentNs;
var FIRST_PM_HOUR = 12;
var TimeSelectService = /** @class */ (function () {
function TimeSelectService(utilsService) {
this.utilsService = utilsService;
this.DEFAULT_CONFIG = {
hours12Format: 'hh',
hours24Format: 'HH',
meridiemFormat: 'A',
minutesFormat: 'mm',
minutesInterval: 1,
secondsFormat: 'ss',
secondsInterval: 1,
showSeconds: false,
showTwentyFourHours: false,
timeSeparator: ':',
locale: moment$3.locale()
};
}
TimeSelectService.prototype.getConfig = function (config) {
var timeConfigs = {
maxTime: this.utilsService.onlyTime(config && config.maxTime),
minTime: this.utilsService.onlyTime(config && config.minTime)
};
var _config = __assign({}, this.DEFAULT_CONFIG, this.utilsService.clearUndefined(config), timeConfigs);
moment$3.locale(_config.locale);
return _config;
};
TimeSelectService.prototype.getTimeFormat = function (config) {
return (config.showTwentyFourHours ? config.hours24Format : config.hours12Format)
+ config.timeSeparator + config.minutesFormat
+ (config.showSeconds ? (config.timeSeparator + config.secondsFormat) : '')
+ (config.showTwentyFourHours ? '' : ' ' + config.meridiemFormat);
};
TimeSelectService.prototype.getHours = function (config, t) {
var time = t || moment$3();
return time && time.format(config.showTwentyFourHours ? config.hours24Format : config.hours12Format);
};
TimeSelectService.prototype.getMinutes = function (config, t) {
var time = t || moment$3();
return time && time.format(config.minutesFormat);
};
TimeSelectService.prototype.getSeconds = function (config, t) {
var time = t || moment$3();
return time && time.format(config.secondsFormat);
};
TimeSelectService.prototype.getMeridiem = function (config, time) {
return time && time.format(config.meridiemFormat);
};
TimeSelectService.prototype.decrease = function (config, time, unit) {
var amount = 1;
switch (unit) {
case 'minute':
amount = config.minutesInterval;
break;
case 'second':
amount = config.secondsInterval;
break;
}
return time.clone().subtract(amount, unit);
};
TimeSelectService.prototype.increase = function (config, time, unit) {
var amount = 1;
switch (unit) {
case 'minute':
amount = config.minutesInterval;
break;
case 'second':
amount = config.secondsInterval;
break;
}
return time.clone().add(amount, unit);
};
TimeSelectService.prototype.toggleMeridiem = function (time) {
if (time.hours() < FIRST_PM_HOUR) {
return time.clone().add(12, 'hour');
}
else {
return time.clone().subtract(12, 'hour');
}
};
TimeSelectService.prototype.shouldShowDecrease = function (config, time, unit) {
if (!config.min && !config.minTime) {
return true;
}
var newTime = this.decrease(config, time, unit);
return (!config.min || config.min.isSameOrBefore(newTime))
&& (!config.minTime || config.minTime.isSameOrBefore(this.utilsService.onlyTime(newTime)));
};
TimeSelectService.prototype.shouldShowIncrease = function (config, time, unit) {
if (!config.max && !config.maxTime) {
return true;
}
var newTime = this.increase(config, time, unit);
return (!config.max || config.max.isSameOrAfter(newTime))
&& (!config.maxTime || config.maxTime.isSameOrAfter(this.utilsService.onlyTime(newTime)));
};
TimeSelectService.prototype.shouldShowToggleMeridiem = function (config, time) {
if (!config.min && !config.max && !config.minTime && !config.maxTime) {
return true;
}
var newTime = this.toggleMeridiem(time);
return (!config.max || config.max.isSameOrAfter(newTime))
&& (!config.min || config.min.isSameOrBefore(newTime))
&& (!config.maxTime || config.maxTime.isSameOrAfter(this.utilsService.onlyTime(newTime)))
&& (!config.minTime || config.minTime.isSameOrBefore(this.utilsService.onlyTime(newTime)));
};
TimeSelectService = __decorate([
Injectable(),
__metadata("design:paramtypes", [UtilsService])
], TimeSelectService);
return TimeSelectService;
}());
var moment$4 = momentNs;
var DAY_FORMAT = 'YYYYMMDD';
var TIME_FORMAT = 'HH:mm:ss';
var COMBINED_FORMAT = DAY_FORMAT + TIME_FORMAT;
var DayTimeCalendarService = /** @class */ (function () {
function DayTimeCalendarService(utilsService, dayCalendarService, timeSelectService) {
this.utilsService = utilsService;
this.dayCalendarService = dayCalendarService;
this.timeSelectService = timeSelectService;
this.DEFAULT_CONFIG = {
locale: moment$4.locale()
};
}
DayTimeCalendarService.prototype.getConfig = function (config) {
var _config = __assign({}, this.DEFAULT_CONFIG, this.timeSelectService.getConfig(config), this.dayCalendarService.getConfig(config));
moment$4.locale(config.locale);
return _config;
};
DayTimeCalendarService.prototype.updateDay = function (current, day, config) {
var time = current ? current : moment$4();
var updated = moment$4(day.format(DAY_FORMAT) + time.format(TIME_FORMAT), COMBINED_FORMAT);
if (config.min) {
var min = config.min;
updated = min.isAfter(updated) ? min : updated;
}
if (config.max) {
var max = config.max;
updated = max.isBefore(updated) ? max : updated;
}
return updated;
};
DayTimeCalendarService.prototype.updateTime = function (current, time) {
var day = current ? current : moment$4();
return moment$4(day.format(DAY_FORMAT) + time.format(TIME_FORMAT), COMBINED_FORMAT);
};
DayTimeCalendarService = __decorate([
Injectable(),
__metadata("design:paramtypes", [UtilsService,
DayCalendarService,
TimeSelectService])
], DayTimeCalendarService);
return DayTimeCalendarService;
}());
var moment$5 = momentNs;
var TimeSelectComponent = /** @class */ (function () {
function TimeSelectComponent(timeSelectService, utilsService, cd) {
this.timeSelectService = timeSelectService;
this.utilsService = utilsService;
this.cd = cd;
this.onChange = new EventEmitter();
this.isInited = false;
this.api = {
triggerChange: this.emitChange.bind(this)
};
}
TimeSelectComponent_1 = TimeSelectComponent;
Object.defineProperty(TimeSelectComponent.prototype, "selected", {
get: function () {
return this._selected;
},
set: function (selected) {
this._selected = selected;
this.calculateTimeParts(this.selected);
this.showDecHour = this.timeSelectService.shouldShowDecrease(this.componentConfig, this._selected, 'hour');
this.showDecMinute = this.timeSelectService.shouldShowDecrease(this.componentConfig, this._selected, 'minute');
this.showDecSecond = this.timeSelectService.shouldShowDecrease(this.componentConfig, this._selected, 'second');
this.showIncHour = this.timeSelectService.shouldShowIncrease(this.componentConfig, this._selected, 'hour');
this.showIncMinute = this.timeSelectService.shouldShowIncrease(this.componentConfig, this._selected, 'minute');
this.showIncSecond = this.timeSelectService.shouldShowIncrease(this.componentConfig, this._selected, 'second');
this.showToggleMeridiem = this.timeSelectService.shouldShowToggleMeridiem(this.componentConfig, this._selected);
this.onChangeCallback(this.processOnChangeCallback(selected));
},
enumerable: true,
configurable: true
});
TimeSelectComponent.prototype.ngOnInit = function () {
this.isInited = true;
this.init();
this.initValidators();
};
TimeSelectComponent.prototype.init = function () {
this.componentConfig = this.timeSelectService.getConfig(this.config);
this.selected = this.selected || moment$5();
this.inputValueType = this.utilsService.getInputType(this.inputValue, false);
};
TimeSelectComponent.prototype.ngOnChanges = function (changes) {
if (this.isInited) {
var minDate = changes.minDate, maxDate = changes.maxDate, minTime = changes.minTime, maxTime = changes.maxTime;
this.init();
if (minDate || maxDate || minTime || maxTime) {
this.initValidators();
}
}
};
TimeSelectComponent.prototype.writeValue = function (value) {
this.inputValue = value;
if (value) {
var momentValue = this.utilsService
.convertToMomentArray(value, this.timeSelectService.getTimeFormat(this.componentConfig), false)[0];
if (momentValue.isValid()) {
this.selected = momentValue;
this.inputValueType = this.utilsService
.getInputType(this.inputValue, false);
}
}
this.cd.markForCheck();
};
TimeSelectComponent.prototype.registerOnChange = function (fn) {
this.onChangeCallback = fn;
};
TimeSelectComponent.prototype.onChangeCallback = function (_) {
};
TimeSelectComponent.prototype.registerOnTouched = function (fn) {
};
TimeSelectComponent.prototype.validate = function (formControl) {
if (this.minDate || this.maxDate || this.minTime || this.maxTime) {
return this.validateFn(formControl.value);
}
else {
return function () { return null; };
}
};
TimeSelectComponent.prototype.processOnChangeCallback = function (value) {
return this.utilsService.convertFromMomentArray(this.timeSelectService.getTimeFormat(this.componentConfig), [value], this.componentConfig.returnedValueType || this.inputValueType);
};
TimeSelectComponent.prototype.initValidators = function () {
this.validateFn = this.utilsService.createValidator({
minDate: this.minDate,
maxDate: this.maxDate,
minTime: this.minTime,
maxTime: this.maxTime
}, undefined, 'day');
this.onChangeCallback(this.processOnChangeCallback(this.se