@syncfusion/ej2-inputs 20.2.48 → 20.3.49

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.48
+*  version : 20.3.49
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@20.2.45",
+  "_id": "@syncfusion/ej2-inputs@20.3.47",
   "_inBundle": false,
-  "_integrity": "sha512-tHprHgofQjfmkC/OjBnYM+/EqPWqAD7nbo9WSCNFmMt8FJKC3nX8iqWec23Q32FdVRHRwIIJ6ZngI/+AO6Q5Rg==",
+  "_integrity": "sha512-JZw8Cr45+VnPtzPrMCD9XDmT7uSMXTRDlYEFslpoacRJBjQtYGHopdpSgHFjS9dFVI+B3yYnegaythQqiQe4vQ==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -27,6 +27,7 @@
     "/@syncfusion/ej2-filemanager",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
+    "/@syncfusion/ej2-image-editor",
     "/@syncfusion/ej2-inplace-editor",
     "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-navigations",
@@ -38,8 +39,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.2.45.tgz",
-  "_shasum": "1aeb2e6ef5c1df6754829f547f2ceca0ae9e5c32",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.3.47.tgz",
+  "_shasum": "0b0e13fbcd06d878e616bf4864bae7aa460f03ea",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -47,15 +48,15 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.48",
-    "@syncfusion/ej2-buttons": "~20.2.46",
-    "@syncfusion/ej2-popups": "~20.2.45",
-    "@syncfusion/ej2-splitbuttons": "~20.2.45"
+    "@syncfusion/ej2-base": "~20.3.49",
+    "@syncfusion/ej2-buttons": "~20.3.49",
+    "@syncfusion/ej2-popups": "~20.3.49",
+    "@syncfusion/ej2-splitbuttons": "~20.3.47"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-inputs.es2015.js",
+  "es2015": "./dist/es6/ej2-inputs.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -118,6 +119,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "20.2.48",
+  "version": "20.3.49",
   "sideEffects": false
 }

package/src/color-picker/color-picker.js

@@ -123,7 +123,7 @@ var ColorPicker = /** @class */ (function (_super) {
         var wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
         this.element.parentNode.insertBefore(wrapper, this.element);
         wrapper.appendChild(this.element);
-        attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false' });
+        attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false', 'aria-label': 'colorpicker' });
         this.container = this.createElement('div', { className: CONTAINER });
         this.getWrapper().appendChild(this.container);
         var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';
@@ -322,7 +322,7 @@ var ColorPicker = /** @class */ (function (_super) {
         }
     };
     ColorPicker.prototype.appendPalette = function (colors, key, refEle) {
-        var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0' } });
+        var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });
         if (refEle) {
             refEle.appendChild(palette);
         }
@@ -335,7 +335,7 @@ var ColorPicker = /** @class */ (function (_super) {
         for (var i = 0, len = colors.length; i < len; i++) {
             if (i === 0 || i % this.columns === 0) {
                 row = this.createElement('div', {
-                    className: 'e-row', attrs: { 'role': 'presentation' }
+                    className: 'e-row', attrs: { 'role': 'row' }
                 });
                 palette.appendChild(row);
             }

package/src/common/signature-base.d.ts

@@ -26,6 +26,10 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
     private isBlazor;
     private isResponsive;
     private dotnetRef;
+    private panStart;
+    private scale;
+    protected canvasRatio: Dimension;
+    protected imageEditorPointsColl: Point[];
     /**
      * Gets or sets the background color of the component.
      *
@@ -88,7 +92,7 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
     private wireEvents;
     private unwireEvents;
     private setHTMLProperties;
-    private mouseDownHandler;
+    protected mouseDownHandler(e: MouseEvent & TouchEvent, canvas?: HTMLCanvasElement, panStart?: any, zoomState?: number): void;
     private mouseMoveHandler;
     private mouseUpHandler;
     private keyboardHandler;
@@ -246,6 +250,23 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
      */
     propertyChanged(key: string, value: string | boolean | number): void;
 }
+/**
+ * Interface for Point object.
+ */
+interface Point {
+    /**
+     * Gets or sets the x position of the point.
+     */
+    x: number;
+    /**
+     * Gets or sets the y position of the point.
+     */
+    y: number;
+    /**
+     * Gets or sets the time.
+     */
+    time?: number;
+}
 /**
  * Defines the signature file type.
  */
@@ -276,3 +297,58 @@ export interface SignatureChangeEventArgs {
      */
     actionName: string;
 }
+/**
+ * Interface for Dimension calculation in the imageEditor.
+ */
+export interface Dimension {
+    /**
+     * Gets x position from the canvas.
+     */
+    x?: number;
+    /**
+     * Gets y position from the canvas.
+     */
+    y?: number;
+    /**
+     * Gets width of the image.
+     */
+    width: number;
+    /**
+     * Gets height of the image.
+     */
+    height: number;
+}
+/**
+ * Interface for active object in the imageEditor.
+ */
+export interface ActivePoint {
+    /**
+     * Gets mouse down x-point.
+     */
+    startX: number;
+    /**
+     * Gets mouse down y-point.
+     */
+    startY: number;
+    /**
+     * Gets mouse move x-point.
+     */
+    endX?: number;
+    /**
+     * Gets mouse move y-point.
+     */
+    endY?: number;
+    /**
+     * Gets width of the selection.
+     */
+    width?: number;
+    /**
+     * Gets height of the selection.
+     */
+    height?: number;
+    /**
+     * Gets radius of the circle dot.
+     */
+    radius?: number;
+}
+export {};

package/src/common/signature-base.js

@@ -28,6 +28,7 @@ var SignatureBase = /** @class */ (function (_super) {
         _this.clearArray = [];
         _this.isBlazor = false;
         _this.isResponsive = false;
+        _this.imageEditorPointsColl = [];
         return _this;
     }
     /**
@@ -92,18 +93,23 @@ var SignatureBase = /** @class */ (function (_super) {
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
-            this.canvasContext.canvas.style.backgroundRepeat = "no-repeat";
+            this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
         }
         else if (this.backgroundColor) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
         }
     };
-    SignatureBase.prototype.mouseDownHandler = function (e) {
+    SignatureBase.prototype.mouseDownHandler = function (e, canvas, panStart, zoomState) {
         if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
             if (e.type === 'touchstart') {
                 e.preventDefault();
                 e.stopPropagation();
             }
+            if (canvas) {
+                this.canvasContext = canvas.getContext('2d');
+                this.scale = zoomState;
+                this.panStart = panStart;
+            }
             this.beginStroke(e);
             this.wireEvents();
         }
@@ -221,10 +227,34 @@ var SignatureBase = /** @class */ (function (_super) {
     SignatureBase.prototype.createPoint = function (e) {
         var rect = this.canvasContext.canvas.getBoundingClientRect();
         if (e.type === 'mousedown' || e.type === 'mousemove') {
-            return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
+            // signature
+            if (this.canvasRatio === undefined) {
+                return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
+            }
+            // image editor
+            else if (this.scale === 1) {
+                return this.point(((e.clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
+            }
+            else {
+                return this.point((((e.clientX - rect.left) + ((this.panStart.startX) / this.canvasRatio.width
+                    * this.scale)) / this.scale) * this.canvasRatio.width, (((e.clientY - rect.top) + ((this.panStart.startY) / this.canvasRatio.height
+                    * this.scale)) / this.scale) * this.canvasRatio.height, new Date().getTime());
+            }
         }
         else {
-            return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
+            // signature
+            if (this.canvasRatio === undefined) {
+                return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
+            }
+            // image editor
+            else if (this.scale === 1) {
+                return this.point(((e.touches[0].clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.touches[0].clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
+            }
+            else {
+                return this.point((e.touches[0].clientX - rect.left) + this.panStart.startX / (this.canvasRatio.width
+                    * this.scale), (e.touches[0].clientY - rect.top) + this.panStart.startY / (this.canvasRatio.height
+                    * this.scale), new Date().getTime());
+            }
         }
     };
     /* Returns the current point corrdinates(x, y) and time.*/
@@ -242,6 +272,7 @@ var SignatureBase = /** @class */ (function (_super) {
         var isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
             points.push(point);
+            this.imageEditorPointsColl.push(point);
             if (points.length > 2) {
                 if (points.length === 3) {
                     points.unshift(points[0]);
@@ -880,10 +911,12 @@ var SignatureBase = /** @class */ (function (_super) {
      * @returns {void}
      */
     SignatureBase.prototype.destroy = function () {
-        this.unwireEvents(null);
-        removeClass([this.element], 'e-' + this.getModuleName());
-        this.element.removeAttribute('tabindex');
-        this.pointColl = null;
+        if (this.getModuleName() !== 'image-editor') {
+            this.unwireEvents(null);
+            removeClass([this.element], 'e-' + this.getModuleName());
+            this.element.removeAttribute('tabindex');
+            this.pointColl = null;
+        }
         _super.prototype.destroy.call(this);
     };
     /**

package/src/input/input.d.ts

@@ -139,17 +139,17 @@ export declare namespace Input {
     function removeFloating(input: InputObject): void;
     function addFloating(input: HTMLInputElement | HTMLTextAreaElement, type: FloatLabelType | string, placeholder: string, internalCreateElement?: createElementParams): void;
     /**
-    * 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;
+     * 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: any, makeElement: createElementParams): void;
     /**
      * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
      * ```

package/src/input/input.js

@@ -72,7 +72,7 @@ export var Input;
         }
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
-        createSpanElement(inputObject, makeElement);
+        createSpanElement(inputObject.container, makeElement);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         privateInputObj = inputObject;
         return inputObject;
@@ -86,6 +86,9 @@ export var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.add('e-input-focus');
             }
+            setTimeout(function () {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
         });
         args.element.addEventListener('blur', function () {
             var parent = getParentNode(this);
@@ -93,6 +96,9 @@ export var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.remove('e-input-focus');
             }
+            setTimeout(function () {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
         });
         args.element.addEventListener('input', function () {
             checkInputValue(floatType, args.element);
@@ -370,9 +376,7 @@ export var Input;
      */
     function setValue(value, element, floatLabelType, clearButton) {
         element.value = value;
-        if (isNullOrUndefined(element.getAttribute('value'))) {
-            calculateWidth(element, element.parentElement);
-        }
+        calculateWidth(element, element.parentElement);
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }
@@ -423,11 +427,12 @@ export var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container) {
+        var elementWidth = element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
         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 || element.clientWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
+            if (elementWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || elementWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');
             }
         }
@@ -477,11 +482,10 @@ export var Input;
         }
         else {
             if (!isNullOrUndefined(placeholder) && placeholder !== '') {
-                attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder });
+                attributes(element, { 'placeholder': placeholder });
             }
             else {
                 element.removeAttribute('placeholder');
-                element.removeAttribute('aria-placeholder');
             }
         }
     }
@@ -665,7 +669,7 @@ export var Input;
             var inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
             createFloatingInput(args, inputObj, makeElement);
-            createSpanElement(inputObj, makeElement);
+            createSpanElement(inputObj.container, makeElement);
             calculateWidth(args.element, inputObj.container);
             var isPrependIcon = container.classList.contains('e-float-icon-left');
             if (isNullOrUndefined(iconEle)) {
@@ -698,22 +702,22 @@ export var Input;
     }
     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
-    */
+     * 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]) {
+        if (inputObject.classList.contains('e-outline') && inputObject.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);
+            labelSpanElement.innerHTML = inputObject.getElementsByClassName('e-float-text')[0].innerHTML;
+            inputObject.getElementsByClassName('e-float-text')[0].innerHTML = '';
+            inputObject.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);
         }
     }
     Input.createSpanElement = createSpanElement;

package/src/maskedtextbox/base/mask-base.js

@@ -32,8 +32,8 @@ export var regularExpressions = {
  */
 export function createMask() {
     attributes(this.element, {
-        'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',
-        'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': ''
+        'role': 'textbox', 'autocomplete': 'off', 'autocapitalize': 'off',
+        'spellcheck': 'false', 'aria-live': 'assertive'
     });
     if (this.mask) {
         var splitMask = this.mask.split(']');
@@ -725,7 +725,6 @@ function triggerMaskChangeEvent(event, oldValue) {
     }
     this.preEleVal = this.element.value;
     this.prevValue = strippedValue.call(this, this.element);
-    attributes(this.element, { 'aria-valuenow': this.element.value });
 }
 function maskInputKeyUpHandler(event) {
     if (this.mask && !this.readonly) {

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -435,9 +435,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
     MaskedTextBox.prototype.destroy = function () {
         unwireEvents.call(this);
         var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-            'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
-            'spellcheck', 'aria-autocomplete',
-            'aria-live', 'aria-valuenow', 'aria-invalid'];
+            'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-invalid'];
         for (var i = 0; i < attrArray.length; i++) {
             this.element.removeAttribute(attrArray[i]);
         }

package/src/numerictextbox/numerictextbox.js

@@ -361,13 +361,11 @@ var NumericTextBox = /** @class */ (function (_super) {
     NumericTextBox.prototype.spinBtnCreation = function () {
         this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);
         attributes(this.spinDown, {
-            'title': this.l10n.getConstant('decrementTitle'),
-            'aria-label': this.l10n.getConstant('decrementTitle')
+            'title': this.l10n.getConstant('decrementTitle')
         });
         this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);
         attributes(this.spinUp, {
-            'title': this.l10n.getConstant('incrementTitle'),
-            'aria-label': this.l10n.getConstant('incrementTitle')
+            'title': this.l10n.getConstant('incrementTitle')
         });
         this.wireSpinBtnEvents();
     };
@@ -387,7 +385,12 @@ var NumericTextBox = /** @class */ (function (_super) {
             }
         }
         this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);
-        attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });
+        if (this.min !== -(Number.MAX_VALUE)) {
+            attributes(this.element, { 'aria-valuemin': this.min.toString() });
+        }
+        if (this.max !== (Number.MAX_VALUE)) {
+            attributes(this.element, { 'aria-valuemax': this.max.toString() });
+        }
     };
     NumericTextBox.prototype.formattedValue = function (decimals, value) {
         return this.instance.getNumberFormat({
@@ -1101,9 +1104,8 @@ var NumericTextBox = /** @class */ (function (_super) {
             detach(this.spinDown);
         }
         var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-            'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
-            'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
-            'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
+            'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',
+            'aria-valuemin', 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
         for (var i = 0; i < attrArray.length; i++) {
             this.element.removeAttribute(attrArray[i]);
         }

package/src/textbox/textbox.js

@@ -561,7 +561,7 @@ var TextBox = /** @class */ (function (_super) {
         }
         this.respectiveElement.value = this.respectiveElement.defaultValue;
         this.respectiveElement.classList.remove('e-input');
-        this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
+        this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby']);
         if (!isNullOrUndefined(this.textboxWrapper)) {
             this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
             detach(this.textboxWrapper.container);