@syncfusion/ej2-calendars 21.2.10 → 22.1.34

package/dist/es6/ej2-calendars.es2015.js

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Component, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, append, attributes, cldrData, closest, createElement, detach, extend, formatUnit, getDefaultDateObject, getUniqueID, getValue, isNullOrUndefined, isUndefined, merge, prepend, remove, removeClass, rippleEffect, select, setStyleAttribute, setValue, throwError } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Component, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, addClass, append, attributes, cldrData, closest, createElement, detach, extend, formatUnit, getDefaultDateObject, getUniqueID, getValue, isNullOrUndefined, isUndefined, merge, prepend, remove, removeClass, rippleEffect, select, setStyleAttribute, setValue, throwError } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -1507,7 +1507,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
     }
     navigatePrevious(e) {
-        e.preventDefault();
+        !Browser.isDevice && e.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.previous();
         }
@@ -1538,7 +1538,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
     }
     navigateNext(eve) {
-        eve.preventDefault();
+        !Browser.isDevice && eve.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.next();
         }
@@ -3217,7 +3217,9 @@ let DatePicker = class DatePicker extends Calendar {
     render() {
         this.initialize();
         this.bindEvents();
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         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');
         }
@@ -3300,6 +3302,9 @@ let DatePicker = class DatePicker extends Calendar {
             this.l10n = new L10n('datepicker', l10nLocale, this.locale);
             this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
         }
+        if (this.fullScreenMode && Browser.isDevice) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassValues = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -4096,6 +4101,13 @@ let DatePicker = class DatePicker extends Calendar {
             zIndex: this.zIndex,
             collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },
             open: () => {
+                if (Browser.isDevice && this.fullScreenMode) {
+                    this.iconRight = parseInt(window.getComputedStyle(this.calendarElement.querySelector('.e-header.e-month .e-prev')).marginRight, 10) > 16 ? true : false;
+                    this.touchModule = new Touch(this.calendarElement.querySelector(".e-content.e-month"), {
+                        swipe: this.CalendarSwipeHandler.bind(this)
+                    });
+                    EventHandler.add(this.calendarElement.querySelector(".e-content.e-month"), "touchstart", this.TouchStartHandler, this);
+                }
                 if (this.getModuleName() !== 'datetimepicker') {
                     if (document.activeElement !== this.inputElement) {
                         this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
@@ -4137,6 +4149,45 @@ let DatePicker = class DatePicker extends Calendar {
         this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     }
+    CalendarSwipeHandler(e) {
+        let direction = 0;
+        if (this.iconRight) {
+            switch (e.swipeDirection) {
+                case "Left":
+                    direction = 1;
+                    break;
+                case "Right":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        else {
+            switch (e.swipeDirection) {
+                case "Up":
+                    direction = 1;
+                    break;
+                case "Down":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (this.touchStart) {
+            if (direction === 1) {
+                this.navigateNext(e);
+            }
+            else if (direction === -1) {
+                this.navigatePrevious(e);
+            }
+            this.touchStart = false;
+        }
+    }
+    TouchStartHandler(e) {
+        this.touchStart = true;
+    }
     setAriaDisabled() {
         if (!this.enabled) {
             this.inputElement.setAttribute('aria-disabled', 'true');
@@ -4175,12 +4226,25 @@ let DatePicker = class DatePicker extends Calendar {
             dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };
         }
         monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);
-        modelHeader.appendChild(yearHeading);
+        if (this.fullScreenMode) {
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelCloseHandler, this);
+            const modelTodayButton = this.calendarElement.querySelector("button.e-today");
+            h2.classList.add("e-day-wrapper");
+            modelTodayButton.classList.add("e-outline");
+            modelHeader.appendChild(modelCloseIcon);
+            modelHeader.appendChild(modelTodayButton);
+        }
+        if (!this.fullScreenMode)
+            modelHeader.appendChild(yearHeading);
         h2.appendChild(daySpan);
         h2.appendChild(monthSpan);
         modelHeader.appendChild(h2);
         this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);
     }
+    modelCloseHandler(e) {
+        this.hide();
+    }
     changeTrigger(event) {
         if (this.inputElement.value !== this.previousElementValue) {
             if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -5038,6 +5102,9 @@ __decorate$1([
 __decorate$1([
     Property(true)
 ], DatePicker.prototype, "enabled", void 0);
+__decorate$1([
+    Property(false)
+], DatePicker.prototype, "fullScreenMode", void 0);
 __decorate$1([
     Property({})
 ], DatePicker.prototype, "htmlAttributes", void 0);
@@ -5249,7 +5316,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         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');
         }
@@ -5289,7 +5358,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         /**
          * Mobile View
          */
-        this.isMobile = window.matchMedia('(max-width:550px)').matches;
+        this.isMobile = (Browser.isDevice && this.fullScreenMode) ? true : window.matchMedia('(max-width:550px)').matches;
         this.inputElement = this.element;
         this.angularTag = null;
         if (this.element.tagName === 'EJS-DATERANGEPICKER') {
@@ -5621,7 +5690,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     updateHiddenInput() {
         if (this.firstHiddenChild && this.secondHiddenChild) {
-            const format = { type: 'datetime', skeleton: 'yMd' };
+            const format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };
             if (typeof this.startDate === 'string') {
                 this.startDate = this.globalize.parseDate(this.startDate, format);
             }
@@ -6030,7 +6099,6 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
-        this.updateHiddenInput();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -7746,6 +7814,16 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     createControl() {
         const controlContainer = this.createElement('div', { className: RANGECONTAINER });
         const headerContainer = this.createElement('div', { className: RANGEHEADER });
+        if (this.isMobile && this.fullScreenMode) {
+            const modelHeaderIconWrapper = this.createElement("div", { className: "e-model-header-wrapper" });
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+            const modelApplyButton = this.createElement("span", { className: "e-apply" });
+            EventHandler.add(modelApplyButton, 'mousedown touchstart', this.applyFunction, this);
+            modelHeaderIconWrapper.appendChild(modelCloseIcon);
+            modelHeaderIconWrapper.appendChild(modelApplyButton);
+            headerContainer.appendChild(modelHeaderIconWrapper);
+        }
         const labelContainer = this.createRangeHeader();
         headerContainer.appendChild(labelContainer);
         const daySpan = this.createElement('div', { className: DAYSPAN });
@@ -7785,6 +7863,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         this.renderPopup();
     }
+    modelRangeCloseHandler(e) {
+        this.hide();
+    }
     cancelFunction(eve) {
         if (document.activeElement !== this.inputElement) {
             this.preventFocus = true;
@@ -7997,7 +8078,24 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);
             this.wireListEvents();
             if (this.isMobile) {
-                this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';
+                if (this.fullScreenMode) {
+                    const modelWrapper = createElement('div', { className: 'e-range-mob-popup-wrap' });
+                    const modelHeader = this.createElement('div', { className: 'e-model-header' });
+                    const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+                    modelTitleSpan.textContent = "Select Preset";
+                    const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+                    EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+                    const presetContent = this.presetElement;
+                    modelHeader.appendChild(modelCloseIcon);
+                    modelHeader.appendChild(modelTitleSpan);
+                    modelWrapper.appendChild(modelHeader);
+                    modelWrapper.appendChild(presetContent);
+                    this.popupWrapper.insertBefore(modelWrapper, this.popupWrapper.firstElementChild);
+                    this.presetElement.style.width = '100%';
+                }
+                else {
+                    this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';
+                }
             }
             if (!isNullOrUndefined(this.activeIndex) && this.activeIndex > -1) {
                 addClass([this.liCollections[this.activeIndex]], ACTIVE$1);
@@ -8046,6 +8144,15 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             enableRtl: this.enableRtl,
             zIndex: this.zIndex,
             open: () => {
+                if (this.isMobile && this.fullScreenMode) {
+                    this.iconRangeRight = this.calendarElement && window.getComputedStyle(this.calendarElement.querySelector('.e-header.e-month .e-prev')).cssFloat;
+                    if (this.iconRangeRight) {
+                        this.touchRangeModule = new Touch(this.calendarElement.querySelector(".e-content.e-month"), {
+                            swipe: this.dateRangeSwipeHandler.bind(this)
+                        });
+                        EventHandler.add(this.calendarElement.querySelector(".e-content.e-month"), "touchstart", this.touchStartRangeHandler, this);
+                    }
+                }
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
                 if (this.value) {
                     attributes(this.inputElement, { 'aria-activedescendant': this.inputElement.id });
@@ -8138,6 +8245,45 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
     }
+    dateRangeSwipeHandler(e) {
+        let direction = 0;
+        if (this.iconRangeRight == 'left') {
+            switch (e.swipeDirection) {
+                case "Left":
+                    direction = 1;
+                    break;
+                case "Right":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        else {
+            switch (e.swipeDirection) {
+                case "Up":
+                    direction = 1;
+                    break;
+                case "Down":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (this.touchRangeStart) {
+            if (direction === 1) {
+                this.navigateNext(e);
+            }
+            else if (direction === -1) {
+                this.navigatePrevious(e);
+            }
+            this.touchRangeStart = false;
+        }
+    }
+    touchStartRangeHandler(e) {
+        this.touchRangeStart = true;
+    }
     popupCloseHandler(e) {
         switch (e.keyCode) {
             case 27:
@@ -8389,6 +8535,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     createInput() {
+        if (this.fullScreenMode && this.isMobile) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassValue = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -9478,6 +9627,9 @@ __decorate$2([
 __decorate$2([
     Property(false)
 ], DateRangePicker.prototype, "openOnFocus", void 0);
+__decorate$2([
+    Property(false)
+], DateRangePicker.prototype, "fullScreenMode", void 0);
 __decorate$2([
     Event()
 ], DateRangePicker.prototype, "created", void 0);
@@ -9884,6 +10036,9 @@ let TimePicker = class TimePicker extends Component {
         return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
     }
     createInputElement() {
+        if (this.fullScreenMode && Browser.isDevice) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassesValue = this.cssClass;
         const isBindClearAction = this.enableMask ? false : true;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
@@ -10130,7 +10285,26 @@ let TimePicker = class TimePicker extends Component {
         if (!Browser.isDevice) {
             this.popupObj.collision = { X: 'none', Y: 'flip' };
         }
-        this.popupObj.element.style.maxHeight = POPUPDIMENSION;
+        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) {
+            const modelHeader = this.createElement('div', { className: 'e-model-header' });
+            const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            const 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);
+        }
+    }
+    timePopupCloseHandler(e) {
+        this.hide();
     }
     //util function
     getFormattedValue(value) {
@@ -11370,7 +11544,7 @@ let TimePicker = class TimePicker extends Component {
         this.prevDate = this.valueWithMinutes = date;
         if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {
             this.setProperties({ value: date }, true);
-            if (this.enableMask) {
+            if (this.enableMask && this.value) {
                 this.createMask();
             }
         }
@@ -12008,6 +12182,9 @@ __decorate$3([
 __decorate$3([
     Property(true)
 ], TimePicker.prototype, "enabled", void 0);
+__decorate$3([
+    Property(false)
+], TimePicker.prototype, "fullScreenMode", void 0);
 __decorate$3([
     Property(false)
 ], TimePicker.prototype, "readonly", void 0);
@@ -12299,7 +12476,9 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 this.inputElement.tabIndex = -1;
             }
         }
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         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-date-time-icon');
         }
@@ -12619,7 +12798,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 this.renderPopup();
                 this.setTimeScrollPosition();
                 this.openPopup(e);
-                this.popupObject.refreshPosition(this.inputElement);
+                if (!Browser.isDevice || (Browser.isDevice && !this.fullScreenMode)) {
+                    this.popupObject.refreshPosition(this.inputElement);
+                }
+                if (Browser.isDevice && this.fullScreenMode) {
+                    this.dateTimeWrapper.style.left = '0px';
+                }
             }
         }
     }
@@ -12723,7 +12907,31 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 }
             }
         });
-        this.popupObject.element.style.maxHeight = POPUPDIMENSION$1;
+        if (Browser.isDevice && this.fullScreenMode) {
+            this.popupObject.element.style.display = "flex";
+            this.popupObject.element.style.maxHeight = "100%";
+            this.popupObject.element.style.width = "100%";
+        }
+        else {
+            this.popupObject.element.style.maxHeight = POPUPDIMENSION$1;
+        }
+        if (Browser.isDevice && this.fullScreenMode) {
+            const modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });
+            const modelHeader = this.createElement('div', { className: 'e-model-header' });
+            const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);
+            const timeContent = this.dateTimeWrapper.querySelector(".e-content");
+            modelHeader.appendChild(modelCloseIcon);
+            modelHeader.appendChild(modelTitleSpan);
+            modelWrapper.appendChild(modelHeader);
+            modelWrapper.appendChild(timeContent);
+            this.dateTimeWrapper.insertBefore(modelWrapper, this.dateTimeWrapper.firstElementChild);
+        }
+    }
+    dateTimeCloseHandler(e) {
+        this.hide();
     }
     setDimension(width) {
         if (typeof width === 'number') {
@@ -12779,7 +12987,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     getPopupHeight() {
         const height = parseInt(POPUPDIMENSION$1, 10);
         const popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;
-        return popupHeight > height ? height : popupHeight;
+        if (Browser.isDevice && this.fullScreenMode) {
+            return popupHeight;
+        }
+        else {
+            return popupHeight > height ? height : popupHeight;
+        }
     }
     changeEvent(e) {
         super.changeEvent(e);
@@ -12817,7 +13030,13 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         const height = nextElement ? nextElement.offsetTop : element.offsetTop;
         const lineHeight = element.getBoundingClientRect().height;
         if ((height + element.offsetTop) > listHeight) {
-            this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            if (Browser.isDevice && this.fullScreenMode) {
+                const listContent = this.dateTimeWrapper.querySelector('.e-content');
+                listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            }
+            else {
+                this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            }
         }
         else {
             this.dateTimeWrapper.scrollTop = 0;
@@ -13603,6 +13822,9 @@ __decorate$4([
 __decorate$4([
     Property(false)
 ], DateTimePicker.prototype, "strictMode", void 0);
+__decorate$4([
+    Property(false)
+], DateTimePicker.prototype, "fullScreenMode", void 0);
 __decorate$4([
     Property(null)
 ], DateTimePicker.prototype, "serverTimezoneOffset", void 0);
@@ -13800,7 +14022,12 @@ class MaskedDateTime {
         }
     }
     validCharacterCheck() {
-        const start = this.parent.inputElement.selectionStart;
+        let start = this.parent.inputElement.selectionStart;
+        if (this.parent.moduleName !== 'timepicker') {
+            if (start === this.hiddenMask.length && this.mask === this.parent.inputElement.value) {
+                start = 0;
+            }
+        }
         for (let i = start, j = start - 1; i < this.hiddenMask.length || j >= 0; i++, j--) {
             if (i < this.hiddenMask.length && this.validCharacters.indexOf(this.hiddenMask[i]) !== -1) {
                 this.setSelection(this.hiddenMask[i]);
@@ -14330,7 +14557,7 @@ class MaskedDateTime {
     navigateSelection(isbackward) {
         const start = this.parent.inputElement.selectionStart;
         const end = this.parent.inputElement.selectionEnd;
-        let formatIndex = isbackward ? start - 1 : end + 1;
+        let formatIndex = isbackward ? start - 1 : end;
         this.navigated = true;
         while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {
             if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {