@syncfusion/ej2-calendars 31.2.2 → 31.2.4

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

@@ -3976,6 +3976,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
         this.updateIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.isIconClicked) {
             this.show();
         }
@@ -4000,6 +4001,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         var dateSame = this.value && this.previousDate
             ? this.value.getTime() === this.previousDate.getTime()
             : this.value === this.previousDate;
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled || (inputSame && dateSame)) {
             return;
         }
@@ -4630,6 +4632,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -4972,8 +4975,14 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         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.prototype.preRender.call(this);
     };
     DatePicker.prototype.getDefaultKeyConfig = function () {
@@ -5170,6 +5179,29 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     DatePicker.prototype.getModuleName = function () {
         return 'datepicker';
     };
+    DatePicker.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-bottom');
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            var labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = labelWidth + "px";
+            }
+        }
+    };
+    DatePicker.prototype.clearFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    };
     DatePicker.prototype.disabledDates = function (isDynamic, isBlur) {
         if (isDynamic === void 0) { isDynamic = false; }
         if (isBlur === void 0) { isBlur = false; }
@@ -5765,8 +5797,14 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         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.prototype.preRender.call(this);
         this.navNextFunction = this.navNextMonth.bind(this);
         this.navPrevFunction = this.navPrevMonth.bind(this);
@@ -6511,6 +6549,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -6520,6 +6559,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DateRangePicker.prototype.inputBlurHandler = function (e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -9120,6 +9160,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     };
     DateRangePicker.prototype.adjustLongHeaderWidth = function () {
         if (this.dayHeaderFormat === 'Wide') {
@@ -9628,6 +9669,29 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     DateRangePicker.prototype.getModuleName = function () {
         return 'daterangepicker';
     };
+    DateRangePicker.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-bottom');
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            var labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = labelWidth + "px";
+            }
+        }
+    };
+    DateRangePicker.prototype.clearFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var 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.
@@ -10473,8 +10537,6 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
             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
         };
@@ -10597,6 +10659,14 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         var 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);
@@ -10667,6 +10737,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
             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',
@@ -12397,6 +12468,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         this.checkValueChange(null, false);
     };
     TimePicker.prototype.inputBlurHandler = function (e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -12471,6 +12543,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         }
         this.trigger('focus', focusArguments);
         this.clearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus) {
             this.show();
         }
@@ -12655,6 +12728,29 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
     TimePicker.prototype.getModuleName = function () {
         return 'timepicker';
     };
+    TimePicker.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-bottom');
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            var labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = labelWidth + "px";
+            }
+        }
+    };
+    TimePicker.prototype.clearFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -13019,6 +13115,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         return _this;
     }
     DateTimePicker.prototype.focusHandler = function () {
+        this.clearLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -13044,6 +13141,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DateTimePicker.prototype.blurHandler = function (e) {
+        this.updateLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -13337,6 +13435,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         addClass([this.inputWrapper.container], DATETIMEWRAPPER);
         addClass([this.inputElement], ROOT$4);
         this.renderTimeIcon();
+        this.updateLabelOverflowWidth();
     };
     DateTimePicker.prototype.renderTimeIcon = function () {
         this.timeIcon = Input.appendSpan(INPUTWRAPPER$1 + ' ' + TIMEICON + ' ' + ICONS$1, this.inputWrapper.container);
@@ -14618,6 +14717,29 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             this.isDynamicValueChanged = false;
         }
     };
+    DateTimePicker.prototype.updateLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-bottom');
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        if (label) {
+            var labelWidth = (this.element.parentElement.offsetWidth) - width;
+            if (labelWidth) {
+                label.style.width = labelWidth + "px";
+            }
+        }
+    };
+    DateTimePicker.prototype.clearLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text.e-label-top');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    };
     /**
      * To get component name.
      *