com.phloxui
Version:
PhloxUI Ng2+ Framework
1,376 lines (1,374 loc) • 164 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { AbstractDateTimePicker } from './AbstractDateTimePicker';
import { NeedFocusService } from '../../../service/NeedFocusService.service';
import { DateFormatter } from '../../../share/formatter/DateFormatter';
import { ValidationStatus } from '../../../component/validate/ValidationStatus';
import { FormatterFactory } from '../../../service/FormatterFactory.service';
import { MinValidator } from '../../../directive/MinValidator.directive';
import { MaxValidator } from '../../../directive/MaxValidator.directive';
import { DateTimeUtils } from '../../../share/utils/DateTimeUtils';
import { Option } from '../../../decorator/Option.decorator';
import { I18N } from '../../../decorator/I18N.decorator';
import { PhloxAppInfoService } from '../../../service/PhloxAppInfoService.service';
import { EventUtils } from '../../../share/shares';
const /** @type {?} */ TYPE_NAME = "phx-date-picker";
const /** @type {?} */ DAY_VIEW = 'DAY';
const /** @type {?} */ WEEK_VIEW = 'WEEK';
const /** @type {?} */ MONTH_VIEW = 'MONTH';
const /** @type {?} */ KEY_FORMAT = "dd/MM/yyyy";
const /** @type {?} */ MIN_DATE_TIME = MinValidator.NAME;
const /** @type {?} */ MAX_DATE_TIME = MaxValidator.NAME;
const /** @type {?} */ DEFAULT_FORMAT = 'dd/MM/yyyy';
const /** @type {?} */ GAP_HEIGHT = 8;
export class DatePicker extends AbstractDateTimePicker {
/**
* @param {?} elementRef
* @param {?} needFocusService
* @param {?} formatterFactory
* @param {?} phloxAppInfoService
*/
constructor(elementRef, needFocusService, formatterFactory, phloxAppInfoService) {
super(elementRef, formatterFactory, phloxAppInfoService, needFocusService);
this.MONTH_CONTENT_SELECTOR = ".month-view > .container";
this.currentView = MONTH_VIEW;
this.monthDayContainer = [];
this.monthRowContainer = [];
this.calendarData = [];
this.monthMoreRowContainer = [];
this.active = false;
this.defaultDropdownIdx = 0;
this.defaultRowHeight = 46;
this.defaultMonthEntryWidth = 0; // as percent
this.defaultMonthEntryHeight = 15; // as pt
this.defaultMonthHeight = 20; // as percent
this.today = Date.today();
this.changeEvent = new EventEmitter();
this._isItemClick = false;
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
this.selectedDate = this.getDate();
this.pickerDate = this.selectedDate;
this.renderPicker();
}
/**
* @return {?}
*/
calculatePopupPosition() {
let /** @type {?} */ popup = $(this.elementRef.nativeElement).find('.date-picker-view');
this.elementFocused = $(document.activeElement);
this.positionTop = this.elementFocused.position().top + this.elementFocused.height() + GAP_HEIGHT;
let /** @type {?} */ ele;
// Default value
this.positionLeft = 0;
let /** @type {?} */ screenTop = this.elementFocused.offset().top - $(window).scrollTop() + this.elementFocused.height() + GAP_HEIGHT;
let /** @type {?} */ screenBottom = screenTop + popup.height();
let /** @type {?} */ screenLeft = this.elementFocused.offset().left - $(window).scrollLeft();
let /** @type {?} */ screenRight = screenLeft + popup.width();
if (screenTop < 0) {
this.positionTop += -screenTop;
}
else if (screenBottom > $(window).height()) {
this.positionTop -= screenBottom - $(window).height();
}
if (screenLeft < 0) {
this.positionLeft += -screenLeft;
}
else if (screenRight > $(window).width()) {
this.positionLeft -= screenRight - $(window).width();
}
}
/**
* @return {?}
*/
requestFocus() {
let /** @type {?} */ input = $(this.elementRef.nativeElement).find('input[type="text"]');
input.focus();
}
/**
* @param {?} date
* @return {?}
*/
calendarRender(date) {
if (date === null || typeof date === 'undefined') {
return;
}
this.resetMonthDayContainer();
// change text label
let /** @type {?} */ firstDayOfMonth = new Date(date).moveToFirstDayOfMonth();
let /** @type {?} */ lastDayOfMonth = new Date(date).moveToLastDayOfMonth();
let /** @type {?} */ count = -1;
let /** @type {?} */ allDays = this.getAllDayItems();
let /** @type {?} */ firstDayOfWeek = firstDayOfMonth.getDay();
let /** @type {?} */ minusDayOfWeek = firstDayOfWeek;
let /** @type {?} */ prevDayOfMonth = new Date(date).moveToFirstDayOfMonth().addDays(-minusDayOfWeek);
for (let /** @type {?} */ i = 0; i < allDays.length; i++) {
if (firstDayOfWeek == i) {
break;
}
allDays[i].day = prevDayOfMonth.toString("dd");
allDays[i].date = new Date(prevDayOfMonth);
if (this.isHasOwnMinMaxDisable()) {
allDays[i].minmax = this.isMinMaxDate(allDays[i].date, this.getMinDate(), this.getMaxDate());
}
else {
allDays[i].minmax = this.isMinMaxDirectiveDisable(allDays[i].date);
}
prevDayOfMonth.addDays(1);
count = i;
}
if (count > -1) {
count += 1;
}
else {
count = 0;
}
while (firstDayOfMonth.isBefore(lastDayOfMonth) || firstDayOfMonth.equals(lastDayOfMonth)) {
if (count === 100) {
break;
}
if (count < allDays.length) {
if (allDays[count].date === null || typeof allDays[count].date === 'undefined') {
allDays[count].day = firstDayOfMonth.toString("dd");
allDays[count].date = new Date(firstDayOfMonth);
if (this.isHasOwnMinMaxDisable()) {
allDays[count].minmax = this.isMinMaxDate(allDays[count].date, this.getMinDate(), this.getMaxDate());
}
else {
allDays[count].minmax = this.isMinMaxDirectiveDisable(allDays[count].date);
}
}
}
firstDayOfMonth.addDays(1);
count += 1;
}
let /** @type {?} */ nextMonth = new Date(lastDayOfMonth).addDays(1);
while (count < allDays.length) {
if (count === 100) {
break;
}
if (allDays[count].date === null || typeof allDays[count].date === 'undefined') {
allDays[count].day = nextMonth.toString("dd");
allDays[count].date = new Date(nextMonth);
if (this.isHasOwnMinMaxDisable()) {
allDays[count].minmax = this.isMinMaxDate(allDays[count].date, this.getMinDate(), this.getMaxDate());
}
else {
allDays[count].minmax = this.isMinMaxDirectiveDisable(allDays[count].date);
}
}
nextMonth.addDays(1);
count += 1;
}
}
/**
* @return {?}
*/
getAllDayItems() {
let /** @type {?} */ result = [];
for (let /** @type {?} */ row of this.monthDayContainer) {
for (let /** @type {?} */ item of row) {
result.push(item);
}
}
return result;
}
/**
* @return {?}
*/
resetMonthDayContainer() {
this.monthDayContainer = [];
let /** @type {?} */ count = 1;
for (let /** @type {?} */ i = 0; i < 6; i++) {
let /** @type {?} */ container = [];
for (let /** @type {?} */ j = 0; j < 7; j++) {
if (count >= 32) {
count = 1;
}
let /** @type {?} */ item = { day: '', minmax: false };
container.push(item);
count += 1;
}
this.monthDayContainer.push(container);
}
}
/**
* @param {?} viewName
* @param {?} date
* @return {?}
*/
reRenderViewData(viewName, date) {
if (viewName === null || typeof viewName === 'undefined') {
return;
}
if (MONTH_VIEW === viewName) {
this.monthDataRender(date);
}
}
/**
* @param {?} date
* @return {?}
*/
monthDataRender(date) {
if (date === null || typeof date === 'undefined') {
return;
}
let /** @type {?} */ indexMap = {};
let /** @type {?} */ firstDayOfCalendar = null;
let /** @type {?} */ lastDayOfCalendar = null;
for (let /** @type {?} */ i = 0; i < this.monthDayContainer.length; i++) {
let /** @type {?} */ container = this.monthDayContainer[i];
for (let /** @type {?} */ j = 0; j < container.length; j++) {
let /** @type {?} */ item = container[j];
let /** @type {?} */ date = item.date;
let /** @type {?} */ dateString = date.toString(KEY_FORMAT);
if (firstDayOfCalendar === null) {
firstDayOfCalendar = new Date(date);
}
else {
if (firstDayOfCalendar.getMonth() !== date.getMonth()) {
if (this.selectedDate !== null && typeof this.selectedDate !== 'undefined') {
if (firstDayOfCalendar.getMonth() === this.selectedDate.getMonth()) {
break;
}
}
}
}
lastDayOfCalendar = new Date(date);
if (date !== null && typeof date !== 'undefined') {
indexMap[dateString] = { row: i, col: j, count: 0 };
}
}
}
// first render long day
let /** @type {?} */ leftMonthRowContainer = [];
let /** @type {?} */ fakeEntryArray = [];
for (let /** @type {?} */ item of this.monthRowContainer) {
let /** @type {?} */ fromTime = item.fromTime;
let /** @type {?} */ toTime = item.toTime;
// set til the end of calendar
let /** @type {?} */ isContinueNextMonth = false;
if ((fromTime.isBefore(toTime) || fromTime.equals(toTime)) && fromTime.getMonth() < toTime.getMonth()) {
if (lastDayOfCalendar !== null) {
toTime = new Date(lastDayOfCalendar);
isContinueNextMonth = true;
}
}
let /** @type {?} */ fDateString = fromTime.toString(KEY_FORMAT);
let /** @type {?} */ tDateString = toTime.toString(KEY_FORMAT);
let /** @type {?} */ clearFromTime = new Date(fromTime).clearTime();
let /** @type {?} */ clearToTime = new Date(toTime).clearTime();
if (clearFromTime.toString(KEY_FORMAT) === clearToTime.toString(KEY_FORMAT)) {
leftMonthRowContainer.push(item);
continue;
}
let /** @type {?} */ spanCol = 0;
let /** @type {?} */ tIndexObj = null;
if (indexMap[tDateString] !== null && typeof indexMap[tDateString] !== 'undefined') {
tIndexObj = indexMap[tDateString];
}
let /** @type {?} */ fIndexObj = null;
if (indexMap[fDateString] !== null && typeof indexMap[fDateString] !== 'undefined') {
fIndexObj = indexMap[fDateString];
}
if (tIndexObj !== null && fIndexObj !== null) {
let /** @type {?} */ fRow = fIndexObj.row;
let /** @type {?} */ fCol = fIndexObj.col;
let /** @type {?} */ tRow = tIndexObj.row;
let /** @type {?} */ tCol = tIndexObj.col;
let /** @type {?} */ updateCountIndex = false;
if (fRow === tRow) {
if (fCol < tCol) {
updateCountIndex = true;
}
}
else if (fRow < tRow) {
updateCountIndex = true;
}
if (updateCountIndex) {
let /** @type {?} */ countCol = -1;
let /** @type {?} */ fakeNewLine = false;
let /** @type {?} */ fakeEntry = null;
let /** @type {?} */ newLine = false;
for (let /** @type {?} */ key in indexMap) {
let /** @type {?} */ obj = indexMap[key];
let /** @type {?} */ dateKey = Date.parseExact(key, KEY_FORMAT);
if ((dateKey.isAfter(clearFromTime) || dateKey.equals(clearFromTime)) &&
(dateKey.isBefore(clearToTime) || dateKey.equals(clearToTime))) {
obj.count = obj.count + 1;
if (countCol >= 0) {
if (countCol > obj.col) {
newLine = true;
}
}
countCol = obj.col;
if (newLine) {
// add fake
let /** @type {?} */ curRow = fRow;
if (fakeEntry !== null && fakeEntry.span === 7) {
fakeEntry.continue = true;
curRow = fakeEntry.row;
fakeEntry = null;
}
if (fakeEntry === null) {
// first time
curRow = curRow + 1;
fakeEntry = this.getWrapperObject(dateKey, dateKey, item.title, item.entry);
fakeEntry.refFromTime = new Date(fromTime);
fakeEntry.refToTime = new Date(toTime);
fakeEntry.count = obj.count;
fakeEntry.span = 1;
fakeEntry.row = curRow;
fakeEntry.col = 0;
if (isContinueNextMonth) {
fakeEntry.continue = true;
}
fakeEntryArray.push(fakeEntry);
}
else {
fakeEntry.toTime = dateKey;
fakeEntry.span = fakeEntry.span + 1;
}
}
else {
if (obj.row === fRow) {
spanCol += 1;
}
}
}
}
if (newLine) {
item.continue = true;
}
}
}
let /** @type {?} */ newWidth = this.defaultMonthEntryWidth;
if (spanCol > 0) {
newWidth = this.defaultMonthEntryWidth * spanCol;
}
item.width = newWidth + '%';
if (isContinueNextMonth) {
item.continue = true;
}
if (fIndexObj !== null) {
let /** @type {?} */ row = fIndexObj.row;
let /** @type {?} */ col = fIndexObj.col;
let /** @type {?} */ count = fIndexObj.count;
let /** @type {?} */ marginTop = this.defaultMonthEntryHeight * count;
let /** @type {?} */ newLeft = (this.defaultMonthEntryWidth * col);
let /** @type {?} */ newTop = (this.defaultMonthHeight * row);
item.left = newLeft + "%";
item.top = newTop + "%";
item.margintop = marginTop + "pt";
item.show = true;
}
else {
item.show = false;
}
}
// add fake to monthRowContainer
for (let /** @type {?} */ item of fakeEntryArray) {
let /** @type {?} */ row = item.row;
let /** @type {?} */ col = item.col;
let /** @type {?} */ count = item.count;
let /** @type {?} */ marginTop = this.defaultMonthEntryHeight * count;
let /** @type {?} */ newWidth = this.defaultMonthEntryWidth * item.span;
let /** @type {?} */ newLeft = (this.defaultMonthEntryWidth * col);
let /** @type {?} */ newTop = (this.defaultMonthHeight * row);
item.left = newLeft + "%";
item.top = newTop + "%";
item.margintop = marginTop + "pt";
item.width = newWidth + '%';
item.show = true;
item.subentry = true;
this.monthRowContainer.push(item);
}
// second render in day
for (let /** @type {?} */ item of leftMonthRowContainer) {
let /** @type {?} */ fromTime = item.fromTime;
let /** @type {?} */ toTime = item.toTime;
let /** @type {?} */ dateString = fromTime.toString(KEY_FORMAT);
let /** @type {?} */ isContinueNextMonth = false;
if (fromTime.getMonth() < toTime.getMonth()) {
if (lastDayOfCalendar !== null) {
isContinueNextMonth = true;
}
}
let /** @type {?} */ indexObj = null;
if (indexMap[dateString] !== null && typeof indexMap[dateString] !== 'undefined') {
indexObj = indexMap[dateString];
}
if (indexObj !== null) {
let /** @type {?} */ row = indexObj.row;
let /** @type {?} */ col = indexObj.col;
let /** @type {?} */ count = indexObj.count;
let /** @type {?} */ newLeft = (this.defaultMonthEntryWidth * col);
let /** @type {?} */ newTop = (this.defaultMonthHeight * row);
let /** @type {?} */ marginTop = this.defaultMonthEntryHeight * (count + 1);
item.left = newLeft + "%";
item.top = newTop + "%";
item.margintop = marginTop + "pt";
item.show = true;
indexObj.count = count + 1;
}
else {
item.show = false;
}
if (isContinueNextMonth) {
item.continue = true;
}
}
this.monthMoreRowContainer = [];
let /** @type {?} */ removeItems = [];
let /** @type {?} */ rowHeight = $(this.elementRef.nativeElement).find(this.MONTH_CONTENT_SELECTOR + " > .temp-row-container > .temp-row").height();
let /** @type {?} */ entryWrapperHeight = $(this.elementRef.nativeElement).find(this.MONTH_CONTENT_SELECTOR + " > .temp-entry-wrapper").height();
let /** @type {?} */ currentItem = null;
let /** @type {?} */ count = 0;
for (let /** @type {?} */ item of this.monthRowContainer) {
if (item.fromTime === null || typeof item.fromTime === 'undefined') {
continue;
}
if (currentItem === null) {
// first
currentItem = {
height: entryWrapperHeight * 2,
date: item.fromTime
};
}
else {
let /** @type {?} */ oldDate = currentItem.date;
let /** @type {?} */ newDate = item.fromTime;
let /** @type {?} */ oldHeight = currentItem.height;
let /** @type {?} */ newHeight = oldHeight + entryWrapperHeight;
if (oldDate.toString(KEY_FORMAT) !== newDate.toString(KEY_FORMAT)) {
newHeight = entryWrapperHeight * 2;
}
let /** @type {?} */ newItem = {
height: newHeight,
date: newDate
};
currentItem = newItem;
}
let /** @type {?} */ wrapperHeight = currentItem.height;
if (wrapperHeight > rowHeight) {
let /** @type {?} */ prevIndex = count - 1;
if (prevIndex >= 0) {
let /** @type {?} */ prevItem = this.monthRowContainer[prevIndex];
// find prev
if (removeItems.indexOf(prevItem) <= -1) {
removeItems.push(prevItem);
}
}
removeItems.push(item);
}
count += 1;
}
// remove from container
let /** @type {?} */ tempMap = {};
for (let /** @type {?} */ item of removeItems) {
let /** @type {?} */ removeIdx = this.monthRowContainer.indexOf(item);
if (removeIdx > -1 && removeIdx < this.monthRowContainer.length) {
this.monthRowContainer.splice(removeIdx, 1);
}
if (item.fromTime == null || typeof item.fromTime === 'undefined') {
continue;
}
let /** @type {?} */ key = item.fromTime.toString(KEY_FORMAT);
if (tempMap[key] !== null && typeof tempMap[key] !== 'undefined') {
tempMap[key].container.push(item.entry.wrapper.getData());
tempMap[key].count = tempMap[key].count + 1;
}
else {
tempMap[key] = {
date: item.fromTime,
container: [item.entry.wrapper.getData()],
count: 1,
top: item.top,
left: item.left,
width: item.width,
margintop: item.margintop
};
this.monthMoreRowContainer.push(tempMap[key]);
}
}
}
/**
* @param {?} fromDate
* @param {?} toDate
* @param {?} title
* @param {?} calendarEntry
* @return {?}
*/
getWrapperObject(fromDate, toDate, title, calendarEntry) {
let /** @type {?} */ result = {
fromTime: fromDate,
toTime: toDate,
title: title,
top: '0pt',
left: '0pt',
selected: false,
height: this.defaultRowHeight + 'pt',
entry: calendarEntry
};
return result;
}
/**
* @return {?}
*/
isHasOwnMinMaxDisable() {
if ((this.getMinDate() !== null && this.getMinDate() !== undefined) ||
(this.getMaxDate() !== null && this.getMaxDate() !== undefined)) {
return true;
}
return false;
}
/**
* @param {?} date
* @param {?} minDate
* @param {?} maxDate
* @return {?}
*/
isMinMaxDate(date, minDate, maxDate) {
let /** @type {?} */ dateRemoveTime = (date !== null && date !== undefined) ? date.clearTime() : null;
let /** @type {?} */ minDateRemoveTime = (minDate !== null && minDate !== undefined) ? minDate.clearTime() : null;
let /** @type {?} */ maxDateRemoveTime = (maxDate !== null && maxDate !== undefined) ? maxDate.clearTime() : null;
if ((minDateRemoveTime !== null && minDateRemoveTime !== undefined)
&& (maxDateRemoveTime !== null && maxDateRemoveTime !== undefined)) {
return dateRemoveTime < minDateRemoveTime || dateRemoveTime > maxDateRemoveTime;
}
else if ((minDateRemoveTime !== null && minDateRemoveTime !== undefined)
&& (maxDateRemoveTime === null || maxDateRemoveTime === undefined)) {
return dateRemoveTime < minDateRemoveTime;
}
else if ((minDateRemoveTime === null || minDateRemoveTime === undefined)
&& (maxDateRemoveTime !== null && maxDateRemoveTime !== undefined)) {
return dateRemoveTime > maxDateRemoveTime;
}
return false;
}
/**
* @param {?} date
* @return {?}
*/
isMinMaxValidate(date) {
if (date !== null && typeof date !== 'undefined') {
let /** @type {?} */ results = this.validate(date);
return this.isValidFromValidationResults(results);
}
return false;
}
/**
* @param {?} date
* @return {?}
*/
getValidationResults(date) {
let /** @type {?} */ results;
if (date !== null && typeof date !== 'undefined') {
results = this.validate(date);
return results;
}
return results;
}
/**
* @return {?}
*/
prevMonth() {
if (this.pickerDate != null && (typeof this.pickerDate !== 'undefined')) {
this.pickerDate = new Date(this.pickerDate);
this.pickerDate.addMonths(-1);
let /** @type {?} */ tzDiff = this.getTimeZoneDiff(this.pickerDate);
let /** @type {?} */ tzDiffHours = Math.floor(tzDiff / 100);
let /** @type {?} */ tzDiffMins = tzDiff % 100;
this.pickerDate.setHours(this.pickerDate.getHours() - tzDiffHours);
this.pickerDate.setMinutes(this.pickerDate.getMinutes() - tzDiffMins);
this.renderPicker(this.pickerDate);
}
}
/**
* @return {?}
*/
nextMonth() {
if (this.pickerDate != null && (typeof this.pickerDate !== 'undefined')) {
this.pickerDate = new Date(this.pickerDate);
this.pickerDate.addMonths(1);
let /** @type {?} */ tzDiff = this.getTimeZoneDiff(this.pickerDate);
let /** @type {?} */ tzDiffHours = Math.floor(tzDiff / 100);
let /** @type {?} */ tzDiffMins = tzDiff % 100;
this.pickerDate.setHours(this.pickerDate.getHours() - tzDiffHours);
this.pickerDate.setMinutes(this.pickerDate.getMinutes() - tzDiffMins);
this.renderPicker(this.pickerDate);
}
}
/**
* @param {?} results
* @return {?}
*/
isValidFromValidationResults(results) {
if (results !== null && typeof results !== 'undefined') {
for (let /** @type {?} */ result of results) {
let /** @type {?} */ status = result.status;
if (result.status === ValidationStatus.ERROR) {
return false;
}
let /** @type {?} */ msg = result.message;
}
}
return true;
}
/**
* @param {?} inputVal
* @param {?=} $event
* @param {?=} fireEvent
* @return {?}
*/
setInputValue(inputVal, $event, fireEvent) {
if (fireEvent === null || fireEvent === undefined) {
fireEvent = true;
}
let /** @type {?} */ oldValue = this.getInputValue();
EventUtils.handleBrowserEvent(this, 'beforeChangeEvent', $event, fireEvent, ($event) => {
// doEvent
// Set input value into data object.
this._setValueToData(inputVal);
}, ($event) => {
// emitBeforeEvent
this.emitBeforeChangeEvent(oldValue, inputVal, true, $event);
}, ($event) => {
// emitAfterEvent
this.emitChangeEvent(oldValue, inputVal, true, $event);
}, ($event) => {
// doPrevented
this.selectedDate = oldValue;
}, 'inputValue');
this._formattedData = this.getFormattedData();
}
/**
* @param {?} date
* @param {?=} $event
* @return {?}
*/
updateSelectedDate(date, $event) {
if (this.selectedDate == null || this.selectedDate == undefined) {
this.selectedDate = new Date(this.today);
}
this.selectedDate = date;
let /** @type {?} */ tzDiff = this.getTimeZoneDiff(this.selectedDate);
let /** @type {?} */ tzDiffHours = Math.floor(tzDiff / 100);
let /** @type {?} */ tzDiffMins = tzDiff % 100;
let /** @type {?} */ hour = this.selectedDate.getHours();
let /** @type {?} */ min = this.selectedDate.getMinutes();
this.selectedDate.setHours(hour + tzDiffHours);
this.selectedDate.setMinutes(min + tzDiffMins);
this.setDate(this.selectedDate);
this.updatePickerDate();
}
/**
* @return {?}
*/
updatePickerDate() {
if (this.selectedDate === null || typeof this.selectedDate === 'undefined') {
return;
}
this.pickerDate = new Date(this.selectedDate);
let /** @type {?} */ tzDiff = this.getTimeZoneDiff(this.selectedDate);
let /** @type {?} */ tzDiffHours = Math.floor(tzDiff / 100);
let /** @type {?} */ tzDiffMins = tzDiff % 100;
this.pickerDate.setHours(this.selectedDate.getHours() - tzDiffHours);
this.pickerDate.setMinutes(this.selectedDate.getMinutes() - tzDiffMins);
this.renderPicker();
}
/**
* @return {?}
*/
_getMonthLabel() {
if (this.pickerDate !== null && typeof this.pickerDate !== 'undefined') {
return this.pickerDate.toString("MMMM yyyy");
}
return '-';
}
/**
* @param {?} item
* @return {?}
*/
_isDateDisable(item) {
if (item !== null && typeof item !== 'undefined') {
let /** @type {?} */ itemDate = item.date;
if (this.pickerDate !== null && typeof this.pickerDate !== 'undefined'
&& itemDate !== null && typeof itemDate !== 'undefined') {
if (itemDate.getMonth() !== this.pickerDate.getMonth()) {
return true;
}
}
}
return false;
}
/**
* @param {?} item
* @return {?}
*/
_isToday(item) {
if (item !== null && typeof item !== 'undefined') {
if (this._isMinmax(item.minmax)) {
return false;
}
if (item.date !== null && typeof item.date !== 'undefined') {
let /** @type {?} */ copyDate = new Date(item.date).clearTime();
if (Date.equals(this.today, copyDate)) {
return true;
}
}
}
return false;
}
/**
* @param {?} item
* @return {?}
*/
_isCurrentDate(item) {
if (item !== null && typeof item !== 'undefined') {
if (this._isMinmax(item.minmax)) {
return false;
}
if (item.date !== null && typeof item.date !== 'undefined') {
if (this.selectedDate !== null && typeof this.selectedDate !== 'undefined') {
let /** @type {?} */ dateCT = new Date(item.date).clearTime();
let /** @type {?} */ curDateCT = new Date(this.selectedDate).clearTime();
if (Date.equals(dateCT, curDateCT)) {
return true;
}
}
}
}
return false;
}
/**
* @param {?} minmax
* @return {?}
*/
_isMinmax(minmax) {
return minmax;
}
/**
* @param {?} $event
* @return {?}
*/
onTextBoxClicked($event) {
if (!this.isActive()) {
this.show($event);
}
}
/**
* @param {?} $event
* @return {?}
*/
onFocusing($event) {
this.needFocusService.setFocusingComponent(this, $event);
}
/**
* @param {?} $event
* @return {?}
*/
onLostFocusing($event) {
if (this._itemLostFocusingTimeout !== null && typeof this._itemLostFocusingTimeout !== 'undefined') {
clearTimeout(this._itemLostFocusingTimeout);
this._itemLostFocusingTimeout = null;
}
this._itemLostFocusingTimeout = setTimeout(() => {
if (!this._isItemClick) {
this.doBlur($event);
if (this.needFocusService.getFocusingComponent() === this) {
this.needFocusService.resetFocusingComponent($event);
}
}
else {
this.requestFocus();
}
this._isItemClick = false;
}, 100);
}
/**
* @param {?} $event
* @return {?}
*/
onValueChanged($event) {
// Parse edited text to date (in case of it was changed).
let /** @type {?} */ inputText = null;
try {
inputText = (/** @type {?} */ ($event.target)).value.toString();
}
catch (/** @type {?} */ e) {
}
if (inputText) {
// If textbox is not empty, try to parse text value -> date.
let /** @type {?} */ newDate = null;
try {
if (this.formatter instanceof DateFormatter) {
newDate = this.formatter.parse(inputText);
}
else {
newDate = Date.parse(inputText);
}
}
catch (/** @type {?} */ e) { }
this.updateSelectedDate(newDate, $event);
}
else {
// If textbox is empty, it means that the user does not want
// to input any value.
this.setDate(null);
}
}
/**
* @param {?} $event
* @return {?}
*/
onViewClicked($event) {
this._isItemClick = true;
this.requestFocus();
}
/**
* @param {?} $event
* @return {?}
*/
onPrevMonthBtnClicked($event) {
// Set this flag to true to prevent onLostFocusing() behavior.
this._isItemClick = true;
// Call requestFocus() to move focus back to textbox.
this.requestFocus();
this.prevMonth();
}
/**
* @param {?} $event
* @return {?}
*/
onNextMonthBtnClicked($event) {
// Set this flag to true to prevent onLostFocusing() behavior.
this._isItemClick = true;
// Call requestFocus() to move focus back to textbox.
this.requestFocus();
this.nextMonth();
}
/**
* @param {?} $event
* @return {?}
*/
onMonthLabelClicked($event) {
// Set this flag to true to prevent onLostFocusing() behavior.
this._isItemClick = true;
// Call requestFocus() to move focus back to textbox.
this.requestFocus();
}
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
onDateClicked($event, item) {
// Set this flag to true to prevent onLostFocusing() behavior.
this._isItemClick = true;
// Call requestFocus() to move focus back to textbox.
this.requestFocus();
if (this.selectedDate === null || this.selectedDate === undefined) {
return;
}
else if (this._isMinmax(item.minmax)) {
return;
}
this.updateSelectedDate(item.date, $event);
// After date is selected, hide the popup.
this.hide();
}
/**
* @param {?=} date
* @return {?}
*/
renderPicker(date) {
if (date === null || date === undefined) {
date = this.pickerDate;
}
if (date === null || date === undefined) {
return;
}
this.calendarRender(date);
this.reRenderViewData(this.currentView, date);
}
/**
* @param {?} inputValue
* @param {?} results
* @return {?}
*/
onValidationEnd(inputValue, results) {
}
/**
* @param {?} data
* @param {?} inputVal
* @return {?}
*/
onDataChange(data, inputVal) {
}
/**
* @param {?} $event
* @return {?}
*/
doFocus($event) {
if (!this.isReadOnly() && !this.isDisabled()) {
// Only show popup when it is NOT read only and not disabled.
this.requestFocus();
this.show();
}
}
/**
* @param {?} $event
* @return {?}
*/
doLostFocus($event) {
this.hide();
}
/**
* @return {?}
*/
doHide() {
this.active = false;
}
/**
* @return {?}
*/
doShow() {
this.active = true;
this.calculatePopupPosition();
}
/**
* @param {?} $event
* @return {?}
*/
doBlur($event) {
$(this.elementRef.nativeElement).find(".date-picker-textbox > input").blur();
}
/**
* @return {?}
*/
getPopupPositionTop() {
return this.positionTop;
}
/**
* @return {?}
*/
getPopupPositionLeft() {
return this.positionLeft;
}
/**
* @return {?}
*/
getDataPatternFromSetting() {
return "yyyy-MM-dd";
}
/**
* @param {?} date
* @return {?}
*/
isMinMaxDirectiveDisable(date) {
if (date !== null && typeof date !== 'undefined') {
if (this.minDirective === null || this.minDirective === undefined
&& this.maxDirective === null || this.maxDirective === undefined) {
for (let /** @type {?} */ i = 0; i < this.getValidators().length; i++) {
if (MIN_DATE_TIME === this.getValidators()[i].getName()) {
this.minDirective = (/** @type {?} */ (this.getValidators()[i])).getMinDate();
}
else if (MAX_DATE_TIME === this.getValidators()[i].getName()) {
this.maxDirective = (/** @type {?} */ (this.getValidators()[i])).getMaxDate();
}
}
}
return this.isMinMaxDate(date, this.minDirective, this.maxDirective);
}
}
/**
* @return {?}
*/
getMinDate() {
return DateTimeUtils.getDateFromAny(this.minDate);
}
/**
* @param {?} minDate
* @return {?}
*/
setMinDate(minDate) {
this.minDate = minDate;
}
/**
* @return {?}
*/
getMaxDate() {
return DateTimeUtils.getDateFromAny(this.maxDate);
}
/**
* @param {?} maxDate
* @return {?}
*/
setMaxDate(maxDate) {
this.maxDate = maxDate;
}
/**
* @return {?}
*/
getMonthDayContainer() {
return this.monthDayContainer;
}
/**
* @return {?}
*/
isActive() {
return this.active;
}
/**
* @return {?}
*/
getWidth() {
return this.width;
}
/**
* @param {?} width
* @return {?}
*/
setWidth(width) {
this.width = width;
}
/**
* @return {?}
*/
getHeight() {
return this.height;
}
/**
* @param {?} height
* @return {?}
*/
setHeight(height) {
this.height = height;
}
/**
* @return {?}
*/
getPopupWidth() {
return this.popupWidth;
}
/**
* @param {?} popupWidth
* @return {?}
*/
setPopupWidth(popupWidth) {
this.popupWidth = popupWidth;
}
/**
* @return {?}
*/
getPopupHeight() {
return this.popupHeight;
}
/**
* @param {?} popupHeight
* @return {?}
*/
setPopupHeight(popupHeight) {
this.popupHeight = popupHeight;
}
/**
* @param {?} a
* @param {?} b
* @return {?}
*/
compareDate(a, b) {
if (!a && b) {
return -1;
}
if (a && !b) {
return 1;
}
if (!a && !b) {
return 0;
}
// Compare with years first.
let /** @type {?} */ aYr = a.getFullYear();
let /** @type {?} */ bYr = b.getFullYear();
if (aYr > bYr) {
return 1;
}
else if (aYr < bYr) {
return -1;
}
// If years are equal, compare with months next.
let /** @type {?} */ aMn = a.getMonth();
let /** @type {?} */ bMn = b.getMonth();
if (aMn > bMn) {
return 1;
}
else if (aMn < bMn) {
return -1;
}
// Finally, compare with days of month.
let /** @type {?} */ aDy = a.getDate();
let /** @type {?} */ bDy = b.getDate();
if (aDy > bDy) {
return 1;
}
else if (aDy < bDy) {
return -1;
}
return 0;
}
}
DatePicker.TYPE_NAME = TYPE_NAME;
DatePicker.decorators = [
{ type: Component, args: [{
moduleId: module.id,
selector: TYPE_NAME,
template: `<div class="phx-date-picker">
<div class="date-picker-textbox">
<input type="text"
[style.width]="getWidth()"
[style.height]="getHeight()"
[disabled]="isDisabled()"
[readonly]="isReadOnly()"
[(ngModel)]="_formattedData"
(focusin)="onFocusing($event)"
(blur)="onLostFocusing($event)"
(change)="onValueChanged($event)"
(click)="onTextBoxClicked($event)">
</div>
<div class="date-picker-view" *ngIf="isActive()" [class.show]="isActive()"
[style.top]="getPopupPositionTop() ? getPopupPositionTop() + 'px' : undefined" [style.left]="getPopupPositionLeft() ? getPopupPositionLeft() + 'px' : undefined">
<div class="date-picker-header">
<div class="date-picker-center">
<div>
<div class="icon-arrow-left" (click)="onPrevMonthBtnClicked($event)"></div>
</div>
<div>
<div class="icon-arrow-right" (click)="onNextMonthBtnClicked($event)"></div>
</div>
<div>
<div (click)="onMonthLabelClicked($event)">{{_getMonthLabel()}}</div>
</div>
</div>
</div>
<div class="date-picker-body">
<div class="month-view">
<div class="day-header">
<div class="seven-cols">
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Sun</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Mon</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Tue</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Wed</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Thu</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Fri</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="day-label header-text day-bg-color">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">Sat</div>
</div>
</div>
</div>
</div>
</div>
<div class="temp-row-container">
<div class="temp-row">
<!-- fake for selected -->
</div>
</div>
<div class="temp-entry-wrapper">
<div class="temp-entry">
<!-- fake for selected -->
</div>
</div>
<div class="day-body">
<div class="seven-cols">
<div *ngFor="let container of getMonthDayContainer(); let i = index;">
<div class="col-md-1 day" *ngFor="let item of container; let j = index;"
[class.disable]="_isDateDisable(item)"
[class.today]="_isToday(item)"
[class.selected]="_isCurrentDate(item)"
[class.minmax-date]="_isMinmax(item.minmax)"
(click)="onDateClicked($event, item)">
<div style="text-align: center;">{{item.day}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
},] },
];
/** @nocollapse */
DatePicker.ctorParameters = () => [
{ type: ElementRef, },
{ type: NeedFocusService, },
{ type: FormatterFactory, },
{ type: PhloxAppInfoService, },
];
DatePicker.propDecorators = {
"dataParent": [{ type: Input },],
"ignoreParentData": [{ type: Input },],
"data": [{ type: Input },],
"ignoreParentDisabled": [{ type: Input },],
"delegateHistory": [{ type: Input },],
"onDisabled": [{ type: Input },],
"onEnabled": [{ type: Input },],
"loadingEnabled": [{ type: Input },],
"i18nKey": [{ type: Input },],
"bypass": [{ type: Input, args: ['i18nBypass',] },],
"options": [{ type: Input },],
"disabled": [{ type: Input },],
"field": [{ type: Input },],
"name": [{ type: Input },],
"typeOfData": [{ type: Input },],
"readOnly": [{ type: Input },],
"help": [{ type: Input },],
"formatter": [{ type: Input, args: ['formatter',] },],
"formatterName": [{ type: Input, args: ['formatterName',] },],
"formatterOptions": [{ type: Input, args: ['formatterOptions',] },],
"formatterUsePropertyValue": [{ type: Input, args: ['formatterUsePropertyValue',] },],
"dataPattern": [{ type: Input },],
"width": [{ type: Input },],
"height": [{ type: Input },],
"popupWidth": [{ type: Input },],
"popupHeight": [{ type: Input },],
"minDate": [{ type: Input },],
"maxDate": [{ type: Input },],
"loadEvent": [{ type: Output, args: ['phxLoad',] },],
"startValidateEvent": [{ type: Output, args: ['phxStartValidate',] },],
"endValidateEvent": [{ type: Output, args: ['phxEndValidate',] },],
"beforeFocusEvent": [{ type: Output, args: ['phxBeforeFocus',] },],
"focusEvent": [{ type: Output, args: ['phxFocus',] },],
"beforeLostFocusEvent": [{ type: Output, args: ['phxBeforeLostFocus',] },],
"lostFocusEvent": [{ type: Output, args: ['phxLostFocus',] },],
"beforeChangeEvent": [{ type: Output, args: ['phxBeforeChange',] },],
"changeEvent": [{ type: Output, args: ['phxChange',] },],
"beforeViewShowEvent": [{ type: Output, args: ['phxBeforeViewShow',] },],
"viewShowEvent": [{ type: Output, args: ['phxViewShow',] },],
"beforeViewHideEvent": [{ type: Output, args: ['phxBeforeViewHide',] },],
"viewHideEvent": [{ type: Output, args: ['phxViewHide',] },],
"onViewClicked": [{ type: HostListener, args: ['click', ['$event.target'],] },],
};
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Object)
], DatePicker.prototype, "dataParent", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "ignoreParentData", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Object)
], DatePicker.prototype, "data", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "ignoreParentDisabled", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "delegateHistory", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Function)
], DatePicker.prototype, "onDisabled", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Function)
], DatePicker.prototype, "onEnabled", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "loadingEnabled", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", String)
], DatePicker.prototype, "i18nKey", void 0);
tslib_1.__decorate([
Option('i18nBypass'),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "bypass", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "disabled", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", String)
], DatePicker.prototype, "field", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", String)
], DatePicker.prototype, "name", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", String)
], DatePicker.prototype, "typeOfData", void 0);
tslib_1.__decorate([
Option(),
tslib_1.__metadata("design:type", Boolean)
], DatePicker.prototype, "readOnly", void 0);
tslib_1.__decorate([
I18N(),
Option(),
tslib_1.__metadata("design:type", Object)
], DatePicker.prototype, "help", void 0);
tslib_1.__decorate([
Option('formatter.instance'),
tslib_1.__metadata("design:type", Object)
], DatePicker.prototype, "formatter", void 0);
tslib_1.__decorate([
Option('formatter.name'),
tslib_1.__metadata("design:type", String)
], DatePicker.prototype, "formatterName", void 0);
tslib_1.__decorate([
Option('formatter.options'),
tslib_1.__metadata("design:type", Object)
], DatePicker.prototype, "