@syncfusion/ej2-inputs 20.2.38 → 20.2.45

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

@@ -12,6 +12,7 @@ var 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;
     }
@@ -364,6 +366,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);
         }
@@ -404,6 +409,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.
      * ```
@@ -420,6 +445,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;
     /**
@@ -436,13 +462,13 @@ var Input;
         var 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 {
@@ -635,6 +661,8 @@ var Input;
             var inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
             createFloatingInput(args, inputObj, makeElement);
+            createSpanElement(inputObj, makeElement);
+            calculateWidth(args.element, inputObj.container);
             var isPrependIcon = container.classList.contains('e-float-icon-left');
             if (isNullOrUndefined(iconEle)) {
                 if (isPrependIcon) {
@@ -665,6 +693,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]) {
+            var 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.
      * ```
@@ -755,6 +803,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;
     /**
@@ -1991,6 +2042,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             switch (prop) {
                 case 'width':
                     this.setElementWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -2019,6 +2071,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.element);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'step':
                     this.step = newProp.step;
@@ -3667,6 +3720,7 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.inputObj.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -13136,6 +13190,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                     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 !== '') {