@syncfusion/ej2-inputs 34.2.2 → 34.2.7

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

@@ -38,6 +38,7 @@ var Input;
 (function (Input) {
     var floatType;
     var isBindClearAction = true;
+    var resizeHandlers = new Map();
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -459,6 +460,11 @@ var Input;
             _internalRipple(false, null, args.buttons);
         }
         unwireFloatingEvents(args.element);
+        var resizeHandler = resizeHandlers.get(args.element);
+        if (resizeHandler) {
+            window.removeEventListener('resize', resizeHandler);
+            resizeHandlers.delete(args.element);
+        }
         if (!isNullOrUndefined(args.element)) {
             delete args.element.__eventHandlers;
             if (args.element.classList.contains(CLASSNAMES.INPUT)) {
@@ -578,10 +584,30 @@ var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container, moduleName) {
+        if (moduleName !== 'multiselect' && element && container && !resizeHandlers.has(element)) {
+            var resizeHandler_1 = function () {
+                if (!document.documentElement.contains(container)) {
+                    window.removeEventListener('resize', resizeHandler_1);
+                    resizeHandlers.delete(element);
+                    return;
+                }
+                calculateWidth(element, container, moduleName);
+            };
+            resizeHandlers.set(element, resizeHandler_1);
+            window.addEventListener('resize', resizeHandler_1);
+        }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
         }
         var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
+        if (moduleName !== 'multiselect' && element && container) {
+            var iconWidth_1 = 0;
+            var icons = container.getElementsByClassName('e-input-group-icon');
+            Array.from(icons).forEach(function (icon) {
+                iconWidth_1 += icon.clientWidth + parseInt(getComputedStyle(icon, null).getPropertyValue('margin-right'), 10);
+            });
+            elementWidth = elementWidth + (iconWidth_1 - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10));
+        }
         if (!isNullOrUndefined(container) && !isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
@@ -623,7 +649,7 @@ var Input;
     function setPlaceholder(placeholder, element, moduleName) {
         var modules = [
             'textbox', 'numerictextbox', 'textarea', 'combobox',
-            'datepicker', 'daterangepicker', 'datetimepicker'
+            'datepicker', 'daterangepicker', 'datetimepicker', 'maskedtextbox'
         ];
         placeholder = encodePlaceHolder(placeholder);
         var parentElement = getParentNode(element);
@@ -1616,6 +1642,8 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                 EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
             }
         }
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     NumericTextBox.prototype.wireSpinBtnEvents = function () {
         /* bind spin button events */
@@ -1638,6 +1666,10 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         if (this.formEle) {
             EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     NumericTextBox.prototype.unwireSpinBtnEvents = function () {
         /* unbind spin button events */
@@ -2163,6 +2195,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }
         this.cancelEvent(event);
     };
+    NumericTextBox.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     NumericTextBox.prototype.focusHandler = function (event) {
         var _this = this;
         clearTimeout(selectionTimeOut);
@@ -4138,7 +4173,7 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
     };
     MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) {
         if (dynamicPlaceholder || this.placeholder) {
-            Input.setPlaceholder(this.placeholder, this.element);
+            Input.setPlaceholder(this.placeholder, this.element, this.getModuleName());
             if ((this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') ||
                 this.element.value === this.promptMask && this.floatLabelType === 'Never') {
                 setElementValue.call(this, '');
@@ -15753,6 +15788,8 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(this.formElement, 'reset', this.resetForm, this);
         }
         this.bindClearEvent();
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     TextArea.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'focus', this.focusHandler);
@@ -15763,6 +15800,10 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         if (this.isForm) {
             EventHandler.remove(this.formElement, 'reset', this.resetForm);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
@@ -15801,6 +15842,9 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         }
         _super.prototype.destroy.call(this);
     };
+    TextArea.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     TextArea.prototype.focusHandler = function (args) {
         var eventArgs = {
             container: this.textareaWrapper.container,