@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 16.1.48 to 16.2.41

CHANGELOG.md

@@ -5,102 +5,138 @@ # Changelog
 
-### Input
+### Common
 
-#### Bug Fixes
+#### Breaking Changes
 
-- Typing issues resolved in `Focus` and `Blur` event arguments.
+- The splitbuttons package is used by ColorPicker component, so the splitbuttons package is a dependency for the inputs package.
 
-## 16.1.45 (2018-05-23)
+### Form-validator
 
-### Input
+#### New Features
 
-#### Bug Fixes
+- Provided option to validate the hidden element by using `validateHidden` attribute.
 
-- Added `Focus` and `Blur` event arguments.
+### MaskedTextBox
 
-## 16.1.40 (2018-05-08)
+#### New Features
 
-### MaskedTextBox
+- Provided option to show/hide clear button to reset the value in MaskedTextBox
 
-#### Bug Fixes
+### NumericTextBox
 
-- While copying a text and hold the “Ctrl + v” on the MaskedTextBox with number mask, value is not updating properly
-  along with script error issue has been fixed.
+#### New Features
 
-## 16.1.38 (2018-05-02)
+- Provided option to show/hide clear button to reset the value in NumericTextBox.
+- Prevented to type unwanted text and symbols in NumericTextBox.
 
-### Uploader
+### Slider
 
-#### Bug Fixes
+#### New Features
 
-- Provided option to customize request header on trigger `uploading` and `removing` events.
+- Limits implemented to limit movement interval of min and max values to certain range.
+- Drag interval implemented to interact with the range slider by dragging the range.
+- Provided to support custom value arrays.
+- Bootstrap theme tooltip appearance improved by enabling tooltip pointer.
 
-- Provided option to add additional data in `removing` event.
+#### Breaking Changes
 
-### NumericTextBox
+- The following API namings are renamed.
 
-#### Bug Fixes
+| Existing API Name | New API Name    |
+| :-------------:   |:-------------:  |
+| readOnly          | readonly        |
 
-- Now native events triggered properly in Angular NumericTextBox component.
+### ColorPicker
 
-## 16.1.37 (2018-04-24)
+Color picker is a user interface that is used to select and adjust color values.
 
-### NumericTextBox
+- **Color specification**: Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes.
 
-#### Features
+- **Mode**: Supports `Picker` and `Palette` mode.
 
-- Provided clear button option in NumericTextBox.
+- **Inline**: Supports inline type rendering of color picker.
 
+- **Custom palettes**: Allows you to customize palettes and supports multiple palette groups rendering.
+
+- **Opacity**: Allows to set and change the `opacity` of the selected color.
+
+- **Accessibility**: Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices.
+
+### Uploader
+
+#### New Features
+
+- Added `chunked upload` support to upload large files asynchronously with `pause` and `resume` options.
+- Support has been provided to resume automatically on failed chunk up to `maximum retry` options.
+- Included option to handle `retry upload` through UI (User Interface).
+- Support to `cancel the request` while uploading a file is added.
+
 #### Bug Fixes
 
-- NumericTextBox is now aligned properly in inline element when `showSpinButton` property disabled.
+- Provided option to customize request header on trigger uploading and removing events.
+- Provided option to add additional data in removing event.
+- The issue with rendering Uploader component in internet explorer browser has been fixed.
+- The issue with submitting single file upload's value has been fixed.
 
-## 16.1.35 (2018-04-17)
+### TextBox
 
-### MaskedTextBox
+#### New Features
 
+- The clear button can be enabled/disabled dynamically through `setClearButton` method.
+
 #### Bug Fixes
 
-- While dynamically changing the MaskedTextBox value as null, value not updated properly issue is fixed.
+- Theme compatibility issue resolved for CSS Input component.
 
-### Uploader
+## 16.1.45 (2018-05-23)
 
+### Input
+
 #### Bug Fixes
 
-- The script issue with removing uploaded files has been fixed.
+- Added `Focus` and `Blur` event arguments.
 
-## 16.1.34 (2018-04-10)
+## 16.1.40 (2018-05-08)
 
-### FormValidator
+### MaskedTextBox
 
 #### Bug Fixes
 
-- Resolved multiple form validation issue.
+- While copying a text and hold the “Ctrl + v” on the MaskedTextBox with number mask, value is not updating properly
+  along with script error issue has been fixed.
 
-## 16.1.29 (2018-03-13)
+## 16.1.38 (2018-05-02)
 
-### Input
+### NumericTextBox
 
-#### Features
+#### Bug Fixes
 
-- The clear button can be enabled/disabled dynamically through `setClearButton` method.
+- Now native events triggered properly in Angular NumericTextBox component.
 
-## 16.1.28-preview (2018-03-09)
+## 16.1.37 (2018-04-24)
 
 ### NumericTextBox
 
+#### New Features
+
+- Provided clear button option in NumericTextBox.
+
 #### Bug Fixes
 
-- In NumericTextBox, unwanted “change” events has been prevented from triggering.
+- NumericTextBox is now aligned properly in inline element when `showSpinButton` property disabled.
 
-### Uploader
+## 16.1.35 (2018-04-17)
 
+### MaskedTextBox
+
 #### Bug Fixes
 
-- The issue with rendering Uploader component in internet explorer browser has been fixed.
+- While dynamically changing the MaskedTextBox value as null, value not updated properly issue is fixed.
 
-### Input
+## 16.1.28 (2018-03-09)
 
+### NumericTextBox
+
 #### Bug Fixes
 
-- Theme compatibility issue resolved for CSS Input component.
+- In NumericTextBox, unwanted “change” events has been prevented from triggering.
 
@@ -107,0 +143,0 @@ ## 16.1.24 (2018-02-22)

dist/global/index.d.ts

@@ -1,10 +0,1 @@
-/*!
-*  filename: index.d.ts
-*  version : 16.1.48
-*  Copyright Syncfusion Inc. 2001 - 2018. 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
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _inputs from '@syncfusion/ej2-inputs';
@@ -14,2 +5,3 @@ import * as _base from '@syncfusion/ej2-base';
 import * as _popups from '@syncfusion/ej2-popups';
+import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';
 
@@ -21,2 +13,3 @@ export declare namespace ej {
     const popups: typeof _popups;
+    const splitbuttons: typeof _splitbuttons;
 }

package.json

 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "16.1.48",
+  "version": "16.2.41",
   "description": "Essential JS 2 Input Components",
@@ -11,5 +11,6 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.1.38",
-    "@syncfusion/ej2-buttons": "~16.1.48",
-    "@syncfusion/ej2-popups": "~16.1.47"
+    "@syncfusion/ej2-base": "~16.2.41",
+    "@syncfusion/ej2-buttons": "~16.2.41",
+    "@syncfusion/ej2-popups": "~16.2.41",
+    "@syncfusion/ej2-splitbuttons": "~16.2.41"
   },
@@ -45,3 +46,4 @@ "devDependencies": {
     "number formatting",
-    "number input"
+    "number input",
+    "colorpicker"
   ],
@@ -48,0 +50,0 @@ "repository": {

ReadMe.md

@@ -7,2 +7,3 @@ A package of Essential JS 2 Input textbox components. It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.
 * [MaskedTextBox Demos](http://ej2.syncfusion.com/demos/#/maskedtextbox/default.html)
-* [Uploader](http://ej2.syncfusion.com/demos/#/uploader/default.html)
+* [Uploader](http://ej2.syncfusion.com/demos/#/uploader/default.html)
+* [ColorPicker](http://ej2.syncfusion.com/demos/#/colorpicker/default.html)

src/form-validator/form-validator.js

@@ -232,7 +232,7 @@ var __extends = (this && this.__extends) || (function () {
         FormValidator.prototype.createHTML5Rules = function () {
-            var defRules = ['required', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits', 'pattern',
-                'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',
+            var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',
+                'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',
                 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',
                 'data-val-creditcard', 'data-val-phone'];
-            var acceptedTypes = ['email', 'url', 'date', 'number', 'tel'];
+            var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];
             for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {
@@ -429,42 +429,63 @@ var input = _a[_i];
             var rules = Object.keys(this.rules[name]);
+            var hiddenType = false;
+            var validateHiddenType = false;
+            var vhPos = rules.indexOf('validateHidden');
+            var hPos = rules.indexOf('hidden');
             this.getInputElement(name);
-            this.getErrorElement(name);
-            for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {
-                var rule = rules_2[_i];
-                var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);
-                var errorRule = { name: name, message: errorMessage };
-                var eventArgs = {
-                    inputName: name,
-                    element: this.inputElement,
-                    message: errorMessage
-                };
-                if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {
-                    this.removeErrorRules(name);
-                    this.errorRules.push(errorRule);
-                    // Set aria attributes to invalid elements
-                    this.inputElement.setAttribute('aria-invalid', 'true');
-                    this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
-                    if (!this.infoElement) {
-                        this.createErrorElement(name, errorRule.message, this.inputElement);
+            if (hPos !== -1) {
+                hiddenType = true;
+            }
+            if (vhPos !== -1) {
+                validateHiddenType = true;
+            }
+            if (!hiddenType || (hiddenType && validateHiddenType)) {
+                if (vhPos !== -1) {
+                    rules.splice(vhPos, 1);
+                }
+                if (hPos !== -1) {
+                    rules.splice((hPos - 1), 1);
+                }
+                this.getErrorElement(name);
+                for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {
+                    var rule = rules_2[_i];
+                    var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);
+                    var errorRule = { name: name, message: errorMessage };
+                    var eventArgs = {
+                        inputName: name,
+                        element: this.inputElement,
+                        message: errorMessage
+                    };
+                    if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {
+                        this.removeErrorRules(name);
+                        this.errorRules.push(errorRule);
+                        // Set aria attributes to invalid elements
+                        this.inputElement.setAttribute('aria-invalid', 'true');
+                        this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
+                        this.inputElement.classList.add(this.errorClass);
+                        this.inputElement.classList.remove(this.validClass);
+                        if (!this.infoElement) {
+                            this.createErrorElement(name, errorRule.message, this.inputElement);
+                        }
+                        else {
+                            this.showMessage(errorRule);
+                        }
+                        eventArgs.errorElement = this.infoElement;
+                        eventArgs.status = 'failure';
+                        this.trigger('validationComplete', eventArgs);
+                        // Set aria-required to required rule elements
+                        if (rule === 'required') {
+                            this.inputElement.setAttribute('aria-required', 'true');
+                        }
+                        break;
                     }
                     else {
-                        this.showMessage(errorRule);
+                        this.hideMessage(name);
+                        eventArgs.status = 'success';
+                        this.trigger('validationComplete', eventArgs);
                     }
-                    eventArgs.errorElement = this.infoElement;
-                    eventArgs.status = 'failure';
-                    this.inputElement.classList.add(this.errorClass);
-                    this.inputElement.classList.remove(this.validClass);
-                    this.trigger('validationComplete', eventArgs);
-                    // Set aria-required to required rule elements
-                    if (rule === 'required') {
-                        this.inputElement.setAttribute('aria-required', 'true');
-                    }
-                    break;
                 }
-                else {
-                    this.hideMessage(name);
-                    eventArgs.status = 'success';
-                    this.trigger('validationComplete', eventArgs);
-                }
             }
+            else {
+                return;
+            }
         };
@@ -471,0 +492,0 @@ // Check the input element whether it's value satisfy the validation rule or not

src/index.d.ts

@@ -10,1 +10,2 @@ /**
 export * from './uploader/index';
+export * from './color-picker/index';

src/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./numerictextbox/index", "./maskedtextbox/index", "./input/index", "./slider/index", "./form-validator/index", "./uploader/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5, index_6) {
+define(["require", "exports", "./numerictextbox/index", "./maskedtextbox/index", "./input/index", "./slider/index", "./form-validator/index", "./uploader/index", "./color-picker/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5, index_6, index_7) {
     "use strict";
@@ -16,2 +16,3 @@ function __export(m) {
     __export(index_6);
+    __export(index_7);
 });

src/input/input.d.ts

@@ -108,4 +108,15 @@ /**
     function removeFloating(input: InputObject): void;
-    function addFloating(input: HTMLInputElement, type: FloatLabelType, placeholder: string): void;
+    function addFloating(input: HTMLInputElement, type: FloatLabelType | string, placeholder: string): void;
     /**
+     * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
+     * ```
+     * E.g : Input.setRipple(true, [inputObjects]);
+     * ```
+     * @param isRipple
+     * - Boolean value to specify whether to enable the ripple effect.
+     * @param inputObject
+     * - Specify the collection of input objects.
+     */
+    function setRipple(isRipple: boolean, inputObj: InputObject[]): void;
+    /**
      * Creates a new span element with the given icons added and append it in container element.
@@ -161,3 +172,3 @@ * ```
      */
-    floatLabelType?: FloatLabelType;
+    floatLabelType?: FloatLabelType | string;
     /**
@@ -213,3 +224,3 @@ * ```
      */
-    floatLabelType?: FloatLabelType;
+    floatLabelType?: FloatLabelType | string;
     /**
@@ -216,0 +227,0 @@ *  Sets the change event mapping function to input.

src/input/input.js

@@ -528,2 +528,53 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
         /**
+         * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
+         * ```
+         * E.g : Input.setRipple(true, [inputObjects]);
+         * ```
+         * @param isRipple
+         * - Boolean value to specify whether to enable the ripple effect.
+         * @param inputObject
+         * - Specify the collection of input objects.
+         */
+        function setRipple(isRipple, inputObj) {
+            for (var i = 0; i < inputObj.length; i++) {
+                _internalRipple(isRipple, inputObj[i].container);
+            }
+        }
+        Input.setRipple = setRipple;
+        function _internalRipple(isRipple, container, button) {
+            var argsButton = [];
+            argsButton.push(button);
+            var buttons = ej2_base_1.isNullOrUndefined(button) ?
+                container.querySelectorAll('.e-input-group-icon') : argsButton;
+            if (isRipple && buttons.length > 0) {
+                for (var index = 0; index < buttons.length; index++) {
+                    buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);
+                    buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);
+                }
+            }
+            else if (buttons.length > 0) {
+                for (var index = 0; index < buttons.length; index++) {
+                    buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);
+                    buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);
+                }
+            }
+        }
+        function _onMouseRipple(container, button) {
+            if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {
+                button.classList.add('e-input-btn-ripple');
+            }
+        }
+        function _onMouseDownRipple() {
+            var ele = this;
+            var parentEle = this.parentElement;
+            while (!parentEle.classList.contains('e-input-group')) {
+                parentEle = parentEle.parentElement;
+            }
+            _onMouseRipple(parentEle, ele);
+        }
+        function _onMouseUpRipple() {
+            var ele = this;
+            setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500);
+        }
+        /**
          * Creates a new span element with the given icons added and append it in container element.
@@ -539,2 +590,3 @@ * ```
             var button = ej2_base_1.createElement('span', { className: iconClass });
+            button.classList.add('e-input-group-icon');
             container.appendChild(button);
@@ -544,11 +596,3 @@ if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {
             }
-            button.addEventListener('mousedown', function () {
-                if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {
-                    this.classList.add('e-input-btn-ripple');
-                }
-            });
-            button.addEventListener('mouseup', function () {
-                var ele = this;
-                setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500);
-            });
+            _internalRipple(true, container, button);
             return button;
@@ -555,0 +599,0 @@ }

src/maskedtextbox/base/mask-base.d.ts

@@ -30,2 +30,7 @@ /**
  * @hidden
+ * To bind required events to the MaskedTextBox clearButton.
+ */
+export declare function bindClearEvent(): void;
+/**
+ * @hidden
  * To get masked value from the MaskedTextBox.
@@ -38,3 +43,3 @@ */
  */
-export declare function strippedValue(element: HTMLInputElement): string;
+export declare function strippedValue(element: HTMLInputElement, maskValues: string): string;
 export declare function maskInputFocusHandler(event: KeyboardEvent): void;
@@ -41,0 +46,0 @@ export declare function maskInputBlurHandler(event: KeyboardEvent): void;

src/maskedtextbox/base/mask-base.js

@@ -30,4 +30,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../input/input"], function (require, exports, ej2_base_1, input_1) {
     function createMask() {
-        ej2_base_1.attributes(this.element, { 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',
-            'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' });
+        ej2_base_1.attributes(this.element, {
+            'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',
+            'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': ''
+        });
         if (this.mask) {
@@ -131,2 +133,3 @@ var splitMask = this.mask.split(']');
         ej2_base_1.EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this);
+        ej2_base_1.EventHandler.add(this.element, 'input', maskInputHandler, this);
         ej2_base_1.EventHandler.add(this.element, 'focus', maskInputFocusHandler, this);
@@ -137,2 +140,5 @@ ej2_base_1.EventHandler.add(this.element, 'blur', maskInputBlurHandler, this);
         ej2_base_1.EventHandler.add(this.element, 'drop', maskInputDropHandler, this);
+        if (this.enabled) {
+            bindClearEvent.call(this);
+        }
     }
@@ -148,2 +154,3 @@ exports.wireEvents = wireEvents;
         ej2_base_1.EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler);
+        ej2_base_1.EventHandler.remove(this.element, 'input', maskInputHandler);
         ej2_base_1.EventHandler.remove(this.element, 'focus', maskInputFocusHandler);
@@ -157,2 +164,27 @@ ej2_base_1.EventHandler.remove(this.element, 'blur', maskInputBlurHandler);
      * @hidden
+     * To bind required events to the MaskedTextBox clearButton.
+     */
+    function bindClearEvent() {
+        if (this.showClearButton) {
+            ej2_base_1.EventHandler.add(this.inputObj.clearButton, 'mousedown touchstart', resetHandler, this);
+        }
+    }
+    exports.bindClearEvent = bindClearEvent;
+    function resetHandler(e) {
+        e.preventDefault();
+        if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) {
+            clear.call(this, e);
+        }
+    }
+    function clear(event) {
+        var value = this.element.value;
+        setElementValue.call(this, this.promptMask);
+        this.redoCollec.unshift({
+            value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd
+        });
+        triggerMaskChangeEvent.call(this, event, value);
+        this.element.setSelectionRange(0, 0);
+    }
+    /**
+     * @hidden
      * To get masked value from the MaskedTextBox.
@@ -168,7 +200,9 @@ */
      */
-    function strippedValue(element) {
+    function strippedValue(element, maskValues) {
         var value = '';
         var k = 0;
         var checkMask = false;
-        if (!ej2_base_1.isNullOrUndefined(element) && !ej2_base_1.isNullOrUndefined(this) && element.value !== this.promptMask) {
+        var maskValue = (!ej2_base_1.isNullOrUndefined(maskValues)) ? maskValues : (!ej2_base_1.isNullOrUndefined(element) &&
+            !ej2_base_1.isNullOrUndefined(this)) ? element.value : maskValues;
+        if (maskValue !== this.promptMask) {
             for (var i = 0; i < this.customRegExpCollec.length; i++) {
@@ -184,3 +218,3 @@ if (checkMask) {
                 if (!checkMask) {
-                    if ((element.value[i] !== this.promptChar) && (!ej2_base_1.isNullOrUndefined(this.customRegExpCollec[k]) &&
+                    if ((maskValue[i] !== this.promptChar) && (!ej2_base_1.isNullOrUndefined(this.customRegExpCollec[k]) &&
                         ((!ej2_base_1.isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) ||
@@ -190,4 +224,4 @@ (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' &&
                             (!ej2_base_1.isNullOrUndefined(this.customCharacters) &&
-                                (!ej2_base_1.isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (element.value !== '')) {
-                        value += element.value[i];
+                                (!ej2_base_1.isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) {
+                        value += maskValue[i];
                     }
@@ -198,2 +232,5 @@ }
         }
+        if (this.mask === null || this.mask === '' && this.value !== undefined) {
+            value = maskValue;
+        }
         return value;
@@ -224,12 +261,17 @@ }
             this.isFocus = true;
-            if (this.placeholder && this.element.value === '') {
+            if (this.element.value === '') {
                 setElementValue.call(this, this.promptMask);
+            }
+            else {
+                setElementValue.call(this, this.element.value);
+            }
+            if (!ej2_base_1.Browser.isDevice && ej2_base_1.Browser.info.version === '11.0') {
                 this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd);
+            }
+            else {
+                var delay = (ej2_base_1.Browser.isDevice && ej2_base_1.Browser.isIos) ? 450 : 0;
                 setTimeout(function () {
                     _this.element.setSelectionRange(_this.focusEventArgs.selectionStart, _this.focusEventArgs.selectionEnd);
-                }, 1);
+                }, delay);
             }
-            else {
-                this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd);
-            }
         }
@@ -258,4 +300,5 @@ }
             setElementValue.call(this, '');
+            this._callPasteHandler = true;
             setTimeout(function () {
-                var value = _this.element.value;
+                var value = _this.element.value.replace(/ /g, '');
                 if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) {
@@ -274,2 +317,3 @@ value = strippedValue.call(_this, _this.element);
                 _this.maskKeyPress = false;
+                _this._callPasteHandler = false;
                 if (_this.element.value === oldValue_1) {
@@ -305,5 +349,42 @@ var i_1 = 0;
     exports.maskInputDropHandler = maskInputDropHandler;
+    function maskInputHandler(event) {
+        var eventArgs = { ctrlKey: false, keyCode: 229 };
+        // tslint:disable-next-line
+        ej2_base_1.extend(event, eventArgs);
+        if (this.mask) {
+            if (this.element.value === '') {
+                this.redoCollec.unshift({
+                    value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd
+                });
+            }
+            if (this.element.value.length === 1) {
+                this.element.value = this.element.value + this.promptMask;
+                this.element.setSelectionRange(1, 1);
+            }
+            if (!this._callPasteHandler) {
+                removeMaskInputValues.call(this, event);
+            }
+            if (this.element.value.length > this.promptMask.length) {
+                var startIndex = this.element.selectionStart;
+                var addedValues = this.element.value.length - this.promptMask.length;
+                var value = this.element.value.substring(startIndex - addedValues, startIndex);
+                this.maskKeyPress = false;
+                var i = 0;
+                do {
+                    validateValue.call(this, value[i], event.ctrlKey, event);
+                    ++i;
+                } while (i < value.length);
+            }
+            var val = strippedValue.call(this, this.element);
+            this.prevValue = val;
+            this.value = val;
+            if (val === '') {
+                setElementValue.call(this, this.promptMask);
+                this.element.setSelectionRange(0, 0);
+            }
+        }
+    }
     function maskInputKeyDownHandler(event) {
-        var _this = this;
         if (this.mask) {
+            var value = this;
             if (event.keyCode !== 229) {
@@ -315,7 +396,2 @@ if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {
             }
-            else {
-                setTimeout(function () {
-                    removeMaskInputValues.call(_this, event);
-                }, 0);
-            }
             var startValue = this.element.value;
@@ -558,2 +634,9 @@ if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {
         }
+        if (this.element.selectionStart === 0 && this.element.selectionEnd === 0) {
+            // tslint:disable-next-line
+            var temp_1 = this.element;
+            setTimeout(function () {
+                temp_1.setSelectionRange(0, 0);
+            }, 0);
+        }
     }
@@ -820,3 +903,3 @@ function mobileSwipeCheck(key) {
             var labelElement = this.element.parentNode.querySelector('.e-float-text');
-            if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' &&
+            if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder &&
                 !ej2_base_1.isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) {
@@ -828,2 +911,5 @@ ej2_base_1.removeClass([labelElement], TOPLABEL);
         }
+        if (this.mask === null || this.mask === '' && this.value !== undefined) {
+            setElementValue.call(this, this.value);
+        }
     }
@@ -836,6 +922,15 @@ exports.setMaskValue = setMaskValue;
     function setElementValue(val, element) {
-        if (!this.isFocus && this.floatLabelType === 'Auto' && ej2_base_1.isNullOrUndefined(this.value)) {
+        if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && ej2_base_1.isNullOrUndefined(this.value)) {
             val = '';
         }
-        input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType);
+        var value = strippedValue.call(this, (element ? element : this.element), val);
+        if (value === null || value === '') {
+            input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, false);
+            if (this.showClearButton) {
+                this.inputObj.clearButton.classList.add('e-clear-icon-hide');
+            }
+        }
+        else {
+            input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);
+        }
     }
@@ -842,0 +937,0 @@ exports.setElementValue = setElementValue;

src/maskedtextbox/maskedtextbox/maskedtextbox-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base';
+import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base';
 import {MaskChangeEventArgs,MaskFocusEventArgs} from "./maskedtextbox";
@@ -49,2 +49,8 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
+     * Specifies whether to show or hide the clear icon.
+     * @default false
+     */
+    showClearButton?: boolean;
+
+    /**
      * Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page.
@@ -69,3 +75,3 @@ * If enabled, the 'value' state will be persisted.
      * For more information on mask, refer to
-     * [mask](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#standard-mask-elements).
+     * [mask](./mask-configuration.html#standard-mask-elements).
      * * If the mask value is empty, the MaskedTextBox will behave as an input element with text type.
@@ -80,3 +86,3 @@ * @default null
      * For more information on prompt-character, refer to
-     * [prompt-character](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#prompt-character).
+     * [prompt-character](./mask-configuration.html#prompt-character).
      * @default _
@@ -118,3 +124,3 @@ */
      * For more information on customCharacters, refer to
-     * [customCharacters](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#custom-characters).
+     * [customCharacters](./mask-configuration.html#custom-characters).
      * @default null
@@ -121,0 +127,0 @@ */

src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -68,2 +68,7 @@ import { Component, EmitType, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';
     /**
+     * Specifies whether to show or hide the clear icon.
+     * @default false
+     */
+    showClearButton: boolean;
+    /**
      * Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page.
@@ -86,3 +91,3 @@ * If enabled, the 'value' state will be persisted.
      * For more information on mask, refer to
-     * [mask](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#standard-mask-elements).
+     * [mask](./mask-configuration.html#standard-mask-elements).
      * * If the mask value is empty, the MaskedTextBox will behave as an input element with text type.
@@ -96,3 +101,3 @@ * @default null
      * For more information on prompt-character, refer to
-     * [prompt-character](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#prompt-character).
+     * [prompt-character](./mask-configuration.html#prompt-character).
      * @default _
@@ -132,3 +137,3 @@ */
      * For more information on customCharacters, refer to
-     * [customCharacters](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#custom-characters).
+     * [customCharacters](./mask-configuration.html#custom-characters).
      * @default null
@@ -181,3 +186,3 @@ */
     private resetMaskedTextBox();
-    private setMaskPlaceholder(setVal);
+    private setMaskPlaceholder(setVal, dynamicPlaceholder);
     private setCssClass(cssClass, element);
@@ -184,0 +189,0 @@ private setWidth(width);

src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -74,4 +74,8 @@ var __extends = (this && this.__extends) || (function () {
                 }
-                this.element.parentNode.appendChild(input);
-                this.element.parentNode.removeChild(this.element);
+                if (this.element.hasAttribute('id')) {
+                    this.element.removeAttribute('id');
+                }
+                this.element.classList.remove('e-control', 'e-maskedtextbox');
+                this.element.classList.add('e-mask-container');
+                this.element.appendChild(input);
                 this.element = input;
@@ -102,3 +106,3 @@ ej2_base_2.setValue('ej2_instances', ejInstance, this.element);
                 this.isInitial = false;
-                this.setMaskPlaceholder(true);
+                this.setMaskPlaceholder(true, false);
                 this.setWidth(this.width);
@@ -119,2 +123,5 @@ }
             index_1.applyMask.call(this);
+            if (this.mask === null || this.mask === '' && this.value !== undefined) {
+                index_2.setElementValue.call(this, this.value);
+            }
             var val = index_1.strippedValue.call(this, this.element);
@@ -128,4 +135,4 @@ this.prevValue = val;
         };
-        MaskedTextBox.prototype.setMaskPlaceholder = function (setVal) {
-            if (this.placeholder) {
+        MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) {
+            if (dynamicPlaceholder || this.placeholder) {
                 input_1.Input.setPlaceholder(this.placeholder, this.element);
@@ -148,2 +155,3 @@ if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') {
                 this.element.style.width = ej2_base_2.formatUnit(width);
+                this.inputObj.container.style.width = ej2_base_2.formatUnit(width);
             }
@@ -154,8 +162,9 @@ };
                 element: this.element,
-                customTag: this.angularTagName,
                 floatLabelType: this.floatLabelType,
                 properties: {
                     enableRtl: this.enableRtl,
+                    cssClass: this.cssClass,
                     enabled: this.enabled,
-                    placeholder: this.placeholder
+                    placeholder: this.placeholder,
+                    showClearButton: this.showClearButton
                 }
@@ -176,7 +185,7 @@ });
                         if (this.placeholder) {
-                            this.setMaskPlaceholder(false);
+                            this.setMaskPlaceholder(false, false);
                         }
                         break;
                     case 'placeholder':
-                        this.setMaskPlaceholder(true);
+                        this.setMaskPlaceholder(true, true);
                         break;
@@ -199,2 +208,11 @@ case 'width':
                         break;
+                    case 'showClearButton':
+                        input_1.Input.setClearButton(newProp.showClearButton, this.element, this.inputObj);
+                        index_2.bindClearEvent.call(this);
+                        break;
+                    case 'floatLabelType':
+                        this.floatLabelType = newProp.floatLabelType;
+                        input_1.Input.removeFloating(this.inputObj);
+                        input_1.Input.addFloating(this.element, this.floatLabelType, this.placeholder);
+                        break;
                     case 'mask':
@@ -267,2 +285,5 @@ var strippedValue_1 = this.value;
             ej2_base_1.Property(false)
+        ], MaskedTextBox.prototype, "showClearButton", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
         ], MaskedTextBox.prototype, "enablePersistence", void 0);
@@ -269,0 +290,0 @@ __decorate([

src/numerictextbox/numerictextbox-model.d.ts

@@ -26,3 +26,3 @@ import { Component, EventHandler, Property, Event, Browser, L10n, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../input/input';
      * For more information on min, refer to
-     * [min](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [min](./getting-started.html#range-validation).
      * @default null
@@ -35,3 +35,3 @@ */
      * For more information on max, refer to
-     * [max](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [max](./getting-started.html#range-validation).
      * @default null
@@ -44,3 +44,3 @@ */
      * For more information on step, refer to
-     * [step](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [step](./getting-started.html#range-validation).
      * @default 1
@@ -105,3 +105,3 @@ */
      * For more information on formats, refer to
-     * [formats](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#standard-formats).
+     * [formats](./formats.html#standard-formats).
      * @default 'n2'
@@ -114,3 +114,3 @@ */
      * For more information on decimals, refer to
-     * [decimals](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#precision-of-numbers).
+     * [decimals](./formats.html#precision-of-numbers).
      * @default null
@@ -117,0 +117,0 @@ */

src/numerictextbox/numerictextbox.d.ts

@@ -38,3 +38,5 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private isCalled;
-    private isKeyDown;
+    private prevVal;
+    private nextEle;
+    private cursorPosChanged;
     private changeEventArgs;
@@ -56,3 +58,3 @@ private isInteract;
      * For more information on min, refer to
-     * [min](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [min](./getting-started.html#range-validation).
      * @default null
@@ -64,3 +66,3 @@ */
      * For more information on max, refer to
-     * [max](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [max](./getting-started.html#range-validation).
      * @default null
@@ -72,3 +74,3 @@ */
      * For more information on step, refer to
-     * [step](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation).
+     * [step](./getting-started.html#range-validation).
      * @default 1
@@ -124,3 +126,3 @@ */
      * For more information on formats, refer to
-     * [formats](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#standard-formats).
+     * [formats](./formats.html#standard-formats).
      * @default 'n2'
@@ -132,3 +134,3 @@ */
      * For more information on decimals, refer to
-     * [decimals](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#precision-of-numbers).
+     * [decimals](./formats.html#precision-of-numbers).
      * @default null
@@ -235,2 +237,5 @@ */
     private pasteHandler();
+    private preventHandler();
+    private keyUpHandler(event);
+    private inputHandler(event);
     private keyDownHandler(event);
@@ -259,2 +264,3 @@ private performAction(value, step, operation);
     private getElementData(event);
+    private floatLabelTypeUpdate();
     private mouseUpClick(event);
@@ -261,0 +267,0 @@ /**

src/numerictextbox/numerictextbox.js

@@ -66,3 +66,2 @@ var __extends = (this && this.__extends) || (function () {
                 this.element.classList.remove('e-control', 'e-numerictextbox');
-                this.element.classList.add('e-numeric-container');
                 this.element.appendChild(input);
@@ -105,3 +104,3 @@ this.element = input;
                 }
-                this.changeValue(this.value);
+                this.changeValue(this.value === null || isNaN(this.value) ? null : this.strictMode ? this.trimValue(this.value) : this.value);
                 this.wireEvents();
@@ -180,3 +179,3 @@ if (this.value !== null && !isNaN(this.value)) {
             }
-            this.hiddenInput = (ej2_base_3.createElement('input', { attrs: { type: 'hidden' } }));
+            this.hiddenInput = (ej2_base_3.createElement('input', { attrs: { type: 'hidden', 'validateHidden': 'true' } }));
             this.inputName = this.inputName !== null ? this.inputName : this.element.id;
@@ -267,2 +266,4 @@ this.element.removeAttribute('name');
             ej2_base_1.EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+            ej2_base_1.EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
+            ej2_base_1.EventHandler.add(this.element, 'input', this.inputHandler, this);
             ej2_base_1.EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);
@@ -287,2 +288,4 @@ ej2_base_1.EventHandler.add(this.element, 'change', this.changeHandler, this);
             ej2_base_1.EventHandler.remove(this.element, 'blur', this.focusOut);
+            ej2_base_1.EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
+            ej2_base_1.EventHandler.remove(this.element, 'input', this.inputHandler);
             ej2_base_1.EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
@@ -331,22 +334,108 @@ ej2_base_1.EventHandler.remove(this.element, 'keypress', this.keyPressHandler);
         };
-        NumericTextBox.prototype.keyDownHandler = function (event) {
-            switch (event.keyCode) {
-                case 38:
-                    event.preventDefault();
-                    this.action(INCREMENT, event);
-                    break;
-                case 40:
-                    event.preventDefault();
-                    this.action(DECREMENT, event);
-                    break;
-                default: break;
+        NumericTextBox.prototype.preventHandler = function () {
+            var _this = this;
+            var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+            setTimeout(function () {
+                if (_this.element.selectionStart > 0) {
+                    var currentPos = _this.element.selectionStart;
+                    var prevPos = _this.element.selectionStart - 1;
+                    var start = 0;
+                    var ignoreKeyCode = void 0;
+                    var valArray = _this.element.value.split('');
+                    var numericObject = ej2_base_5.getNumericObject(_this.locale);
+                    var decimalSeparator = ej2_base_4.getValue('decimal', numericObject);
+                    ignoreKeyCode = decimalSeparator.charCodeAt(0);
+                    if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {
+                        if (ej2_base_4.isNullOrUndefined(_this.prevVal)) {
+                            _this.element.value = _this.element.value.trim();
+                        }
+                        else if (prevPos !== 0) {
+                            _this.element.value = _this.prevVal;
+                        }
+                        else if (prevPos === 0) {
+                            _this.element.value = _this.element.value.trim();
+                        }
+                        _this.element.setSelectionRange(prevPos, prevPos);
+                    }
+                    else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&
+                        _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {
+                        if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==
+                            valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&
+                            _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||
+                            _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {
+                            _this.element.value = _this.element.value.substring(0, prevPos) +
+                                _this.element.value.substring(currentPos, _this.element.value.length);
+                            _this.element.setSelectionRange(prevPos, prevPos);
+                            if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0
+                                && _this.element.value.length) {
+                                _this.preventHandler();
+                            }
+                        }
+                    }
+                    else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&
+                        _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {
+                        if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==
+                            valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&
+                            _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||
+                            _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {
+                            _this.element.setSelectionRange(prevPos, prevPos);
+                            _this.nextEle = _this.element.value[_this.element.selectionStart];
+                            _this.cursorPosChanged = true;
+                            _this.preventHandler();
+                        }
+                    }
+                    if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&
+                        isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {
+                        _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);
+                        _this.cursorPosChanged = false;
+                        _this.nextEle = null;
+                    }
+                    if (_this.element.value.trim() === '') {
+                        _this.element.setSelectionRange(start, start);
+                    }
+                    if (_this.element.selectionStart > 0) {
+                        if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {
+                            if (ej2_base_4.isNullOrUndefined(_this.prevVal)) {
+                                _this.element.value = _this.element.value;
+                            }
+                            else {
+                                _this.element.value = _this.prevVal;
+                            }
+                            _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);
+                        }
+                    }
+                    _this.prevVal = _this.element.value;
+                }
+            });
+        };
+        NumericTextBox.prototype.keyUpHandler = function (event) {
+            var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+            if (!iOS && ej2_base_1.Browser.isDevice) {
+                this.preventHandler();
             }
-            if (!this.element.value.length) {
-                this.setProperties({ value: null }, true);
-                this.isKeyDown = true;
-                this.updateValue(this.instance.getNumberParser({ format: 'n' })(this.element.value));
-                this.isKeyDown = false;
+        };
+        ;
+        NumericTextBox.prototype.inputHandler = function (event) {
+            var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+            if (iOS && ej2_base_1.Browser.isDevice) {
+                this.preventHandler();
             }
         };
         ;
+        NumericTextBox.prototype.keyDownHandler = function (event) {
+            if (!this.readonly) {
+                switch (event.keyCode) {
+                    case 38:
+                        event.preventDefault();
+                        this.action(INCREMENT, event);
+                        break;
+                    case 40:
+                        event.preventDefault();
+                        this.action(DECREMENT, event);
+                        break;
+                    default: break;
+                }
+            }
+        };
+        ;
         NumericTextBox.prototype.performAction = function (value, step, operation) {
@@ -392,5 +481,3 @@ if (value === null || isNaN(value)) {
             this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);
-            if (!this.isKeyDown) {
-                this.raiseChangeEvent(event);
-            }
+            this.raiseChangeEvent(event);
         };
@@ -537,2 +624,3 @@ NumericTextBox.prototype.updateCurrency = function (prop, propVal) {
         NumericTextBox.prototype.focusIn = function (event) {
+            var _this = this;
             if (!this.enabled || this.readonly) {
@@ -545,6 +633,9 @@ return;
             if ((this.value || this.value === 0)) {
-                var formatValue = this.formatNumber();
-                this.setElementValue(formatValue);
+                var formatValue_1 = this.formatNumber();
+                this.setElementValue(formatValue_1);
                 if (!this.isPrevFocused) {
-                    this.element.setSelectionRange(0, formatValue.length);
+                    var delay = (ej2_base_1.Browser.isDevice && ej2_base_1.Browser.isIos) ? 600 : 0;
+                    setTimeout(function () {
+                        _this.element.setSelectionRange(0, formatValue_1.length);
+                    }, delay);
                 }
@@ -636,2 +727,9 @@ }
         };
+        NumericTextBox.prototype.floatLabelTypeUpdate = function () {
+            input_1.Input.removeFloating(this.inputWrapper);
+            var hiddenInput = this.hiddenInput;
+            this.hiddenInput.remove();
+            input_1.Input.addFloating(this.element, this.floatLabelType, this.placeholder);
+            this.container.insertBefore(hiddenInput, this.container.childNodes[1]);
+        };
         NumericTextBox.prototype.mouseUpClick = function (event) {
@@ -651,3 +749,5 @@ event.stopPropagation();
             if (step === void 0) { step = this.step; }
+            this.isInteract = false;
             this.changeValue(this.performAction(this.value, step, INCREMENT));
+            this.raiseChangeEvent();
         };
@@ -661,3 +761,5 @@ /**
             if (step === void 0) { step = this.step; }
+            this.isInteract = false;
             this.changeValue(this.performAction(this.value, step, DECREMENT));
+            this.raiseChangeEvent();
         };
@@ -744,3 +846,8 @@ /**
                         input_1.Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper);
+                        this.bindClearEvent();
                         break;
+                    case 'floatLabelType':
+                        this.floatLabelType = newProp.floatLabelType;
+                        this.floatLabelTypeUpdate();
+                        break;
                     case 'value':
@@ -747,0 +854,0 @@ this.updateValue(newProp.value);

src/slider/slider-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, EventHandler, Property, Event, EmitType, Complex } from '@syncfusion/ej2-base';import { L10n, Internationalization, NumberFormatOptions } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';import { Tooltip, Position, TooltipEventArgs } from '@syncfusion/ej2-popups';
+import { Component, EventHandler, Property, Event, EmitType, Complex, classList } from '@syncfusion/ej2-base';import { L10n, Internationalization, NumberFormatOptions } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';import { Tooltip, Position, TooltipEventArgs } from '@syncfusion/ej2-popups';
 import {Placement,TooltipPlacement,TooltipShowOn,SliderType,SliderOrientation,SliderTooltipEventArgs} from "./slider";
@@ -48,2 +48,51 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 /**
+ * Interface for a class LimitData
+ */
+export interface LimitDataModel {
+
+    /**
+     * It is used to enable the limit in the slider.
+     * @default false
+     */
+    enabled?: boolean;
+
+    /**
+     * It is used to set the minimum start limit value.
+     * @default null
+     */
+    minStart?: number;
+
+    /**
+     * It is used to set the minimum end limit value.
+     * @default null
+     */
+    minEnd?: number;
+
+    /**
+     * It is used to set the maximum start limit value.
+     * @default null
+     */
+    maxStart?: number;
+
+    /**
+     * It is used to set the maximum end limit value.
+     * @default null
+     */
+    maxEnd?: number;
+
+    /**
+     * It is used to lock the first handle.
+     * @default false
+     */
+    startHandleFixed?: boolean;
+
+    /**
+     * It is used to lock the second handle.
+     * @default false
+     */
+    endHandleFixed?: boolean;
+
+}
+
+/**
  * Interface for a class TooltipData
@@ -102,2 +151,9 @@ */
     /**
+     * It is used to denote own array of slider values.
+     * The value should be specified in array of number or string.The min,max and step value is not considered
+     * @default null
+     */
+    customValues?: string[] | number[];
+
+    /**
      * It is used to denote the step value of Slider component which is the amount of Slider value change
@@ -129,3 +185,3 @@ *  when increase / decrease button is clicked or press arrow keys or drag the thumb.
      */
-    readOnly?: boolean;
+    readonly?: boolean;
 
@@ -151,2 +207,11 @@ /**
     /**
+     * It is used to limit the slider movement within certain limits.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/slider/limits.html?lang=typescript here}
+     *  to know more about this property with demo
+     * @default { enabled: false }
+     */
+    limits?: LimitDataModel;
+
+    /**
      * It is used to enable or disable the slider.
@@ -153,0 +218,0 @@ * @default true

src/slider/slider.d.ts

 import { Component, EmitType } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
-import { SliderModel, TicksDataModel, TooltipDataModel } from './slider-model';
+import { SliderModel, TicksDataModel, TooltipDataModel, LimitDataModel } from './slider-model';
 /**
@@ -104,2 +104,42 @@ * Configures the ticks data of the Slider.
 /**
+ * It illustrates the limit data in slider.
+ */
+export declare class LimitData extends ChildProperty<LimitData> {
+    /**
+     * It is used to enable the limit in the slider.
+     * @default false
+     */
+    enabled: boolean;
+    /**
+     * It is used to set the minimum start limit value.
+     * @default null
+     */
+    minStart: number;
+    /**
+     * It is used to set the minimum end limit value.
+     * @default null
+     */
+    minEnd: number;
+    /**
+     * It is used to set the maximum start limit value.
+     * @default null
+     */
+    maxStart: number;
+    /**
+     * It is used to set the maximum end limit value.
+     * @default null
+     */
+    maxEnd: number;
+    /**
+     * It is used to lock the first handle.
+     * @default false
+     */
+    startHandleFixed: boolean;
+    /**
+     * It is used to lock the second handle.
+     * @default false
+     */
+    endHandleFixed: boolean;
+}
+/**
  * It illustrates the tooltip data in slider.
@@ -178,3 +218,3 @@ */
     private onresize;
-    private currentVal;
+    private isElementFocused;
     private handlePos1;
@@ -213,2 +253,4 @@ private handlePos2;
     private isMaterial;
+    private bootstrapCollisionArgs;
+    private isBootstrap;
     private zIndex;
@@ -222,2 +264,8 @@ private l10n;
     private tickElementCollection;
+    private limitBarFirst;
+    private limitBarSecond;
+    private firstPartRemain;
+    private secondPartRemain;
+    private minDiff;
+    private drag;
     /**
@@ -230,2 +278,8 @@ * It is used to denote the current value of the Slider.
     /**
+     * It is used to denote own array of slider values.
+     * The value should be specified in array of number or string.The min,max and step value is not considered
+     * @default null
+     */
+    customValues: string[] | number[];
+    /**
      * It is used to denote the step value of Slider component which is the amount of Slider value change
@@ -254,3 +308,3 @@ *  when increase / decrease button is clicked or press arrow keys or drag the thumb.
      */
-    readOnly: boolean;
+    readonly: boolean;
     /**
@@ -273,2 +327,10 @@ * It is used to denote the type of the Slider. The available options are:
     /**
+     * It is used to limit the slider movement within certain limits.
+     * Refer the documentation
+     *  {@link http://ej2.syncfusion.com/documentation/slider/limits.html?lang=typescript here}
+     *  to know more about this property with demo
+     * @default { enabled: false }
+     */
+    limits: LimitDataModel;
+    /**
      * It is used to enable or disable the slider.
@@ -373,2 +435,3 @@ * @default true
     private createRangeBar();
+    private createLimitBar();
     private setOrientClass();
@@ -408,3 +471,5 @@ private setAriaAttributes(element);
     private repeatHandlerUp(e);
+    private customTickCounter(bigNum);
     private renderScale();
+    private tickesAlignment(orien, tickWidth);
     private createTick(li, start);
@@ -416,2 +481,4 @@ private formatTicksValue(li, start);
     private handleValueUpdate();
+    private getLimitCorrectedValues(value);
+    private focusSliderElement();
     private buttonClick(args);
@@ -421,2 +488,6 @@ private tooltipAnimation();
     private setRangeBar();
+    private checkValidValueAndPos(value);
+    private setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion?, toMaxpostion?);
+    private setLimitBar();
+    private getLimitValueAndPosition(currentValue, minValue, maxValue, limitBar?);
     private setValue();
@@ -446,4 +517,7 @@ private rangeValueUpdate();
     private sliderDown(event);
+    private handleValueAdjust(handleValue, assignValue, handleNumber);
+    private dragRangeBarMove(event);
     private sliderBarUp();
     private sliderBarMove(evt);
+    private dragRangeBarUp(event);
     private checkRepeatedValue(currentValue);
@@ -465,2 +539,3 @@ private refreshTooltip();
     private updateConfig();
+    private limitsPropertyChange();
     /**
@@ -467,0 +542,0 @@ * Get the properties to be maintained in the persisted state.

src/uploader/uploader-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Event, EmitType, EventHandler, classList, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, createElement, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser } from '@syncfusion/ej2-base';
+import { Component, Property, Event, EmitType, EventHandler, classList, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, createElement, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {SelectedEventArgs,RemovingEventArgs,ClearingEventArgs} from "./uploader";
@@ -37,3 +37,3 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      * Specifies the text or html content to browse button
-     * @default 'Browse'
+     * @default 'Browse...'
      */
@@ -65,2 +65,3 @@ browse?: string | HTMLElement;
      * The upload operations could not perform without this property.
+     * @default ''
      */
@@ -72,6 +73,31 @@ saveUrl?: string;
      * The remove action type must be POST request and define “removeFileNames” attribute to get file information that will be removed.
-     * This property is optional. 
+     * This property is optional.
+     * @default ''
      */
     removeUrl?: string;
 
+    /**
+     * Specifies the chunk size to split the large file into chunks, and upload it to the server in a sequential order.
+     * If the chunk size property has value, the uploader enables the chunk upload by default.
+     * It must be specified in bytes value.
+     * 
+     * > For more information, refer to the [chunk upload](./chunk-upload.html) section from the documentation.
+     * 
+     * @default 0
+     */
+    chunkSize?: number;
+
+    /**
+     * Specifies the number of retries that the uploader can perform on the file failed to upload.
+     * By default, the uploader set 3 as maximum retries. This property must be specified to prevent infinity looping.
+     * @default 3
+     */
+    retryCount?: number;
+
+    /**
+     * Specifies the delay time in milliseconds that the automatic retry happens after the delay.
+     * @default 500
+     */
+    retryAfterDelay?: number;
+
 }
@@ -105,2 +131,5 @@
      * Specifies the HTML string that used to customize the content of each file in the list.
+     * 
+     * > For more information, refer to the [template](./template.html) section from the documentation.
+     * 
      * @default null
@@ -129,3 +158,3 @@ */
      * the uploader component considers the buttons property value.
-     * @default { browse : 'Browse', clear: 'Clear', upload: 'Upload' }
+     * @default { browse : 'Browse...', clear: 'Clear', upload: 'Upload' }
      */
@@ -159,2 +188,5 @@ buttons?: ButtonsPropsModel;
      * By default, the component creates wrapper around file input that will act as drop target.
+     * 
+     * > For more information, refer to the [drag-and-drop](./draganddrop.html) section from the documentation.
+     * 
      * @default null
@@ -171,16 +203,6 @@ */
      * * Type
-     * ```html
-     * <input type="file" id="fileupload"/>
-     * ```
-     * ```typescript
-     *   let preloadFiles = [{
-     *      { name: 'Nature', size: 500000, type: '.png' },
-     *      { name: 'TypeScript Succintly', size: 12000, type: '.pdf' },
-     *      { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' }
-     *   }]
-     *   let uploadObj: Uploader = new Uploader({
-     *      files: preloadFiles
-     *   });
-     *   uploadObj.appendTo("#fileupload");
-     * ```
+     * 
+     * {% codeBlock src="uploader/files-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="uploader/files-api/index.html" %}{% endcodeBlock %}
      * @default { name: '', size: null, type: '' }
@@ -245,2 +267,32 @@ */
 
+    /**
+     * Fires when the chunk file uploaded successfully.
+     * @event
+     */
+    chunkSuccess?: EmitType<Object>;
+
+    /**
+     * Fires if the chunk file failed to upload.
+     * @event
+     */
+    chunkFailure?: EmitType<Object>;
+
+    /**
+     * Fires if cancel the chunk file uploading.
+     * @event
+     */
+    canceling?: EmitType<Object>;
+
+    /**
+     * Fires if pause the chunk file uploading.
+     * @event
+     */
+    pausing?: EmitType<Object>;
+
+    /**
+     * Fires if resume the paused chunk file upload.
+     * @event
+     */
+    resuming?: EmitType<Object>;
+
 }

src/uploader/uploader.d.ts

 import { Component, EmitType } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { ChildProperty } from '@syncfusion/ej2-base';
+import { KeyboardEventArgs, ChildProperty } from '@syncfusion/ej2-base';
+import { Ajax } from '@syncfusion/ej2-base';
 import { UploaderModel, AsyncSettingsModel, ButtonsPropsModel, FilesPropModel } from './uploader-model';
@@ -25,3 +26,3 @@ export declare class FilesProp extends ChildProperty<FilesProp> {
      * Specifies the text or html content to browse button
-     * @default 'Browse'
+     * @default 'Browse...'
      */
@@ -45,2 +46,3 @@ browse: string | HTMLElement;
      * The upload operations could not perform without this property.
+     * @default ''
      */
@@ -52,14 +54,66 @@ saveUrl: string;
      * This property is optional.
+     * @default ''
      */
     removeUrl: string;
+    /**
+     * Specifies the chunk size to split the large file into chunks, and upload it to the server in a sequential order.
+     * If the chunk size property has value, the uploader enables the chunk upload by default.
+     * It must be specified in bytes value.
+     *
+     * > For more information, refer to the [chunk upload](./chunk-upload.html) section from the documentation.
+     *
+     * @default 0
+     */
+    chunkSize: number;
+    /**
+     * Specifies the number of retries that the uploader can perform on the file failed to upload.
+     * By default, the uploader set 3 as maximum retries. This property must be specified to prevent infinity looping.
+     * @default 3
+     */
+    retryCount: number;
+    /**
+     * Specifies the delay time in milliseconds that the automatic retry happens after the delay.
+     * @default 500
+     */
+    retryAfterDelay: number;
 }
 export interface FileInfo {
+    /**
+     * Returns the upload file name.
+     */
     name: string;
+    /**
+     * Returns the details about upload file.
+     */
     rawFile: string | Blob;
+    /**
+     * Returns the size of file in bytes.
+     */
     size: number;
+    /**
+     * Returns the status of file.
+     */
     status: string;
+    /**
+     * Returns the MIME type of file as a string. Returns empty string if the file’s type is not determined.
+     */
     type: string;
+    /**
+     * Returns the list of validation errors (if any).
+     */
     validationMessages: ValidationMessages;
+    /**
+     * Returns the current state of the file such as Failed, Canceled, Selected, Uploaded, or Uploading.
+     */
     statusCode: string;
 }
+export interface MetaData {
+    chunkIndex: number;
+    blob: Blob | string;
+    file: FileInfo;
+    start: number;
+    end: number;
+    retryCount: number;
+    request: Ajax;
+}
 export interface ValidationMessages {
@@ -70,28 +124,127 @@ minSize?: string;
 export interface SelectedEventArgs {
+    /**
+     * Returns the original event arguments.
+     */
+    event: MouseEvent | TouchEvent | DragEvent;
+    /**
+     * Defines whether the current action can be prevented.
+     */
     cancel: boolean;
+    /**
+     * Returns the list of selected files.
+     */
     filesData: FileInfo[];
+    /**
+     * Determines whether the file list generates based on the modified data.
+     */
     isModified: boolean;
+    /**
+     * Specifies the modified files data to generate the file items. The argument depends on `isModified` argument.
+     */
     modifiedFilesData: FileInfo[];
+    /**
+     * Specifies the step value to the progress bar.
+     */
     progressInterval: string;
 }
 export interface RemovingEventArgs {
+    /**
+     * Defines whether the current action can be prevented.
+     */
     cancel: boolean;
-    filesData: FileInfo[];
+    /**
+     * Defines the additional data with key and value pair format that will be submitted to the remove action.
+     */
     customFormData: {
         [key: string]: Object;
     }[];
+    /**
+     * Returns the original event arguments.
+     */
+    event: MouseEvent | TouchEvent | KeyboardEventArgs;
+    /**
+     * Returns the list of files’ details that will be removed.
+     */
+    filesData: FileInfo[];
+    /**
+     * Returns the XMLHttpRequest instance that is associated with remove action.
+     */
     currentRequest?: XMLHttpRequest;
+    /**
+     * Defines whether the selected raw file send to server remove action.
+     * Set true to send raw file.
+     * Set false to send file name only.
+     */
+    postRawFile?: boolean;
 }
 export interface ClearingEventArgs {
+    /**
+     * Defines whether the current action can be prevented.
+     */
     cancel: boolean;
+    /**
+     * Returns the list of files that will be cleared from the FileList.
+     */
     filesData: FileInfo[];
 }
 export interface UploadingEventArgs {
+    /**
+     * Returns the list of files that will be uploaded.
+     */
     fileData: FileInfo;
+    /**
+     * Defines the additional data in key and value pair format that will be submitted to the upload action.
+     */
     customFormData: {
         [key: string]: Object;
     }[];
+    /**
+     * Defines whether the current action can be prevented.
+     */
     cancel: boolean;
+    /**
+     * Returns the chunk size in bytes if the chunk upload is enabled.
+     */
+    chunkSize?: number;
+    /**
+     * Returns the XMLHttpRequest instance that is associated with upload action.
+     */
     currentRequest?: XMLHttpRequest;
 }
+export interface CancelEventArgs {
+    /**
+     * Defines whether the current action can be prevented.
+     */
+    cancel: boolean;
+    /**
+     * Returns the original event arguments.
+     */
+    event: ProgressEventInit;
+    /**
+     * Returns the file details that will be canceled.
+     */
+    fileData: FileInfo;
+}
+export interface PauseResumeEventArgs {
+    /**
+     * Returns the original event arguments.
+     */
+    event: Event;
+    /**
+     * Returns the file data that is Paused or Resumed.
+     */
+    file: FileInfo;
+    /**
+     * Returns the total number of chunks.
+     */
+    chunkCount: number;
+    /**
+     * Returns the index of chunk that is Paused or Resumed.
+     */
+    chunkIndex: number;
+    /**
+     * Returns the chunk size value in bytes.
+     */
+    chunkSize: number;
+}
 /**
@@ -119,2 +272,4 @@ * The uploader component allows to upload images, documents, and other files from local to server.
     private clearButton;
+    private pauseButton;
+    private formElement;
     private dropAreaWrapper;
@@ -132,4 +287,7 @@ private filesData;
     private isForm;
+    private allTypes;
     private keyConfigs;
     private localeText;
+    private pausedData;
+    private uploadMetaData;
     /**
@@ -153,2 +311,5 @@ * Configures the save and remove URL to perform the upload operations in the server asynchronously.
      * Specifies the HTML string that used to customize the content of each file in the list.
+     *
+     * > For more information, refer to the [template](./template.html) section from the documentation.
+     *
      * @default null
@@ -174,3 +335,3 @@ */
      * the uploader component considers the buttons property value.
-     * @default { browse : 'Browse', clear: 'Clear', upload: 'Upload' }
+     * @default { browse : 'Browse...', clear: 'Clear', upload: 'Upload' }
      */
@@ -200,2 +361,5 @@ buttons: ButtonsPropsModel;
      * By default, the component creates wrapper around file input that will act as drop target.
+     *
+     * > For more information, refer to the [drag-and-drop](./draganddrop.html) section from the documentation.
+     *
      * @default null
@@ -211,16 +375,6 @@ */
      * * Type
-     * ```html
-     * <input type="file" id="fileupload"/>
-     * ```
-     * ```typescript
-     *   let preloadFiles = [{
-     *      { name: 'Nature', size: 500000, type: '.png' },
-     *      { name: 'TypeScript Succintly', size: 12000, type: '.pdf' },
-     *      { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' }
-     *   }]
-     *   let uploadObj: Uploader = new Uploader({
-     *      files: preloadFiles
-     *   });
-     *   uploadObj.appendTo("#fileupload");
-     * ```
+     *
+     * {% codeBlock src="uploader/files-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="uploader/files-api/index.html" %}{% endcodeBlock %}
      * @default { name: '', size: null, type: '' }
@@ -276,2 +430,27 @@ */
     /**
+     * Fires when the chunk file uploaded successfully.
+     * @event
+     */
+    chunkSuccess: EmitType<Object>;
+    /**
+     * Fires if the chunk file failed to upload.
+     * @event
+     */
+    chunkFailure: EmitType<Object>;
+    /**
+     * Fires if cancel the chunk file uploading.
+     * @event
+     */
+    canceling: EmitType<Object>;
+    /**
+     * Fires if pause the chunk file uploading.
+     * @event
+     */
+    pausing: EmitType<Object>;
+    /**
+     * Fires if resume the paused chunk file upload.
+     * @event
+     */
+    resuming: EmitType<Object>;
+    /**
      * Triggers when change the Uploader value.
@@ -316,2 +495,3 @@ */
     private keyActionHandler(e);
+    private getCurrentMetaData(fileInfo?, e?);
     private setReverseFocus(e);
@@ -330,7 +510,8 @@ private setTabFocus(e);
     private removeFilesData(file, customTemplate);
-    private removeUploadedFile(file, eventArgs, custom);
+    private removeUploadedFile(file, eventArgs, removeDirectly, custom);
+    private updateFormData(formData, customData);
     private removeCompleted(e, files, customTemplate);
     private removeFailed(e, files, customTemplate);
     private onSelectFiles(args);
-    private clearData();
+    private clearData(singleUpload?);
     private updateSortedFileList(filesData);
@@ -352,5 +533,9 @@ private checkExtension(files);
     private changeProgressValue(li, progressValue);
-    private uploadInProgress(e, files, customUI?);
-    private uploadComplete(e, files, customUI?);
-    private uploadFailed(e, files);
+    private uploadInProgress(e, files, customUI?, request?);
+    private removecanceledFile(e, file);
+    private renderFailureState(e, file, liElement);
+    private reloadcanceledFile(e, file, liElement);
+    private uploadComplete(e, file, customUI?);
+    private raiseSuccessEvent(e, file);
+    private uploadFailed(e, file);
     private updateProgressBarClasses(li, className);
@@ -365,3 +550,19 @@ private removeProgressbar(li, callType);
     private checkHTMLAttributes();
-    private updateFormData(formData, customData);
+    private chunkUpload(file, custom?);
+    private sendRequest(file, metaData, custom?);
+    private eventCancelByArgs(e, eventArgs, file);
+    private checkChunkUpload();
+    private chunkUploadComplete(e, metaData, custom?);
+    private sendNextRequest(metaData);
+    private removeChunkFile(e, metaData, custom);
+    private pauseUpload(metaData, e?, custom?);
+    private abortUpload(metaData, custom, eventArgs?);
+    private resumeUpload(metaData, e?, custom?);
+    private updateMetaData(metaData);
+    private removeChunkProgressBar(metaData);
+    private chunkUploadFailed(e, metaData, custom?);
+    private retryRequest(liElement, metaData, custom?);
+    private checkPausePlayAction(e);
+    private retryUpload(metaData, fromcanceledStage?);
+    private chunkUploadInProgress(e, metaData, custom?);
     /**
@@ -390,6 +591,8 @@ * It is used to convert bytes value into kilobytes or megabytes depending on the size based
      * upload the specific file based on its argument.
-     * @param { FileInfo[] } files - specifies the files data for upload.
+     * @param { FileInfo | FileInfo[] } files - specifies the files data for upload.
      * @returns void
      */
-    upload(files: FileInfo[], custom?: boolean): void;
+    upload(files: FileInfo | FileInfo[], custom?: boolean): void;
+    private validateFileType(files);
+    private uploadFiles(files, custom?);
     /**
@@ -400,5 +603,7 @@ * Remove the uploaded file from server manually by calling the remove URL action.
      * @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server.
+     * @param { boolean } customTemplate - Set true if the component rendering with customize template.
+     * @param { boolean } removeDirectly - Set true if files remove without removing event.
      * @returns void
      */
-    remove(fileData?: FileInfo | FileInfo[], customTemplate?: boolean): void;
+    remove(fileData?: FileInfo | FileInfo[], customTemplate?: boolean, removeDirectly?: boolean, args?: MouseEvent | TouchEvent | KeyboardEventArgs): void;
     /**
@@ -409,3 +614,40 @@ * Clear all the file entries from list that can be uploaded files or added in upload queue.
     clearAll(): void;
+    /**
+     * Get the data of files which are shown in file list.
+     * @returns FileInfo[]
+     */
     getFilesData(): FileInfo[];
+    /**
+     * Pauses the in-progress chunked upload based on the file data.
+     * @param { FileInfo | FileInfo[] } fileData - specifies the files data to pause from uploading.
+     * @param { boolean } custom - Set true if used custom UI.
+     * @returns void
+     */
+    pause(fileData: FileInfo | FileInfo[], custom?: boolean): void;
+    private pauseUploading(fileData, custom?);
+    private getFiles(fileData);
+    /**
+     * Resumes the chunked upload that is previously paused based on the file data.
+     * @param { FileInfo | FileInfo[] } fileData - specifies the files data to resume the paused file.
+     * @param { boolean } custom - Set true if used custom UI.
+     * @returns void
+     */
+    resume(fileData: FileInfo | FileInfo[], custom?: boolean): void;
+    private resumeFiles(fileData, custom?);
+    /**
+     * Retries the canceled or failed file upload based on the file data.
+     * @param { FileInfo | FileInfo[] } fileData - specifies the files data to retry the canceled or failed file.
+     * @param { boolean } fromcanceledStage - Set true to retry from canceled stage and set false to retry from initial stage.
+     * @returns void
+     */
+    retry(fileData: FileInfo | FileInfo[], fromcanceledStage?: boolean): void;
+    private retryFailedFiles(fileData, fromcanceledStage?);
+    /**
+     * Stops the in-progress chunked upload based on the file data.
+     * When the file upload is canceled, the partially uploaded file is removed from server.
+     * @param { FileInfo | FileInfo[] } fileData - specifies the files data to cancel the progressing file.
+     * @returns void
+     */
+    cancel(fileData: FileInfo[]): void;
+    private cancelUpload(fileData);
 }

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

18985744

increased by42.02%

Number of package files

179

increased by15.48%

Lines of code

181328

increased by51.83%

Number of lines in readme file

8

increased by14.29%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@syncfusion/ej2-splitbuttons@~16.2.41

• + Added@syncfusion/ej2-base@16.2.50(transitive)

• + Added@syncfusion/ej2-buttons@16.2.50(transitive)

• + Added@syncfusion/ej2-popups@16.2.52(transitive)

• + Added@syncfusion/ej2-splitbuttons@16.2.50(transitive)

• - Removed@syncfusion/ej2-base@16.1.38(transitive)

• - Removed@syncfusion/ej2-buttons@16.1.48(transitive)

• - Removed@syncfusion/ej2-popups@16.1.47(transitive)

• Updated@syncfusion/ej2-base@~16.2.41

• Updated@syncfusion/ej2-buttons@~16.2.41

• Updated@syncfusion/ej2-popups@~16.2.41