@syncfusion/ej2-calendars 20.3.59 → 20.4.38

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

@@ -273,8 +273,10 @@ let CalendarBase = class CalendarBase extends Component {
         else {
             cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
         }
-        for (const obj of Object.keys(cldrObj)) {
-            culShortNames.push(getValue(obj, cldrObj));
+        if (!isNullOrUndefined(cldrObj)) {
+            for (const obj of Object.keys(cldrObj)) {
+                culShortNames.push(getValue(obj, cldrObj));
+            }
         }
         return culShortNames;
     }
@@ -308,9 +310,11 @@ let CalendarBase = class CalendarBase extends Component {
             }
         }
         // eslint-disable-next-line max-len
-        const shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);
-        for (let days = 0; days <= daysCount; days++) {
-            html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>';
+        const shortNames = this.getCultureValues().length > 0 && this.getCultureValues() ? this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek) : null;
+        if (!isNullOrUndefined(shortNames)) {
+            for (let days = 0; days <= daysCount; days++) {
+                html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>';
+            }
         }
         html = '<tr>' + html + '</tr>';
         this.tableHeadElement.innerHTML = html;
@@ -492,7 +496,7 @@ let CalendarBase = class CalendarBase extends Component {
                 e.preventDefault();
                 break;
             case 'controlDown':
-                if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {
+                if (!isNullOrUndefined(focusedDate) && !levelRestrict || !isNullOrUndefined(selectedDate) && !levelRestrict) {
                     this.contentClick(null, --view, (focusedDate || selectedDate), value);
                 }
                 e.preventDefault();
@@ -1116,9 +1120,6 @@ let CalendarBase = class CalendarBase extends Component {
             case 0:
                 detach(this.tableBodyElement);
                 this.renderMonths(e, null, isCustomDate);
-                if (multiSelection && !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0])) {
-                    this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);
-                }
                 break;
             case 1:
                 detach(this.tableBodyElement);
@@ -1423,7 +1424,9 @@ let CalendarBase = class CalendarBase extends Component {
             }
         }
         if (this.getModuleName() === 'calendar' && this.element) {
-            EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
+            if (!isNullOrUndefined(this.headerTitleElement)) {
+                EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
+            }
             if (this.todayElement) {
                 EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);
             }
@@ -1441,6 +1444,17 @@ let CalendarBase = class CalendarBase extends Component {
         if (this.element) {
             this.element.innerHTML = '';
         }
+        this.todayElement = null;
+        this.tableBodyElement = null;
+        this.renderDayCellArgs = null;
+        this.headerElement = null;
+        this.nextIcon = null;
+        this.table = null;
+        this.tableHeadElement = null;
+        this.previousIcon = null;
+        this.headerTitleElement = null;
+        this.footer = null;
+        this.contentElement = null;
         super.destroy();
     }
     title(e) {
@@ -1745,10 +1759,12 @@ let CalendarBase = class CalendarBase extends Component {
     }
     previousIconHandler(disabled) {
         if (disabled) {
-            EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
-            addClass([this.previousIcon], '' + DISABLED);
-            addClass([this.previousIcon], '' + OVERLAY);
-            this.previousIcon.setAttribute('aria-disabled', 'true');
+            if (!isNullOrUndefined(this.previousIcon)) {
+                EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
+                addClass([this.previousIcon], '' + DISABLED);
+                addClass([this.previousIcon], '' + OVERLAY);
+                this.previousIcon.setAttribute('aria-disabled', 'true');
+            }
         }
         else {
             EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
@@ -1771,10 +1787,12 @@ let CalendarBase = class CalendarBase extends Component {
     }
     nextIconHandler(disabled) {
         if (disabled) {
-            EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
-            addClass([this.nextIcon], DISABLED);
-            addClass([this.nextIcon], OVERLAY);
-            this.nextIcon.setAttribute('aria-disabled', 'true');
+            if (!isNullOrUndefined(this.previousIcon)) {
+                EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
+                addClass([this.nextIcon], DISABLED);
+                addClass([this.nextIcon], OVERLAY);
+                this.nextIcon.setAttribute('aria-disabled', 'true');
+            }
         }
         else {
             EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
@@ -2731,8 +2749,11 @@ class Islamic {
                 }
                 break;
             case 'Decade': {
-                const prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
+                let startIslamicYear = 1361;
+                let gregorianValue = HijriParser.toGregorian(startIslamicYear, 1, 1);
+                let prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
                 const nextDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.max) > -1;
+                prevDecadeCompare = HijriParser.toGregorian(this.calendarInstance.headerTitleElement.textContent.split('-')[0].trim(), 1, 1).getFullYear() === gregorianValue.getFullYear() ? true : prevDecadeCompare;
                 this.calendarInstance.previousIconHandler(prevDecadeCompare);
                 this.calendarInstance.nextIconHandler(nextDecadeCompare);
             }
@@ -2753,7 +2774,9 @@ class Islamic {
                 break;
             case 'Decade':
                 this.calendarInstance.nextIconClicked = true;
-                islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
+                if (islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1) {
+                    islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
+                }
                 this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 10, islamicDate.month, 1);
                 this.calendarInstance.switchView(view);
                 break;
@@ -2843,12 +2866,16 @@ class Islamic {
         let endFullYr = endYr.getFullYear();
         let startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
         let endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
+        let splityear = this.calendarInstance.headerElement.textContent.split('-');
+        if ((!isNullOrUndefined(e) && (splityear[0] !== startHdrYr) && e.action === 'home') || (!isNullOrUndefined(e) && e.type === 'keydown' && e.action === 'end')) {
+            startHdrYr = this.calendarInstance.headerElement.textContent.split('-')[0].trim();
+            endHdrYr = this.calendarInstance.headerElement.textContent.split('-')[1].trim();
+        }
         if (this.calendarInstance.islamicPreviousHeader) {
             startHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[0].trim();
             endHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[1].trim();
             this.calendarInstance.islamicPreviousHeader = null;
         }
-        let splityear = this.calendarInstance.headerElement.textContent.split('-');
         if (this.calendarInstance.previousIconClicked) {
             for (var i = 0; i <= splityear.length; i++) {
                 endHdrYr = endHdrYr - splityear[i] === 2 || splityear[i] - endHdrYr === 2 ? (parseInt(endHdrYr) + 1).toString() : endHdrYr - splityear[i] === 3 || splityear[i] - endHdrYr === 3 ? (parseInt(endHdrYr) + 2).toString() : endHdrYr - splityear[i] === 4 || splityear[i] - endHdrYr === 4 ? (parseInt(endHdrYr) + 3).toString() : endHdrYr - splityear[i] === 5 || splityear[i] - endHdrYr === 5 ? (parseInt(endHdrYr) + 4).toString() : endHdrYr;
@@ -2856,11 +2883,21 @@ class Islamic {
                     endHdrYr = (parseInt(endHdrYr) - 1).toString();
                 }
             }
+            if (endHdrYr - splityear[i] === 8 || splityear[i] - endHdrYr === 8) {
+                endHdrYr = (parseInt(endHdrYr) - 9).toString();
+                startHdrYr = (parseInt(endHdrYr) - 9).toString();
+            }
+            if (endHdrYr - splityear[i] === 7 || splityear[i] - endHdrYr === 7) {
+                endHdrYr = (parseInt(endHdrYr) - 8).toString();
+                startHdrYr = (parseInt(endHdrYr) - 9).toString();
+            }
             startHdrYr = endHdrYr - startHdrYr === 10
                 ? (parseInt(startHdrYr) + 1).toString() : endHdrYr - startHdrYr === 11
                 ? (parseInt(startHdrYr) + 2).toString() : endHdrYr - startHdrYr === 12
                 ? (parseInt(startHdrYr) + 3).toString() : startHdrYr;
-            startHdrYr = endHdrYr - startHdrYr === 8 ? (parseInt(startHdrYr) - 1).toString() : startHdrYr;
+            if (endHdrYr - startHdrYr === 8) {
+                startHdrYr = (parseInt(startHdrYr) - 1).toString();
+            }
         }
         if (this.calendarInstance.nextIconClicked) {
             for (var i = 0; i <= splityear.length; i++) {
@@ -2874,6 +2911,10 @@ class Islamic {
                     startHdrYr = (parseInt(startHdrYr) + 2).toString();
                 }
             }
+            if (startHdrYr - this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim() > 1) {
+                startHdrYr = (parseInt(this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim()) + 1).toString();
+                endHdrYr = (parseInt(startHdrYr) + 9).toString();
+            }
             endHdrYr = endHdrYr - startHdrYr === 10 ? (parseInt(endHdrYr) - 1).toString() : endHdrYr;
             endHdrYr = endHdrYr - startHdrYr === 7
                 ? (parseInt(endHdrYr) + 2).toString() : endHdrYr - startHdrYr === 8
@@ -2909,10 +2950,6 @@ class Islamic {
                 else if (year < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
                     || year > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
                     addClass([tdEle], DISABLED$1);
-                    if (year < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
-                        || year > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
-                        addClass([tdEle], DISABLED$1);
-                    }
                 }
                 else if (!isNullOrUndefined(value) &&
                     (this.getIslamicDate(localDate)).year ===
@@ -2928,6 +2965,9 @@ class Islamic {
                     EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);
                 }
                 tdEle.appendChild(dayLink);
+                if ((!isNullOrUndefined(e) && e.action === 'home' && islamicDate.year.toString() === startHdrYr) || (!isNullOrUndefined(e) && e.action === 'end' && islamicDate.year.toString() === endHdrYr)) {
+                    addClass([tdEle], FOCUSEDDATE$1);
+                }
                 tdEles.push(tdEle);
             }
         }
@@ -3497,7 +3537,9 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     unBindEvents() {
-        EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
+        }
         EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
@@ -3628,10 +3670,10 @@ let DatePicker = class DatePicker extends Calendar {
     updateHtmlAttributeToWrapper() {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
-                if (!isNullOrUndefined(this.htmlAttributes[key])) {
+                if (!isNullOrUndefined(this.htmlAttributes[`${key}`])) {
                     if (containerAttr.indexOf(key) > -1) {
                         if (key === 'class') {
-                            const updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                            const updatedClassValues = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                             if (updatedClassValues !== '') {
                                 addClass([this.inputWrapper.container], updatedClassValues.split(' '));
                             }
@@ -3640,19 +3682,19 @@ let DatePicker = class DatePicker extends Calendar {
                             let setStyle = this.inputWrapper.container.getAttribute(key);
                             if (!isNullOrUndefined(setStyle)) {
                                 if (setStyle.charAt(setStyle.length - 1) === ';') {
-                                    setStyle = setStyle + this.htmlAttributes[key];
+                                    setStyle = setStyle + this.htmlAttributes[`${key}`];
                                 }
                                 else {
-                                    setStyle = setStyle + ';' + this.htmlAttributes[key];
+                                    setStyle = setStyle + ';' + this.htmlAttributes[`${key}`];
                                 }
                             }
                             else {
-                                setStyle = this.htmlAttributes[key];
+                                setStyle = this.htmlAttributes[`${key}`];
                             }
                             this.inputWrapper.container.setAttribute(key, setStyle);
                         }
                         else {
-                            this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                            this.inputWrapper.container.setAttribute(key, this.htmlAttributes[`${key}`]);
                         }
                     }
                 }
@@ -3663,7 +3705,7 @@ let DatePicker = class DatePicker extends Calendar {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (containerAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -3775,12 +3817,12 @@ let DatePicker = class DatePicker extends Calendar {
         this.isPopupClicked = false;
     }
     documentHandler(e) {
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
+        if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
             e.preventDefault();
         }
         const target = e.target;
-        if (!(closest(target, '.e-datepicker.e-popup-wrapper'))
+        if (!(closest(target, '.e-datepicker.e-popup-wrapper')) && !isNullOrUndefined(this.inputWrapper)
             && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)
             && (!target.classList.contains('e-day'))) {
             this.hide(e);
@@ -4416,7 +4458,9 @@ let DatePicker = class DatePicker extends Calendar {
     destroy() {
         this.unBindEvents();
         super.destroy();
-        this.keyboardModules.destroy();
+        if (!isNullOrUndefined(this.keyboardModules)) {
+            this.keyboardModules.destroy();
+        }
         if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
             super.destroy();
         }
@@ -4446,15 +4490,21 @@ let DatePicker = class DatePicker extends Calendar {
         }
         if (this.ngTag === null) {
             if (this.inputElement) {
-                this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
+                if (!isNullOrUndefined(this.inputWrapper)) {
+                    this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
+                }
                 removeClass([this.inputElement], [INPUTROOT]);
             }
             removeClass([this.element], [ROOT$1]);
-            detach(this.inputWrapper.container);
+            if (!isNullOrUndefined(this.inputWrapper)) {
+                detach(this.inputWrapper.container);
+            }
         }
         if (this.formElement) {
             EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);
         }
+        this.inputWrapper = null;
+        this.keyboardModules = null;
     }
     ensureInputAttribute() {
         const prop = [];
@@ -4910,7 +4960,7 @@ let DatePicker = class DatePicker extends Calendar {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -5129,7 +5179,6 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.invalidValueString = null;
         this.isAngular = false;
         this.preventChange = false;
-        this.isPropChanged = false;
         this.dateRangeOptions = options;
     }
     /**
@@ -5361,8 +5410,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         for (const pro of Object.keys(attributes$$1)) {
             if (pro.indexOf('data') === 0) {
-                this.firstHiddenChild.setAttribute(pro, attributes$$1[pro]);
-                this.secondHiddenChild.setAttribute(pro, attributes$$1[pro]);
+                this.firstHiddenChild.setAttribute(pro, attributes$$1[`${pro}`]);
+                this.secondHiddenChild.setAttribute(pro, attributes$$1[`${pro}`]);
             }
         }
     }
@@ -5409,19 +5458,19 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValue = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let dateRangeStyle = this.inputWrapper.container.getAttribute(key);
-                        dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes[`${key}`]) :
+                            this.htmlAttributes[`${key}`];
                         this.inputWrapper.container.setAttribute(key, dateRangeStyle);
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[`${key}`]);
                     }
                 }
             }
@@ -5431,7 +5480,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -6064,7 +6113,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         return ele;
     }
     navInCalendar(e, isLeftCalendar, leftLimit, rightLimit, ele) {
-        const view = this.getViewNumber(this.currentView());
+        let view = this.getViewNumber(this.currentView());
         let date;
         const min = this.min;
         let max;
@@ -6154,10 +6203,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             case 'tab':
                 if (this.tabKeyValidation(ele, LEFTCALENDER)) {
                     ele = this.keyCalendarUpdate(false, ele, false);
-                    const focusedCell = ele.querySelector('.e-focused-date');
-                    if (isNullOrUndefined(focusedCell)) {
-                        this.currentDate = this.firstCellToFocus(this.rightCalendar);
-                    }
+                    this.currentDate = this.firstCellToFocus(this.rightCalendar);
+                    view = this.getViewNumber(this.currentView());
                     this.keyboardNavigate(0, view, e, max, min);
                     this.keyNavigation(ele, e);
                 }
@@ -6165,10 +6212,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             case 'shiftTab':
                 if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
                     ele = this.keyCalendarUpdate(true, ele, false);
-                    const focusedCell = ele.querySelector('.e-focused-date');
-                    if (isNullOrUndefined(focusedCell)) {
-                        this.currentDate = this.firstCellToFocus(this.leftCalendar);
-                    }
+                    this.currentDate = this.firstCellToFocus(this.leftCalendar);
                     this.keyboardNavigate(0, view, e, max, min);
                     this.keyNavigation(ele, e);
                 }
@@ -6176,7 +6220,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     firstCellToFocus(calendar) {
-        const focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        const focusAbleEle = this.getViewNumber(this.currentView()) === 2 ? calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-year)') : calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
         const focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
         const currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
         const focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
@@ -6403,7 +6447,11 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const leftHeader = this.leftCalendar.querySelector('.e-header');
         const isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
         const isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
-        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+        const isRightYear = rightHeader ? rightHeader.classList.contains('e-year') : false;
+        const isLeftYear = leftHeader ? leftHeader.classList.contains('e-year') : false;
+        const isRightDecade = rightHeader ? rightHeader.classList.contains('e-decade') : false;
+        const isLeftDecade = leftHeader ? leftHeader.classList.contains('e-decade') : false;
+        return isLeftCalendar && (isLeftMonth || isLeftYear || isLeftDecade) && (isRightMonth || isRightYear || isRightDecade) && !this.isMobile;
     }
     keyNavigation(calendar, e) {
         this.bindCalendarCellEvents(calendar);
@@ -8764,6 +8812,30 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.inputElement.setAttribute('name', this.element.getAttribute('data-name'));
             this.inputElement.removeAttribute('data-name');
         }
+        this.closeEventArgs = null;
+        this.leftCalendar = null;
+        this.rightTitle = null;
+        this.leftTitle = null;
+        this.openEventArgs = null;
+        this.leftCalNextIcon = null;
+        this.rightCalendar = null;
+        this.closeEventArgs = null;
+        this.rightCalPrevIcon = null;
+        this.leftCalPrevIcon = null;
+        this.popupKeyboardModule = null;
+        this.cancelButton = null;
+        this.applyButton = null;
+        this.calendarElement = null;
+        this.leftKeyboardModule = null;
+        this.rightCalNextIcon = null;
+        this.leftCalNextIcon = null;
+        this.btnKeyboardModule = null;
+        this.rightKeyboardModule = null;
+        this.leftKeyboardModule = null;
+        this.presetKeyboardModule = null;
+        this.liCollections = null;
+        this.popupObj = null;
+        this.popupWrapper = null;
     }
     ensureInputAttribute() {
         const attr = [];
@@ -9076,6 +9148,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const format = { format: this.formatString, type: 'date', skeleton: 'yMd' };
         for (const prop of Object.keys(newProp)) {
             const openPopup = ['maxDays', 'minDays', 'value'];
+            if (openPopup.indexOf(prop) < 0) {
+                this.hide(null);
+            }
             switch (prop) {
                 case 'width':
                     this.setEleWidth(this.width);
@@ -9285,13 +9360,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     this.setProperties({ depth: newProp.depth }, true);
                     this.refreshChange();
                     break;
-                default:
-                    this.isPropChanged = true;
             }
-            if (openPopup.indexOf(prop) < 0 && !this.isPropChanged) {
-                this.hide(null);
-            }
-            this.isPropChanged = false;
         }
     }
 };
@@ -9886,6 +9955,11 @@ let TimePicker = class TimePicker extends Component {
         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;
     }
     ensureInputAttribute() {
         const propertyList = [];
@@ -9997,19 +10071,19 @@ let TimePicker = class TimePicker extends Component {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassesValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        const updatedClassesValue = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassesValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let timeStyle = this.inputWrapper.container.getAttribute(key);
-                        timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[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]);
+                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[`${key}`]);
                     }
                 }
             }
@@ -10019,7 +10093,7 @@ let TimePicker = class TimePicker extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -10732,7 +10806,7 @@ let TimePicker = class TimePicker extends Component {
             this.inputEvent.destroy();
         }
         EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);
-        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {
+        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);
         }
         if (this.formElement) {
@@ -11094,7 +11168,7 @@ let TimePicker = class TimePicker extends Component {
         return elementIndex;
     }
     keyHandler(event) {
-        if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
+        if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper) && this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
             return;
         }
         const count = this.timeCollections.length;
@@ -11341,7 +11415,7 @@ let TimePicker = class TimePicker extends Component {
     }
     documentClickHandler(event) {
         const target = event.target;
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
+        if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
@@ -12061,6 +12135,14 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             this.keyboardHandler.destroy();
         }
         this.unBindInputEvents();
+        this.liCollections = null;
+        this.rippleFn = null;
+        this.selectedElement = null;
+        this.listTag = null;
+        this.timeIcon = null;
+        this.popupObject = null;
+        this.preventArgs = null;
+        this.keyboardModule = null;
         super.destroy();
     }
     /**
@@ -12480,7 +12562,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             event.preventDefault();
         }
         if (!(closest(target, '[id="' + (this.popupObject && this.popupObject.element.id + '"]'))) && target !== this.inputElement
-            && target !== this.timeIcon && target !== this.inputWrapper.container) {
+            && target !== this.timeIcon && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container) {
             if (this.isTimePopupOpen()) {
                 this.hide(event);
                 this.focusOut();
@@ -13354,7 +13436,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     super.onPropertyChanged(newProp, oldProp);
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -13664,6 +13746,10 @@ class MaskedDateTime {
         }
         if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {
             let start = this.parent.inputElement.selectionStart;
+            let formatText = '';
+            if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+                formatText = this.hiddenMask[start];
+            }
             this.dateAlteration(args.e.key === ARROWDOWN ? true : false);
             let inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
             this.isHiddenMask = true;
@@ -13672,6 +13758,12 @@ class MaskedDateTime {
             this.previousHiddenMask = this.hiddenMask;
             this.previousValue = inputValue;
             this.parent.inputElement.value = inputValue;
+            for (var i = 0; i < this.hiddenMask.length; i++) {
+                if (formatText === this.hiddenMask[i]) {
+                    start = i;
+                    break;
+                }
+            }
             this.parent.inputElement.selectionStart = start;
             this.validCharacterCheck();
         }
@@ -14065,6 +14157,10 @@ class MaskedDateTime {
     maskInputHandler() {
         let start = this.parent.inputElement.selectionStart;
         let selectionChar = this.previousHiddenMask[start - 1];
+        let formatText = '';
+        if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+            formatText = this.hiddenMask[start];
+        }
         let inputValue;
         this.differenceCheck();
         inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
@@ -14075,6 +14171,13 @@ class MaskedDateTime {
         this.previousHiddenMask = this.hiddenMask;
         this.previousValue = inputValue;
         this.parent.inputElement.value = inputValue;
+        this.parent.inputElement.value = inputValue;
+        for (var i = 0; i < this.hiddenMask.length; i++) {
+            if (formatText === this.hiddenMask[i]) {
+                start = i;
+                break;
+            }
+        }
         this.parent.inputElement.selectionStart = start;
         this.validCharacterCheck();
         if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {
@@ -14082,6 +14185,9 @@ class MaskedDateTime {
             this.isNavigate = this.isDeletion = false;
             this.navigateSelection(isbackward);
         }
+        if (this.isDeleteKey) {
+            this.isDeletion = false;
+        }
         this.isDeleteKey = false;
         // this.setSelection(selectionChar);
         // this.navigateSelection(inputValue);