@syncfusion/ej2-inputs 34.2.2 → 34.2.7

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

@@ -38,6 +38,7 @@ var Input;
 (function (Input) {
     let floatType;
     let isBindClearAction = true;
+    const resizeHandlers = new Map();
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -456,6 +457,11 @@ var Input;
             _internalRipple(false, null, args.buttons);
         }
         unwireFloatingEvents(args.element);
+        const 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)) {
@@ -575,10 +581,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)) {
+            const resizeHandler = () => {
+                if (!document.documentElement.contains(container)) {
+                    window.removeEventListener('resize', resizeHandler);
+                    resizeHandlers.delete(element);
+                    return;
+                }
+                calculateWidth(element, container, moduleName);
+            };
+            resizeHandlers.set(element, resizeHandler);
+            window.addEventListener('resize', resizeHandler);
+        }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
         }
-        const elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
+        let elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
+        if (moduleName !== 'multiselect' && element && container) {
+            let iconWidth = 0;
+            const icons = container.getElementsByClassName('e-input-group-icon');
+            Array.from(icons).forEach((icon) => {
+                iconWidth += icon.clientWidth + parseInt(getComputedStyle(icon, null).getPropertyValue('margin-right'), 10);
+            });
+            elementWidth = elementWidth + (iconWidth - 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');
@@ -620,7 +646,7 @@ var Input;
     function setPlaceholder(placeholder, element, moduleName) {
         const modules = [
             'textbox', 'numerictextbox', 'textarea', 'combobox',
-            'datepicker', 'daterangepicker', 'datetimepicker'
+            'datepicker', 'daterangepicker', 'datetimepicker', 'maskedtextbox'
         ];
         placeholder = encodePlaceHolder(placeholder);
         const parentElement = getParentNode(element);
@@ -1588,6 +1614,8 @@ let NumericTextBox = class NumericTextBox extends Component {
                 EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
             }
         }
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     }
     wireSpinBtnEvents() {
         /* bind spin button events */
@@ -1610,6 +1638,10 @@ let NumericTextBox = class NumericTextBox extends Component {
         if (this.formEle) {
             EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     }
     unwireSpinBtnEvents() {
         /* unbind spin button events */
@@ -2133,6 +2165,9 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
         this.cancelEvent(event);
     }
+    windowResize() {
+        this.updateFloatLabelOverflowWidth();
+    }
     focusHandler(event) {
         clearTimeout(selectionTimeOut);
         this.focusEventArgs = { event: event, value: this.value, container: this.container };
@@ -4077,7 +4112,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
     }
     setMaskPlaceholder(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, '');
@@ -15452,6 +15487,8 @@ let TextArea = class TextArea extends Component {
             EventHandler.add(this.formElement, 'reset', this.resetForm, this);
         }
         this.bindClearEvent();
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     }
     unWireEvents() {
         EventHandler.remove(this.element, 'focus', this.focusHandler);
@@ -15462,6 +15499,10 @@ let TextArea = class TextArea extends Component {
         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.
@@ -15500,6 +15541,9 @@ let TextArea = class TextArea extends Component {
         }
         super.destroy();
     }
+    windowResize() {
+        this.updateFloatLabelOverflowWidth();
+    }
     focusHandler(args) {
         const eventArgs = {
             container: this.textareaWrapper.container,