@syncfusion/ej2-calendars 31.2.3 → 31.2.4

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

@@ -3933,6 +3933,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
         this.updateIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.isIconClicked) {
             this.show();
         }
@@ -3957,6 +3958,7 @@ let DatePicker = class DatePicker extends Calendar {
         const dateSame = this.value && this.previousDate
             ? this.value.getTime() === this.previousDate.getTime()
             : this.value === this.previousDate;
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled || (inputSame && dateSame)) {
             return;
         }
@@ -4584,6 +4586,7 @@ let DatePicker = class DatePicker extends Calendar {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -4923,8 +4926,14 @@ let DatePicker = class DatePicker extends Calendar {
         if (this.inputFormats) {
             this.checkInputFormats();
         }
-        this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-        this.element.removeAttribute('tabindex');
+        if (this.ngTag !== null) {
+            this.tabIndex = this.inputElement.hasAttribute('tabindex') ? this.inputElement.getAttribute('tabindex') : '0';
+            this.inputElement.removeAttribute('tabindex');
+        }
+        else {
+            this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
+            this.element.removeAttribute('tabindex');
+        }
         super.preRender();
     }
     getDefaultKeyConfig() {
@@ -5119,6 +5128,29 @@ let DatePicker = class DatePicker extends Calendar {
     getModuleName() {
         return 'datepicker';
     }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = 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++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            const labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = `${labelWidth}px`;
+            }
+        }
+    }
+    clearFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     disabledDates(isDynamic = false, isBlur = false) {
         let formatOptions;
         let globalize;
@@ -5690,8 +5722,14 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.inputFormats) {
             this.checkInputFormats();
         }
-        this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-        this.element.removeAttribute('tabindex');
+        if (this.angularTag !== null) {
+            this.tabIndex = this.inputElement.hasAttribute('tabindex') ? this.inputElement.getAttribute('tabindex') : '0';
+            this.inputElement.removeAttribute('tabindex');
+        }
+        else {
+            this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
+            this.element.removeAttribute('tabindex');
+        }
         super.preRender();
         this.navNextFunction = this.navNextMonth.bind(this);
         this.navPrevFunction = this.navPrevMonth.bind(this);
@@ -6430,6 +6468,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -6439,6 +6478,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     inputBlurHandler(e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -9020,6 +9060,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     }
     adjustLongHeaderWidth() {
         if (this.dayHeaderFormat === 'Wide') {
@@ -9528,6 +9569,29 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     getModuleName() {
         return 'daterangepicker';
     }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = 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++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            const labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = `${labelWidth}px`;
+            }
+        }
+    }
+    clearFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Return the properties that are maintained upon browser refresh.
@@ -10349,8 +10413,6 @@ let TimePicker = class TimePicker extends Component {
             this.inputElement = this.createElement('input');
             this.element.appendChild(this.inputElement);
         }
-        this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-        this.element.removeAttribute('tabindex');
         this.openPopupEventArgs = {
             appendTo: document.body
         };
@@ -10473,6 +10535,14 @@ let TimePicker = class TimePicker extends Component {
         const localeText = { placeholder: this.placeholder };
         this.l10n = new L10n('timepicker', localeText, this.locale);
         this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
+        if (this.angularTag !== null) {
+            this.tabIndex = this.inputElement.hasAttribute('tabindex') ? this.inputElement.getAttribute('tabindex') : '0';
+            this.inputElement.removeAttribute('tabindex');
+        }
+        else {
+            this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
+            this.element.removeAttribute('tabindex');
+        }
         this.initValue = this.checkDateValue(this.value);
         this.initMin = this.checkDateValue(this.min);
         this.initMax = this.checkDateValue(this.max);
@@ -10543,6 +10613,7 @@ let TimePicker = class TimePicker extends Component {
             buttons: [' e-input-group-icon e-time-icon e-icons']
         }, this.createElement);
         this.inputWrapper.container.style.width = this.setWidth(this.width);
+        this.updateFloatLabelOverflowWidth();
         attributes(this.inputElement, {
             'aria-autocomplete': 'list', 'tabindex': '0',
             'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
@@ -12267,6 +12338,7 @@ let TimePicker = class TimePicker extends Component {
         this.checkValueChange(null, false);
     }
     inputBlurHandler(e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -12341,6 +12413,7 @@ let TimePicker = class TimePicker extends Component {
         }
         this.trigger('focus', focusArguments);
         this.clearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus) {
             this.show();
         }
@@ -12524,6 +12597,29 @@ let TimePicker = class TimePicker extends Component {
     getModuleName() {
         return 'timepicker';
     }
+    updateFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = 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++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            const labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = `${labelWidth}px`;
+            }
+        }
+    }
+    clearFloatLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -12871,6 +12967,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         this.dateTimeOptions = options;
     }
     focusHandler() {
+        this.clearLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -12896,6 +12993,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
     }
     blurHandler(e) {
+        this.updateLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -13188,6 +13286,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         addClass([this.inputWrapper.container], DATETIMEWRAPPER);
         addClass([this.inputElement], ROOT$4);
         this.renderTimeIcon();
+        this.updateLabelOverflowWidth();
     }
     renderTimeIcon() {
         this.timeIcon = Input.appendSpan(INPUTWRAPPER$1 + ' ' + TIMEICON + ' ' + ICONS$1, this.inputWrapper.container);
@@ -14464,6 +14563,29 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             this.isDynamicValueChanged = false;
         }
     }
+    updateLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = 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++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            const labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = `${labelWidth}px`;
+            }
+        }
+    }
+    clearLabelOverflowWidth() {
+        const container = this.inputWrapper.container;
+        const label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     /**
      * To get component name.
      *