@syncfusion/ej2-calendars 20.3.59 → 20.4.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.eslintrc.json +16 -1
  2. package/CHANGELOG.md +0 -26
  3. package/dist/ej2-calendars.min.js +2 -2
  4. package/dist/ej2-calendars.umd.min.js +2 -2
  5. package/dist/ej2-calendars.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-calendars.es2015.js +181 -75
  7. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  8. package/dist/es6/ej2-calendars.es5.js +180 -74
  9. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  10. package/dist/global/ej2-calendars.min.js +2 -2
  11. package/dist/global/ej2-calendars.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +10 -10
  14. package/src/calendar/calendar.js +37 -19
  15. package/src/calendar/islamic.js +29 -7
  16. package/src/datepicker/datepicker.js +24 -14
  17. package/src/daterangepicker/daterangepicker.d.ts +0 -1
  18. package/src/daterangepicker/daterangepicker.js +43 -24
  19. package/src/datetimepicker/datetimepicker.js +10 -2
  20. package/src/maskbase/masked-date-time.js +24 -0
  21. package/src/timepicker/timepicker.js +13 -8
  22. package/styles/bootstrap-dark.css +7 -0
  23. package/styles/bootstrap.css +7 -0
  24. package/styles/bootstrap4.css +7 -0
  25. package/styles/bootstrap5-dark.css +8 -1
  26. package/styles/bootstrap5.css +7 -0
  27. package/styles/calendar/_fluent-definition.scss +1 -1
  28. package/styles/calendar/_material-definition.scss +3 -3
  29. package/styles/calendar/_theme.scss +1 -1
  30. package/styles/calendar/bootstrap5-dark.css +1 -1
  31. package/styles/calendar/fabric-dark.css +1 -1
  32. package/styles/calendar/fabric.css +1 -1
  33. package/styles/calendar/fluent-dark.css +3 -3
  34. package/styles/calendar/fluent.css +2 -2
  35. package/styles/calendar/material.css +3 -3
  36. package/styles/daterangepicker/_bootstrap-dark-definition.scss +1 -0
  37. package/styles/daterangepicker/_bootstrap-definition.scss +1 -0
  38. package/styles/daterangepicker/_bootstrap4-definition.scss +1 -0
  39. package/styles/daterangepicker/_bootstrap5-definition.scss +1 -0
  40. package/styles/daterangepicker/_fabric-dark-definition.scss +1 -0
  41. package/styles/daterangepicker/_fabric-definition.scss +1 -0
  42. package/styles/daterangepicker/_fluent-definition.scss +6 -0
  43. package/styles/daterangepicker/_fusionnew-definition.scss +1 -0
  44. package/styles/daterangepicker/_highcontrast-definition.scss +1 -0
  45. package/styles/daterangepicker/_highcontrast-light-definition.scss +1 -0
  46. package/styles/daterangepicker/_layout.scss +6 -0
  47. package/styles/daterangepicker/_material-dark-definition.scss +1 -0
  48. package/styles/daterangepicker/_material-definition.scss +1 -0
  49. package/styles/daterangepicker/_material3-definition.scss +1 -0
  50. package/styles/daterangepicker/_tailwind-definition.scss +1 -0
  51. package/styles/daterangepicker/_theme.scss +33 -0
  52. package/styles/daterangepicker/bootstrap-dark.css +7 -0
  53. package/styles/daterangepicker/bootstrap.css +7 -0
  54. package/styles/daterangepicker/bootstrap4.css +7 -0
  55. package/styles/daterangepicker/bootstrap5-dark.css +7 -0
  56. package/styles/daterangepicker/bootstrap5.css +7 -0
  57. package/styles/daterangepicker/fabric-dark.css +7 -0
  58. package/styles/daterangepicker/fabric.css +7 -0
  59. package/styles/daterangepicker/fluent-dark.css +30 -0
  60. package/styles/daterangepicker/fluent.css +30 -0
  61. package/styles/daterangepicker/highcontrast-light.css +7 -0
  62. package/styles/daterangepicker/highcontrast.css +7 -0
  63. package/styles/daterangepicker/material-dark.css +7 -0
  64. package/styles/daterangepicker/material.css +5 -0
  65. package/styles/daterangepicker/tailwind-dark.css +7 -0
  66. package/styles/daterangepicker/tailwind.css +7 -0
  67. package/styles/fabric-dark.css +8 -1
  68. package/styles/fabric.css +8 -1
  69. package/styles/fluent-dark.css +33 -3
  70. package/styles/fluent.css +32 -2
  71. package/styles/highcontrast-light.css +7 -0
  72. package/styles/highcontrast.css +7 -0
  73. package/styles/material-dark.css +7 -0
  74. package/styles/material.css +8 -3
  75. package/styles/tailwind-dark.css +7 -0
  76. package/styles/tailwind.css +7 -0
@@ -288,9 +288,11 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
288
288
  else {
289
289
  cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
290
290
  }
291
- for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
292
- var obj = _a[_i];
293
- culShortNames.push(getValue(obj, cldrObj));
291
+ if (!isNullOrUndefined(cldrObj)) {
292
+ for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
293
+ var obj = _a[_i];
294
+ culShortNames.push(getValue(obj, cldrObj));
295
+ }
294
296
  }
295
297
  return culShortNames;
296
298
  };
@@ -324,9 +326,11 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
324
326
  }
325
327
  }
326
328
  // eslint-disable-next-line max-len
327
- var shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);
328
- for (var days = 0; days <= daysCount; days++) {
329
- html += '<th class="">' + this.toCapitalize(shortNames[days]) + '</th>';
329
+ var shortNames = this.getCultureValues().length > 0 && this.getCultureValues() ? this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek) : null;
330
+ if (!isNullOrUndefined(shortNames)) {
331
+ for (var days = 0; days <= daysCount; days++) {
332
+ html += '<th class="">' + this.toCapitalize(shortNames[days]) + '</th>';
333
+ }
330
334
  }
331
335
  html = '<tr>' + html + '</tr>';
332
336
  this.tableHeadElement.innerHTML = html;
@@ -508,7 +512,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
508
512
  e.preventDefault();
509
513
  break;
510
514
  case 'controlDown':
511
- if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {
515
+ if (!isNullOrUndefined(focusedDate) && !levelRestrict || !isNullOrUndefined(selectedDate) && !levelRestrict) {
512
516
  this.contentClick(null, --view, (focusedDate || selectedDate), value);
513
517
  }
514
518
  e.preventDefault();
@@ -1133,9 +1137,6 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
1133
1137
  case 0:
1134
1138
  detach(this.tableBodyElement);
1135
1139
  this.renderMonths(e, null, isCustomDate);
1136
- if (multiSelection && !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0])) {
1137
- this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);
1138
- }
1139
1140
  break;
1140
1141
  case 1:
1141
1142
  detach(this.tableBodyElement);
@@ -1441,7 +1442,9 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
1441
1442
  }
1442
1443
  }
1443
1444
  if (this.getModuleName() === 'calendar' && this.element) {
1444
- EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
1445
+ if (!isNullOrUndefined(this.headerTitleElement)) {
1446
+ EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
1447
+ }
1445
1448
  if (this.todayElement) {
1446
1449
  EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);
1447
1450
  }
@@ -1459,6 +1462,17 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
1459
1462
  if (this.element) {
1460
1463
  this.element.innerHTML = '';
1461
1464
  }
1465
+ this.todayElement = null;
1466
+ this.tableBodyElement = null;
1467
+ this.renderDayCellArgs = null;
1468
+ this.headerElement = null;
1469
+ this.nextIcon = null;
1470
+ this.table = null;
1471
+ this.tableHeadElement = null;
1472
+ this.previousIcon = null;
1473
+ this.headerTitleElement = null;
1474
+ this.footer = null;
1475
+ this.contentElement = null;
1462
1476
  _super.prototype.destroy.call(this);
1463
1477
  };
1464
1478
  CalendarBase.prototype.title = function (e) {
@@ -1763,10 +1777,12 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
1763
1777
  };
1764
1778
  CalendarBase.prototype.previousIconHandler = function (disabled) {
1765
1779
  if (disabled) {
1766
- EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
1767
- addClass([this.previousIcon], '' + DISABLED);
1768
- addClass([this.previousIcon], '' + OVERLAY);
1769
- this.previousIcon.setAttribute('aria-disabled', 'true');
1780
+ if (!isNullOrUndefined(this.previousIcon)) {
1781
+ EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
1782
+ addClass([this.previousIcon], '' + DISABLED);
1783
+ addClass([this.previousIcon], '' + OVERLAY);
1784
+ this.previousIcon.setAttribute('aria-disabled', 'true');
1785
+ }
1770
1786
  }
1771
1787
  else {
1772
1788
  EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
@@ -1789,10 +1805,12 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
1789
1805
  };
1790
1806
  CalendarBase.prototype.nextIconHandler = function (disabled) {
1791
1807
  if (disabled) {
1792
- EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
1793
- addClass([this.nextIcon], DISABLED);
1794
- addClass([this.nextIcon], OVERLAY);
1795
- this.nextIcon.setAttribute('aria-disabled', 'true');
1808
+ if (!isNullOrUndefined(this.previousIcon)) {
1809
+ EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
1810
+ addClass([this.nextIcon], DISABLED);
1811
+ addClass([this.nextIcon], OVERLAY);
1812
+ this.nextIcon.setAttribute('aria-disabled', 'true');
1813
+ }
1796
1814
  }
1797
1815
  else {
1798
1816
  EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
@@ -2754,8 +2772,11 @@ var Islamic = /** @__PURE__ @class */ (function () {
2754
2772
  }
2755
2773
  break;
2756
2774
  case 'Decade': {
2775
+ var startIslamicYear = 1361;
2776
+ var gregorianValue = HijriParser.toGregorian(startIslamicYear, 1, 1);
2757
2777
  var prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
2758
2778
  var nextDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.max) > -1;
2779
+ prevDecadeCompare = HijriParser.toGregorian(this.calendarInstance.headerTitleElement.textContent.split('-')[0].trim(), 1, 1).getFullYear() === gregorianValue.getFullYear() ? true : prevDecadeCompare;
2759
2780
  this.calendarInstance.previousIconHandler(prevDecadeCompare);
2760
2781
  this.calendarInstance.nextIconHandler(nextDecadeCompare);
2761
2782
  }
@@ -2776,7 +2797,9 @@ var Islamic = /** @__PURE__ @class */ (function () {
2776
2797
  break;
2777
2798
  case 'Decade':
2778
2799
  this.calendarInstance.nextIconClicked = true;
2779
- islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
2800
+ if (islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1) {
2801
+ islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
2802
+ }
2780
2803
  this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 10, islamicDate.month, 1);
2781
2804
  this.calendarInstance.switchView(view);
2782
2805
  break;
@@ -2866,12 +2889,16 @@ var Islamic = /** @__PURE__ @class */ (function () {
2866
2889
  var endFullYr = endYr.getFullYear();
2867
2890
  var startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
2868
2891
  var endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
2892
+ var splityear = this.calendarInstance.headerElement.textContent.split('-');
2893
+ if ((!isNullOrUndefined(e) && (splityear[0] !== startHdrYr) && e.action === 'home') || (!isNullOrUndefined(e) && e.type === 'keydown' && e.action === 'end')) {
2894
+ startHdrYr = this.calendarInstance.headerElement.textContent.split('-')[0].trim();
2895
+ endHdrYr = this.calendarInstance.headerElement.textContent.split('-')[1].trim();
2896
+ }
2869
2897
  if (this.calendarInstance.islamicPreviousHeader) {
2870
2898
  startHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[0].trim();
2871
2899
  endHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[1].trim();
2872
2900
  this.calendarInstance.islamicPreviousHeader = null;
2873
2901
  }
2874
- var splityear = this.calendarInstance.headerElement.textContent.split('-');
2875
2902
  if (this.calendarInstance.previousIconClicked) {
2876
2903
  for (var i = 0; i <= splityear.length; i++) {
2877
2904
  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;
@@ -2879,11 +2906,21 @@ var Islamic = /** @__PURE__ @class */ (function () {
2879
2906
  endHdrYr = (parseInt(endHdrYr) - 1).toString();
2880
2907
  }
2881
2908
  }
2909
+ if (endHdrYr - splityear[i] === 8 || splityear[i] - endHdrYr === 8) {
2910
+ endHdrYr = (parseInt(endHdrYr) - 9).toString();
2911
+ startHdrYr = (parseInt(endHdrYr) - 9).toString();
2912
+ }
2913
+ if (endHdrYr - splityear[i] === 7 || splityear[i] - endHdrYr === 7) {
2914
+ endHdrYr = (parseInt(endHdrYr) - 8).toString();
2915
+ startHdrYr = (parseInt(endHdrYr) - 9).toString();
2916
+ }
2882
2917
  startHdrYr = endHdrYr - startHdrYr === 10
2883
2918
  ? (parseInt(startHdrYr) + 1).toString() : endHdrYr - startHdrYr === 11
2884
2919
  ? (parseInt(startHdrYr) + 2).toString() : endHdrYr - startHdrYr === 12
2885
2920
  ? (parseInt(startHdrYr) + 3).toString() : startHdrYr;
2886
- startHdrYr = endHdrYr - startHdrYr === 8 ? (parseInt(startHdrYr) - 1).toString() : startHdrYr;
2921
+ if (endHdrYr - startHdrYr === 8) {
2922
+ startHdrYr = (parseInt(startHdrYr) - 1).toString();
2923
+ }
2887
2924
  }
2888
2925
  if (this.calendarInstance.nextIconClicked) {
2889
2926
  for (var i = 0; i <= splityear.length; i++) {
@@ -2897,6 +2934,10 @@ var Islamic = /** @__PURE__ @class */ (function () {
2897
2934
  startHdrYr = (parseInt(startHdrYr) + 2).toString();
2898
2935
  }
2899
2936
  }
2937
+ if (startHdrYr - this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim() > 1) {
2938
+ startHdrYr = (parseInt(this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim()) + 1).toString();
2939
+ endHdrYr = (parseInt(startHdrYr) + 9).toString();
2940
+ }
2900
2941
  endHdrYr = endHdrYr - startHdrYr === 10 ? (parseInt(endHdrYr) - 1).toString() : endHdrYr;
2901
2942
  endHdrYr = endHdrYr - startHdrYr === 7
2902
2943
  ? (parseInt(endHdrYr) + 2).toString() : endHdrYr - startHdrYr === 8
@@ -2932,10 +2973,6 @@ var Islamic = /** @__PURE__ @class */ (function () {
2932
2973
  else if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
2933
2974
  || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
2934
2975
  addClass([tdEle], DISABLED$1);
2935
- if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
2936
- || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
2937
- addClass([tdEle], DISABLED$1);
2938
- }
2939
2976
  }
2940
2977
  else if (!isNullOrUndefined(value) &&
2941
2978
  (this.getIslamicDate(localDate)).year ===
@@ -2951,6 +2988,9 @@ var Islamic = /** @__PURE__ @class */ (function () {
2951
2988
  EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);
2952
2989
  }
2953
2990
  tdEle.appendChild(dayLink);
2991
+ if ((!isNullOrUndefined(e) && e.action === 'home' && islamicDate.year.toString() === startHdrYr) || (!isNullOrUndefined(e) && e.action === 'end' && islamicDate.year.toString() === endHdrYr)) {
2992
+ addClass([tdEle], FOCUSEDDATE$1);
2993
+ }
2954
2994
  tdEles.push(tdEle);
2955
2995
  }
2956
2996
  }
@@ -3538,7 +3578,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
3538
3578
  }
3539
3579
  };
3540
3580
  DatePicker.prototype.unBindEvents = function () {
3541
- EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
3581
+ if (!isNullOrUndefined(this.inputWrapper)) {
3582
+ EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
3583
+ }
3542
3584
  EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);
3543
3585
  EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
3544
3586
  EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
@@ -3670,10 +3712,10 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
3670
3712
  if (!isNullOrUndefined(this.htmlAttributes)) {
3671
3713
  for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
3672
3714
  var key = _a[_i];
3673
- if (!isNullOrUndefined(this.htmlAttributes[key])) {
3715
+ if (!isNullOrUndefined(this.htmlAttributes["" + key])) {
3674
3716
  if (containerAttr.indexOf(key) > -1) {
3675
3717
  if (key === 'class') {
3676
- var updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
3718
+ var updatedClassValues = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
3677
3719
  if (updatedClassValues !== '') {
3678
3720
  addClass([this.inputWrapper.container], updatedClassValues.split(' '));
3679
3721
  }
@@ -3682,19 +3724,19 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
3682
3724
  var setStyle = this.inputWrapper.container.getAttribute(key);
3683
3725
  if (!isNullOrUndefined(setStyle)) {
3684
3726
  if (setStyle.charAt(setStyle.length - 1) === ';') {
3685
- setStyle = setStyle + this.htmlAttributes[key];
3727
+ setStyle = setStyle + this.htmlAttributes["" + key];
3686
3728
  }
3687
3729
  else {
3688
- setStyle = setStyle + ';' + this.htmlAttributes[key];
3730
+ setStyle = setStyle + ';' + this.htmlAttributes["" + key];
3689
3731
  }
3690
3732
  }
3691
3733
  else {
3692
- setStyle = this.htmlAttributes[key];
3734
+ setStyle = this.htmlAttributes["" + key];
3693
3735
  }
3694
3736
  this.inputWrapper.container.setAttribute(key, setStyle);
3695
3737
  }
3696
3738
  else {
3697
- this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
3739
+ this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
3698
3740
  }
3699
3741
  }
3700
3742
  }
@@ -3706,7 +3748,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
3706
3748
  for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
3707
3749
  var key = _a[_i];
3708
3750
  if (containerAttr.indexOf(key) < 0) {
3709
- this.inputElement.setAttribute(key, this.htmlAttributes[key]);
3751
+ this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
3710
3752
  }
3711
3753
  }
3712
3754
  }
@@ -3818,12 +3860,12 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
3818
3860
  this.isPopupClicked = false;
3819
3861
  };
3820
3862
  DatePicker.prototype.documentHandler = function (e) {
3821
- if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
3863
+ if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
3822
3864
  (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
3823
3865
  e.preventDefault();
3824
3866
  }
3825
3867
  var target = e.target;
3826
- if (!(closest(target, '.e-datepicker.e-popup-wrapper'))
3868
+ if (!(closest(target, '.e-datepicker.e-popup-wrapper')) && !isNullOrUndefined(this.inputWrapper)
3827
3869
  && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)
3828
3870
  && (!target.classList.contains('e-day'))) {
3829
3871
  this.hide(e);
@@ -4462,7 +4504,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
4462
4504
  DatePicker.prototype.destroy = function () {
4463
4505
  this.unBindEvents();
4464
4506
  _super.prototype.destroy.call(this);
4465
- this.keyboardModules.destroy();
4507
+ if (!isNullOrUndefined(this.keyboardModules)) {
4508
+ this.keyboardModules.destroy();
4509
+ }
4466
4510
  if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
4467
4511
  _super.prototype.destroy.call(this);
4468
4512
  }
@@ -4492,15 +4536,21 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
4492
4536
  }
4493
4537
  if (this.ngTag === null) {
4494
4538
  if (this.inputElement) {
4495
- this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
4539
+ if (!isNullOrUndefined(this.inputWrapper)) {
4540
+ this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
4541
+ }
4496
4542
  removeClass([this.inputElement], [INPUTROOT]);
4497
4543
  }
4498
4544
  removeClass([this.element], [ROOT$1]);
4499
- detach(this.inputWrapper.container);
4545
+ if (!isNullOrUndefined(this.inputWrapper)) {
4546
+ detach(this.inputWrapper.container);
4547
+ }
4500
4548
  }
4501
4549
  if (this.formElement) {
4502
4550
  EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);
4503
4551
  }
4552
+ this.inputWrapper = null;
4553
+ this.keyboardModules = null;
4504
4554
  };
4505
4555
  DatePicker.prototype.ensureInputAttribute = function () {
4506
4556
  var prop = [];
@@ -4958,7 +5008,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
4958
5008
  }
4959
5009
  break;
4960
5010
  }
4961
- if (!this.isDynamicValueChanged && !this.isIconClicked) {
5011
+ if (!this.isDynamicValueChanged) {
4962
5012
  this.hide(null);
4963
5013
  }
4964
5014
  this.isDynamicValueChanged = false;
@@ -5197,7 +5247,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
5197
5247
  _this.invalidValueString = null;
5198
5248
  _this.isAngular = false;
5199
5249
  _this.preventChange = false;
5200
- _this.isPropChanged = false;
5201
5250
  _this.dateRangeOptions = options;
5202
5251
  return _this;
5203
5252
  }
@@ -5431,8 +5480,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
5431
5480
  for (var _i = 0, _a = Object.keys(attributes$$1); _i < _a.length; _i++) {
5432
5481
  var pro = _a[_i];
5433
5482
  if (pro.indexOf('data') === 0) {
5434
- this.firstHiddenChild.setAttribute(pro, attributes$$1[pro]);
5435
- this.secondHiddenChild.setAttribute(pro, attributes$$1[pro]);
5483
+ this.firstHiddenChild.setAttribute(pro, attributes$$1["" + pro]);
5484
+ this.secondHiddenChild.setAttribute(pro, attributes$$1["" + pro]);
5436
5485
  }
5437
5486
  }
5438
5487
  };
@@ -5480,19 +5529,19 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
5480
5529
  var key = _a[_i];
5481
5530
  if (wrapperAttr.indexOf(key) > -1) {
5482
5531
  if (key === 'class') {
5483
- var updatedClassValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
5532
+ var updatedClassValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
5484
5533
  if (updatedClassValue !== '') {
5485
5534
  addClass([this.inputWrapper.container], updatedClassValue.split(' '));
5486
5535
  }
5487
5536
  }
5488
5537
  else if (key === 'style') {
5489
5538
  var dateRangeStyle = this.inputWrapper.container.getAttribute(key);
5490
- dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes[key]) :
5491
- this.htmlAttributes[key];
5539
+ dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes["" + key]) :
5540
+ this.htmlAttributes["" + key];
5492
5541
  this.inputWrapper.container.setAttribute(key, dateRangeStyle);
5493
5542
  }
5494
5543
  else {
5495
- this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
5544
+ this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
5496
5545
  }
5497
5546
  }
5498
5547
  }
@@ -5503,7 +5552,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
5503
5552
  for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
5504
5553
  var key = _a[_i];
5505
5554
  if (wrapperAttr.indexOf(key) < 0) {
5506
- this.inputElement.setAttribute(key, this.htmlAttributes[key]);
5555
+ this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
5507
5556
  }
5508
5557
  }
5509
5558
  }
@@ -6229,10 +6278,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
6229
6278
  case 'tab':
6230
6279
  if (this.tabKeyValidation(ele, LEFTCALENDER)) {
6231
6280
  ele = this.keyCalendarUpdate(false, ele, false);
6232
- var focusedCell = ele.querySelector('.e-focused-date');
6233
- if (isNullOrUndefined(focusedCell)) {
6234
- this.currentDate = this.firstCellToFocus(this.rightCalendar);
6235
- }
6281
+ this.currentDate = this.firstCellToFocus(this.rightCalendar);
6282
+ view = this.getViewNumber(this.currentView());
6236
6283
  this.keyboardNavigate(0, view, e, max, min);
6237
6284
  this.keyNavigation(ele, e);
6238
6285
  }
@@ -6240,10 +6287,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
6240
6287
  case 'shiftTab':
6241
6288
  if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
6242
6289
  ele = this.keyCalendarUpdate(true, ele, false);
6243
- var focusedCell = ele.querySelector('.e-focused-date');
6244
- if (isNullOrUndefined(focusedCell)) {
6245
- this.currentDate = this.firstCellToFocus(this.leftCalendar);
6246
- }
6290
+ this.currentDate = this.firstCellToFocus(this.leftCalendar);
6247
6291
  this.keyboardNavigate(0, view, e, max, min);
6248
6292
  this.keyNavigation(ele, e);
6249
6293
  }
@@ -6251,7 +6295,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
6251
6295
  }
6252
6296
  };
6253
6297
  DateRangePicker.prototype.firstCellToFocus = function (calendar) {
6254
- var focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
6298
+ var 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)');
6255
6299
  var focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
6256
6300
  var currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
6257
6301
  var focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
@@ -6478,7 +6522,11 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
6478
6522
  var leftHeader = this.leftCalendar.querySelector('.e-header');
6479
6523
  var isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
6480
6524
  var isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
6481
- return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
6525
+ var isRightYear = rightHeader ? rightHeader.classList.contains('e-year') : false;
6526
+ var isLeftYear = leftHeader ? leftHeader.classList.contains('e-year') : false;
6527
+ var isRightDecade = rightHeader ? rightHeader.classList.contains('e-decade') : false;
6528
+ var isLeftDecade = leftHeader ? leftHeader.classList.contains('e-decade') : false;
6529
+ return isLeftCalendar && (isLeftMonth || isLeftYear || isLeftDecade) && (isRightMonth || isRightYear || isRightDecade) && !this.isMobile;
6482
6530
  };
6483
6531
  DateRangePicker.prototype.keyNavigation = function (calendar, e) {
6484
6532
  this.bindCalendarCellEvents(calendar);
@@ -8855,6 +8903,30 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
8855
8903
  this.inputElement.setAttribute('name', this.element.getAttribute('data-name'));
8856
8904
  this.inputElement.removeAttribute('data-name');
8857
8905
  }
8906
+ this.closeEventArgs = null;
8907
+ this.leftCalendar = null;
8908
+ this.rightTitle = null;
8909
+ this.leftTitle = null;
8910
+ this.openEventArgs = null;
8911
+ this.leftCalNextIcon = null;
8912
+ this.rightCalendar = null;
8913
+ this.closeEventArgs = null;
8914
+ this.rightCalPrevIcon = null;
8915
+ this.leftCalPrevIcon = null;
8916
+ this.popupKeyboardModule = null;
8917
+ this.cancelButton = null;
8918
+ this.applyButton = null;
8919
+ this.calendarElement = null;
8920
+ this.leftKeyboardModule = null;
8921
+ this.rightCalNextIcon = null;
8922
+ this.leftCalNextIcon = null;
8923
+ this.btnKeyboardModule = null;
8924
+ this.rightKeyboardModule = null;
8925
+ this.leftKeyboardModule = null;
8926
+ this.presetKeyboardModule = null;
8927
+ this.liCollections = null;
8928
+ this.popupObj = null;
8929
+ this.popupWrapper = null;
8858
8930
  };
8859
8931
  DateRangePicker.prototype.ensureInputAttribute = function () {
8860
8932
  var attr = [];
@@ -9170,6 +9242,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
9170
9242
  for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
9171
9243
  var prop = _a[_i];
9172
9244
  var openPopup = ['maxDays', 'minDays', 'value'];
9245
+ if (openPopup.indexOf(prop) < 0) {
9246
+ this.hide(null);
9247
+ }
9173
9248
  switch (prop) {
9174
9249
  case 'width':
9175
9250
  this.setEleWidth(this.width);
@@ -9379,13 +9454,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
9379
9454
  this.setProperties({ depth: newProp.depth }, true);
9380
9455
  this.refreshChange();
9381
9456
  break;
9382
- default:
9383
- this.isPropChanged = true;
9384
9457
  }
9385
- if (openPopup.indexOf(prop) < 0 && !this.isPropChanged) {
9386
- this.hide(null);
9387
- }
9388
- this.isPropChanged = false;
9389
9458
  }
9390
9459
  };
9391
9460
  __decorate$2([
@@ -10001,6 +10070,11 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
10001
10070
  if (this.formElement) {
10002
10071
  EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
10003
10072
  }
10073
+ this.rippleFn = null;
10074
+ this.openPopupEventArgs = null;
10075
+ this.selectedElement = null;
10076
+ this.listTag = null;
10077
+ this.liCollections = null;
10004
10078
  };
10005
10079
  TimePicker.prototype.ensureInputAttribute = function () {
10006
10080
  var propertyList = [];
@@ -10114,19 +10188,19 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
10114
10188
  var key = _a[_i];
10115
10189
  if (wrapperAttributes.indexOf(key) > -1) {
10116
10190
  if (key === 'class') {
10117
- var updatedClassesValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
10191
+ var updatedClassesValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
10118
10192
  if (updatedClassesValue !== '') {
10119
10193
  addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
10120
10194
  }
10121
10195
  }
10122
10196
  else if (key === 'style') {
10123
10197
  var timeStyle = this.inputWrapper.container.getAttribute(key);
10124
- timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :
10125
- this.htmlAttributes[key];
10198
+ timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes["" + key]) :
10199
+ this.htmlAttributes["" + key];
10126
10200
  this.inputWrapper.container.setAttribute(key, timeStyle);
10127
10201
  }
10128
10202
  else {
10129
- this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
10203
+ this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
10130
10204
  }
10131
10205
  }
10132
10206
  }
@@ -10137,7 +10211,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
10137
10211
  for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
10138
10212
  var key = _a[_i];
10139
10213
  if (wrapperAttributes.indexOf(key) < 0) {
10140
- this.inputElement.setAttribute(key, this.htmlAttributes[key]);
10214
+ this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
10141
10215
  }
10142
10216
  }
10143
10217
  }
@@ -10851,7 +10925,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
10851
10925
  this.inputEvent.destroy();
10852
10926
  }
10853
10927
  EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);
10854
- if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {
10928
+ if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {
10855
10929
  EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);
10856
10930
  }
10857
10931
  if (this.formElement) {
@@ -11214,7 +11288,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
11214
11288
  return elementIndex;
11215
11289
  };
11216
11290
  TimePicker.prototype.keyHandler = function (event) {
11217
- if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
11291
+ if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper) && this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
11218
11292
  return;
11219
11293
  }
11220
11294
  var count = this.timeCollections.length;
@@ -11462,7 +11536,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
11462
11536
  };
11463
11537
  TimePicker.prototype.documentClickHandler = function (event) {
11464
11538
  var target = event.target;
11465
- if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
11539
+ if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
11466
11540
  (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {
11467
11541
  event.preventDefault();
11468
11542
  }
@@ -12200,6 +12274,14 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
12200
12274
  this.keyboardHandler.destroy();
12201
12275
  }
12202
12276
  this.unBindInputEvents();
12277
+ this.liCollections = null;
12278
+ this.rippleFn = null;
12279
+ this.selectedElement = null;
12280
+ this.listTag = null;
12281
+ this.timeIcon = null;
12282
+ this.popupObject = null;
12283
+ this.preventArgs = null;
12284
+ this.keyboardModule = null;
12203
12285
  _super.prototype.destroy.call(this);
12204
12286
  };
12205
12287
  /**
@@ -12620,7 +12702,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
12620
12702
  event.preventDefault();
12621
12703
  }
12622
12704
  if (!(closest(target, '[id="' + (this.popupObject && this.popupObject.element.id + '"]'))) && target !== this.inputElement
12623
- && target !== this.timeIcon && target !== this.inputWrapper.container) {
12705
+ && target !== this.timeIcon && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container) {
12624
12706
  if (this.isTimePopupOpen()) {
12625
12707
  this.hide(event);
12626
12708
  this.focusOut();
@@ -13498,7 +13580,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
13498
13580
  _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
13499
13581
  break;
13500
13582
  }
13501
- if (!this.isDynamicValueChanged && !this.isIconClicked) {
13583
+ if (!this.isDynamicValueChanged) {
13502
13584
  this.hide(null);
13503
13585
  }
13504
13586
  this.isDynamicValueChanged = false;
@@ -13809,6 +13891,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
13809
13891
  }
13810
13892
  if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {
13811
13893
  var start = this.parent.inputElement.selectionStart;
13894
+ var formatText = '';
13895
+ if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
13896
+ formatText = this.hiddenMask[start];
13897
+ }
13812
13898
  this.dateAlteration(args.e.key === ARROWDOWN ? true : false);
13813
13899
  var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
13814
13900
  this.isHiddenMask = true;
@@ -13817,6 +13903,12 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
13817
13903
  this.previousHiddenMask = this.hiddenMask;
13818
13904
  this.previousValue = inputValue;
13819
13905
  this.parent.inputElement.value = inputValue;
13906
+ for (var i = 0; i < this.hiddenMask.length; i++) {
13907
+ if (formatText === this.hiddenMask[i]) {
13908
+ start = i;
13909
+ break;
13910
+ }
13911
+ }
13820
13912
  this.parent.inputElement.selectionStart = start;
13821
13913
  this.validCharacterCheck();
13822
13914
  }
@@ -14211,6 +14303,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
14211
14303
  MaskedDateTime.prototype.maskInputHandler = function () {
14212
14304
  var start = this.parent.inputElement.selectionStart;
14213
14305
  var selectionChar = this.previousHiddenMask[start - 1];
14306
+ var formatText = '';
14307
+ if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
14308
+ formatText = this.hiddenMask[start];
14309
+ }
14214
14310
  var inputValue;
14215
14311
  this.differenceCheck();
14216
14312
  inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
@@ -14221,6 +14317,13 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
14221
14317
  this.previousHiddenMask = this.hiddenMask;
14222
14318
  this.previousValue = inputValue;
14223
14319
  this.parent.inputElement.value = inputValue;
14320
+ this.parent.inputElement.value = inputValue;
14321
+ for (var i = 0; i < this.hiddenMask.length; i++) {
14322
+ if (formatText === this.hiddenMask[i]) {
14323
+ start = i;
14324
+ break;
14325
+ }
14326
+ }
14224
14327
  this.parent.inputElement.selectionStart = start;
14225
14328
  this.validCharacterCheck();
14226
14329
  if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {
@@ -14228,6 +14331,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
14228
14331
  this.isNavigate = this.isDeletion = false;
14229
14332
  this.navigateSelection(isbackward);
14230
14333
  }
14334
+ if (this.isDeleteKey) {
14335
+ this.isDeletion = false;
14336
+ }
14231
14337
  this.isDeleteKey = false;
14232
14338
  // this.setSelection(selectionChar);
14233
14339
  // this.navigateSelection(inputValue);