@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 20.2.43 to 20.2.44

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 20.2.43
+*  version : 20.2.44
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@20.2.38",
+  "_id": "@syncfusion/ej2-inputs@20.2.43",
   "_inBundle": false,
-  "_integrity": "sha512-vDKj0Q+Dppsnr5bDFxQIdrjzyyZCW6hKx7xcvnliiUdzck+hdX227OhPoGi5svNPwiWHKLq0vzyRV5PJM5QRBA==",
+  "_integrity": "sha512-RN1/O4fqajsrGPKrRFIXYwhNZc2BAgWo89LM92zDuMqG2BY+f0RnA9JjJIHXOIniSk3Fsw24Y4ZrQdrc/CIoeQ==",
   "_location": "/@syncfusion/ej2-inputs",
@@ -41,4 +41,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.2.38.tgz",
-  "_shasum": "64be66ac842b17c0bc891b5e620bf6d36d078175",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.2.43.tgz",
+  "_shasum": "2b283a270c01058bfe450b49f9747180b29a3057",
   "_spec": "@syncfusion/ej2-inputs@*",
@@ -122,4 +122,4 @@ "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "typings": "index.d.ts",
-  "version": "20.2.43",
+  "version": "20.2.44",
   "sideEffects": false
 }

src/input/input.d.ts

@@ -45,2 +45,12 @@ /**
     /**
+     * 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: any, container: HTMLElement): void;
+    /**
      * Set the width to the wrapper of input element.
@@ -133,2 +143,14 @@ * ```
     /**
+    * 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: InputObject, makeElement: createElementParams): void;
+    /**
      * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
@@ -135,0 +157,0 @@ * ```

src/input/input.js

@@ -13,2 +13,3 @@ /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
     FLOATTEXT: 'e-float-text',
+    FLOATTEXTCONTENT: 'e-float-text-content',
     CLEARICON: 'e-clear-icon',
@@ -75,2 +76,3 @@ CLEARICONHIDE: 'e-clear-icon-hide',
         inputObject = setPropertyValue(args, inputObject);
+        createSpanElement(inputObject, makeElement);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -373,2 +375,5 @@ privateInputObj = inputObject;
         element.value = value;
+        if (isNullOrUndefined(element.getAttribute('value'))) {
+            calculateWidth(element, element.parentElement);
+        }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
@@ -415,2 +420,22 @@ validateLabel(element, floatLabelType);
     /**
+     * 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.
@@ -431,2 +456,3 @@ * ```
         }
+        calculateWidth(container.firstChild, container);
     }
@@ -448,3 +474,3 @@ Input.setWidth = setWidth;
             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);
@@ -455,3 +481,3 @@ element.removeAttribute('placeholder');
                 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 = '';
             }
@@ -649,2 +675,4 @@ }
             createFloatingInput(args, inputObj, makeElement);
+            createSpanElement(inputObj, makeElement);
+            calculateWidth(args.element, inputObj.container);
             var isPrependIcon = container.classList.contains('e-float-icon-left');
@@ -681,2 +709,22 @@ if (isNullOrUndefined(iconEle)) {
     /**
+    * 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.
@@ -771,2 +819,5 @@ * ```
         }
+        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');
+        }
     }
@@ -773,0 +824,0 @@ Input.addIcon = addIcon;

src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -329,2 +329,3 @@ var __extends = (this && this.__extends) || (function () {
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.inputObj.container);
                     break;
@@ -331,0 +332,0 @@ case 'cssClass':

src/numerictextbox/numerictextbox.js

@@ -1171,2 +1171,3 @@ var __extends = (this && this.__extends) || (function () {
                     this.setElementWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.container);
                     break;
@@ -1200,2 +1201,3 @@ case 'cssClass':
                     Input.setPlaceholder(newProp.placeholder, this.element);
+                    Input.calculateWidth(this.element, this.container);
                     break;
@@ -1202,0 +1204,0 @@ case 'step':

src/textbox/textbox.js

@@ -134,2 +134,3 @@ var __extends = (this && this.__extends) || (function () {
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
+                    Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);
                     break;
@@ -136,0 +137,0 @@ case 'autocomplete':

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20849303

increased by0.27%

Number of package files

610

increased by0.33%

Lines of code

277878

increased by0.23%

No dependency changes