@syncfusion/ej2-calendars 31.2.3 → 31.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.2.3
+*  version : 31.2.4
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "31.2.3",
+  "version": "31.2.4",
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,9 +8,9 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-calendars.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.2",
+    "@syncfusion/ej2-base": "~31.2.4",
     "@syncfusion/ej2-buttons": "~31.2.3",
-    "@syncfusion/ej2-inputs": "~31.2.2",
+    "@syncfusion/ej2-inputs": "~31.2.4",
     "@syncfusion/ej2-lists": "~31.2.2",
     "@syncfusion/ej2-popups": "~31.2.2"
   },

package/src/datepicker/datepicker.d.ts

@@ -535,6 +535,8 @@ export declare class DatePicker extends Calendar implements IInput {
      * @private
      */
     protected getModuleName(): string;
+    private updateFloatLabelOverflowWidth;
+    private clearFloatLabelOverflowWidth;
     private disabledDates;
     private setAriaAttributes;
     protected errorClass(): void;

package/src/datepicker/datepicker.js

@@ -702,6 +702,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
         this.updateIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.isIconClicked) {
             this.show();
         }
@@ -726,6 +727,7 @@ var DatePicker = /** @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;
         }
@@ -1360,6 +1362,7 @@ var DatePicker = /** @class */ (function (_super) {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -1702,8 +1705,14 @@ var DatePicker = /** @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 () {
@@ -1900,6 +1909,29 @@ var DatePicker = /** @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; }

package/src/daterangepicker/daterangepicker.d.ts

@@ -811,6 +811,8 @@ export declare class DateRangePicker extends CalendarBase {
      * @private
      */
     protected getModuleName(): string;
+    private updateFloatLabelOverflowWidth;
+    private clearFloatLabelOverflowWidth;
     /**
      * Return the properties that are maintained upon browser refresh.
      *

package/src/daterangepicker/daterangepicker.js

@@ -237,8 +237,14 @@ var DateRangePicker = /** @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);
@@ -983,6 +989,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -992,6 +999,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
     };
     DateRangePicker.prototype.inputBlurHandler = function (e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -3596,6 +3604,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         else {
             this.inputWrapper.container.style.width = '100%';
         }
+        this.updateFloatLabelOverflowWidth();
     };
     DateRangePicker.prototype.adjustLongHeaderWidth = function () {
         if (this.dayHeaderFormat === 'Wide') {
@@ -4104,6 +4113,29 @@ var DateRangePicker = /** @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.

package/src/datetimepicker/datetimepicker.d.ts

@@ -615,6 +615,8 @@ export declare class DateTimePicker extends DatePicker {
 
      */
     onPropertyChanged(newProp: DateTimePickerModel, oldProp: DateTimePickerModel): void;
+    private updateLabelOverflowWidth;
+    private clearLabelOverflowWidth;
     /**
      * To get component name.
      *

package/src/datetimepicker/datetimepicker.js

@@ -91,6 +91,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         return _this;
     }
     DateTimePicker.prototype.focusHandler = function () {
+        this.clearLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -116,6 +117,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         }
     };
     DateTimePicker.prototype.blurHandler = function (e) {
+        this.updateLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -409,6 +411,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         addClass([this.inputWrapper.container], DATETIMEWRAPPER);
         addClass([this.inputElement], ROOT);
         this.renderTimeIcon();
+        this.updateLabelOverflowWidth();
     };
     DateTimePicker.prototype.renderTimeIcon = function () {
         this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);
@@ -1690,6 +1693,29 @@ var DateTimePicker = /** @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.
      *

package/src/timepicker/timepicker.d.ts

@@ -668,6 +668,8 @@ export declare class TimePicker extends Component<HTMLElement> implements IInput
      * @private
      */
     protected getModuleName(): string;
+    private updateFloatLabelOverflowWidth;
+    private clearFloatLabelOverflowWidth;
     /**
      * Called internally if any of the property value changed.
      *

package/src/timepicker/timepicker.js

@@ -170,8 +170,6 @@ var TimePicker = /** @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
         };
@@ -294,6 +292,14 @@ var TimePicker = /** @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);
@@ -364,6 +370,7 @@ var TimePicker = /** @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',
@@ -2096,6 +2103,7 @@ var TimePicker = /** @class */ (function (_super) {
         this.checkValueChange(null, false);
     };
     TimePicker.prototype.inputBlurHandler = function (e) {
+        this.updateFloatLabelOverflowWidth();
         if (!this.enabled) {
             return;
         }
@@ -2170,6 +2178,7 @@ var TimePicker = /** @class */ (function (_super) {
         }
         this.trigger('focus', focusArguments);
         this.clearIconState();
+        this.clearFloatLabelOverflowWidth();
         if (this.openOnFocus) {
             this.show();
         }
@@ -2354,6 +2363,29 @@ var TimePicker = /** @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.
      *