@syncfusion/ej2-calendars
Version:
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
1,151 lines • 115 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/* eslint-disable @typescript-eslint/no-explicit-any */
import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';
import { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';
import { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base';
import { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';
import { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, ChildProperty } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { ListBase } from '@syncfusion/ej2-lists';
var WRAPPERCLASS = 'e-time-wrapper';
var POPUP = 'e-popup';
var ERROR = 'e-error';
var POPUPDIMENSION = '240px';
var DAY = new Date().getDate();
var MONTH = new Date().getMonth();
var YEAR = new Date().getFullYear();
var ROOT = 'e-timepicker';
var LIBRARY = 'e-lib';
var CONTROL = 'e-control';
var CONTENT = 'e-content';
var SELECTED = 'e-active';
var HOVER = 'e-hover';
var NAVIGATION = 'e-navigation';
var DISABLED = 'e-disabled';
var ICONANIMATION = 'e-icon-anim';
var FOCUS = 'e-input-focus';
var LISTCLASS = 'e-list-item';
var HALFPOSITION = 2;
var ANIMATIONDURATION = 50;
var OVERFLOW = 'e-time-overflow';
var OFFSETVAL = 4;
var EDITABLE = 'e-non-edit';
var wrapperAttributes = ['title', 'class', 'style'];
// eslint-disable-next-line @typescript-eslint/no-namespace
export var TimePickerBase;
(function (TimePickerBase) {
// eslint-disable-next-line max-len, jsdoc/require-jsdoc
function createListItems(createdEl, min, max, globalize, timeFormat, step) {
var formatOptions;
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: timeFormat, type: 'time' };
}
else {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };
}
var start;
var interval = step * 60000;
var listItems = [];
var timeCollections = [];
start = +(min.setMilliseconds(0));
var end = +(max.setMilliseconds(0));
while (end >= start) {
timeCollections.push(start);
listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));
start += interval;
}
var listTag = ListBase.createList(createdEl, listItems, null, true);
return { collection: timeCollections, list: listTag };
}
TimePickerBase.createListItems = createListItems;
})(TimePickerBase || (TimePickerBase = {}));
var TimeMaskPlaceholder = /** @class */ (function (_super) {
__extends(TimeMaskPlaceholder, _super);
function TimeMaskPlaceholder() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('day')
], TimeMaskPlaceholder.prototype, "day", void 0);
__decorate([
Property('month')
], TimeMaskPlaceholder.prototype, "month", void 0);
__decorate([
Property('year')
], TimeMaskPlaceholder.prototype, "year", void 0);
__decorate([
Property('day of the week')
], TimeMaskPlaceholder.prototype, "dayOfTheWeek", void 0);
__decorate([
Property('hour')
], TimeMaskPlaceholder.prototype, "hour", void 0);
__decorate([
Property('minute')
], TimeMaskPlaceholder.prototype, "minute", void 0);
__decorate([
Property('second')
], TimeMaskPlaceholder.prototype, "second", void 0);
return TimeMaskPlaceholder;
}(ChildProperty));
export { TimeMaskPlaceholder };
/**
* TimePicker is an intuitive interface component which provides an options to select a time value
* from popup list or to set a desired time value.
* ```
* <input id='timepicker' type='text'/>
* <script>
* var timePickerObj = new TimePicker({ value: new Date() });
* timePickerObj.appendTo('#timepicker');
* </script>
* ```
*/
var TimePicker = /** @class */ (function (_super) {
__extends(TimePicker, _super);
/**
* Constructor for creating the widget
*
* @param {TimePickerModel} options - Specifies the TimePicker model.
* @param {string | HTMLInputElement} element - Specifies the element to render as component.
* @private
*/
function TimePicker(options, element) {
var _this = _super.call(this, options, element) || this;
_this.liCollections = [];
_this.timeCollections = [];
_this.disableItemCollection = [];
_this.invalidValueString = null;
_this.preventChange = false;
_this.maskedDateValue = '';
_this.moduleName = _this.getModuleName();
_this.timeOptions = options;
return _this;
}
/**
* Initialize the event handler
*
* @returns {void}
* @private
*/
TimePicker.prototype.preRender = function () {
this.keyConfigure = {
enter: 'enter',
escape: 'escape',
end: 'end',
tab: 'tab',
home: 'home',
down: 'downarrow',
up: 'uparrow',
left: 'leftarrow',
right: 'rightarrow',
open: 'alt+downarrow',
close: 'alt+uparrow'
};
this.cloneElement = this.element.cloneNode(true);
removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);
this.inputElement = this.element;
this.angularTag = null;
this.formElement = closest(this.element, 'form');
if (this.element.tagName === 'EJS-TIMEPICKER') {
this.angularTag = this.element.tagName;
this.inputElement = this.createElement('input');
this.element.appendChild(this.inputElement);
}
this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
this.element.removeAttribute('tabindex');
this.openPopupEventArgs = {
appendTo: document.body
};
};
// element creation
TimePicker.prototype.render = function () {
this.initialize();
this.createInputElement();
this.updateHtmlAttributeToWrapper();
this.setTimeAllowEdit();
this.setEnable();
this.validateInterval();
this.bindEvents();
this.validateDisable();
this.setTimeZone();
this.setValue(this.getFormattedValue(this.value));
if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {
this.updateInputValue(this.maskedDateValue);
this.checkErrorState(this.maskedDateValue);
}
this.anchor = this.inputElement;
this.inputElement.setAttribute('value', this.inputElement.value);
this.inputEleValue = this.getDateObject(this.inputElement.value);
if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
}
if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
this.enabled = false;
}
this.renderComplete();
};
TimePicker.prototype.setTimeZone = function () {
if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;
var serverTimezoneDiff = this.serverTimezoneOffset;
var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;
timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;
this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));
}
};
TimePicker.prototype.isDayLightSaving = function () {
var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();
var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();
return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));
};
TimePicker.prototype.setTimeAllowEdit = function () {
if (this.allowEdit) {
if (!this.readonly) {
this.inputElement.removeAttribute('readonly');
}
}
else {
attributes(this.inputElement, { 'readonly': '' });
}
this.clearIconState();
};
TimePicker.prototype.clearIconState = function () {
if (!this.allowEdit && this.inputWrapper && !this.readonly) {
if (this.inputElement.value === '') {
removeClass([this.inputWrapper.container], [EDITABLE]);
}
else {
addClass([this.inputWrapper.container], [EDITABLE]);
}
}
else if (this.inputWrapper) {
removeClass([this.inputWrapper.container], [EDITABLE]);
}
};
TimePicker.prototype.validateDisable = function () {
this.setMinMax(this.initMin, this.initMax);
if (!isNullOrUndefined(this.value)) {
this.popupCreation();
this.popupObj.destroy();
this.popupWrapper = this.popupObj = null;
}
if ((!isNaN(+this.value) && this.value !== null)) {
if (!this.valueIsDisable(this.value)) {
//disable value given in value property so reset the date based on current date
if (this.strictMode) {
this.resetState();
}
this.initValue = null;
this.initMax = this.getDateObject(this.initMax);
this.initMin = this.getDateObject(this.initMin);
this.timeCollections = this.liCollections = [];
this.setMinMax(this.initMin, this.initMax);
}
}
};
TimePicker.prototype.validationAttribute = function (target, input) {
var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
input.setAttribute('name', name);
target.removeAttribute('name');
var attributes = ['required', 'aria-required', 'form'];
for (var i = 0; i < attributes.length; i++) {
if (isNullOrUndefined(target.getAttribute(attributes[i]))) {
continue;
}
var attr = target.getAttribute(attributes[i]);
input.setAttribute(attributes[i], attr);
target.removeAttribute(attributes[i]);
}
};
TimePicker.prototype.initialize = function () {
this.globalize = new Internationalization(this.locale);
this.defaultCulture = new Internationalization('en');
this.checkTimeFormat();
this.checkInvalidValue(this.value);
// persist the value property.
this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);
this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);
this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);
this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);
if (this.angularTag !== null) {
this.validationAttribute(this.element, this.inputElement);
}
this.updateHtmlAttributeToElement();
this.checkAttributes(false); //check the input element attributes
var localeText = { placeholder: this.placeholder };
this.l10n = new L10n('timepicker', localeText, this.locale);
this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
this.initValue = this.checkDateValue(this.value);
this.initMin = this.checkDateValue(this.min);
this.initMax = this.checkDateValue(this.max);
this.isNavigate = this.isPreventBlur = this.isTextSelected = false;
this.activeIndex = this.valueWithMinutes = this.prevDate = null;
if (!isNullOrUndefined(this.element.getAttribute('id'))) {
if (this.angularTag !== null) {
this.inputElement.id = this.element.getAttribute('id') + '_input';
}
}
else {
//for angular case
this.element.id = getUniqueID('ej2_timepicker');
if (this.angularTag !== null) {
attributes(this.inputElement, { 'id': this.element.id + '_input' });
}
}
if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {
attributes(this.inputElement, { 'name': this.element.id });
}
if (this.enableMask) {
this.notify('createMask', {
module: 'MaskedDateTime'
});
}
};
TimePicker.prototype.checkTimeFormat = function () {
if (this.format) {
if (typeof this.format === 'string') {
this.formatString = this.format;
}
else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {
var skeletonString = this.format.skeleton;
this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });
}
else {
this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });
}
}
else {
this.formatString = null;
}
};
TimePicker.prototype.checkDateValue = function (value) {
return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
};
TimePicker.prototype.createInputElement = function () {
if (this.fullScreenMode && Browser.isDevice) {
this.cssClass += ' ' + 'e-popup-expand';
}
var updatedCssClassesValue = this.cssClass;
var isBindClearAction = this.enableMask ? false : true;
if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
updatedCssClassesValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
}
this.inputWrapper = Input.createInput({
element: this.inputElement,
bindClearAction: isBindClearAction,
floatLabelType: this.floatLabelType,
properties: {
readonly: this.readonly,
placeholder: this.placeholder,
cssClass: updatedCssClassesValue,
enabled: this.enabled,
enableRtl: this.enableRtl,
showClearButton: this.showClearButton
},
buttons: [' e-input-group-icon e-time-icon e-icons']
}, this.createElement);
this.inputWrapper.container.style.width = this.setWidth(this.width);
attributes(this.inputElement, {
'aria-autocomplete': 'list', 'tabindex': '0',
'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
'aria-disabled': 'false', 'aria-invalid': 'false'
});
if (!this.isNullOrEmpty(this.inputStyle)) {
Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);
}
addClass([this.inputWrapper.container], WRAPPERCLASS);
};
TimePicker.prototype.getCldrDateTimeFormat = function () {
var culture = new Internationalization(this.locale);
var cldrTime;
var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });
if (this.isNullOrEmpty(this.formatString)) {
cldrTime = dateFormat + ' ' + this.cldrFormat('time');
}
else {
cldrTime = this.formatString;
}
return cldrTime;
};
TimePicker.prototype.checkInvalidValue = function (value) {
var isInvalid = false;
if (typeof value !== 'object' && !isNullOrUndefined(value)) {
var valueString = value;
if (typeof valueString === 'string') {
valueString = valueString.trim();
}
var valueExpression = null;
var valueExp = null;
if (typeof value === 'number') {
valueString = value.toString();
}
else if (typeof value === 'string') {
if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {
valueExpression = this.setCurrentDate(this.getDateObject(value));
if (isNullOrUndefined(valueExpression)) {
valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {
format: this.getCldrDateTimeFormat(), type: 'datetime'
}));
if (isNullOrUndefined(valueExpression)) {
valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {
format: this.formatString, type: 'dateTime', skeleton: 'yMd'
}));
}
}
}
}
valueExp = this.globalize.parseDate(this.getAmPmValue(valueString), {
format: this.getCldrDateTimeFormat(), type: 'datetime'
});
valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;
if (isNullOrUndefined(valueExpression) && valueString.replace(/\s/g, '').length) {
var extISOString = null;
var basicISOString = null;
// eslint-disable-next-line
extISOString = /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?/;
// eslint-disable-next-line
basicISOString = /^\s*((?:[+-]\d{6}|\d{4})(?:\d\d\d\d|W\d\d\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?:\d\d(?:\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?/;
if ((!extISOString.test(valueString) && !basicISOString.test(valueString))
|| ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {
isInvalid = true;
}
else {
valueExpression = new Date('' + valueString);
}
}
if (isInvalid) {
if (!this.strictMode) {
this.invalidValueString = valueString;
}
this.setProperties({ value: null }, true);
this.initValue = null;
}
else {
this.setProperties({ value: valueExpression }, true);
this.initValue = this.value;
}
}
};
TimePicker.prototype.requiredModules = function () {
var modules = [];
if (this.enableMask) {
modules.push({ args: [this], member: 'MaskedDateTime' });
}
return modules;
};
TimePicker.prototype.getAmPmValue = function (date) {
try {
if (typeof date === 'string' && date.trim() !== '') {
// Replace am/pm variants with uppercase AM/PM
return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });
}
// If date is null, undefined, or an empty string, return a default value or empty string
return '';
}
catch (error) {
console.error('Error occurred while processing date:', error);
return ''; // Return a default value in case of an error
}
};
TimePicker.prototype.cldrFormat = function (type) {
var cldrDateTimeString;
if (this.locale === 'en' || this.locale === 'en-US') {
cldrDateTimeString = (getValue('timeFormats.short', getDefaultDateObject()));
}
else {
cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));
}
return cldrDateTimeString;
};
// destroy function
TimePicker.prototype.destroy = function () {
this.hide();
if (this.showClearButton) {
this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
}
this.unBindEvents();
var ariaAttribute = {
'aria-autocomplete': 'list', 'tabindex': '0',
'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
'aria-disabled': 'true', 'aria-invalid': 'false'
};
if (this.inputElement) {
Input.removeAttributes(ariaAttribute, this.inputElement);
if (this.angularTag === null) {
this.inputWrapper.container.parentElement.appendChild(this.inputElement);
}
if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {
this.inputElement.setAttribute('tabindex', this.tabIndex);
}
else {
this.inputElement.removeAttribute('tabindex');
}
this.ensureInputAttribute();
this.enableElement([this.inputElement]);
this.inputElement.classList.remove('e-input');
if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {
Input.setEnabled(true, this.inputElement, this.floatLabelType);
}
}
if (this.inputWrapper.container) {
detach(this.inputWrapper.container);
}
this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;
this.liCollections = this.timeCollections = this.disableItemCollection = [];
if (!isNullOrUndefined(this.rippleFn)) {
this.rippleFn();
}
Input.destroy({
element: this.inputElement,
floatLabelType: this.floatLabelType,
properties: this.properties
}, this.clearButton);
_super.prototype.destroy.call(this);
if (this.formElement) {
EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
}
this.rippleFn = null;
this.openPopupEventArgs = null;
this.selectedElement = null;
this.listTag = null;
this.liCollections = null;
};
TimePicker.prototype.ensureInputAttribute = function () {
var propertyList = [];
for (var i = 0; i < this.inputElement.attributes.length; i++) {
propertyList[i] = this.inputElement.attributes[i].name;
}
for (var i = 0; i < propertyList.length; i++) {
if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {
this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));
if (propertyList[i].toLowerCase() === 'value') {
this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);
}
}
else {
this.inputElement.removeAttribute(propertyList[i]);
if (propertyList[i].toLowerCase() === 'value') {
this.inputElement.value = '';
}
}
}
};
//popup creation
TimePicker.prototype.popupCreation = function () {
this.popupWrapper = this.createElement('div', {
className: ROOT + ' ' + POPUP,
attrs: { 'id': this.element.id + '_popup' }
});
this.popupWrapper.style.visibility = 'hidden';
this.popupWrapper.setAttribute('aria-label', this.element.id);
this.popupWrapper.setAttribute('role', 'dialog');
if (!isNullOrUndefined(this.cssClass)) {
this.popupWrapper.className += ' ' + this.cssClass;
}
if (!isNullOrUndefined(this.step) && this.step > 0) {
this.generateList();
append([this.listWrapper], this.popupWrapper);
}
this.addSelection();
this.renderPopup();
detach(this.popupWrapper);
};
TimePicker.prototype.getPopupHeight = function () {
var height = parseInt(POPUPDIMENSION, 10);
var popupHeight = this.popupWrapper.getBoundingClientRect().height;
return popupHeight > height ? height : popupHeight;
};
TimePicker.prototype.generateList = function () {
this.createListItems();
this.wireListEvents();
var rippleModel = { duration: 300, selector: '.' + LISTCLASS };
this.rippleFn = rippleEffect(this.listWrapper, rippleModel);
this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);
};
TimePicker.prototype.renderPopup = function () {
var _this = this;
this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
this.popupObj = new Popup(this.popupWrapper, {
width: this.setPopupWidth(this.width),
zIndex: this.zIndex,
targetType: 'relative',
position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },
collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },
enableRtl: this.enableRtl,
relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,
offsetY: OFFSETVAL,
open: function () {
_this.popupWrapper.style.visibility = 'visible';
addClass([_this.inputWrapper.buttons[0]], SELECTED);
}, close: function () {
removeClass([_this.inputWrapper.buttons[0]], SELECTED);
_this.unWireListEvents();
_this.inputElement.removeAttribute('aria-activedescendant');
remove(_this.popupObj.element);
_this.popupObj.destroy();
_this.popupWrapper.innerHTML = '';
_this.listWrapper = _this.popupWrapper = _this.listTag = undefined;
}, targetExitViewport: function () {
if (!Browser.isDevice) {
_this.hide();
}
}
});
if (!Browser.isDevice) {
this.popupObj.collision = { X: 'none', Y: 'flip' };
}
if (Browser.isDevice && this.fullScreenMode) {
this.popupObj.element.style.maxHeight = '100%';
this.popupObj.element.style.width = '100%';
}
else {
this.popupObj.element.style.maxHeight = POPUPDIMENSION;
}
if (Browser.isDevice && this.fullScreenMode) {
var modelHeader = this.createElement('div', { className: 'e-model-header' });
var modelTitleSpan = this.createElement('span', { className: 'e-model-title' });
modelTitleSpan.textContent = 'Select time';
var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' });
EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this);
modelHeader.appendChild(modelCloseIcon);
modelHeader.appendChild(modelTitleSpan);
this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);
}
};
TimePicker.prototype.timePopupCloseHandler = function (e) {
this.hide();
};
//util function
TimePicker.prototype.getFormattedValue = function (value) {
if (isNullOrUndefined(this.checkDateValue(value))) {
return null;
}
else {
return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' });
}
};
TimePicker.prototype.getDateObject = function (text) {
if (!this.isNullOrEmpty(text)) {
var dateValue = this.createDateObj(text);
var value = !this.isNullOrEmpty(this.initValue);
if (this.checkDateValue(dateValue)) {
var date = value ? this.initValue.getDate() : DAY;
var month = value ? this.initValue.getMonth() : MONTH;
var year = value ? this.initValue.getFullYear() : YEAR;
return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());
}
}
return null;
};
TimePicker.prototype.updateHtmlAttributeToWrapper = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var key = _a[_i];
if (wrapperAttributes.indexOf(key) > -1) {
if (key === 'class') {
var updatedClassesValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
if (updatedClassesValue !== '') {
addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
}
}
else if (key === 'style') {
var timeStyle = this.inputWrapper.container.getAttribute(key);
timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes["" + key]) :
this.htmlAttributes["" + key];
this.inputWrapper.container.setAttribute(key, timeStyle);
}
else {
this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
}
};
TimePicker.prototype.updateHtmlAttributeToElement = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var key = _a[_i];
if (wrapperAttributes.indexOf(key) < 0) {
this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
};
TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {
if (!isNullOrUndefined(cssClassOld)) {
cssClassOld = (cssClassOld.replace(/\s+/g, ' ')).trim();
}
if (!isNullOrUndefined(cssClassNew)) {
cssClassNew = (cssClassNew.replace(/\s+/g, ' ')).trim();
}
Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);
if (this.popupWrapper) {
Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);
}
};
TimePicker.prototype.removeErrorClass = function () {
removeClass([this.inputWrapper.container], ERROR);
attributes(this.inputElement, { 'aria-invalid': 'false' });
};
TimePicker.prototype.checkErrorState = function (val) {
var value = this.getDateObject(val);
if ((this.validateState(value) && !this.invalidValueString) ||
(this.enableMask && this.inputElement.value === this.maskedDateValue)) {
this.removeErrorClass();
}
else {
addClass([this.inputWrapper.container], ERROR);
attributes(this.inputElement, { 'aria-invalid': 'true' });
}
};
TimePicker.prototype.validateInterval = function () {
if (!isNullOrUndefined(this.step) && this.step > 0) {
this.enableElement([this.inputWrapper.buttons[0]]);
}
else {
this.disableTimeIcon();
}
};
TimePicker.prototype.disableTimeIcon = function () {
this.disableElement([this.inputWrapper.buttons[0]]);
this.hide();
};
TimePicker.prototype.disableElement = function (element) {
addClass(element, DISABLED);
};
TimePicker.prototype.enableElement = function (element) {
removeClass(element, DISABLED);
};
TimePicker.prototype.selectInputText = function () {
this.inputElement.setSelectionRange(0, (this.inputElement).value.length);
};
TimePicker.prototype.setCursorToEnd = function () {
this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);
};
TimePicker.prototype.getMeridianText = function () {
var meridian;
if (this.locale === 'en' || this.locale === 'en-US') {
meridian = getValue('dayPeriods.format.wide', getDefaultDateObject());
}
else {
var gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated';
var mainVal = 'main.';
meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);
}
return meridian;
};
TimePicker.prototype.getCursorSelection = function () {
var input = (this.inputElement);
var start = 0;
var end = 0;
if (!isNaN(input.selectionStart)) {
start = input.selectionStart;
end = input.selectionEnd;
}
return { start: Math.abs(start), end: Math.abs(end) };
};
TimePicker.prototype.getActiveElement = function () {
if (!isNullOrUndefined(this.popupWrapper)) {
return this.popupWrapper.querySelectorAll('.' + SELECTED);
}
else {
return null;
}
};
TimePicker.prototype.isNullOrEmpty = function (value) {
if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {
return true;
}
else {
return false;
}
};
TimePicker.prototype.setWidth = function (width) {
if (typeof width === 'number') {
width = formatUnit(width);
}
else if (typeof width === 'string') {
width = (width.match(/px|%|em/)) ? width : formatUnit(width);
}
else {
width = '100%';
}
return width;
};
TimePicker.prototype.setPopupWidth = function (width) {
width = this.setWidth(width);
if (width.indexOf('%') > -1) {
var inputWidth = this.containerStyle.width * parseFloat(width) / 100;
width = inputWidth.toString() + 'px';
}
return width;
};
TimePicker.prototype.setScrollPosition = function () {
var element = this.selectedElement;
if (!isNullOrUndefined(element)) {
this.findScrollTop(element);
}
else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {
this.setScrollTo();
}
};
TimePicker.prototype.findScrollTop = function (element) {
var listHeight = this.getPopupHeight();
var nextEle = element.nextElementSibling;
var height = nextEle ? nextEle.offsetTop : element.offsetTop;
var liHeight = element.getBoundingClientRect().height;
if ((height + element.offsetTop) > listHeight) {
this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;
}
else {
this.popupWrapper.scrollTop = 0;
}
};
TimePicker.prototype.setScrollTo = function () {
var element;
if (!isNullOrUndefined(this.popupWrapper)) {
var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);
if (items.length) {
var initialTime = this.timeCollections[0];
var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();
element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];
}
}
else {
this.popupWrapper.scrollTop = 0;
}
if (!isNullOrUndefined(element)) {
this.findScrollTop(element);
}
else {
this.popupWrapper.scrollTop = 0;
}
};
TimePicker.prototype.getText = function () {
return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);
};
TimePicker.prototype.getValue = function (value) {
return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {
format: this.cldrTimeFormat(), type: 'time'
});
};
TimePicker.prototype.cldrDateFormat = function () {
var cldrDate;
if (this.locale === 'en' || this.locale === 'en-US') {
cldrDate = (getValue('dateFormats.short', getDefaultDateObject()));
}
else {
cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));
}
return cldrDate;
};
TimePicker.prototype.cldrTimeFormat = function () {
var cldrTime;
if (this.isNullOrEmpty(this.formatString)) {
if (this.locale === 'en' || this.locale === 'en-US') {
cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));
}
else {
cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));
}
}
else {
cldrTime = this.formatString;
}
return cldrTime;
};
TimePicker.prototype.dateToNumeric = function () {
var cldrTime;
if (this.locale === 'en' || this.locale === 'en-US') {
cldrTime = (getValue('timeFormats.medium', getDefaultDateObject()));
}
else {
cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));
}
return cldrTime;
};
TimePicker.prototype.getExactDateTime = function (value) {
if (isNullOrUndefined(this.checkDateValue(value))) {
return null;
}
else {
return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });
}
};
TimePicker.prototype.setValue = function (value) {
var time = this.checkValue(value);
if (!this.strictMode && !this.validateState(time)) {
if (this.checkDateValue(this.valueWithMinutes) === null) {
this.initValue = this.valueWithMinutes = null;
}
this.validateMinMax(this.value, this.min, this.max);
}
else {
if (this.isNullOrEmpty(time)) {
this.initValue = null;
this.validateMinMax(this.value, this.min, this.max);
}
else {
this.initValue = this.compareFormatChange(time);
}
}
this.updateInput(true, this.initValue);
};
TimePicker.prototype.compareFormatChange = function (value) {
if (isNullOrUndefined(value)) {
return null;
}
return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);
};
TimePicker.prototype.updatePlaceHolder = function () {
Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);
};
//event related functions
TimePicker.prototype.updateInputValue = function (value) {
Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);
};
TimePicker.prototype.preventEventBubbling = function (e) {
e.preventDefault();
this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');
};
TimePicker.prototype.popupHandler = function (e) {
if (!this.enabled) {
return;
}
if (Browser.isDevice) {
this.inputElement.setAttribute('readonly', '');
}
e.preventDefault();
if (this.isPopupOpen()) {
this.closePopup(0, e);
}
else {
this.inputElement.focus();
this.show(e);
}
};
TimePicker.prototype.mouseDownHandler = function () {
if (!this.enabled) {
return;
}
if (!this.readonly) {
this.inputElement.setSelectionRange(0, 0);
EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);
}
};
TimePicker.prototype.mouseUpHandler = function (event) {
if (!this.readonly) {
event.preventDefault();
if (this.enableMask) {
event.preventDefault();
this.notify('setMaskSelection', {
module: 'MaskedDateTime'
});
return;
}
else {
EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);
var curPos = this.getCursorSelection();
if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {
if (this.inputElement.value.length > 0) {
this.cursorDetails = this.focusSelection();
}
this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);
}
}
}
};
TimePicker.prototype.focusSelection = function () {
var regex = new RegExp('^[a-zA-Z0-9]+$');
var split = this.inputElement.value.split('');
split.push(' ');
var curPos = this.getCursorSelection();
var start = 0;
var end = 0;
var isSeparator = false;
if (!this.isTextSelected) {
for (var i = 0; i < split.length; i++) {
if (!regex.test(split[i])) {
end = i;
isSeparator = true;
}
if (isSeparator) {
if (curPos.start >= start && curPos.end <= end) {
// eslint-disable-next-line no-self-assign
end = end;
this.isTextSelected = true;
break;
}
else {
start = i + 1;
isSeparator = false;
}
}
}
}
else {
start = curPos.start;
end = curPos.end;
this.isTextSelected = false;
}
return { start: start, end: end };
};
TimePicker.prototype.inputHandler = function (event) {
if (!this.readonly && this.enabled) {
if (!((event.action === 'right' || event.action === 'left' || event.action === 'tab') || ((event.action === 'home' || event.action === 'end' || event.action === 'up' || event.action === 'down') && !this.isPopupOpen() && !this.enableMask))) {
event.preventDefault();
}
switch (event.action) {
case 'home':
case 'end':
case 'up':
case 'down':
if (!this.isPopupOpen()) {
this.popupCreation();
this.popupObj.destroy();
this.popupObj = this.popupWrapper = null;
}
if (this.enableMask && !this.readonly && !this.isPopupOpen()) {
event.preventDefault();
this.notify('keyDownHandler', {
module: 'MaskedDateTime',
e: event
});
}
if (this.isPopupOpen()) {
this.keyHandler(event);
}
break;
case 'enter':
if (this.isNavigate) {
this.selectedElement = this.liCollections[this.activeIndex];
this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
this.updateValue(this.valueWithMinutes, event);
}
else {
this.updateValue(this.inputElement.value, event);
}
this.hide();
this.isNavigate = false;
if (this.isPopupOpen()) {
event.stopPropagation();
}
break;
case 'open':
this.show(event);
break;
case 'escape':
this.updateInputValue(this.objToString(this.value));
if (this.enableMask) {
if (!this.value) {
this.updateInputValue(this.maskedDateValue);
}
this.createMask();
}
this.previousState(this.value);
this.hide();
break;
case 'close':
this.hide();
break;
case 'right':
case 'left':
case 'tab':
case 'shiftTab':
if (!this.isPopupOpen() && this.enableMask && !this.readonly) {
if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) ||
(this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') ||
(this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) {
event.preventDefault();
}
this.notify('keyDownHandler', { module: 'MaskedDateTime',
e: event
});
}
break;
default:
this.isNavigate = false;
break;
}
}
};
TimePicker.prototype.onMouseClick = function (event) {
var target = event.target;
var li = this.selectedElement = closest(target, '.' + LISTCLASS);
this.setSelection(li, event);
if (li && li.classList.contains(LISTCLASS)) {
this.hide();
}
};
TimePicker.prototype.closePopup = function (delay, e) {
var _this = this;
if (this.isPopupOpen() && this.popupWrapper) {
var args = {
popup: this.popupObj,
event: e || null,
cancel: false,
name: 'open'
};
removeClass([document.body], OVERFLOW);
this.trigger('close', args, function (args) {
if (!args.cancel) {
var animModel = {
name: 'FadeOut',
duration: ANIMATIONDURATION,
delay: delay ? delay : 0
};
_this.popupObj.hide(new Animation(animModel));
removeClass([_this.inputWrapper.container], [ICONANIMATION]);
attributes(_this.inputElement, { 'aria-expanded': 'false' });
_this.inputElement.removeAttribute('aria-owns');
_this.inputElement.removeAttribute('aria-controls');
_this.inputElement.removeAttribute('aria-activedescendant');
EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);
}
if (Browser.isDevice && _this.modal) {
_this.modal.style.display = 'none';
_this.modal.outerHTML = '';
_this.modal = null;
}
if (Browser.isDevice) {
if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {
_this.mobileTimePopupWrap.remove();
_this.mobileTimePopupWrap = null;
}
}
if (Browser.isDevice && _this.allowEdit && !_this.readonly) {
_this.inputElement.removeAttribute('readonly');
}
});
}
else {
if (Browser.isDevice && this.allowEdit && !this.readonly) {
this.inputElement.removeAttribute('readonly');
}
}
};
TimePicker.prototype.disposeServerPopup = function () {
if (this.popupWrapper) {
this.popupWrapper.style.visibility = 'hidden';
this.popupWrapper.style.top = '-9999px