ngx-jalali-date-picker
Version:
This is a configurable date-picker build for Angular applications. Supports latest (Angular 18) version. This date-picker is based on ng2-date-piker and ngx-jalali-date-picker date pickers.
2,642 lines • 156 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, Output, forwardRef, ViewChild, HostListener, Directive, Optional, NgModule } from '@angular/core';
import * as i5 from '@angular/forms';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import moment from 'jalali-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 = {}));
class UtilsService {
static debounce(func, wait) {
let timeout;
return function () {
const context = this, args = arguments;
timeout = clearTimeout(timeout);
setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
;
createArray(size) {
return new Array(size).fill(1);
}
convertToMoment(date, format, locale) {
let m;
if (!date) {
m = null;
}
else if (typeof date === 'string') {
m = moment(date, format);
}
else {
m = date.clone();
}
if (m && locale) {
m.locale(locale);
}
return m;
}
isDateValid(date, format, locale) {
if (date === '') {
return true;
}
if (date.length !== format.length) {
return false;
}
return moment.from(date, locale || 'fa', format).isValid();
// return moment(date, format, true).isValid();
}
// todo:: add unit test
getDefaultDisplayDate(current, selected, allowMultiSelect, minDate, locale) {
let m = moment();
if (current) {
m = current.clone();
}
else if (minDate && minDate.isAfter(moment())) {
m = minDate.clone();
}
else if (allowMultiSelect) {
if (selected && selected[selected.length]) {
m = selected[selected.length].clone();
}
}
else if (selected && selected[0]) {
m = selected[0].clone();
}
if (locale) {
m.locale(locale);
}
return m;
}
// todo:: add unit test
getInputType(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
convertToMomentArray(value, format, allowMultiSelect, locale) {
switch (this.getInputType(value, allowMultiSelect)) {
case (ECalendarValue.String):
return value ? [moment(value, format, true).locale(locale)] : [];
case (ECalendarValue.StringArr):
return value.map(v => v ? moment(v, format, true).locale(locale) : null).filter(Boolean);
case (ECalendarValue.Moment):
return value ? [value.clone().locale(locale)] : [];
case (ECalendarValue.MomentArr):
return (value || []).map(v => v.clone().locale(locale));
default:
return [];
}
}
// todo:: add unit test
convertFromMomentArray(format, value, convertTo, locale) {
switch (convertTo) {
case (ECalendarValue.String):
return value[0] && value[0].locale(locale).format(format);
case (ECalendarValue.StringArr):
return value.filter(Boolean).map(v => v.locale(locale).format(format));
case (ECalendarValue.Moment):
return value[0] ? value[0].clone().locale(locale) : value[0];
case (ECalendarValue.MomentArr):
return value ? value.map(v => v.clone().locale(locale)) : value;
default:
return value;
}
}
convertToString(value, format, locale) {
let tmpVal;
if (typeof value === 'string') {
tmpVal = [value];
}
else if (Array.isArray(value)) {
if (value.length) {
tmpVal = value.map((v) => {
return this.convertToMoment(v, format, locale).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
clearUndefined(obj) {
if (!obj) {
return obj;
}
Object.keys(obj).forEach((key) => (obj[key] === undefined) && delete obj[key]);
return obj;
}
updateSelected(isMultiple, currentlySelected, date, granularity = 'day') {
const isSelected = !date.selected;
if (isMultiple) {
return isSelected
? currentlySelected.concat([date.date])
: currentlySelected.filter(d => !d.isSame(date.date, granularity));
}
else {
return isSelected ? [date.date] : [];
}
}
closestParent(element, selector) {
if (!element) {
return undefined;
}
const match = element.querySelector(selector);
return match || this.closestParent(element.parentElement, selector);
}
onlyTime(m) {
return m && moment.isMoment(m) && moment(m.format('HH:mm:ss'), 'HH:mm:ss');
}
granularityFromType(calendarType) {
switch (calendarType) {
case 'time':
return 'second';
case 'daytime':
return 'second';
default:
return calendarType;
}
}
createValidator({ minDate, maxDate, minTime, maxTime }, format, calendarType, locale) {
let isValid;
let value;
const validators = [];
const granularity = this.granularityFromType(calendarType);
if (minDate) {
const md = this.convertToMoment(minDate, format, locale);
validators.push({
key: 'minDate',
isValid: () => {
const _isValid = value.every(val => val.isSameOrAfter(md, granularity));
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (maxDate) {
const md = this.convertToMoment(maxDate, format, locale);
validators.push({
key: 'maxDate',
isValid: () => {
const _isValid = value.every(val => val.isSameOrBefore(md, granularity));
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (minTime) {
const md = this.onlyTime(this.convertToMoment(minTime, format, locale));
validators.push({
key: 'minTime',
isValid: () => {
const _isValid = value.every(val => this.onlyTime(val).isSameOrAfter(md));
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
if (maxTime) {
const md = this.onlyTime(this.convertToMoment(maxTime, format, locale));
validators.push({
key: 'maxTime',
isValid: () => {
const _isValid = value.every(val => this.onlyTime(val).isSameOrBefore(md));
isValid = isValid ? _isValid : false;
return _isValid;
}
});
}
return (inputVal) => {
isValid = true;
value = this.convertToMomentArray(inputVal, format, true, locale).filter(Boolean);
if (!value.every(val => val.isValid())) {
return {
format: {
given: inputVal
}
};
}
const errors = validators.reduce((map, err) => {
if (!err.isValid()) {
map[err.key] = {
given: value
};
}
return map;
}, {});
return !isValid ? errors : null;
};
}
datesStringToStringArray(value) {
return (value || '').split('|').map(m => m.trim()).filter(Boolean);
}
getValidMomentArray(value, format, locale) {
return this.datesStringToStringArray(value)
.filter(d => this.isDateValid(d, format, locale))
.map(d => moment(d, format));
}
shouldShowCurrent(showGoToCurrent, mode, min, max) {
return showGoToCurrent &&
mode !== 'time' &&
this.isDateInRange(moment(), min, max);
}
isDateInRange(date, from, to) {
if (!from && !to) {
return true;
}
if (!from)
return date.isBefore(to, 'day');
if (!to)
return date.isAfter(from, 'day');
return date.isBetween(from, to, 'day', '[]');
}
convertPropsToMoment(obj, format, props, locale) {
props.forEach((prop) => {
if (obj.hasOwnProperty(prop)) {
obj[prop] = this.convertToMoment(obj[prop], format, locale);
}
});
}
shouldResetCurrentView(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;
}
getNativeElement(elem) {
if (!elem) {
return null;
}
else if (typeof elem === 'string') {
return document.querySelector(elem);
}
else {
return elem;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilsService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilsService, decorators: [{
type: Injectable
}] });
class DayCalendarService {
constructor(utilsService) {
this.utilsService = utilsService;
this.DEFAULT_CONFIG = {
showNearMonthDays: true,
showWeekNumbers: false,
firstDayOfWeek: 'su',
weekDayFormat: 'ddd',
format: 'DD-MM-YYYY',
allowMultiSelect: false,
monthFormat: 'MMM, YYYY',
enableMonthSelector: true,
locale: moment.locale(),
dayBtnFormat: 'DD',
unSelectOnClick: true
};
this.DAYS = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
}
getConfig(config) {
const _config = {
...this.DEFAULT_CONFIG,
...this.utilsService.clearUndefined(config)
};
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
moment.locale(_config.locale);
return _config;
}
generateDaysMap(firstDayOfWeek) {
const firstDayIndex = this.DAYS.indexOf(firstDayOfWeek);
const daysArr = this.DAYS.slice(firstDayIndex, 7).concat(this.DAYS.slice(0, firstDayIndex));
return daysArr.reduce((map, day, index) => {
map[day] = index;
return map;
}, {});
}
generateMonthArray(config, month, selected) {
const parsedMonth = month.isValid() ? month.clone() : moment();
let monthArray = [];
const firstDayOfWeekIndex = this.DAYS.indexOf(config.firstDayOfWeek);
const firstDayOfBoard = parsedMonth.clone().startOf('month');
while (firstDayOfBoard.day() !== firstDayOfWeekIndex) {
firstDayOfBoard.subtract(1, 'day');
}
const current = firstDayOfBoard.clone();
const prevMonth = parsedMonth.clone().subtract(1, 'month');
const nextMonth = parsedMonth.clone().add(1, 'month');
const today = moment();
const daysOfCalendar = this.utilsService.createArray(42)
.reduce((array) => {
array.push({
date: current.clone(),
selected: !!selected.find(selectedDay => current.isSame(selectedDay, 'day')),
currentMonth: current.isSame(parsedMonth, '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((day, index) => {
const weekIndex = Math.floor(index / 7);
if (!monthArray[weekIndex]) {
monthArray.push([]);
}
monthArray[weekIndex].push(day);
});
if (!config.showNearMonthDays) {
monthArray = this.removeNearMonthWeeks(parsedMonth, monthArray);
}
return monthArray;
}
generateWeekdays(firstDayOfWeek, locale) {
const weekdayNames = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'].reduce((acc, d, i) => {
const m = moment();
if (locale) {
m.locale(locale);
}
m.day(i);
acc[d] = m;
return acc;
}, {});
const weekdays = [];
const daysMap = this.generateDaysMap(firstDayOfWeek);
for (const dayKey in daysMap) {
if (daysMap.hasOwnProperty(dayKey)) {
weekdays[daysMap[dayKey]] = weekdayNames[dayKey];
}
}
return weekdays;
}
isDateDisabled(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
getHeaderLabel(config, month) {
if (config.monthFormatter) {
return config.monthFormatter(month);
}
return month.format(config.monthFormat);
}
// todo:: add unit tests
shouldShowLeft(min, currentMonthView) {
return min ? min.isBefore(currentMonthView, 'month') : true;
}
// todo:: add unit tests
shouldShowRight(max, currentMonthView) {
return max ? max.isAfter(currentMonthView, 'month') : true;
}
generateDaysIndexMap(firstDayOfWeek) {
const firstDayIndex = this.DAYS.indexOf(firstDayOfWeek);
const daysArr = this.DAYS.slice(firstDayIndex, 7).concat(this.DAYS.slice(0, firstDayIndex));
return daysArr.reduce((map, day, index) => {
map[index] = day;
return map;
}, {});
}
getMonthCalendarConfig(componentConfig) {
return this.utilsService.clearUndefined({
min: componentConfig.min,
max: componentConfig.max,
format: componentConfig.format,
isNavHeaderBtnClickable: true,
allowMultiSelect: false,
locale: componentConfig.locale,
yearFormat: componentConfig.yearFormat,
yearFormatter: componentConfig.yearFormatter,
monthBtnFormat: componentConfig.monthBtnFormat,
monthBtnFormatter: componentConfig.monthBtnFormatter,
monthBtnCssClassCallback: componentConfig.monthBtnCssClassCallback,
isMonthDisabledCallback: componentConfig.isMonthDisabledCallback,
multipleYearsNavigateBy: componentConfig.multipleYearsNavigateBy,
showMultipleYearsNavigation: componentConfig.showMultipleYearsNavigation,
showGoToCurrent: componentConfig.showGoToCurrent,
numOfMonthRows: componentConfig.numOfMonthRows
});
}
getDayBtnText(config, day) {
if (config.dayBtnFormatter) {
return config.dayBtnFormatter(day);
}
return day.format(config.dayBtnFormat);
}
getDayBtnCssClass(config, day) {
if (config.dayBtnCssClassCallback) {
return config.dayBtnCssClassCallback(day);
}
return '';
}
removeNearMonthWeeks(currentMonth, monthArray) {
if (monthArray[monthArray.length - 1].find((day) => day.date.isSame(currentMonth, 'month'))) {
return monthArray;
}
else {
return monthArray.slice(0, -1);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayCalendarService, deps: [{ token: UtilsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayCalendarService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayCalendarService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }] });
const FIRST_PM_HOUR = 12;
class TimeSelectService {
constructor(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.locale()
};
}
getConfig(config) {
const timeConfigs = {
maxTime: this.utilsService.onlyTime(config && config.maxTime),
minTime: this.utilsService.onlyTime(config && config.minTime)
};
const _config = {
...this.DEFAULT_CONFIG,
...this.utilsService.clearUndefined(config),
...timeConfigs
};
moment.locale(_config.locale);
return _config;
}
getTimeFormat(config) {
return (config.showTwentyFourHours ? config.hours24Format : config.hours12Format)
+ config.timeSeparator + config.minutesFormat
+ (config.showSeconds ? (config.timeSeparator + config.secondsFormat) : '')
+ (config.showTwentyFourHours ? '' : ' ' + config.meridiemFormat);
}
getHours(config, t) {
const time = t || moment();
return time && time.format(config.showTwentyFourHours ? config.hours24Format : config.hours12Format);
}
getMinutes(config, t) {
const time = t || moment();
return time && time.format(config.minutesFormat);
}
getSeconds(config, t) {
const time = t || moment();
return time && time.format(config.secondsFormat);
}
getMeridiem(config, time) {
return time && time.format(config.meridiemFormat);
}
decrease(config, time, unit) {
let amount = 1;
switch (unit) {
case 'minute':
amount = config.minutesInterval;
break;
case 'second':
amount = config.secondsInterval;
break;
}
return time.clone().subtract(amount, unit);
}
increase(config, time, unit) {
let amount = 1;
switch (unit) {
case 'minute':
amount = config.minutesInterval;
break;
case 'second':
amount = config.secondsInterval;
break;
}
return time.clone().add(amount, unit);
}
toggleMeridiem(time) {
if (time.hours() < FIRST_PM_HOUR) {
return time.clone().add(12, 'hour');
}
else {
return time.clone().subtract(12, 'hour');
}
}
shouldShowDecrease(config, time, unit) {
if (!config.min && !config.minTime) {
return true;
}
const newTime = this.decrease(config, time, unit);
return (!config.min || config.min.isSameOrBefore(newTime))
&& (!config.minTime || config.minTime.isSameOrBefore(this.utilsService.onlyTime(newTime)));
}
shouldShowIncrease(config, time, unit) {
if (!config.max && !config.maxTime) {
return true;
}
const newTime = this.increase(config, time, unit);
return (!config.max || config.max.isSameOrAfter(newTime))
&& (!config.maxTime || config.maxTime.isSameOrAfter(this.utilsService.onlyTime(newTime)));
}
shouldShowToggleMeridiem(config, time) {
if (!config.min && !config.max && !config.minTime && !config.maxTime) {
return true;
}
const 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)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSelectService, deps: [{ token: UtilsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSelectService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSelectService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }] });
const DAY_FORMAT = 'YYYYMMDD';
const TIME_FORMAT = 'HH:mm:ss';
const COMBINED_FORMAT = DAY_FORMAT + TIME_FORMAT;
class DayTimeCalendarService {
constructor(utilsService, dayCalendarService, timeSelectService) {
this.utilsService = utilsService;
this.dayCalendarService = dayCalendarService;
this.timeSelectService = timeSelectService;
this.DEFAULT_CONFIG = {
locale: moment.locale()
};
}
getConfig(config) {
const _config = {
...this.DEFAULT_CONFIG,
...this.timeSelectService.getConfig(config),
...this.dayCalendarService.getConfig(config)
};
moment.locale(config.locale);
return _config;
}
updateDay(current, day, config) {
const time = current ? current : moment();
let updated = moment(day.format(DAY_FORMAT) + time.format(TIME_FORMAT), COMBINED_FORMAT);
if (config.min) {
const min = config.min;
updated = min.isAfter(updated) ? min : updated;
}
if (config.max) {
const max = config.max;
updated = max.isBefore(updated) ? max : updated;
}
return updated;
}
updateTime(current, time) {
const day = current ? current : moment();
return moment(day.format(DAY_FORMAT) + time.format(TIME_FORMAT), COMBINED_FORMAT);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayTimeCalendarService, deps: [{ token: UtilsService }, { token: DayCalendarService }, { token: TimeSelectService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayTimeCalendarService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayTimeCalendarService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }, { type: DayCalendarService }, { type: TimeSelectService }] });
class DatePickerService {
constructor(utilsService, timeSelectService, daytimeCalendarService) {
this.utilsService = utilsService;
this.timeSelectService = timeSelectService;
this.daytimeCalendarService = daytimeCalendarService;
this.onPickerClosed = new EventEmitter();
this.defaultConfig = {
closeOnSelect: true,
closeOnSelectDelay: 100,
format: 'YYYY-MM-D',
openOnFocus: true,
openOnClick: true,
onOpenDelay: 0,
disableKeypress: false,
showNearMonthDays: true,
showWeekNumbers: false,
enableMonthSelector: true,
showGoToCurrent: true,
locale: 'fa',
hideOnOutsideClick: true
};
this.gregorianExtensionConfig = {
format: 'DD-MM-YYYY',
locale: 'en'
};
}
// todo:: add unit tests
getConfig(config, mode = 'daytime') {
const _config = {
...this.defaultConfig,
...((config && config.locale && config.locale !== 'fa') ? this.gregorianExtensionConfig : {}),
format: this.getDefaultFormatByMode(mode, config),
...this.utilsService.clearUndefined(config)
};
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max'], _config.locale);
if (config && config.allowMultiSelect && config.closeOnSelect === undefined) {
_config.closeOnSelect = false;
}
// moment.locale(_config.locale);
return _config;
}
getDayConfigService(pickerConfig) {
return {
min: pickerConfig.min,
max: pickerConfig.max,
isDayDisabledCallback: pickerConfig.isDayDisabledCallback,
weekDayFormat: pickerConfig.weekDayFormat,
showNearMonthDays: pickerConfig.showNearMonthDays,
showWeekNumbers: pickerConfig.showWeekNumbers,
firstDayOfWeek: pickerConfig.firstDayOfWeek,
format: pickerConfig.format,
allowMultiSelect: pickerConfig.allowMultiSelect,
monthFormat: pickerConfig.monthFormat,
monthFormatter: pickerConfig.monthFormatter,
enableMonthSelector: pickerConfig.enableMonthSelector,
yearFormat: pickerConfig.yearFormat,
yearFormatter: pickerConfig.yearFormatter,
dayBtnFormat: pickerConfig.dayBtnFormat,
dayBtnFormatter: pickerConfig.dayBtnFormatter,
dayBtnCssClassCallback: pickerConfig.dayBtnCssClassCallback,
monthBtnFormat: pickerConfig.monthBtnFormat,
monthBtnFormatter: pickerConfig.monthBtnFormatter,
monthBtnCssClassCallback: pickerConfig.monthBtnCssClassCallback,
multipleYearsNavigateBy: pickerConfig.multipleYearsNavigateBy,
showMultipleYearsNavigation: pickerConfig.showMultipleYearsNavigation,
locale: pickerConfig.locale,
returnedValueType: pickerConfig.returnedValueType,
showGoToCurrent: pickerConfig.showGoToCurrent,
unSelectOnClick: pickerConfig.unSelectOnClick
};
}
getDayTimeConfigService(pickerConfig) {
return this.daytimeCalendarService.getConfig(pickerConfig);
}
getTimeConfigService(pickerConfig) {
return this.timeSelectService.getConfig(pickerConfig);
}
pickerClosed() {
this.onPickerClosed.emit();
}
// todo:: add unit tests
isValidInputDateValue(value, config) {
value = value ? value : '';
const datesStrArr = this.utilsService.datesStringToStringArray(value);
return datesStrArr.every(date => this.utilsService.isDateValid(date, config.format, config.locale));
}
// todo:: add unit tests
convertInputValueToMomentArray(value, config) {
value = value ? value : '';
const datesStrArr = this.utilsService.datesStringToStringArray(value);
return this.utilsService.convertToMomentArray(datesStrArr, config.format, config.allowMultiSelect, config.locale);
}
getDefaultFormatByMode(mode, config) {
let dateFormat = 'YYYY-MM-DD';
let monthFormat = 'MMMM YY';
const timeFormat = 'HH:mm:ss';
if (config && config.locale && config.locale !== 'fa') {
dateFormat = 'DD-MM-YYYY';
monthFormat = 'MMM, YYYY';
}
switch (mode) {
case 'day':
return dateFormat;
case 'daytime':
return dateFormat + ' ' + timeFormat;
case 'time':
return timeFormat;
case 'month':
return monthFormat;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerService, deps: [{ token: UtilsService }, { token: TimeSelectService }, { token: DayTimeCalendarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }, { type: TimeSelectService }, { type: DayTimeCalendarService }] });
class DomHelper {
static setYAxisPosition(element, container, anchor, drops) {
const anchorRect = anchor.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const bottom = anchorRect.bottom - containerRect.top;
const top = anchorRect.top - containerRect.top;
if (drops === 'down') {
element.style.top = (bottom + 1 + 'px');
}
else {
element.style.top = (top - 1 - element.scrollHeight) + 'px';
}
}
static setXAxisPosition(element, container, anchor, dimElem, opens) {
const anchorRect = anchor.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const left = anchorRect.left - containerRect.left;
if (opens === 'right') {
element.style.left = left + 'px';
}
else {
element.style.left = left - dimElem.offsetWidth + anchor.offsetWidth + 'px';
}
}
static isTopInView(el) {
const { top } = el.getBoundingClientRect();
return (top >= 0);
}
static isBottomInView(el) {
const { bottom } = el.getBoundingClientRect();
return (bottom <= window.innerHeight);
}
static isLeftInView(el) {
const { left } = el.getBoundingClientRect();
return (left >= 0);
}
static isRightInView(el) {
const { right } = el.getBoundingClientRect();
return (right <= window.innerWidth);
}
appendElementToPosition(config) {
const { container, element } = config;
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(() => {
this.setElementPosition(config);
element.style.visibility = 'visible';
});
}
setElementPosition({ element, container, anchor, dimElem, drops, opens }) {
DomHelper.setYAxisPosition(element, container, anchor, 'down');
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
if (drops !== 'down' && drops !== 'up') {
if (DomHelper.isBottomInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'down');
}
else if (DomHelper.isTopInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'up');
}
}
else {
DomHelper.setYAxisPosition(element, container, anchor, drops);
}
if (opens !== 'left' && opens !== 'right') {
if (DomHelper.isRightInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
}
else if (DomHelper.isLeftInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'left');
}
}
else {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, opens);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DomHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DomHelper, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DomHelper, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class MonthCalendarService {
constructor(utilsService) {
this.utilsService = utilsService;
this.DEFAULT_CONFIG = {
allowMultiSelect: false,
yearFormat: 'YYYY',
format: 'MMMM-YYYY',
isNavHeaderBtnClickable: false,
monthBtnFormat: 'MMMM',
locale: 'fa',
multipleYearsNavigateBy: 10,
showMultipleYearsNavigation: false,
unSelectOnClick: true
};
this.GREGORIAN_DEFAULT_CONFIG = {
format: 'MM-YYYY',
monthBtnFormat: 'MMM',
locale: 'en'
};
}
getConfig(config) {
const _config = {
...this.DEFAULT_CONFIG,
...((config && config.locale && config.locale !== 'fa') ? this.GREGORIAN_DEFAULT_CONFIG : {}),
...this.utilsService.clearUndefined(config)
};
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max'], _config.locale);
// moment.locale(_config.locale);
return _config;
}
generateYear(config, year, selected = null) {
const index = year.clone().startOf('year');
return this.utilsService.createArray(3).map(() => {
return this.utilsService.createArray(4).map(() => {
const date = index.clone();
const month = {
date,
selected: !!selected.find(s => index.isSame(s, 'month')),
currentMonth: index.isSame(moment(), 'month'),
disabled: this.isMonthDisabled(date, config),
text: this.getMonthBtnText(config, date)
};
index.add(1, 'month');
return month;
});
});
}
isMonthDisabled(date, config) {
if (config.min && date.isBefore(config.min, 'month')) {
return true;
}
return !!(config.max && date.isAfter(config.max, 'month'));
}
shouldShowLeft(min, currentMonthView) {
return min ? min.isBefore(currentMonthView, 'year') : true;
}
shouldShowRight(max, currentMonthView) {
return max ? max.isAfter(currentMonthView, 'year') : true;
}
getHeaderLabel(config, year) {
if (config.yearFormatter) {
return config.yearFormatter(year);
}
year.locale(config.locale);
return year.format(config.yearFormat);
}
getMonthBtnText(config, month) {
if (config.monthBtnFormatter) {
return config.monthBtnFormatter(month);
}
return month.format(config.monthBtnFormat);
}
getMonthBtnCssClass(config, month) {
if (config.monthBtnCssClassCallback) {
return config.monthBtnCssClassCallback(month);
}
return '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthCalendarService, deps: [{ token: UtilsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthCalendarService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthCalendarService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }] });
class CalendarNavComponent {
constructor() {
this.isLabelClickable = false;
this.showLeftNav = true;
this.showLeftSecondaryNav = false;
this.showRightNav = true;
this.showRightSecondaryNav = false;
this.leftNavDisabled = false;
this.leftSecondaryNavDisabled = false;
this.rightNavDisabled = false;
this.rightSecondaryNavDisabled = false;
this.showGoToCurrent = true;
this.onLeftNav = new EventEmitter();
this.onLeftSecondaryNav = new EventEmitter();
this.onRightNav = new EventEmitter();
this.onRightSecondaryNav = new EventEmitter();
this.onLabelClick = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
}
leftNavClicked() {
this.onLeftNav.emit();
}
leftSecondaryNavClicked() {
this.onLeftSecondaryNav.emit();
}
rightNavClicked() {
this.onRightNav.emit();
}
rightSecondaryNavClicked() {
this.onRightSecondaryNav.emit();
}
labelClicked() {
this.onLabelClick.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarNavComponent, selector: "dp-calendar-nav", inputs: { label: "label", isLabelClickable: "isLabelClickable", showLeftNav: "showLeftNav", showLeftSecondaryNav: "showLeftSecondaryNav", showRightNav: "showRightNav", showRightSecondaryNav: "showRightSecondaryNav", leftNavDisabled: "leftNavDisabled", leftSecondaryNavDisabled: "leftSecondaryNavDisabled", rightNavDisabled: "rightNavDisabled", rightSecondaryNavDisabled: "rightSecondaryNavDisabled", showGoToCurrent: "showGoToCurrent", theme: "theme" }, outputs: { onLeftNav: "onLeftNav", onLeftSecondaryNav: "onLeftSecondaryNav", onRightNav: "onRightNav", onRightSecondaryNav: "onRightSecondaryNav", onLabelClick: "onLabelClick", onGoToCurrent: "onGoToCurrent" }, host: { properties: { "class": "this.theme" } }, ngImport: i0, template: "<div class=\"dp-calendar-nav-container\">\n <div class=\"dp-nav-header\">\n <span [attr.data-hidden]=\"isLabelClickable\"\n [hidden]=\"isLabelClickable\"\n [innerText]=\"label\">\n </span>\n <button (click)=\"labelClicked()\"\n [attr.data-hidden]=\"!isLabelClickable\"\n [hidden]=\"!isLabelClickable\"\n [innerText]=\"label\"\n class=\"dp-nav-header-btn\"\n type=\"button\">\n </button>\n </div>\n\n <div class=\"dp-nav-btns-container\">\n <div class=\"dp-calendar-nav-container-left\">\n <button (click)=\"leftSecondaryNavClicked()\"\n *ngIf=\"showLeftSecondaryNav\"\n [disabled]=\"leftSecondaryNavDisabled\"\n class=\"dp-calendar-secondary-nav-left\"\n type=\"button\">\n </button>\n <button (click)=\"leftNavClicked()\"\n [attr.data-hidden]=\"!showLeftNav\"\n [disabled]=\"leftNavDisabled\"\n [hidden]=\"!showLeftNav\"\n class=\"dp-calendar-nav-left\"\n type=\"button\">\n </button>\n </div>\n <button (click)=\"onGoToCurrent.emit()\"\n *ngIf=\"showGoToCurrent\"\n class=\"dp-current-location-btn\"\n type=\"button\">\n </button>\n <div class=\"dp-calendar-nav-container-right\">\n <button (click)=\"rightNavClicked()\"\n [attr.data-hidden]=\"!showRightNav\"\n [disabled]=\"rightNavDisabled\"\n [hidden]=\"!showRightNav\"\n class=\"dp-calendar-nav-right\"\n type=\"button\">\n </button>\n <button (click)=\"rightSecondaryNavClicked()\"\n *ngIf=\"showRightSecondaryNav\"\n [disabled]=\"rightSecondaryNavDisabled\"\n class=\"dp-calendar-secondary-nav-right\"\n type=\"button\">\n </button>\n </div>\n </div>\n</div>\n", styles: ["dp-calendar-nav .dp-calendar-nav-container{position:relative;box-sizing:border-box;height:25px;border:1px solid #000000;border-bottom:none}dp-calendar-nav .dp-nav-date-btn{box-sizing:border-box;height:25px;border:1px solid #000000;border-bottom:none}dp-calendar-nav .dp-nav-btns-container{position:absolute;top:50%;transform:translateY(-50%);right:5px;display:inline-block}dp-calendar-nav .dp-calendar-nav-container-left,dp-calendar-nav .dp-calendar-nav-container-right{display:inline-block}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right,dp-calendar-nav .dp-calendar-secondary-nav-left,dp-calendar-nav .dp-calendar-secondary-nav-right{position:relative;width:16px;cursor:pointer}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right{line-height:0}dp-calendar-nav .dp-calendar-nav-left:before,dp-calendar-nav .dp-calendar-nav-right:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}dp-calendar-nav .dp-calendar-secondary-nav-left,dp-calendar-nav .dp-calendar-secondary-nav-right{padding:0}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-right:before,dp-calendar-nav .dp-calendar-secondary-nav-left:after,dp-calendar-nav .dp-calendar-secondary-nav-right:after{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-right:before{right:-10px}dp-calendar-nav .dp-calendar-secondary-nav-right{left:initial;right:5px}dp-calendar-nav .dp-calendar-nav-left:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(-135deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-left:after{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(-135deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before{right:-10px}dp-calendar-nav .dp-nav-header{position:absolute;top:50%;transform:translateY(-50%);left:5px;display:inline-block;font-size:13px}dp-calendar-nav .dp-nav-header-btn{cursor:pointer}dp-calendar-nav .dp-current-location-btn{position:relative;top:-1px;height:16px;width:16px;vertical-align:middle;background:#0009;border:1px solid rgba(0,0,0,.6);outline:none;border-radius:50%;box-shadow:inset 0 0 0 3px #fff;cursor:pointer}dp-calendar-nav .dp-current-location-btn:hover{background:#000}dp-calendar-nav.dp-material .dp-calendar-nav-container{height:30px;border:1px solid #E0E0E0}dp-calendar-nav.dp-material .dp-calendar-nav-left,dp-calendar-nav.dp-material .dp-calendar-nav-right,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-left,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-right{border:none;background:#fff;outline:none;font-size:16px;padding:0}dp-calendar-nav.dp-material .dp-calendar-secondary-nav-left,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-right{width:20px}dp-calendar-nav.dp-material .dp-nav-header-btn{height:20px;width:80px;border:none;background:#fff;outline:none}dp-calendar-nav.dp-material .dp-nav-header-btn:hover{background:#0000000d}dp-calendar-nav.dp-material .dp-nav-header-btn:active{background:#0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarNavComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-calendar-nav', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dp-calendar-nav-container\">\n <div class=\"dp-nav-header\">\n <span [attr.data-hidden]=\"isLabelClickable\"\n [hidden]=\"isLabelClickable\"\n [innerText]=\"label\">\n </span>\n <button (click)=\"labelClicked()\"\n [attr.data-hidden]=\"!isLabelClickable\"\n [hidden]=\"!isLabelClickable\"\n [innerText]=\"label\"\n class=\"dp-nav-header-btn\"\n type=\"button\">\n </button>\n </div>\n\n <div class=\"dp-nav-btns-container\">\n <div class=\"dp-calendar-nav-container-left\">\n <button (click)=\"leftSecondaryNavClicked()\"\n *ngIf=\"showLeftSecondaryNav\"\n [disabled]=\"leftSecondaryNavDisabled\"\n class=\"dp-calendar-secondary-nav-left\"\n type=\"button\">\n </button>\n <button (click)=\"leftNavClicked()\"\n [attr.data-hidden]=\"!showLeftNav\"\n [disabled]=\"leftNavDisabled\"\n [hidden]=\"!showLeftNav\"\n class=\"dp-calendar-nav-left\"\n type=\"button\">\n </button>\n </div>\n <button (click)=\"onGoToCurrent.emit()\"\n *ngIf=\"showGoToCurrent\"\n class=\"dp-current-location-btn\"\n type=\"button\">\n </button>\n <div class=\"dp-calendar-nav-container-right\">\n <button (click)=\"rightNavClicked()\"\n [attr.data-hidden]=\"!showRightNav\"\n [disabled]=\"rightNavDisabled\"\n [hidden]=\"!showRightNav\"\n class=\"dp-calendar-nav-right\"\n type=\"button\">\n </button>\n <button (click)=\"rightSecondaryNavClicked()\"\n *ngIf=\"showRightSecondaryNav\"\n [disabled]=\"rightSecondaryNavDisabled\"\n class=\"dp-calendar-secondary-nav-right\"\n type=\"button\">\n </button>\n </div>\n </div>\n</div>\n", styles: ["dp-calendar-nav .dp-calendar-nav-container{position:relative;box-sizing:border-box;height:25px;border:1px solid #000000;border-bottom:none}dp-calendar-nav .dp-nav-date-btn{box-sizing:border-box;height:25px;border:1px solid #000000;border-bottom:none}dp-calendar-nav .dp-nav-btns-container{position:absolute;top:50%;transform:translateY(-50%);right:5px;display:inline-block}dp-calendar-nav .dp-calendar-nav-container-left,dp-calendar-nav .dp-calendar-nav-container-right{display:inline-block}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right,dp-calendar-nav .dp-calendar-secondary-nav-left,dp-calendar-nav .dp-calendar-secondary-nav-right{position:relative;width:16px;cursor:pointer}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right{line-height:0}dp-calendar-nav .dp-calendar-nav-left:before,dp-calendar-nav .dp-calendar-nav-right:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}dp-calendar-nav .dp-calendar-secondary-nav-left,dp-calendar-nav .dp-calendar-secondary-nav-right{padding:0}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-right:before,dp-calendar-nav .dp-calendar-secondary-nav-left:after,dp-calendar-nav .dp-calendar-secondary-nav-right:after{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-right:before{right:-10px}dp-calendar-nav .dp-calendar-secondary-nav-right{left:initial;right:5px}dp-calendar-nav .dp-calendar-nav-left:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(-135deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before,dp-calendar-nav .dp-calendar-secondary-nav-left:after{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(-135deg)}dp-calendar-nav .dp-calendar-secondary-nav-left:before{right:-10px}dp-calendar-nav .dp-nav-header{position:absolute;top:50%;transform:translateY(-50%);left:5px;display:inline-block;font-size:13px}dp-calendar-nav .dp-nav-header-btn{cursor:pointer}dp-calendar-nav .dp-current-location-btn{position:relative;top:-1px;height:16px;width:16px;vertical-align:middle;background:#0009;border:1px solid rgba(0,0,0,.6);outline:none;border-radius:50%;box-shadow:inset 0 0 0 3px #fff;cursor:pointer}dp-calendar-nav .dp-current-location-btn:hover{background:#000}dp-calendar-nav.dp-material .dp-calendar-nav-container{height:30px;border:1px solid #E0E0E0}dp-calendar-nav.dp-material .dp-calendar-nav-left,dp-calendar-nav.dp-material .dp-calendar-nav-right,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-left,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-right{border:none;background:#fff;outline:none;font-size:16px;padding:0}dp-calendar-nav.dp-material .dp-calendar-secondary-nav-left,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-right{width:20px}dp-calendar-nav.dp-material .dp-nav-header-btn{height:20px;width:80px;border:none;background:#fff;outline:none}dp-calendar-nav.dp-material .dp-nav-header-btn:hover{background:#0000000d}dp-calendar-nav.dp-material .dp-nav-header-btn:active{background:#0000001a}\n"] }]
}], propDecorators: { label: [{
type: Input
}], isLabelClickable: [{
type: Input
}], showLeftNav: [{
type: Input
}], showLeftSecondaryNav: [{
type: Input
}], showRightNav: [{
type: Input
}], showRightSecondaryNav: [{
type: Input
}], leftNavDisabled: [{
type: Input
}], leftSecondaryNavDisabled: [{
type: Input
}], rightNavDisabled: [{
type: Input
}], rightSecondaryNavDisabled: [{
type: Input
}], showGoToCurrent: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], onLeftNav: [{
type: Output
}], onLeftSecondaryNav: [{
type: Output
}], onRightNav: [{
type: Output
}], onRightSecondaryNav: [{
type: Output
}], onLabelClick: [{
type: Output
}], onGoToCurrent: [{
type: Output
}] } });
class MonthCalendarComponent {
set selected(selected) {
this._selected = selected;
this.onChangeCallback(this.processOnChangeCallback(selected));
}
get selected() {
return this._selected;
}
set currentDateView(current) {
this._currentDateView = current.clone();
this.yearMonths = this.monthCalendarService
.generateYear(this.componentConfig, this._currentDateView, this.selected);
this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
this.showLeftNav = this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this._currentDateView);
this.showRightNav = this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
this.showSecondaryLeftNav = this.componentConfig.showMultipleYearsNavigation && this.showLeftNav;
this.showSecondaryRightNav = this.componentConfig.showMultipleYearsNavigation && this.showRightNav;
}
get currentDateView() {
return this._currentDateView;
}
constructor(monthCalendarService, utilsService, cd) {
this.monthCalendarService = monthCalendarService;
this.utilsService = utilsService;
this.cd = cd;
this.onSelect = new EventEmitter();
this.onNavHeaderBtnClick = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
this.onLeftNav = new EventEmitter();
this.onRightNav = new EventEmitter();
this.onLeftSecondaryNav = new EventEmitter();
this.onRightSecondaryNav = new EventEmitter();
this.isInited = false;
this._shouldShowCurrent = true;
this.api = {
toggleCalendar: this.toggleCalendarMode.bind(this),
moveCalendarTo: this.moveCalendarTo.bind(this)
};
}
ngOnInit() {
this.isInited = true;
this.init();
this.initValidators();
}
ngOnChanges(changes) {
if (this.isInited) {
const { minDate, maxDate, config } = changes;
this.handleConfigChange(config);
this.init();
if (minDate || maxDate) {
this.initValidators();
}
}
}
init() {
this.componentConfig = this.monthCalendarService.getConfig(this.config);
this.selected = this.selected || [];
this.currentDateView = this.displayDate
? this.displayDate
: this.utilsService
.getDefaultDisplayDate(this.currentDateView, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min, this.componentConfig.locale);
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
this._shouldShowCurrent = this.shouldShowCurrent();
}
writeValue(value) {
this.inputValue = value;
if (value) {
this.selected = this.utilsService
.convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect, this.componentConfig.locale);
this.yearMonths = this.monthCalendarService
.generateYear(this.componentConfig, this.currentDateView, this.selected);
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
}
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
onChangeCallback(_) {
}
;
registerOnTouched(fn) {
}
validate(formControl) {
if (this.minDate || this.maxDate) {
return this.validateFn(formControl.value);
}
else {
return () => null;
}
}
isFarsi() {
return this.componentConfig.locale === 'fa';
}
processOnChangeCallback(value) {
return this.utilsService.convertFromMomentArray(this.componentConfig.format, value, this.componentConfig.returnedValueType || this.inputValueType, this.componentConfig.locale);
}
initValidators() {
this.validateFn = this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, 'month', this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(this.selected));
}
monthClicked(month) {
if (month.selected && !this.componentConfig.unSelectOnClick) {
return;
}
this.selected = this.utilsService
.updateSelected(this.componentConfig.allowMultiSelect, this.selected, month, 'month');
this.yearMonths = this.monthCalendarService
.generateYear(this.componentConfig, this.currentDateView, this.selected);
this.onSelect.emit(month);
}
onLeftNavClick() {
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().subtract(1, 'year');
const to = this.currentDateView.clone();
this.yearMonths = this.monthCalendarService.generateYear(this.componentConfig, this.currentDateView, this.selected);
this.onLeftNav.emit({ from, to });
}
onLeftSecondaryNavClick() {
let navigateBy = this.componentConfig.multipleYearsNavigateBy;
const isOutsideRange = this.componentConfig.min &&
this.currentDateView.year() - this.componentConfig.min.year() < navigateBy;
if (isOutsideRange) {
navigateBy = this.currentDateView.year() - this.componentConfig.min.year();
}
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().subtract(navigateBy, 'year');
const to = this.currentDateView.clone();
this.onLeftSecondaryNav.emit({ from, to });
}
onRightNavClick() {
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().add(1, 'year');
const to = this.currentDateView.clone();
this.onRightNav.emit({ from, to });
}
onRightSecondaryNavClick() {
let navigateBy = this.componentConfig.multipleYearsNavigateBy;
const isOutsideRange = this.componentConfig.max &&
this.componentConfig.max.year() - this.currentDateView.year() < navigateBy;
if (isOutsideRange) {
navigateBy = this.componentConfig.max.year() - this.currentDateView.year();
}
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().add(navigateBy, 'year');
const to = this.currentDateView.clone();
this.onRightSecondaryNav.emit({ from, to });
}
toggleCalendarMode() {
this.onNavHeaderBtnClick.emit();
}
getMonthBtnCssClass(month) {
const cssClass = {
'dp-selected': month.selected,
'dp-current-month': month.currentMonth
};
const customCssClass = this.monthCalendarService.getMonthBtnCssClass(this.componentConfig, month.date);
if (customCssClass) {
cssClass[customCssClass] = true;
}
return cssClass;
}
shouldShowCurrent() {
return this.utilsService.shouldShowCurrent(this.componentConfig.showGoToCurrent, 'month', this.componentConfig.min, this.componentConfig.max);
}
goToCurrent() {
this.currentDateView = moment().locale(this.componentConfig.locale);
this.onGoToCurrent.emit();
}
moveCalendarTo(to) {
if (to) {
this.currentDateView = this.utilsService.convertToMoment(to, this.componentConfig.format, this.componentConfig.locale);
this.cd.markForCheck();
}
}
handleConfigChange(config) {
if (config) {
const prevConf = this.monthCalendarService.getConfig(config.previousValue);
const currentConf = this.monthCalendarService.getConfig(config.currentValue);
if (this.utilsService.shouldResetCurrentView(prevConf, currentConf)) {
this._currentDateView = null;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthCalendarComponent, deps: [{ token: MonthCalendarService }, { token: UtilsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonthCalendarComponent, selector: "dp-month-calendar", inputs: { config: "config", displayDate: "displayDate", minDate: "minDate", maxDate: "maxDate", theme: "theme" }, outputs: { onSelect: "onSelect", onNavHeaderBtnClick: "onNavHeaderBtnClick", onGoToCurrent: "onGoToCurrent", onLeftNav: "onLeftNav", onRightNav: "onRightNav", onLeftSecondaryNav: "onLeftSecondaryNav", onRightSecondaryNav: "onRightSecondaryNav" }, host: { properties: { "class": "this.theme" } }, providers: [
MonthCalendarService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MonthCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MonthCalendarComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div class=\"dp-month-calendar-container\">\n <dp-calendar-nav\n [label]=\"navLabel\"\n [showLeftNav]=\"showLeftNav\"\n [showLeftSecondaryNav]=\"showSecondaryLeftNav\"\n [showRightNav]=\"showRightNav\"\n [showRightSecondaryNav]=\"showSecondaryRightNav\"\n [isLabelClickable]=\"componentConfig.isNavHeaderBtnClickable\"\n [showGoToCurrent]=\"shouldShowCurrent()\"\n [theme]=\"theme\"\n (onLeftNav)=\"onLeftNavClick()\"\n (onLeftSecondaryNav)=\"onLeftSecondaryNavClick()\"\n (onRightNav)=\"onRightNavClick()\"\n (onRightSecondaryNav)=\"onRightSecondaryNavClick()\"\n (onLabelClick)=\"toggleCalendarMode()\"\n (onGoToCurrent)=\"goToCurrent()\">\n </dp-calendar-nav>\n\n <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isFarsi()}\">\n <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">\n <button type=\"button\"\n class=\"dp-calendar-month\"\n *ngFor=\"let month of monthRow\"\n [attr.data-date]=\"month.date.format(componentConfig.format)\"\n [disabled]=\"month.disabled\"\n [ngClass]=\"getMonthBtnCssClass(month)\"\n (click)=\"monthClicked(month)\"\n [innerText]=\"month.text\">\n </button>\n </div>\n </div>\n</div>\n", styles: ["dp-month-calendar{display:inline-block}dp-month-calendar .dp-month-calendar-container{background:#fff}dp-month-calendar .dp-calendar-wrapper{border:1px solid #000000}dp-month-calendar .dp-calendar-month{box-sizing:border-box;width:52.5px;height:52.5px;cursor:pointer}dp-month-calendar .dp-calendar-month.dp-selected{background:#106cc8;color:#fff}dp-month-calendar.dp-material .dp-calendar-weekday{height:25px;width:30px;line-height:25px;background:#e0e0e0;border:1px solid #E0E0E0}dp-month-calendar.dp-material .dp-calendar-wrapper{border:1px solid #E0E0E0}dp-month-calendar.dp-material .dp-calendar-month{box-sizing:border-box;background:#fff;border-radius:50%;border:none;outline:none}dp-month-calendar.dp-material .dp-calendar-month:hover{background:#e0e0e0}dp-month-calendar.dp-material .dp-selected{background:#106cc8;color:#fff}dp-month-calendar.dp-material .dp-selected:hover{background:#106cc8}dp-month-calendar.dp-material .dp-current-month{border:1px solid #106CC8}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarNavComponent, selector: "dp-calendar-nav", inputs: ["label", "isLabelClickable", "showLeftNav", "showLeftSecondaryNav", "showRightNav", "showRightSecondaryNav", "leftNavDisabled", "leftSecondaryNavDisabled", "rightNavDisabled", "rightSecondaryNavDisabled", "showGoToCurrent", "theme"], outputs: ["onLeftNav", "onLeftSecondaryNav", "onRightNav", "onRightSecondaryNav", "onLabelClick", "onGoToCurrent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-month-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
MonthCalendarService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MonthCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MonthCalendarComponent),
multi: true
}
], template: "<div class=\"dp-month-calendar-container\">\n <dp-calendar-nav\n [label]=\"navLabel\"\n [showLeftNav]=\"showLeftNav\"\n [showLeftSecondaryNav]=\"showSecondaryLeftNav\"\n [showRightNav]=\"showRightNav\"\n [showRightSecondaryNav]=\"showSecondaryRightNav\"\n [isLabelClickable]=\"componentConfig.isNavHeaderBtnClickable\"\n [showGoToCurrent]=\"shouldShowCurrent()\"\n [theme]=\"theme\"\n (onLeftNav)=\"onLeftNavClick()\"\n (onLeftSecondaryNav)=\"onLeftSecondaryNavClick()\"\n (onRightNav)=\"onRightNavClick()\"\n (onRightSecondaryNav)=\"onRightSecondaryNavClick()\"\n (onLabelClick)=\"toggleCalendarMode()\"\n (onGoToCurrent)=\"goToCurrent()\">\n </dp-calendar-nav>\n\n <div class=\"dp-calendar-wrapper\" [ngClass]=\"{'rtl':isFarsi()}\">\n <div class=\"dp-months-row\" *ngFor=\"let monthRow of yearMonths\">\n <button type=\"button\"\n class=\"dp-calendar-month\"\n *ngFor=\"let month of monthRow\"\n [attr.data-date]=\"month.date.format(componentConfig.format)\"\n [disabled]=\"month.disabled\"\n [ngClass]=\"getMonthBtnCssClass(month)\"\n (click)=\"monthClicked(month)\"\n [innerText]=\"month.text\">\n </button>\n </div>\n </div>\n</div>\n", styles: ["dp-month-calendar{display:inline-block}dp-month-calendar .dp-month-calendar-container{background:#fff}dp-month-calendar .dp-calendar-wrapper{border:1px solid #000000}dp-month-calendar .dp-calendar-month{box-sizing:border-box;width:52.5px;height:52.5px;cursor:pointer}dp-month-calendar .dp-calendar-month.dp-selected{background:#106cc8;color:#fff}dp-month-calendar.dp-material .dp-calendar-weekday{height:25px;width:30px;line-height:25px;background:#e0e0e0;border:1px solid #E0E0E0}dp-month-calendar.dp-material .dp-calendar-wrapper{border:1px solid #E0E0E0}dp-month-calendar.dp-material .dp-calendar-month{box-sizing:border-box;background:#fff;border-radius:50%;border:none;outline:none}dp-month-calendar.dp-material .dp-calendar-month:hover{background:#e0e0e0}dp-month-calendar.dp-material .dp-selected{background:#106cc8;color:#fff}dp-month-calendar.dp-material .dp-selected:hover{background:#106cc8}dp-month-calendar.dp-material .dp-current-month{border:1px solid #106CC8}\n"] }]
}], ctorParameters: () => [{ type: MonthCalendarService }, { type: UtilsService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input
}], displayDate: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], onSelect: [{
type: Output
}], onNavHeaderBtnClick: [{
type: Output
}], onGoToCurrent: [{
type: Output
}], onLeftNav: [{
type: Output
}], onRightNav: [{
type: Output
}], onLeftSecondaryNav: [{
type: Output
}], onRightSecondaryNav: [{
type: Output
}] } });
class DayCalendarComponent {
set selected(selected) {
this._selected = selected;
this.onChangeCallback(this.processOnChangeCallback(selected));
}
get selected() {
return this._selected;
}
set currentDateView(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);
}
get currentDateView() {
return this._currentDateView;
}
constructor(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)
};
}
ngOnInit() {
this.isInited = true;
this.init();
this.initValidators();
}
init() {
this.componentConfig = this.dayCalendarService.getConfig(this.config);
this.selected = this.selected || [];
this.currentDateView = this.displayDate
? this.utilsService.convertToMoment(this.displayDate, this.componentConfig.format, this.componentConfig.locale).clone()
: this.utilsService
.getDefaultDisplayDate(this.currentDateView, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min, this.componentConfig.locale);
this.weekdays = this.dayCalendarService
.generateWeekdays(this.componentConfig.firstDayOfWeek, this.componentConfig.locale);
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
this.monthCalendarConfig = this.dayCalendarService.getMonthCalendarConfig(this.componentConfig);
this._shouldShowCurrent = this.shouldShowCurrent();
}
isFarsi() {
return this.componentConfig.locale === 'fa';
}
ngOnChanges(changes) {
if (this.isInited) {
const { minDate, maxDate, config } = changes;
this.handleConfigChange(config);
this.init();
if (minDate || maxDate) {
this.initValidators();
}
}
}
writeValue(value) {
if (value === this.inputValue
|| (this.inputValue
&& (moment.isMoment(this.inputValue)) && this.inputValue.isSame(value))) {
return;
}
this.inputValue = value;
if (value) {
this.selected = this.utilsService
.convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect, this.componentConfig.locale);
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();
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
onChangeCallback(_) {
}
;
registerOnTouched(fn) {
}
validate(formControl) {
if (this.minDate || this.maxDate) {
return this.validateFn(formControl.value);
}
else {
return () => null;
}
}
processOnChangeCallback(value) {
return this.utilsService.convertFromMomentArray(this.componentConfig.format, value, this.componentConfig.returnedValueType || this.inputValueType, this.componentConfig.locale);
}
initValidators() {
this.validateFn = this.utilsService.createValidator({ minDate: this.minDate, maxDate: this.maxDate }, this.componentConfig.format, 'day', this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(this.selected));
}
dayClicked(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);
}
getDayBtnText(day) {
return this.dayCalendarService.getDayBtnText(this.componentConfig, day.date);
}
getDayBtnCssClass(day) {
const 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
};
const customCssClass = this.dayCalendarService.getDayBtnCssClass(this.componentConfig, day.date);
if (customCssClass) {
cssClasses[customCssClass] = true;
}
return cssClasses;
}
onLeftNavClick() {
const from = this.currentDateView.clone();
this.moveCalendarsBy(this.currentDateView, -1, 'month');
const to = this.currentDateView.clone();
this.onLeftNav.emit({ from, to });
}
onRightNavClick() {
const from = this.currentDateView.clone();
this.moveCalendarsBy(this.currentDateView, 1, 'month');
const to = this.currentDateView.clone();
this.onRightNav.emit({ from, to });
}
onMonthCalendarLeftClick(change) {
this.onLeftNav.emit(change);
}
onMonthCalendarRightClick(change) {
this.onRightNav.emit(change);
}
onMonthCalendarSecondaryLeftClick(change) {
this.onRightNav.emit(change);
}
onMonthCalendarSecondaryRightClick(change) {
this.onLeftNav.emit(change);
}
getWeekdayName(weekday) {
if (this.componentConfig.weekDayFormatter) {
return this.componentConfig.weekDayFormatter(weekday.day());
}
return weekday.format(this.componentConfig.weekDayFormat);
}
toggleCalendarMode(mode) {
if (this.currentCalendarMode !== mode) {
this.currentCalendarMode = mode;
this.onNavHeaderBtnClick.emit(mode);
}
this.cd.markForCheck();
}
monthSelected(month) {
this.currentDateView = month.date.clone();
this.currentCalendarMode = ECalendarMode.Day;
this.onMonthSelect.emit(month);
}
moveCalendarsBy(current, amount, granularity = 'month') {
this.currentDateView = current.clone().add(amount, granularity);
this.cd.markForCheck();
}
moveCalendarTo(to) {
if (to) {
this.currentDateView = this.utilsService.convertToMoment(to, this.componentConfig.format, this.componentConfig.locale);
}
this.cd.markForCheck();
}
shouldShowCurrent() {
return this.utilsService.shouldShowCurrent(this.componentConfig.showGoToCurrent, 'day', this.componentConfig.min, this.componentConfig.max);
}
goToCurrent() {
this.currentDateView = moment().locale(this.componentConfig.locale);
this.onGoToCurrent.emit();
}
handleConfigChange(config) {
if (config) {
const prevConf = this.dayCalendarService.getConfig(config.previousValue);
const currentConf = this.dayCalendarService.getConfig(config.currentValue);
if (this.utilsService.shouldResetCurrentView(prevConf, currentConf)) {
this._currentDateView = null;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayCalendarComponent, deps: [{ token: DayCalendarService }, { token: UtilsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DayCalendarComponent, selector: "dp-day-calendar", inputs: { config: "config", displayDate: "displayDate", minDate: "minDate", maxDate: "maxDate", theme: "theme" }, outputs: { onSelect: "onSelect", onMonthSelect: "onMonthSelect", onNavHeaderBtnClick: "onNavHeaderBtnClick", onGoToCurrent: "onGoToCurrent", onLeftNav: "onLeftNav", onRightNav: "onRightNav" }, host: { properties: { "class": "this.theme" } }, providers: [
DayCalendarService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DayCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DayCalendarComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, 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,'rtl':isFarsi()}\">\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", 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 #000000}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 #000000;border-bottom:1px solid #000000}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-prev-month,dp-day-calendar .dp-next-month{opacity:.5}dp-day-calendar .dp-hide-near-month .dp-prev-month,dp-day-calendar .dp-hide-near-month .dp-next-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;font-size:.75rem;opacity:.6}dp-day-calendar.dp-material .dp-calendar-wrapper{border:1px solid #E0E0E0}dp-day-calendar.dp-material .dp-calendar-weekday:last-child{color:red}dp-day-calendar.dp-material .dp-calendar-wrapper{padding:20px}dp-day-calendar.dp-material .dp-calendar-wrapper.rtl{direction:rtl}dp-day-calendar.dp-material .dp-calendar-month,dp-day-calendar.dp-material .dp-calendar-day{box-sizing:border-box;background:#fff;border-radius:0%;transition:border-radius .1s ease;border:none;outline:none;padding:0}dp-day-calendar.dp-material .dp-calendar-month:hover,dp-day-calendar.dp-material .dp-calendar-day:hover{background:#e0e0e0;border-radius:50%}dp-day-calendar.dp-material .dp-selected{border-radius:50%;background:#106cc8;color:#fff}dp-day-calendar.dp-material .dp-selected:hover{background:#106cc8}dp-day-calendar.dp-material .dp-current-day{border-radius:50%;border:1px solid #106CC8}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonthCalendarComponent, selector: "dp-month-calendar", inputs: ["config", "displayDate", "minDate", "maxDate", "theme"], outputs: ["onSelect", "onNavHeaderBtnClick", "onGoToCurrent", "onLeftNav", "onRightNav", "onLeftSecondaryNav", "onRightSecondaryNav"] }, { kind: "component", type: CalendarNavComponent, selector: "dp-calendar-nav", inputs: ["label", "isLabelClickable", "showLeftNav", "showLeftSecondaryNav", "showRightNav", "showRightSecondaryNav", "leftNavDisabled", "leftSecondaryNavDisabled", "rightNavDisabled", "rightSecondaryNavDisabled", "showGoToCurrent", "theme"], outputs: ["onLeftNav", "onLeftSecondaryNav", "onRightNav", "onRightSecondaryNav", "onLabelClick", "onGoToCurrent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-day-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
DayCalendarService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DayCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DayCalendarComponent),
multi: true
}
], 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,'rtl':isFarsi()}\">\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", 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 #000000}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 #000000;border-bottom:1px solid #000000}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-prev-month,dp-day-calendar .dp-next-month{opacity:.5}dp-day-calendar .dp-hide-near-month .dp-prev-month,dp-day-calendar .dp-hide-near-month .dp-next-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;font-size:.75rem;opacity:.6}dp-day-calendar.dp-material .dp-calendar-wrapper{border:1px solid #E0E0E0}dp-day-calendar.dp-material .dp-calendar-weekday:last-child{color:red}dp-day-calendar.dp-material .dp-calendar-wrapper{padding:20px}dp-day-calendar.dp-material .dp-calendar-wrapper.rtl{direction:rtl}dp-day-calendar.dp-material .dp-calendar-month,dp-day-calendar.dp-material .dp-calendar-day{box-sizing:border-box;background:#fff;border-radius:0%;transition:border-radius .1s ease;border:none;outline:none;padding:0}dp-day-calendar.dp-material .dp-calendar-month:hover,dp-day-calendar.dp-material .dp-calendar-day:hover{background:#e0e0e0;border-radius:50%}dp-day-calendar.dp-material .dp-selected{border-radius:50%;background:#106cc8;color:#fff}dp-day-calendar.dp-material .dp-selected:hover{background:#106cc8}dp-day-calendar.dp-material .dp-current-day{border-radius:50%;border:1px solid #106CC8}\n"] }]
}], ctorParameters: () => [{ type: DayCalendarService }, { type: UtilsService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input
}], displayDate: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], onSelect: [{
type: Output
}], onMonthSelect: [{
type: Output
}], onNavHeaderBtnClick: [{
type: Output
}], onGoToCurrent: [{
type: Output
}], onLeftNav: [{
type: Output
}], onRightNav: [{
type: Output
}] } });
class TimeSelectComponent {
set selected(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));
}
get selected() {
return this._selected;
}
constructor(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)
};
}
ngOnInit() {
this.isInited = true;
this.init();
this.initValidators();
}
init() {
this.componentConfig = this.timeSelectService.getConfig(this.config);
this.selected = this.selected || moment();
this.inputValueType = this.utilsService.getInputType(this.inputValue, false);
}
ngOnChanges(changes) {
if (this.isInited) {
const { minDate, maxDate, minTime, maxTime } = changes;
this.init();
if (minDate || maxDate || minTime || maxTime) {
this.initValidators();
}
}
}
writeValue(value) {
this.inputValue = value;
if (value) {
const momentValue = this.utilsService
.convertToMomentArray(value, this.timeSelectService.getTimeFormat(this.componentConfig), false, this.componentConfig.locale)[0];
if (momentValue.isValid()) {
this.selected = momentValue;
this.inputValueType = this.utilsService
.getInputType(this.inputValue, false);
}
}
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
onChangeCallback(_) {
}
;
registerOnTouched(fn) {
}
validate(formControl) {
if (this.minDate || this.maxDate || this.minTime || this.maxTime) {
return this.validateFn(formControl.value);
}
else {
return () => null;
}
}
processOnChangeCallback(value) {
return this.utilsService.convertFromMomentArray(this.timeSelectService.getTimeFormat(this.componentConfig), [value], this.componentConfig.returnedValueType || this.inputValueType, this.componentConfig.locale);
}
initValidators() {
this.validateFn = this.utilsService.createValidator({
minDate: this.minDate,
maxDate: this.maxDate,
minTime: this.minTime,
maxTime: this.maxTime
}, undefined, 'day', this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(this.selected));
}
decrease(unit) {
this.selected = this.timeSelectService.decrease(this.componentConfig, this.selected, unit);
this.emitChange();
}
increase(unit) {
this.selected = this.timeSelectService.increase(this.componentConfig, this.selected, unit);
this.emitChange();
}
toggleMeridiem() {
this.selected = this.timeSelectService.toggleMeridiem(this.selected);
this.emitChange();
}
emitChange() {
this.onChange.emit({ date: this.selected, selected: false });
this.cd.markForCheck();
}
calculateTimeParts(time) {
this.hours = this.timeSelectService.getHours(this.componentConfig, time);
this.minutes = this.timeSelectService.getMinutes(this.componentConfig, time);
this.seconds = this.timeSelectService.getSeconds(this.componentConfig, time);
this.meridiem = this.timeSelectService.getMeridiem(this.componentConfig, time);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSelectComponent, deps: [{ token: TimeSelectService }, { token: UtilsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimeSelectComponent, selector: "dp-time-select", inputs: { config: "config", displayDate: "displayDate", minDate: "minDate", maxDate: "maxDate", minTime: "minTime", maxTime: "maxTime", theme: "theme" }, outputs: { onChange: "onChange" }, host: { properties: { "class": "this.theme" } }, providers: [
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimeSelectComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => TimeSelectComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<ul class=\"dp-time-select-controls\">\n <li class=\"dp-time-select-control dp-time-select-control-hours\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncHour\"\n (click)=\"increase('hour')\">\n </button>\n <span class=\"dp-time-select-display-hours\"\n [innerText]=\"hours\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showDecHour\"\n (click)=\"decrease('hour')\"></button>\n </li>\n <li class=\"dp-time-select-control dp-time-select-separator\"\n [innerText]=\"componentConfig.timeSeparator\">\n </li>\n <li class=\"dp-time-select-control dp-time-select-control-minutes\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncMinute\"\n (click)=\"increase('minute')\"></button>\n <span class=\"dp-time-select-display-minutes\"\n [innerText]=\"minutes\">\n </span>\n <button type=\"button\"\n [disabled]=\"!showDecMinute\" class=\"dp-time-select-control-down\"\n (click)=\"decrease('minute')\"></button>\n </li>\n <ng-container *ngIf=\"componentConfig.showSeconds\">\n <li class=\"dp-time-select-control dp-time-select-separator\"\n [innerText]=\"componentConfig.timeSeparator\">\n </li>\n <li class=\"dp-time-select-control dp-time-select-control-seconds\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncSecond\"\n (click)=\"increase('second')\"></button>\n <span class=\"dp-time-select-display-seconds\"\n [innerText]=\"seconds\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showDecSecond\"\n (click)=\"decrease('second')\"></button>\n </li>\n </ng-container>\n <li class=\"dp-time-select-control dp-time-select-control-meridiem\" *ngIf=\"!componentConfig.showTwentyFourHours\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showToggleMeridiem\"\n (click)=\"toggleMeridiem()\"></button>\n <span class=\"dp-time-select-display-meridiem\"\n [innerText]=\"meridiem\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showToggleMeridiem\"\n (click)=\"toggleMeridiem()\"></button>\n </li>\n </ul>\n ", styles: ["dp-time-select{display:inline-block}dp-time-select .dp-time-select-controls{margin:0;padding:0;text-align:center;line-height:normal;background:#fff}dp-time-select .dp-time-select-control{display:inline-block;width:35px;margin:0 auto;vertical-align:middle;font-size:inherit;letter-spacing:1px}dp-time-select .dp-time-select-control-up,dp-time-select .dp-time-select-control-down{position:relative;display:block;width:24px;height:24px;margin:3px auto;cursor:pointer}dp-time-select .dp-time-select-control-up:before,dp-time-select .dp-time-select-control-down:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(0)}dp-time-select .dp-time-select-control-up:before{transform:rotate(-45deg);top:4px}dp-time-select .dp-time-select-control-down:before{transform:rotate(135deg)}dp-time-select .dp-time-select-separator{width:5px}dp-time-select.dp-material .dp-time-select-control-up,dp-time-select.dp-material .dp-time-select-control-down{box-sizing:border-box;background:transparent;border:none;outline:none;border-radius:50%}dp-time-select.dp-material .dp-time-select-control-up:before,dp-time-select.dp-material .dp-time-select-control-down:before{left:0}dp-time-select.dp-material .dp-time-select-control-up:hover,dp-time-select.dp-material .dp-time-select-control-down:hover{background:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-time-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimeSelectComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => TimeSelectComponent),
multi: true
}
], template: "<ul class=\"dp-time-select-controls\">\n <li class=\"dp-time-select-control dp-time-select-control-hours\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncHour\"\n (click)=\"increase('hour')\">\n </button>\n <span class=\"dp-time-select-display-hours\"\n [innerText]=\"hours\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showDecHour\"\n (click)=\"decrease('hour')\"></button>\n </li>\n <li class=\"dp-time-select-control dp-time-select-separator\"\n [innerText]=\"componentConfig.timeSeparator\">\n </li>\n <li class=\"dp-time-select-control dp-time-select-control-minutes\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncMinute\"\n (click)=\"increase('minute')\"></button>\n <span class=\"dp-time-select-display-minutes\"\n [innerText]=\"minutes\">\n </span>\n <button type=\"button\"\n [disabled]=\"!showDecMinute\" class=\"dp-time-select-control-down\"\n (click)=\"decrease('minute')\"></button>\n </li>\n <ng-container *ngIf=\"componentConfig.showSeconds\">\n <li class=\"dp-time-select-control dp-time-select-separator\"\n [innerText]=\"componentConfig.timeSeparator\">\n </li>\n <li class=\"dp-time-select-control dp-time-select-control-seconds\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showIncSecond\"\n (click)=\"increase('second')\"></button>\n <span class=\"dp-time-select-display-seconds\"\n [innerText]=\"seconds\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showDecSecond\"\n (click)=\"decrease('second')\"></button>\n </li>\n </ng-container>\n <li class=\"dp-time-select-control dp-time-select-control-meridiem\" *ngIf=\"!componentConfig.showTwentyFourHours\">\n <button type=\"button\"\n class=\"dp-time-select-control-up\"\n [disabled]=\"!showToggleMeridiem\"\n (click)=\"toggleMeridiem()\"></button>\n <span class=\"dp-time-select-display-meridiem\"\n [innerText]=\"meridiem\">\n </span>\n <button type=\"button\"\n class=\"dp-time-select-control-down\"\n [disabled]=\"!showToggleMeridiem\"\n (click)=\"toggleMeridiem()\"></button>\n </li>\n </ul>\n ", styles: ["dp-time-select{display:inline-block}dp-time-select .dp-time-select-controls{margin:0;padding:0;text-align:center;line-height:normal;background:#fff}dp-time-select .dp-time-select-control{display:inline-block;width:35px;margin:0 auto;vertical-align:middle;font-size:inherit;letter-spacing:1px}dp-time-select .dp-time-select-control-up,dp-time-select .dp-time-select-control-down{position:relative;display:block;width:24px;height:24px;margin:3px auto;cursor:pointer}dp-time-select .dp-time-select-control-up:before,dp-time-select .dp-time-select-control-down:before{position:relative;content:\"\";display:inline-block;height:8px;width:8px;vertical-align:baseline;border-style:solid;border-width:2px 2px 0 0;transform:rotate(0)}dp-time-select .dp-time-select-control-up:before{transform:rotate(-45deg);top:4px}dp-time-select .dp-time-select-control-down:before{transform:rotate(135deg)}dp-time-select .dp-time-select-separator{width:5px}dp-time-select.dp-material .dp-time-select-control-up,dp-time-select.dp-material .dp-time-select-control-down{box-sizing:border-box;background:transparent;border:none;outline:none;border-radius:50%}dp-time-select.dp-material .dp-time-select-control-up:before,dp-time-select.dp-material .dp-time-select-control-down:before{left:0}dp-time-select.dp-material .dp-time-select-control-up:hover,dp-time-select.dp-material .dp-time-select-control-down:hover{background:#e0e0e0}\n"] }]
}], ctorParameters: () => [{ type: TimeSelectService }, { type: UtilsService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input
}], displayDate: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], minTime: [{
type: Input
}], maxTime: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], onChange: [{
type: Output
}] } });
class DayTimeCalendarComponent {
set selected(selected) {
this._selected = selected;
this.onChangeCallback(this.processOnChangeCallback(selected));
}
get selected() {
return this._selected;
}
constructor(dayTimeCalendarService, utilsService, cd) {
this.dayTimeCalendarService = dayTimeCalendarService;
this.utilsService = utilsService;
this.cd = cd;
this.onChange = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
this.onLeftNav = new EventEmitter();
this.onRightNav = new EventEmitter();
this.isInited = false;
this.api = {
moveCalendarTo: this.moveCalendarTo.bind(this)
};
}
ngOnInit() {
this.isInited = true;
this.init();
this.initValidators();
}
init() {
this.componentConfig = this.dayTimeCalendarService.getConfig(this.config);
this.inputValueType = this.utilsService.getInputType(this.inputValue, false);
}
ngOnChanges(changes) {
if (this.isInited) {
const { minDate, maxDate } = changes;
this.init();
if (minDate || maxDate) {
this.initValidators();
}
}
}
writeValue(value) {
this.inputValue = value;
if (value) {
this.selected = this.utilsService
.convertToMomentArray(value, this.componentConfig.format, false, this.componentConfig.locale)[0];
this.inputValueType = this.utilsService
.getInputType(this.inputValue, false);
}
else {
this.selected = null;
}
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
onChangeCallback(_) {
}
;
registerOnTouched(fn) {
}
validate(formControl) {
if (this.minDate || this.maxDate) {
return this.validateFn(formControl.value);
}
else {
return () => null;
}
}
processOnChangeCallback(value) {
return this.utilsService.convertFromMomentArray(this.componentConfig.format, [value], this.componentConfig.returnedValueType || this.inputValueType, this.componentConfig.locale);
}
initValidators() {
this.validateFn = this.utilsService.createValidator({
minDate: this.minDate,
maxDate: this.maxDate
}, undefined, 'daytime', this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(this.selected));
}
dateSelected(day) {
this.selected = this.dayTimeCalendarService.updateDay(this.selected, day.date, this.config);
this.emitChange();
}
timeChange(time) {
this.selected = this.dayTimeCalendarService.updateTime(this.selected, time.date);
this.emitChange();
}
emitChange() {
this.onChange.emit({ date: this.selected, selected: false });
}
moveCalendarTo(to) {
if (to) {
this.dayCalendarRef.moveCalendarTo(to);
}
}
onLeftNavClick(change) {
this.onLeftNav.emit(change);
}
onRightNavClick(change) {
this.onRightNav.emit(change);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayTimeCalendarComponent, deps: [{ token: DayTimeCalendarService }, { token: UtilsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DayTimeCalendarComponent, selector: "dp-day-time-calendar", inputs: { config: "config", displayDate: "displayDate", minDate: "minDate", maxDate: "maxDate", theme: "theme" }, outputs: { onChange: "onChange", onGoToCurrent: "onGoToCurrent", onLeftNav: "onLeftNav", onRightNav: "onRightNav" }, host: { properties: { "class": "this.theme" } }, providers: [
DayTimeCalendarService,
DayCalendarService,
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DayTimeCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DayTimeCalendarComponent),
multi: true
}
], viewQueries: [{ propertyName: "dayCalendarRef", first: true, predicate: ["dayCalendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dp-day-calendar #dayCalendar\n [config]=\"componentConfig\"\n [ngModel]=\"_selected\"\n [theme]=\"theme\"\n [displayDate]=\"displayDate\"\n (onSelect)=\"dateSelected($event)\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n</dp-day-calendar>\n<dp-time-select #timeSelect\n [config]=\"componentConfig\"\n [ngModel]=\"_selected\"\n (onChange)=\"timeChange($event)\"\n [theme]=\"theme\">\n</dp-time-select>\n", styles: ["dp-day-time-calendar{display:inline-block}dp-day-time-calendar dp-time-select{display:block;border:1px solid #000000;border-top:0}dp-day-time-calendar.dp-material dp-time-select{border:1px solid #E0E0E0;border-top:0}\n"], dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayCalendarComponent, selector: "dp-day-calendar", inputs: ["config", "displayDate", "minDate", "maxDate", "theme"], outputs: ["onSelect", "onMonthSelect", "onNavHeaderBtnClick", "onGoToCurrent", "onLeftNav", "onRightNav"] }, { kind: "component", type: TimeSelectComponent, selector: "dp-time-select", inputs: ["config", "displayDate", "minDate", "maxDate", "minTime", "maxTime", "theme"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayTimeCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-day-time-calendar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
DayTimeCalendarService,
DayCalendarService,
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DayTimeCalendarComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DayTimeCalendarComponent),
multi: true
}
], template: "<dp-day-calendar #dayCalendar\n [config]=\"componentConfig\"\n [ngModel]=\"_selected\"\n [theme]=\"theme\"\n [displayDate]=\"displayDate\"\n (onSelect)=\"dateSelected($event)\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n</dp-day-calendar>\n<dp-time-select #timeSelect\n [config]=\"componentConfig\"\n [ngModel]=\"_selected\"\n (onChange)=\"timeChange($event)\"\n [theme]=\"theme\">\n</dp-time-select>\n", styles: ["dp-day-time-calendar{display:inline-block}dp-day-time-calendar dp-time-select{display:block;border:1px solid #000000;border-top:0}dp-day-time-calendar.dp-material dp-time-select{border:1px solid #E0E0E0;border-top:0}\n"] }]
}], ctorParameters: () => [{ type: DayTimeCalendarService }, { type: UtilsService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input
}], displayDate: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], onChange: [{
type: Output
}], onGoToCurrent: [{
type: Output
}], onLeftNav: [{
type: Output
}], onRightNav: [{
type: Output
}], dayCalendarRef: [{
type: ViewChild,
args: ['dayCalendar']
}] } });
class DatePickerComponent {
set selected(selected) {
this._selected = selected;
this.inputElementValue = this.utilsService
.convertFromMomentArray(this.componentConfig.format, selected, ECalendarValue.StringArr, this.componentConfig.locale)
.join(' | ');
const val = this.processOnChangeCallback(selected);
this.onChangeCallback(val, false);
this.onChange.emit(val);
}
get selected() {
return this._selected;
}
get areCalendarsShown() {
return this._areCalendarsShown;
}
get openOnFocus() {
return this.componentConfig.openOnFocus;
}
get openOnClick() {
return this.componentConfig.openOnClick;
}
set areCalendarsShown(value) {
if (value) {
this.startGlobalListeners();
this.domHelper.appendElementToPosition({
container: this.appendToElement,
element: this.calendarWrapper,
anchor: this.inputElementContainer,
dimElem: this.popupElem,
drops: this.componentConfig.drops,
opens: this.componentConfig.opens
});
}
else {
this.stopGlobalListeners();
this.dayPickerService.pickerClosed();
}
this._areCalendarsShown = value;
}
get currentDateView() {
return this._currentDateView;
}
set currentDateView(date) {
this._currentDateView = date;
if (this.dayCalendarRef) {
this.dayCalendarRef.moveCalendarTo(date);
}
if (this.monthCalendarRef) {
this.monthCalendarRef.moveCalendarTo(date);
}
if (this.dayTimeCalendarRef) {
this.dayTimeCalendarRef.moveCalendarTo(date);
}
}
constructor(dayPickerService, domHelper, elemRef, renderer, utilsService, cd) {
this.dayPickerService = dayPickerService;
this.domHelper = domHelper;
this.elemRef = elemRef;
this.renderer = renderer;
this.utilsService = utilsService;
this.cd = cd;
this.isInitialized = false;
this.mode = 'day';
this.placeholder = '';
this.disabled = false;
this.open = new EventEmitter();
this.close = new EventEmitter();
this.onChange = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
this.onLeftNav = new EventEmitter();
this.onRightNav = new EventEmitter();
this._areCalendarsShown = false;
this.hideStateHelper = false;
this._selected = [];
this.isFocusedTrigger = false;
this.handleInnerElementClickUnlisteners = [];
this.globalListnersUnlisteners = [];
this.api = {
open: this.showCalendars.bind(this),
close: this.hideCalendar.bind(this),
moveCalendarTo: this.moveCalendarTo.bind(this)
};
}
onClick() {
if (!this.openOnClick) {
return;
}
if (!this.isFocusedTrigger && !this.disabled) {
this.hideStateHelper = true;
if (!this.areCalendarsShown) {
this.showCalendars();
}
}
}
onBodyClick() {
if (this.componentConfig.hideOnOutsideClick) {
if (!this.hideStateHelper && this.areCalendarsShown) {
this.hideCalendar();
}
this.hideStateHelper = false;
}
}
onScroll() {
if (this.areCalendarsShown) {
this.domHelper.setElementPosition({
container: this.appendToElement,
element: this.calendarWrapper,
anchor: this.inputElementContainer,
dimElem: this.popupElem,
drops: this.componentConfig.drops,
opens: this.componentConfig.opens
});
}
}
writeValue(value) {
this.inputValue = value;
if (value || value === '') {
this.selected = this.utilsService
.convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect, this.componentConfig.locale);
this.currentDateView = this.selected.length
? this.utilsService.getDefaultDisplayDate(null, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min, this.componentConfig.locale)
: this.currentDateView;
this.init();
}
else {
this.selected = [];
}
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
onChangeCallback(_, changedByInput) {
}
;
registerOnTouched(fn) {
}
validate(formControl) {
return this.validateFn(formControl.value);
}
processOnChangeCallback(selected) {
if (typeof selected === 'string') {
return selected;
}
else {
return this.utilsService.convertFromMomentArray(this.componentConfig.format, selected, this.componentConfig.returnedValueType || this.inputValueType, this.componentConfig.locale);
}
}
initValidators() {
this.validateFn = this.utilsService.createValidator({
minDate: this.minDate,
maxDate: this.maxDate,
minTime: this.minTime,
maxTime: this.maxTime
}, this.componentConfig.format, this.mode, this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(this.selected), false);
}
ngOnInit() {
this.isInitialized = true;
this.init();
this.initValidators();
}
ngOnChanges(changes) {
if (this.isInitialized) {
const { minDate, maxDate, minTime, maxTime } = changes;
this.init();
if (minDate || maxDate || minTime || maxTime) {
this.initValidators();
}
}
}
ngAfterViewInit() {
this.setElementPositionInDom();
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
setElementPositionInDom() {
this.calendarWrapper = this.calendarContainer.nativeElement;
this.setInputElementContainer();
this.popupElem = this.elemRef.nativeElement.querySelector('.dp-popup');
this.handleInnerElementClick(this.popupElem);
const { appendTo } = this.componentConfig;
if (appendTo) {
if (typeof appendTo === 'string') {
this.appendToElement = document.querySelector(appendTo);
}
else {
this.appendToElement = appendTo;
}
}
else {
this.appendToElement = this.elemRef.nativeElement;
}
this.appendToElement.appendChild(this.calendarWrapper);
}
setInputElementContainer() {
this.inputElementContainer = this.utilsService.getNativeElement(this.componentConfig.inputElementContainer)
|| this.elemRef.nativeElement.querySelector('.dp-input-container')
|| document.body;
}
handleInnerElementClick(element) {
this.handleInnerElementClickUnlisteners.push(this.renderer.listen(element, 'click', () => {
this.hideStateHelper = true;
}));
}
init() {
this.componentConfig = this.dayPickerService.getConfig(this.config, this.mode);
this.currentDateView = this.displayDate
? this.utilsService.convertToMoment(this.displayDate, this.componentConfig.format, this.componentConfig.locale).clone()
: this.utilsService
.getDefaultDisplayDate(this.currentDateView, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min, this.componentConfig.locale);
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
this.dayCalendarConfig = this.dayPickerService.getDayConfigService(this.componentConfig);
this.dayTimeCalendarConfig = this.dayPickerService.getDayTimeConfigService(this.componentConfig);
this.timeSelectConfig = this.dayPickerService.getTimeConfigService(this.componentConfig);
}
inputFocused() {
if (!this.openOnFocus) {
return;
}
this.isFocusedTrigger = true;
setTimeout(() => {
this.hideStateHelper = false;
if (!this.areCalendarsShown) {
this.showCalendars();
}
this.isFocusedTrigger = false;
}, this.componentConfig.onOpenDelay);
}
showCalendars() {
this.hideStateHelper = true;
this.areCalendarsShown = true;
if (this.timeSelectRef) {
this.timeSelectRef.api.triggerChange();
}
this.open.emit();
this.cd.markForCheck();
}
hideCalendar() {
this.areCalendarsShown = false;
if (this.dayCalendarRef) {
this.dayCalendarRef.api.toggleCalendarMode(ECalendarMode.Day);
}
this.close.emit();
this.cd.markForCheck();
}
onViewDateChange(value) {
let strVal = value ? this.utilsService.convertToString(value, this.componentConfig.format, this.componentConfig.locale) : '';
if (this.dayPickerService.isValidInputDateValue(strVal, this.componentConfig)) {
if (strVal && this.componentConfig.locale === 'fa') {
// convert jalali to gregorian
strVal = moment.from(strVal, 'fa', this.componentConfig.format).format(this.componentConfig.format);
}
this.selected = this.dayPickerService.convertInputValueToMomentArray(strVal, this.componentConfig);
this.currentDateView = this.selected.length
? this.utilsService.getDefaultDisplayDate(null, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min, this.componentConfig.locale)
: this.currentDateView;
}
else {
this._selected = this.utilsService
.getValidMomentArray(strVal, this.componentConfig.format, this.componentConfig.locale);
this.onChangeCallback(this.processOnChangeCallback(strVal), true);
}
}
dateSelected(date, granularity, ignoreClose) {
this.selected = this.utilsService
.updateSelected(this.componentConfig.allowMultiSelect, this.selected, date, granularity);
this.onDateClick();
}
async onDateClick() {
if (this.componentConfig.closeOnSelect) {
const cond = await this.checkClass();
if (cond) {
setTimeout(this.hideCalendar.bind(this), this.componentConfig.closeOnSelectDelay);
}
}
}
checkClass() {
return new Promise(function (resolve, reject) {
document.onclick = (evt) => {
if (evt.target['className'].includes('dp-calendar-day')) {
resolve(true);
}
else {
resolve(false);
}
};
});
}
onKeyPress(event) {
switch (event.keyCode) {
case (9):
case (27):
this.hideCalendar();
break;
}
}
moveCalendarTo(date) {
const momentDate = this.utilsService.convertToMoment(date, this.componentConfig.format, this.componentConfig.locale);
this.currentDateView = momentDate;
}
onLeftNavClick(change) {
this.onLeftNav.emit(change);
}
onRightNavClick(change) {
this.onRightNav.emit(change);
}
startGlobalListeners() {
this.globalListnersUnlisteners.push(this.renderer.listen(document, 'keydown', (e) => {
this.onKeyPress(e);
}), this.renderer.listen(document, 'scroll', () => {
this.onScroll();
}), this.renderer.listen(document, 'click', () => {
this.onBodyClick();
}));
}
changeLocale(locale) {
this.dayCalendarConfig = { ...this.dayCalendarConfig, ...{ locale } };
this.dayTimeCalendarConfig = { ...this.dayTimeCalendarConfig, ...{ locale } };
}
stopGlobalListeners() {
this.globalListnersUnlisteners.forEach((ul) => ul());
this.globalListnersUnlisteners = [];
}
ngOnDestroy() {
this.handleInnerElementClickUnlisteners.forEach(ul => ul());
if (this.appendToElement) {
this.appendToElement.removeChild(this.calendarWrapper);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: DatePickerService }, { token: DomHelper }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: UtilsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, selector: "dp-date-picker", inputs: { config: "config", mode: "mode", placeholder: "placeholder", disabled: "disabled", displayDate: "displayDate", theme: "theme", minDate: "minDate", maxDate: "maxDate", minTime: "minTime", maxTime: "maxTime" }, outputs: { open: "open", close: "close", onChange: "onChange", onGoToCurrent: "onGoToCurrent", onLeftNav: "onLeftNav", onRightNav: "onRightNav" }, host: { listeners: { "click": "onClick()", "window:resize": "onScroll()" }, properties: { "class": "this.theme" } }, providers: [
DatePickerService,
DayTimeCalendarService,
DayCalendarService,
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["container"], descendants: true }, { propertyName: "dayCalendarRef", first: true, predicate: ["dayCalendar"], descendants: true }, { propertyName: "monthCalendarRef", first: true, predicate: ["monthCalendar"], descendants: true }, { propertyName: "dayTimeCalendarRef", first: true, predicate: ["daytimeCalendar"], descendants: true }, { propertyName: "timeSelectRef", first: true, predicate: ["timeSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{'dp-open': areCalendarsShown}\">\n <div class=\"dp-input-container\"\n [hidden]=\"componentConfig.hideInputContainer\"\n [attr.data-hidden]=\"componentConfig.hideInputContainer\">\n <input type=\"text\"\n class=\"dp-picker-input\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"inputElementValue\"\n (ngModelChange)=\"onViewDateChange($event)\"\n (focus)=\"inputFocused()\"\n [readonly]=\"componentConfig.disableKeypress\"\n [disabled]=\"disabled\"/>\n </div>\n <div #container>\n <div class=\"dp-popup {{theme}}\"\n [ngSwitch]=\"mode\"\n [hidden]=\"!_areCalendarsShown\"\n [attr.data-hidden]=\"!_areCalendarsShown\">\n <dp-day-calendar #dayCalendar\n *ngSwitchCase=\"'day'\"\n [config]=\"dayCalendarConfig\"\n [ngModel]=\"_selected\"\n [displayDate]=\"displayDate\"\n [theme]=\"theme\"\n (onSelect)=\"dateSelected($event, 'day')\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-day-calendar>\n\n <dp-month-calendar #monthCalendar\n *ngSwitchCase=\"'month'\"\n [config]=\"dayCalendarConfig\"\n [ngModel]=\"_selected\"\n [displayDate]=\"displayDate\"\n [theme]=\"theme\"\n (onSelect)=\"dateSelected($event, 'month')\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-month-calendar>\n\n <dp-time-select #timeSelect\n *ngSwitchCase=\"'time'\"\n [config]=\"timeSelectConfig\"\n [ngModel]=\"_selected && _selected[0]\"\n (onChange)=\"dateSelected($event, 'second', true)\"\n [theme]=\"theme\">\n </dp-time-select>\n\n <dp-day-time-calendar #daytimeCalendar\n *ngSwitchCase=\"'daytime'\"\n [config]=\"dayTimeCalendarConfig\"\n [displayDate]=\"displayDate\"\n [ngModel]=\"_selected && _selected[0]\"\n [theme]=\"theme\"\n (onChange)=\"dateSelected($event, 'second', true)\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-day-time-calendar>\n </div>\n </div>\n</div>\n", styles: ["dp-date-picker{display:inline-block}dp-date-picker.dp-material .dp-picker-input{box-sizing:border-box;height:30px;width:213px;font-size:13px;outline:none}dp-date-picker .dp-input-container{position:relative}dp-date-picker .dp-selected{background:#106cc8;color:#fff}.dp-popup{position:relative;background:#fff;box-shadow:1px 1px 5px #0000001a;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);z-index:9999;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayCalendarComponent, selector: "dp-day-calendar", inputs: ["config", "displayDate", "minDate", "maxDate", "theme"], outputs: ["onSelect", "onMonthSelect", "onNavHeaderBtnClick", "onGoToCurrent", "onLeftNav", "onRightNav"] }, { kind: "component", type: MonthCalendarComponent, selector: "dp-month-calendar", inputs: ["config", "displayDate", "minDate", "maxDate", "theme"], outputs: ["onSelect", "onNavHeaderBtnClick", "onGoToCurrent", "onLeftNav", "onRightNav", "onLeftSecondaryNav", "onRightSecondaryNav"] }, { kind: "component", type: TimeSelectComponent, selector: "dp-time-select", inputs: ["config", "displayDate", "minDate", "maxDate", "minTime", "maxTime", "theme"], outputs: ["onChange"] }, { kind: "component", type: DayTimeCalendarComponent, selector: "dp-day-time-calendar", inputs: ["config", "displayDate", "minDate", "maxDate", "theme"], outputs: ["onChange", "onGoToCurrent", "onLeftNav", "onRightNav"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-date-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
DatePickerService,
DayTimeCalendarService,
DayCalendarService,
TimeSelectService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}
], template: "<div [ngClass]=\"{'dp-open': areCalendarsShown}\">\n <div class=\"dp-input-container\"\n [hidden]=\"componentConfig.hideInputContainer\"\n [attr.data-hidden]=\"componentConfig.hideInputContainer\">\n <input type=\"text\"\n class=\"dp-picker-input\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"inputElementValue\"\n (ngModelChange)=\"onViewDateChange($event)\"\n (focus)=\"inputFocused()\"\n [readonly]=\"componentConfig.disableKeypress\"\n [disabled]=\"disabled\"/>\n </div>\n <div #container>\n <div class=\"dp-popup {{theme}}\"\n [ngSwitch]=\"mode\"\n [hidden]=\"!_areCalendarsShown\"\n [attr.data-hidden]=\"!_areCalendarsShown\">\n <dp-day-calendar #dayCalendar\n *ngSwitchCase=\"'day'\"\n [config]=\"dayCalendarConfig\"\n [ngModel]=\"_selected\"\n [displayDate]=\"displayDate\"\n [theme]=\"theme\"\n (onSelect)=\"dateSelected($event, 'day')\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-day-calendar>\n\n <dp-month-calendar #monthCalendar\n *ngSwitchCase=\"'month'\"\n [config]=\"dayCalendarConfig\"\n [ngModel]=\"_selected\"\n [displayDate]=\"displayDate\"\n [theme]=\"theme\"\n (onSelect)=\"dateSelected($event, 'month')\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-month-calendar>\n\n <dp-time-select #timeSelect\n *ngSwitchCase=\"'time'\"\n [config]=\"timeSelectConfig\"\n [ngModel]=\"_selected && _selected[0]\"\n (onChange)=\"dateSelected($event, 'second', true)\"\n [theme]=\"theme\">\n </dp-time-select>\n\n <dp-day-time-calendar #daytimeCalendar\n *ngSwitchCase=\"'daytime'\"\n [config]=\"dayTimeCalendarConfig\"\n [displayDate]=\"displayDate\"\n [ngModel]=\"_selected && _selected[0]\"\n [theme]=\"theme\"\n (onChange)=\"dateSelected($event, 'second', true)\"\n (onGoToCurrent)=\"onGoToCurrent.emit()\"\n (onLeftNav)=\"onLeftNavClick($event)\"\n (onRightNav)=\"onRightNavClick($event)\">\n </dp-day-time-calendar>\n </div>\n </div>\n</div>\n", styles: ["dp-date-picker{display:inline-block}dp-date-picker.dp-material .dp-picker-input{box-sizing:border-box;height:30px;width:213px;font-size:13px;outline:none}dp-date-picker .dp-input-container{position:relative}dp-date-picker .dp-selected{background:#106cc8;color:#fff}.dp-popup{position:relative;background:#fff;box-shadow:1px 1px 5px #0000001a;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);z-index:9999;white-space:nowrap}\n"] }]
}], ctorParameters: () => [{ type: DatePickerService }, { type: DomHelper }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: UtilsService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input
}], mode: [{
type: Input
}], placeholder: [{
type: Input
}], disabled: [{
type: Input
}], displayDate: [{
type: Input
}], theme: [{
type: HostBinding,
args: ['class']
}, {
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], minTime: [{
type: Input
}], maxTime: [{
type: Input
}], open: [{
type: Output
}], close: [{
type: Output
}], onChange: [{
type: Output
}], onGoToCurrent: [{
type: Output
}], onLeftNav: [{
type: Output
}], onRightNav: [{
type: Output
}], calendarContainer: [{
type: ViewChild,
args: ['container']
}], dayCalendarRef: [{
type: ViewChild,
args: ['dayCalendar']
}], monthCalendarRef: [{
type: ViewChild,
args: ['monthCalendar']
}], dayTimeCalendarRef: [{
type: ViewChild,
args: ['daytimeCalendar']
}], timeSelectRef: [{
type: ViewChild,
args: ['timeSelect']
}], onClick: [{
type: HostListener,
args: ['click']
}], onScroll: [{
type: HostListener,
args: ['window:resize']
}] } });
class DatePickerDirectiveService {
constructor(utilsService) {
this.utilsService = utilsService;
}
convertToHTMLElement(attachTo, baseElement) {
if (typeof attachTo === 'string') {
return this.utilsService.closestParent(baseElement, attachTo);
}
else if (attachTo) {
return attachTo.nativeElement;
}
return undefined;
}
getConfig(config = {}, baseElement, attachTo) {
const _config = { ...config };
_config.hideInputContainer = true;
let native;
if (config.inputElementContainer) {
native = this.utilsService.getNativeElement(config.inputElementContainer);
}
else {
native = baseElement ? baseElement.nativeElement : null;
}
if (native) {
_config.inputElementContainer = attachTo
? this.convertToHTMLElement(attachTo, native)
: native;
}
return _config;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerDirectiveService, deps: [{ token: UtilsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerDirectiveService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerDirectiveService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: UtilsService }] });
class DatePickerDirective {
get config() {
return this._config;
}
set config(config) {
this._config = this.service.getConfig(config, this.viewContainerRef.element, this.attachTo);
this.updateDatepickerConfig();
this.markForCheck();
}
get attachTo() {
return this._attachTo;
}
set attachTo(attachTo) {
this._attachTo = attachTo;
this._config = this.service.getConfig(this.config, this.viewContainerRef.element, this.attachTo);
this.updateDatepickerConfig();
this.markForCheck();
}
get theme() {
return this._theme;
}
set theme(theme) {
this._theme = theme;
if (this.datePicker) {
this.datePicker.theme = theme;
}
this.markForCheck();
}
get mode() {
return this._mode;
}
set mode(mode) {
this._mode = mode;
if (this.datePicker) {
this.datePicker.mode = mode;
}
this.markForCheck();
}
set minDate(minDate) {
this._minDate = minDate;
if (this.datePicker) {
this.datePicker.minDate = minDate;
this.datePicker.ngOnInit();
}
this.markForCheck();
}
get minDate() {
return this._minDate;
}
set maxDate(maxDate) {
this._maxDate = maxDate;
if (this.datePicker) {
this.datePicker.maxDate = maxDate;
this.datePicker.ngOnInit();
}
this.markForCheck();
}
get maxDate() {
return this._maxDate;
}
set minTime(minTime) {
this._minTime = minTime;
if (this.datePicker) {
this.datePicker.minTime = minTime;
this.datePicker.ngOnInit();
}
this.markForCheck();
}
get minTime() {
return this._minTime;
}
set maxTime(maxTime) {
this._maxTime = maxTime;
if (this.datePicker) {
this.datePicker.maxTime = maxTime;
this.datePicker.ngOnInit();
}
this.markForCheck();
}
get maxTime() {
return this._maxTime;
}
get displayDate() {
return this._displayDate;
}
set displayDate(displayDate) {
this._displayDate = displayDate;
this.updateDatepickerConfig();
this.markForCheck();
}
constructor(viewContainerRef, elemRef, componentFactoryResolver, service, formControl, utilsService) {
this.viewContainerRef = viewContainerRef;
this.elemRef = elemRef;
this.componentFactoryResolver = componentFactoryResolver;
this.service = service;
this.formControl = formControl;
this.utilsService = utilsService;
this._mode = 'day';
this.open = new EventEmitter();
this.close = new EventEmitter();
this.onChange = new EventEmitter();
this.onGoToCurrent = new EventEmitter();
this.onLeftNav = new EventEmitter();
this.onRightNav = new EventEmitter();
}
ngOnInit() {
this.datePicker = this.createDatePicker();
this.api = this.datePicker.api;
this.updateDatepickerConfig();
this.attachModelToDatePicker();
this.datePicker.theme = this.theme;
}
createDatePicker() {
const factory = this.componentFactoryResolver.resolveComponentFactory(DatePickerComponent);
return this.viewContainerRef.createComponent(factory).instance;
}
attachModelToDatePicker() {
if (!this.formControl) {
return;
}
this.datePicker.onViewDateChange(this.formControl.value);
this.formControl.valueChanges.subscribe((value) => {
if (value !== this.datePicker.inputElementValue) {
const strVal = this.utilsService.convertToString(value, this.datePicker.componentConfig.format, this.datePicker.componentConfig.locale);
this.datePicker.onViewDateChange(strVal);
}
});
let setup = true;
this.datePicker.registerOnChange((value, changedByInput) => {
if (value) {
const isMultiselectEmpty = setup && Array.isArray(value) && !value.length;
if (!isMultiselectEmpty && !changedByInput) {
this.formControl.control.setValue(this.datePicker.inputElementValue);
}
}
const errors = this.datePicker.validateFn(value);
if (!setup) {
this.formControl.control.markAsDirty({
onlySelf: true
});
}
else {
setup = false;
}
if (errors) {
if (errors.hasOwnProperty('format')) {
const { given } = errors['format'];
this.datePicker.inputElementValue = given;
if (!changedByInput) {
this.formControl.control.setValue(given);
}
}
this.formControl.control.setErrors(errors);
}
});
}
onClick() {
this.datePicker.onClick();
}
onFocus() {
this.datePicker.inputFocused();
}
updateDatepickerConfig() {
if (this.datePicker) {
this.datePicker.minDate = this.minDate;
this.datePicker.maxDate = this.maxDate;
this.datePicker.minTime = this.minTime;
this.datePicker.maxTime = this.maxTime;
this.datePicker.mode = this.mode || 'day';
this.datePicker.displayDate = this.displayDate;
this.datePicker.config = this.config;
this.datePicker.open = this.open;
this.datePicker.close = this.close;
this.datePicker.onChange = this.onChange;
this.datePicker.onGoToCurrent = this.onGoToCurrent;
this.datePicker.onLeftNav = this.onLeftNav;
this.datePicker.onRightNav = this.onRightNav;
this.datePicker.init();
if (this.datePicker.componentConfig.disableKeypress) {
this.elemRef.nativeElement.setAttribute('readonly', true);
}
else {
this.elemRef.nativeElement.removeAttribute('readonly');
}
}
}
markForCheck() {
if (this.datePicker) {
this.datePicker.cd.markForCheck();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: DatePickerDirectiveService }, { token: i5.NgControl, optional: true }, { token: UtilsService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerDirective, selector: "[dpDayPicker]", inputs: { config: ["dpDayPicker", "config"], attachTo: "attachTo", theme: "theme", mode: "mode", minDate: "minDate", maxDate: "maxDate", minTime: "minTime", maxTime: "maxTime", displayDate: "displayDate" }, outputs: { open: "open", close: "close", onChange: "onChange", onGoToCurrent: "onGoToCurrent", onLeftNav: "onLeftNav", onRightNav: "onRightNav" }, host: { listeners: { "click": "onClick()", "focus": "onFocus()" } }, providers: [DatePickerDirectiveService], exportAs: ["dpDayPicker"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'dpDayPicker',
providers: [DatePickerDirectiveService],
selector: '[dpDayPicker]'
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: DatePickerDirectiveService }, { type: i5.NgControl, decorators: [{
type: Optional
}] }, { type: UtilsService }], propDecorators: { config: [{
type: Input,
args: ['dpDayPicker']
}], attachTo: [{
type: Input
}], theme: [{
type: Input
}], mode: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], minTime: [{
type: Input
}], maxTime: [{
type: Input
}], displayDate: [{
type: Input
}], open: [{
type: Output
}], close: [{
type: Output
}], onChange: [{
type: Output
}], onGoToCurrent: [{
type: Output
}], onLeftNav: [{
type: Output
}], onRightNav: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click']
}], onFocus: [{
type: HostListener,
args: ['focus']
}] } });
class DpDatePickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DpDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DpDatePickerModule, declarations: [DatePickerComponent,
DatePickerDirective,
DayCalendarComponent,
MonthCalendarComponent,
CalendarNavComponent,
TimeSelectComponent,
DayTimeCalendarComponent], imports: [CommonModule,
FormsModule], exports: [DatePickerComponent,
DatePickerDirective,
MonthCalendarComponent,
DayCalendarComponent,
TimeSelectComponent,
DayTimeCalendarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DpDatePickerModule, providers: [
DomHelper,
UtilsService
], imports: [CommonModule,
FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DpDatePickerModule, decorators: [{
type: NgModule,
args: [{
providers: [
DomHelper,
UtilsService
],
declarations: [
DatePickerComponent,
DatePickerDirective,
DayCalendarComponent,
MonthCalendarComponent,
CalendarNavComponent,
TimeSelectComponent,
DayTimeCalendarComponent
],
imports: [
CommonModule,
FormsModule
],
exports: [
DatePickerComponent,
DatePickerDirective,
MonthCalendarComponent,
DayCalendarComponent,
TimeSelectComponent,
DayTimeCalendarComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DatePickerComponent, DatePickerDirective, DayCalendarComponent, DayTimeCalendarComponent, DpDatePickerModule, ECalendarMode, ECalendarValue, MonthCalendarComponent, SelectEvent, TimeSelectComponent };
//# sourceMappingURL=ngx-jalali-date-picker.mjs.map