@syncfusion/ej2-calendars 34.2.4 → 34.2.6

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

@@ -3706,6 +3706,8 @@ let DatePicker = class DatePicker extends Calendar {
             keyAction: this.inputKeyActionHandle.bind(this),
             keyConfigs: this.defaultKeyConfigs
         });
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     }
     keydownHandler(e) {
         switch (e.code) {
@@ -3747,6 +3749,10 @@ let DatePicker = class DatePicker extends Calendar {
         if (this.formElement) {
             EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     }
     resetFormHandler() {
         if (!this.enabled) {
@@ -3837,6 +3843,9 @@ let DatePicker = class DatePicker extends Calendar {
     updateInputValue(value) {
         Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);
     }
+    windowResize() {
+        this.updateFloatLabelOverflowWidth(true);
+    }
     dateIconHandler(e) {
         if (!this.enabled) {
             return;
@@ -5188,13 +5197,17 @@ let DatePicker = class DatePicker extends Calendar {
         }
         return document.body;
     }
-    updateFloatLabelOverflowWidth() {
+    updateFloatLabelOverflowWidth(isDynamic) {
         const container = this.inputWrapper.container;
-        const label = container.querySelector('.e-float-text.e-label-bottom');
+        const label = isDynamic ?
+            container.querySelector('.e-float-text') : container.querySelector('.e-float-text.e-label-bottom');
         let width = 0;
         const iconSelectors = '.e-input-group-icon, .e-clear-icon';
         const icons = container.querySelectorAll(iconSelectors);
         for (let index = 0; index < icons.length; index++) {
+            if (isDynamic && icons[index].classList.contains('e-time-icon')) {
+                continue;
+            }
             width += icons[index].offsetWidth;
         }
         if (label) {
@@ -6133,6 +6146,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         else {
             this.inputElement.tabIndex = -1;
         }
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     }
     unBindEvents() {
         EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);
@@ -6151,6 +6166,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
         }
         this.inputElement.tabIndex = -1;
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     }
     updateHiddenInput() {
         if (this.firstHiddenChild && this.secondHiddenChild) {
@@ -6269,6 +6288,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         this.removeSelection();
     }
+    windowResize() {
+        this.updateFloatLabelOverflowWidth(true);
+    }
     rangeIconHandler(e) {
         if (!this.enabled) {
             return;
@@ -9689,9 +9711,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         return document.body;
     }
-    updateFloatLabelOverflowWidth() {
+    updateFloatLabelOverflowWidth(isDynamic) {
         const container = this.inputWrapper.container;
-        const label = container.querySelector('.e-float-text.e-label-bottom');
+        const label = isDynamic ?
+            container.querySelector('.e-float-text') : container.querySelector('.e-float-text.e-label-bottom');
         let width = 0;
         const iconSelectors = '.e-input-group-icon, .e-clear-icon';
         const icons = container.querySelectorAll(iconSelectors);