@syncfusion/ej2-inputs 20.2.43 → 20.2.44

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

@@ -12,6 +12,7 @@ const CLASSNAMES = {
     FLOATINPUT: 'e-float-input',
     FLOATLINE: 'e-float-line',
     FLOATTEXT: 'e-float-text',
+    FLOATTEXTCONTENT: 'e-float-text-content',
     CLEARICON: 'e-clear-icon',
     CLEARICONHIDE: 'e-clear-icon-hide',
     LABELTOP: 'e-label-top',
@@ -68,6 +69,7 @@ var Input;
         }
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
+        createSpanElement(inputObject, makeElement);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         return inputObject;
     }
@@ -362,6 +364,9 @@ var Input;
      */
     function setValue$$1(value, element, floatLabelType, clearButton) {
         element.value = value;
+        if (isNullOrUndefined(element.getAttribute('value'))) {
+            calculateWidth(element, element.parentElement);
+        }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }
@@ -402,6 +407,26 @@ var Input;
         }
     }
     Input.setCssClass = setCssClass;
+    /**
+     * Set the width to the placeholder when it overflows on the button such as spinbutton, clearbutton, icon etc
+     * ```
+     * E.g : Input.calculateWidth(element, container);
+     * ```
+     *
+     * @param {any} element - Input element which is need to add.
+     * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
+     */
+    function calculateWidth(element, container) {
+        if (!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');
+            }
+            if (element.clientWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || container.getElementsByClassName('e-control')[0].clientWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
+                container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');
+            }
+        }
+    }
+    Input.calculateWidth = calculateWidth;
     /**
      * Set the width to the wrapper of input element.
      * ```
@@ -418,6 +443,7 @@ var Input;
         else if (typeof width === 'string') {
             container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));
         }
+        calculateWidth(container.firstChild, container);
     }
     Input.setWidth = setWidth;
     /**
@@ -434,13 +460,13 @@ var Input;
         const parentElement = getParentNode(element);
         if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
             if (!isNullOrUndefined(placeholder) && placeholder !== '') {
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
+                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = placeholder : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
                 parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);
                 element.removeAttribute('placeholder');
             }
             else {
                 parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
+                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = '' : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
             }
         }
         else {
@@ -631,6 +657,8 @@ var Input;
             const inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
             createFloatingInput(args, inputObj, makeElement);
+            createSpanElement(inputObj, makeElement);
+            calculateWidth(args.element, inputObj.container);
             const isPrependIcon = container.classList.contains('e-float-icon-left');
             if (isNullOrUndefined(iconEle)) {
                 if (isPrependIcon) {
@@ -661,6 +689,26 @@ var Input;
         checkFloatLabelType(type, input.parentElement);
     }
     Input.addFloating = addFloating;
+    /**
+    * Create the span inside the label and add the label text into the span textcontent
+    * ```
+    * E.g : Input.createSpanElement(inputObject, makeElement);
+    * ```
+    *
+    * @param {InputObject} inputObject
+    * - Element which is need to get the label
+    * @param {createElementParams} makeElement
+    * - Element which is need to create the span
+    */
+    function createSpanElement(inputObject, makeElement) {
+        if (inputObject.container.classList.contains('e-outline') && inputObject.container.getElementsByClassName('e-float-text')[0]) {
+            const labelSpanElement = makeElement('span', { className: CLASSNAMES.FLOATTEXTCONTENT });
+            labelSpanElement.innerHTML = inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML;
+            inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML = '';
+            inputObject.container.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);
+        }
+    }
+    Input.createSpanElement = createSpanElement;
     /**
      * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
      * ```
@@ -749,6 +797,9 @@ var Input;
                 prependSpan(icon, container, input, internalCreate);
             }
         }
+        if (container.getElementsByClassName('e-input-group-icon')[0] && container.getElementsByClassName('e-float-text-overflow')[0]) {
+            container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+        }
     }
     Input.addIcon = addIcon;
     /**
@@ -1958,6 +2009,7 @@ let NumericTextBox = class NumericTextBox extends Component {
             switch (prop) {
                 case 'width':
                     this.setElementWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -1986,6 +2038,7 @@ let NumericTextBox = class NumericTextBox extends Component {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.element);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'step':
                     this.step = newProp.step;
@@ -3607,6 +3660,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.inputObj.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -12862,6 +12916,7 @@ let TextBox = class TextBox extends Component {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
+                    Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);
                     break;
                 case 'autocomplete':
                     if (this.autocomplete !== 'on' && this.autocomplete !== '') {