@syncfusion/ej2-inputs 20.3.56 → 20.4.38

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

@@ -326,6 +326,10 @@ var Input;
         });
     }
     Input.wireClearBtnEvents = wireClearBtnEvents;
+    function destroy() {
+        
+    }
+    Input.destroy = destroy;
     function validateLabel(element, floatLabelType) {
         var parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
@@ -381,7 +385,7 @@ var Input;
             if (!isNullOrUndefined(parentElement)) {
                 var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];
                 if (!isNullOrUndefined(button)) {
-                    if (element.value && parentElement.classList.contains('e-input-focus')) {
+                    if (element.value && !isNullOrUndefined(parentElement) && parentElement.classList.contains('e-input-focus')) {
                         removeClass([button], CLASSNAMES.CLEARICONHIDE);
                     }
                     else {
@@ -915,6 +919,7 @@ var CONTROL = 'e-control';
 var NUMERIC_FOCUS = 'e-input-focus';
 var HIDDENELEMENT = 'e-numeric-hidden';
 var wrapperAttributes = ['title', 'style', 'class'];
+var selectionTimeOut = 0;
 /**
  * Represents the NumericTextBox component that allows the user to enter only numeric values.
  * ```html
@@ -977,7 +982,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             this.element = input;
             setValue('ej2_instances', ejInstance, this.element);
         }
-        attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });
+        attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });
         var localeText = {
             incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
         };
@@ -1180,7 +1185,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {
             var key = _a[_i];
             if (key.indexOf('data') === 0) {
-                this.hiddenInput.setAttribute(key, attr[key]);
+                this.hiddenInput.setAttribute(key, attr["" + key]);
             }
         }
     };
@@ -1189,7 +1194,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var pro = _a[_i];
                 if (wrapperAttributes.indexOf(pro) < 0) {
-                    this.element.setAttribute(pro, this.htmlAttributes[pro]);
+                    this.element.setAttribute(pro, this.htmlAttributes["" + pro]);
                 }
             }
         }
@@ -1210,19 +1215,19 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                 var pro = _a[_i];
                 if (wrapperAttributes.indexOf(pro) > -1) {
                     if (pro === 'class') {
-                        var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);
+                        var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes["" + pro]);
                         if (updatedClassValue !== '') {
                             addClass([this.container], updatedClassValue.split(' '));
                         }
                     }
                     else if (pro === 'style') {
                         var numericStyle = this.container.getAttribute(pro);
-                        numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :
-                            this.htmlAttributes[pro];
+                        numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes["" + pro]) :
+                            this.htmlAttributes["" + pro];
                         this.container.setAttribute(pro, numericStyle);
                     }
                     else {
-                        this.container.setAttribute(pro, this.htmlAttributes[pro]);
+                        this.container.setAttribute(pro, this.htmlAttributes["" + pro]);
                     }
                 }
             }
@@ -1557,8 +1562,8 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);
             var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
             //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
-            var nonZeroRegex = new RegExp('[^1-9]+$');
-            if (nonZeroRegex.test(this.element.value)) {
+            var nonZeroRegex = new RegExp('[^0-9]+$');
+            if (nonZeroRegex.test(this.element.value) || ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) && this.element.value[this.element.value.length - 1] === '0')) {
                 current = this.value;
             }
             var eventArgs = {
@@ -1769,6 +1774,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         if (this.decimals && this.validateDecimalOnType) {
             fractionRule = '{0,' + this.decimals + '}';
         }
+        // eslint-disable-next-line detect-non-literal-regexp
         return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule +
             ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
     };
@@ -1793,6 +1799,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
     };
     NumericTextBox.prototype.focusHandler = function (event) {
         var _this = this;
+        clearTimeout(selectionTimeOut);
         this.focusEventArgs = { event: event, value: this.value, container: this.container };
         this.trigger('focus', this.focusEventArgs);
         if (!this.enabled || this.readonly) {
@@ -1810,7 +1817,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                 }
                 else {
                     var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;
-                    setTimeout(function () {
+                    selectionTimeOut = setTimeout(function () {
                         _this.element.setSelectionRange(0, formatValue_1.length);
                     }, delay);
                 }
@@ -1986,13 +1993,22 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }
         var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
             'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',
-            'aria-valuemin', 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
+            'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-invalid'];
         for (var i = 0; i < attrArray.length; i++) {
             this.element.removeAttribute(attrArray[i]);
         }
         this.element.classList.remove('e-input');
         this.container.insertAdjacentElement('afterend', this.element);
         detach(this.container);
+        this.spinUp = null;
+        this.spinDown = null;
+        this.container = null;
+        this.hiddenInput = null;
+        this.changeEventArgs = null;
+        this.blurEventArgs = null;
+        this.focusEventArgs = null;
+        this.inputWrapper = null;
+        Input.destroy();
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns */
@@ -2058,6 +2074,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'enabled':
                     Input.setEnabled(newProp.enabled, this.element);
+                    this.bindClearEvent();
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(newProp.enableRtl, [this.container]);
@@ -2335,6 +2352,7 @@ function createMask() {
         if (!isNullOrUndefined(this.customCharacters)) {
             for (var i = 0; i < this.promptMask.length; i++) {
                 if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {
+                    // eslint-disable-next-line detect-non-literal-regexp
                     this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);
                 }
             }
@@ -2530,7 +2548,7 @@ function maskInputFocusHandler(event) {
         event: event,
         value: this.value,
         maskedValue: inputElement.value,
-        container: this.inputObj.container,
+        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,
         selectionEnd: inputElement.selectionEnd
     };
     if (!this.isClicked) {
@@ -2597,21 +2615,21 @@ function maskInputFocusHandler(event) {
                             event: event,
                             value: _this.value,
                             maskedValue: inputElement.value,
-                            container: _this.inputObj.container,
+                            container: !isNullOrUndefined(_this.inputObj) ? _this.inputObj.container : _this.inputObj,
                             selectionEnd: inputElement.selectionEnd
                         };
                         triggerFocus.call(_this, eventArgs, inputElement);
-                    });
+                    }, 110);
                     break;
                 }
             }
-            if (isNullOrUndefined(inputElement.value.match(this.promptChar))) {
+            if (isNullOrUndefined(inputElement.value.match(escapeRegExp(this.promptChar)))) {
                 eventArgs = {
                     selectionStart: inputElement.selectionStart,
                     event: event,
                     value: this.value,
                     maskedValue: inputElement.value,
-                    container: this.inputObj.container,
+                    container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,
                     selectionEnd: inputElement.selectionEnd
                 };
                 triggerFocus.call(this, eventArgs, inputElement);
@@ -2626,12 +2644,15 @@ function triggerFocus(eventArgs, inputElement) {
         inputElement.selectionEnd = eventArgs.selectionEnd;
     });
 }
+function escapeRegExp(text) {
+    return !isNullOrUndefined(text) ? text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&') : text;
+}
 function maskInputBlurHandler(event) {
     this.blurEventArgs = {
         event: event,
         value: this.value,
         maskedValue: this.element.value,
-        container: this.inputObj.container
+        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,
     };
     this.trigger('blur', this.blurEventArgs);
     if (this.mask) {
@@ -2866,8 +2887,8 @@ function removeMaskInputValues(event) {
                         ++startIndex;
                     }
                     var oldValue = this.element.value[sIndex];
-                    if ((isNullOrUndefined(this.regExpCollec[curMask]) && (!isNullOrUndefined(this.customCharacters)
-                        && isNullOrUndefined(this.customCharacters[curMask]))
+                    if ((isNullOrUndefined(this.regExpCollec["" + curMask]) && (!isNullOrUndefined(this.customCharacters)
+                        && isNullOrUndefined(this.customCharacters["" + curMask]))
                         && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '['
                             && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']')))
                         || (this.promptMask[sIndex] !== this.promptChar && isNullOrUndefined(this.customCharacters))) {
@@ -3079,8 +3100,8 @@ function validateValue(key, isCtrlKey, event) {
                 if (this.hiddenMask[startIndex] === '\\' && this.hiddenMask[startIndex + 1] === key) {
                     isEqualVal = true;
                 }
-                if ((isNullOrUndefined(this.regExpCollec[curMask]) && (isNullOrUndefined(this.customCharacters)
-                    || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters[curMask])))
+                if ((isNullOrUndefined(this.regExpCollec["" + curMask]) && (isNullOrUndefined(this.customCharacters)
+                    || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters["" + curMask])))
                     && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '['
                         && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']')))
                     || ((this.promptMask[startIndex] !== this.promptChar) && isNullOrUndefined(this.customCharacters))
@@ -3090,22 +3111,25 @@ function validateValue(key, isCtrlKey, event) {
                     curMask = this.hiddenMask[startIndex];
                 }
             }
-            if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[curMask])) {
-                var customValStr = this.customCharacters[curMask];
+            if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters["" + curMask])) {
+                var customValStr = this.customCharacters["" + curMask];
                 var customValArr = customValStr.split(',');
                 for (var i = 0; i < customValArr.length; i++) {
+                    // eslint-disable-next-line detect-non-literal-regexp
                     if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {
                         allowText = true;
                         break;
                     }
                 }
+                // eslint-disable-next-line detect-non-literal-regexp
             }
-            else if (!isNullOrUndefined(this.regExpCollec[curMask]) && keyValue.match(new RegExp(this.regExpCollec[curMask]))
+            else if (!isNullOrUndefined(this.regExpCollec["" + curMask]) && keyValue.match(new RegExp(this.regExpCollec["" + curMask]))
                 && this.promptMask[startIndex] === this.promptChar) {
                 allowText = true;
             }
             else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['
                 && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'
+                // eslint-disable-next-line detect-non-literal-regexp
                 && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {
                 allowText = true;
             }
@@ -3570,7 +3594,7 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (wrapperAttr.indexOf(key) < 0) {
-                    this.element.setAttribute(key, this.htmlAttributes[key]);
+                    this.element.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -3591,19 +3615,19 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                 var key = _a[_i];
                 if (wrapperAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValues = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValues !== '') {
                             addClass([this.inputObj.container], updatedClassValues.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var maskStyle = this.inputObj.container.getAttribute(key);
-                        maskStyle = !isNullOrUndefined(maskStyle) ? (maskStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        maskStyle = !isNullOrUndefined(maskStyle) ? (maskStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.inputObj.container.setAttribute(key, maskStyle);
                     }
                     else {
-                        this.inputObj.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.inputObj.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -3780,10 +3804,13 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     else {
                         this.promptChar = '_';
                     }
+                    // eslint-disable-next-line detect-non-literal-regexp
                     var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     if (this.promptMask === this.element.value) {
+                        // eslint-disable-next-line detect-non-literal-regexp
                         value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     }
+                    // eslint-disable-next-line detect-non-literal-regexp
                     this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     this.undoCollec = this.redoCollec = [];
                     setElementValue.call(this, value);
@@ -3845,8 +3872,14 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
             this.element.removeAttribute(attrArray[i]);
         }
         this.element.classList.remove('e-input');
-        this.inputObj.container.insertAdjacentElement('afterend', this.element);
-        detach(this.inputObj.container);
+        if (this.inputObj) {
+            this.inputObj.container.insertAdjacentElement('afterend', this.element);
+            detach(this.inputObj.container);
+        }
+        this.blurEventArgs = null;
+        Input.destroy();
+        this.changeEventArgs = null;
+        this.inputObj = null;
         _super.prototype.destroy.call(this);
     };
     __decorate$1([
@@ -4436,7 +4469,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.createSecondHandle = function () {
         this.secondHandle = this.createElement('div', {
             attrs: {
-                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'
+                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
             }
         });
         this.secondHandle.classList.add(classNames.sliderSecondHandle);
@@ -4445,7 +4478,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.createFirstHandle = function () {
         this.firstHandle = this.createElement('div', {
             attrs: {
-                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'
+                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
             }
         });
         this.firstHandle.classList.add(classNames.sliderFirstHandle);
@@ -4875,6 +4908,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.sliderContainer.classList.add(classNames.materialSlider);
             this.tooltipValue();
             this.tooltipObj.animation.close.effect = 'None';
+            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(this.firstHandle);
         }
     };
@@ -6203,6 +6237,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.openTooltip = function (target) {
         if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {
             this.tooltipValue();
+            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(target);
             this.tooltipTarget = target;
         }
@@ -7966,7 +8001,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         var keyValue;
         for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {
             var key = _a[_i];
-            if (this.preLocaleObj[key] === val) {
+            if (this.preLocaleObj["" + key] === val) {
                 keyValue = key;
             }
         }
@@ -8017,7 +8052,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Uploader.prototype.preRender = function () {
-        this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload',
+        this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload', invalidFileName: 'File Name is not allowed',
             dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',
             invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',
             uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',
@@ -8344,7 +8379,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var pro = _a[_i];
                 if (wrapperAttr$1.indexOf(pro) < 0) {
-                    this.element.setAttribute(pro, this.htmlAttributes[pro]);
+                    this.element.setAttribute(pro, this.htmlAttributes["" + pro]);
                 }
             }
         }
@@ -8355,19 +8390,19 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 var pro = _a[_i];
                 if (wrapperAttr$1.indexOf(pro) > -1) {
                     if (pro === 'class') {
-                        var updatedClassValues = (this.htmlAttributes[pro].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValues = (this.htmlAttributes["" + pro].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValues !== '') {
                             addClass([this.uploadWrapper], updatedClassValues.split(' '));
                         }
                     }
                     else if (pro === 'style') {
                         var uploadStyle = this.uploadWrapper.getAttribute(pro);
-                        uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes[pro]) :
-                            this.htmlAttributes[pro];
+                        uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes["" + pro]) :
+                            this.htmlAttributes["" + pro];
                         this.uploadWrapper.setAttribute(pro, uploadStyle);
                     }
                     else {
-                        this.uploadWrapper.setAttribute(pro, this.htmlAttributes[pro]);
+                        this.uploadWrapper.setAttribute(pro, this.htmlAttributes["" + pro]);
                     }
                 }
             }
@@ -8402,7 +8437,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     Uploader.prototype.sequenceUpload = function (fileData) {
         if (this.filesData.length - fileData.length === 0 ||
             this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {
-            ++this.count;
+            if (this.multiple || this.count < 0) {
+                ++this.count;
+            }
             var isFileListCreated = this.showFileList ? false : true;
             if (typeof this.filesData[this.count] === 'object') {
                 this.isFirstFileOnSelection = false;
@@ -8750,7 +8787,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 var data = customData[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 var value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data["" + e];
                 });
                 formData.append(Object.keys(data)[0], value);
             };
@@ -8766,7 +8803,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 var data = currentRequest[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 var value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data["" + e];
                 });
                 request.setRequestHeader(Object.keys(data)[0], value);
             };
@@ -8977,6 +9014,20 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         if (this.allowedExtensions.indexOf('*') > -1) {
             this.allTypes = true;
         }
+        if (this.enableHtmlSanitizer) {
+            for (var i = 0; i < fileData.length; i++) {
+                var sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
+                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[i].name);
+                if (sanitizeFileName != fileData[i].name) {
+                    var encodedFileName = targetFiles[i].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+                        return '&#' + i.charCodeAt(0) + ';';
+                    });
+                    fileData[i].name = encodedFileName;
+                    fileData[i].status = this.localizedTexts('invalidFileName');
+                    fileData[i].statusCode = '0';
+                }
+            }
+        }
         if (!this.allTypes) {
             fileData = this.checkExtension(fileData);
         }
@@ -9753,7 +9804,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             this.pauseButton = null;
         }
         /* istanbul ignore next */
-        liElement.classList.add(RESTRICT_RETRY);
+        if (!isNullOrUndefined(liElement)) {
+            liElement.classList.add(RESTRICT_RETRY);
+        }
         this.upload([file]);
     };
     /* istanbul ignore next */
@@ -10580,6 +10633,14 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             detach(this.uploadWrapper);
         }
         this.uploadWrapper = null;
+        this.uploadWrapper = null;
+        this.browseButton = null;
+        this.dropAreaWrapper = null;
+        this.dropZoneElement = null;
+        this.dropArea = null;
+        this.keyboardModule = null;
+        this.clearButton = null;
+        this.uploadButton = null;
         _super.prototype.destroy.call(this);
     };
     /**
@@ -11077,6 +11138,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     __decorate$4([
         Property(true)
     ], Uploader.prototype, "autoUpload", void 0);
+    __decorate$4([
+        Property(true)
+    ], Uploader.prototype, "enableHtmlSanitizer", void 0);
     __decorate$4([
         Complex({}, ButtonsProps)
     ], Uploader.prototype, "buttons", void 0);
@@ -11708,7 +11772,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
             if (!wrapper.classList.contains(HIDEHEX)) {
                 var hexInput = this.createElement('input', {
                     className: HEX,
-                    attrs: { 'maxlength': '7', 'spellcheck': 'false' }
+                    attrs: { 'maxlength': '7', 'spellcheck': 'false', 'aria-label': 'HEX' }
                 });
                 container.appendChild(hexInput);
                 Input.createInput({
@@ -11750,7 +11814,8 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
     };
     ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {
         var valueSwitchBtn = this.createElement('button', {
-            className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH
+            className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH,
+            attrs: { 'title': 'Toggle format' }
         });
         targetEle.appendChild(valueSwitchBtn);
         if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {
@@ -11802,6 +11867,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         });
         tooltip.createElement = this.createElement;
         tooltip.appendTo(this.container);
+        // eslint-disable-next-line
         tooltip.open(this.container);
         this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
         select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
@@ -13346,7 +13412,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                         }
                         break;
                     case 'value':
-                        if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) {
+                        if (((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) && this.element.value !== '') {
                             this.setProperties({ value: this.element.value }, !isDynamic);
                         }
                         break;
@@ -13419,19 +13485,19 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                 var key = _a[_i];
                 if (containerAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);
+                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes["" + key]);
                         if (updatedClassValues !== '') {
                             addClass([this.textboxWrapper.container], updatedClassValues.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var setStyle = this.textboxWrapper.container.getAttribute(key);
-                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.textboxWrapper.container.setAttribute(key, setStyle);
                     }
                     else {
-                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -13442,7 +13508,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (containerAttr.indexOf(key) < 0) {
-                    this.element.setAttribute(key, this.htmlAttributes[key]);
+                    this.element.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -13648,6 +13714,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
             detach(this.textboxWrapper.container);
         }
         this.textboxWrapper = null;
+        Input.destroy();
         _super.prototype.destroy.call(this);
     };
     /**
@@ -13689,17 +13756,17 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                 Input.setReadonly(this.readonly, this.respectiveElement);
             }
             else if (key === 'class') {
-                this.respectiveElement.classList.add(attributes$$1[key]);
+                this.respectiveElement.classList.add(attributes$$1["" + key]);
             }
             else if (key === 'placeholder') {
-                this.setProperties({ placeholder: attributes$$1[key] }, true);
+                this.setProperties({ placeholder: attributes$$1["" + key] }, true);
                 Input.setPlaceholder(this.placeholder, this.respectiveElement);
             }
             else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {
-                this.respectiveElement.setAttribute(key, attributes$$1[key]);
+                this.respectiveElement.setAttribute(key, attributes$$1["" + key]);
             }
             else {
-                this.respectiveElement.setAttribute(key, attributes$$1[key]);
+                this.respectiveElement.setAttribute(key, attributes$$1["" + key]);
             }
         }
     };
@@ -13868,7 +13935,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     SignatureBase.prototype.initialize = function (element, dotnetRef) {
         this.element = element;
         this.canvasContext = this.element.getContext('2d');
-        this.canvasContext.canvas.tabIndex = 0;
+        this.canvasContext.canvas.tabIndex = -1;
         if (dotnetRef) {
             this.dotnetRef = dotnetRef;
             this.isBlazor = true;
@@ -13925,6 +13992,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
         }
     };
+    // eslint-disable-next-line
     SignatureBase.prototype.mouseDownHandler = function (e, canvas, panStart, zoomState) {
         if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
             if (e.type === 'touchstart') {
@@ -14255,20 +14323,14 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     SignatureBase.prototype.enableOrDisable = function (isDisable) {
         this.disabled = isDisable;
         if (isDisable) {
-            this.reDraw('0.5');
+            this.canvasContext.canvas.style.filter = "opacity(0.5)";
             this.isRead(true);
         }
         else {
-            this.reDraw('1');
+            this.canvasContext.canvas.style.filter = "";
             this.isRead(false);
         }
     };
-    SignatureBase.prototype.reDraw = function (opacity) {
-        var data = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
-        this.canvasContext.clearRect(0, 0, this.element.width, this.element.height);
-        this.element.style.opacity = opacity;
-        this.canvasContext.putImageData(data, 0, 0);
-    };
     SignatureBase.prototype.updateSnapCollection = function (isClear) {
         if (isNullOrUndefined(this.incStep)) {
             this.incStep = -1;
@@ -14963,6 +15025,790 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
  * Signature modules
  */
 
+var __extends$9 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ICONCSS = 'e-rating-icon e-icons e-star-filled';
+var ITEMLIST = 'e-rating-item-list';
+var ITEMCONTAINER = 'e-rating-item-container';
+var SELECTED = 'e-rating-selected';
+var INTERMEDIATE = 'e-rating-intermediate';
+var LABEL = 'e-rating-label';
+var RESET = 'e-icons e-reset';
+var HIDDEN = 'e-rating-hidden';
+var DISABLED$2 = 'e-disabled';
+var READONLY = 'e-rating-readonly';
+var RTL$2 = 'e-rtl';
+var ANIMATION = 'e-rating-animation';
+var FULLTEMPLATE = 'e-rating-full';
+var EMPTYTEMPLATE = 'e-rating-empty';
+var SELECTEDVALUE = 'e-selected-value';
+var RATINGVALUE = '--rating-value';
+/**
+ * Defines the position of the label in the rating.
+ */
+var LabelPosition;
+(function (LabelPosition) {
+    /**
+     * Shows the label above the rating.
+     */
+    LabelPosition["Top"] = "Top";
+    /**
+     * Shows the label below the rating.
+     */
+    LabelPosition["Bottom"] = "Bottom";
+    /**
+     * Shows the label to the left of rating.
+     */
+    LabelPosition["Left"] = "Left";
+    /**
+     * Shows the label to the right of rating.
+     */
+    LabelPosition["Right"] = "Right";
+})(LabelPosition || (LabelPosition = {}));
+/**
+ * Defines the minimum increase in the value in Rating Control.
+ */
+var PrecisionType;
+(function (PrecisionType) {
+    /**
+     * Process the value as whole numbers.
+     */
+    PrecisionType["Full"] = "Full";
+    /**
+     * Process the value in terms of 0.5 (half).
+     */
+    PrecisionType["Half"] = "Half";
+    /**
+     * Process the value in terms of 0.25 (quarter).
+     */
+    PrecisionType["Quarter"] = "Quarter";
+    /**
+     * Process the value in terms of 0.1.
+     */
+    PrecisionType["Exact"] = "Exact";
+})(PrecisionType || (PrecisionType = {}));
+var Rating = /** @__PURE__ @class */ (function (_super) {
+    __extends$9(Rating, _super);
+    /**
+     * Constructor for creating the widget
+     *
+     * @param  {RatingModel} options - Specifies the rating model
+     * @param  {string|HTMLButtonElement} element - Specifies the target element
+     */
+    function Rating(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.itemElements = [];
+        _this.tooltipOpen = false;
+        return _this;
+    }
+    Rating.prototype.preRender = function () {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+        this.keyConfigs = {
+            downarrow: 'downarrow',
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            uparrow: 'uparrow',
+            space: 'space'
+        };
+    };
+    Rating.prototype.render = function () {
+        this.initialize();
+        this.updateMinValue();
+        this.updateTemplateFunction();
+        this.renderItems();
+        this.updatePrecision();
+        this.displayLabel();
+    };
+    Rating.prototype.initialize = function () {
+        this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-container ' });
+        this.element.parentNode.insertBefore(this.wrapper, this.element);
+        this.wrapper.appendChild(this.element);
+        if ((this.element.getAttribute('name') == null)) {
+            this.element.setAttribute('name', this.element.id);
+        }
+        attributes(this.element, { 'aria-label': 'rating' });
+        this.renderItemList();
+        this.updateReset();
+        this.updateDisabled();
+        this.wrapper.classList[this.readOnly ? 'add' : 'remove'](READONLY);
+        this.wrapper.classList[!this.visible ? 'add' : 'remove'](HIDDEN);
+        this.wrapper.classList[this.enableRtl ? 'add' : 'remove'](RTL$2);
+        this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);
+        if (this.cssClass) {
+            addClass([this.wrapper], this.cssClass.split(' '));
+        }
+        this.updateTooltip();
+        this.wireKeyboardEvent();
+    };
+    Rating.prototype.updateDisabled = function () {
+        this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED$2);
+        attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });
+        if (this.allowReset) {
+            this.updateResetButton();
+        }
+    };
+    Rating.prototype.updateResetButton = function () {
+        var isDisabled = (this.value <= this.min) || this.disabled;
+        this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED$2);
+        attributes(this.resetElement, { 'aria-label': 'resetbutton', 'role': 'button',
+            'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });
+    };
+    Rating.prototype.renderItemList = function () {
+        var _this = this;
+        this.ratingItemList = this.createElement('div', {
+            className: ITEMLIST,
+            id: this.element.id + '_item-list',
+            attrs: { 'tabindex': '0' }
+        });
+        attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });
+        this.wrapper.appendChild(this.ratingItemList);
+        EventHandler.add(this.ratingItemList, 'touchmove', function (e) { return _this.touchMoveHandler(e); }, this);
+        EventHandler.add(this.ratingItemList, 'touchend', this.touchEndHandler, this);
+    };
+    Rating.prototype.touchMoveHandler = function (e) {
+        var rect = this.ratingItemList.getBoundingClientRect();
+        var x = e.touches[0].clientX - rect.x;
+        var currValue = (x / rect.width) * this.itemsCount;
+        currValue = (this.enableRtl) ? (this.itemsCount - currValue) : currValue;
+        currValue = currValue < this.min ? this.min : currValue > this.itemsCount ? this.itemsCount : currValue;
+        currValue = this.validateValue(currValue);
+        var element = currValue === 0 ? null : this.itemElements[parseInt((Math.ceil(currValue) - 1).toString(), 10)];
+        if (currValue === this.currentValue) {
+            if (this.showTooltip && element) {
+                this.openRatingTooltip(element, false);
+            }
+            return;
+        }
+        var previousValue = this.currentValue;
+        this.updateCurrentValue(currValue);
+        this.triggerChange(e, currValue);
+        if (this.showTooltip) {
+            if (element) {
+                if (Math.ceil(currValue) !== Math.ceil(previousValue)) {
+                    this.closeRatingTooltip();
+                }
+                this.openRatingTooltip(element, true);
+            }
+            else {
+                this.closeRatingTooltip();
+            }
+        }
+    };
+    Rating.prototype.touchEndHandler = function () {
+        this.closeRatingTooltip();
+    };
+    Rating.prototype.updateTemplateFunction = function () {
+        this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
+        this.fullTemplateFunction = this.fullTemplate ? this.getTemplateString(this.fullTemplate) : null;
+    };
+    Rating.prototype.renderItems = function () {
+        var _this = this;
+        for (var i = 0; i < this.itemsCount; i++) {
+            var ratingItemContainer = this.createElement('span', { className: ITEMCONTAINER });
+            var spanItem = this.createElement('span', { className: 'e-rating-item' });
+            var ratingValue = this.getRatingValue(this.value, i);
+            this.renderItemContent(spanItem, ratingValue, i);
+            ratingItemContainer.appendChild(spanItem);
+            this.wireItemsEvents(ratingItemContainer, i + 1);
+            this.itemElements.push(ratingItemContainer);
+            var eventArgs = { element: ratingItemContainer, value: i + 1 };
+            this.trigger('beforeItemRender', eventArgs, function (args) {
+                _this.ratingItemList.appendChild(args.element);
+            });
+        }
+        attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });
+        if (this.disabled) {
+            attributes(this.ratingItemList, { 'tabindex': '-1' });
+        }
+    };
+    Rating.prototype.renderItemContent = function (spanEle, val, index, isrerender) {
+        if (isrerender === void 0) { isrerender = false; }
+        if (isrerender) {
+            this.removeItemContent(spanEle);
+        }
+        if (this.fullTemplate && val === 1) {
+            spanEle.classList.add(FULLTEMPLATE);
+            spanEle.append(this.fullTemplateFunction({ index: index, ratingValue: val }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+        }
+        else if (this.emptyTemplate) {
+            spanEle.classList.add(EMPTYTEMPLATE);
+            spanEle.append(this.emptyTemplateFunction({ index: index, ratingValue: val }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate'), this.isStringTemplate)[0]);
+        }
+        else {
+            addClass([spanEle], ICONCSS.split(' '));
+        }
+    };
+    Rating.prototype.removeItemContent = function (spanEle) {
+        spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);
+        removeClass([spanEle], ICONCSS.split(' '));
+        if (spanEle.firstChild) {
+            spanEle.removeChild(spanEle.firstChild);
+        }
+    };
+    Rating.prototype.updateTooltip = function () {
+        if (this.showTooltip) {
+            this.tooltipObj = new Tooltip({
+                target: '.e-rating-item-container', windowCollision: true,
+                opensOn: 'Custom', cssClass: 'e-rating-tooltip'
+            });
+            this.tooltipObj.appendTo('#' + this.ratingItemList.id);
+        }
+        else {
+            if (!isNullOrUndefined(this.tooltipObj)) {
+                this.tooltipObj.destroy();
+                this.tooltipObj = null;
+            }
+        }
+    };
+    Rating.prototype.updateMinValue = function () {
+        this.min = this.validateValue(this.min);
+        if (this.min > 0 && this.value < this.min) {
+            this.triggerChange(null, this.min, false);
+        }
+        attributes(this.ratingItemList, { 'aria-valuemin': this.min.toString() });
+    };
+    Rating.prototype.updatePrecision = function () {
+        this.min = this.validateValue(this.min);
+        this.triggerChange(null, this.validateValue(this.value), false);
+        this.updateItemValue();
+    };
+    Rating.prototype.validateValue = function (currentValue) {
+        if (currentValue > this.itemsCount) {
+            currentValue = this.itemsCount;
+        }
+        else if (currentValue < 0) {
+            currentValue = 0;
+        }
+        else {
+            currentValue = (this.precision === PrecisionType.Full) ? Math.round(currentValue) :
+                (this.precision === PrecisionType.Half) ? (Math.round(currentValue * 2) / 2) :
+                    (this.precision === PrecisionType.Quarter) ? (Math.round(currentValue * 4) / 4) : (Math.round(currentValue * 10) / 10);
+        }
+        return currentValue;
+    };
+    Rating.prototype.getRatingValue = function (value, i) {
+        return (this.enableSingleSelection && this.precision === PrecisionType.Full) ? ((value === i + 1) ? 1 : 0) :
+            (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
+    };
+    Rating.prototype.updateItemValue = function () {
+        for (var i = 0; i < this.itemsCount; i++) {
+            var itemElement = this.itemElements[parseInt(i.toString(), 10)];
+            itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);
+            var ratingValue = this.getRatingValue(this.currentValue, i);
+            if (ratingValue === 1) {
+                itemElement.classList.add(SELECTED);
+            }
+            else if (ratingValue > 0) {
+                itemElement.classList.add(INTERMEDIATE);
+            }
+            else if ((this.precision === PrecisionType.Full) && (i + 1 <= this.value) && (!this.enableSingleSelection)) {
+                itemElement.classList.add(SELECTEDVALUE);
+            }
+            this.updateItemContent(ratingValue, i);
+            itemElement.style.setProperty(RATINGVALUE, (ratingValue * 100) + '%');
+            itemElement.classList[((this.value === 0) && (i === 0)) || (this.value === i + 1) || ((ratingValue > 0) && (ratingValue < 1)) ? 'add' : 'remove']('e-rating-focus');
+        }
+        if (this.allowReset) {
+            this.updateResetButton();
+        }
+        attributes(this.ratingItemList, { 'aria-valuenow': this.currentValue.toString() });
+        attributes(this.element, { 'value': this.value.toString() });
+    };
+    Rating.prototype.updateItemContent = function (ratingValue, index) {
+        if (!this.fullTemplate && !this.emptyTemplate) {
+            return;
+        }
+        var spanEle = this.itemElements[parseInt(index.toString(), 10)].querySelector('.e-rating-item');
+        if (this.fullTemplate && ratingValue === 1) {
+            if (spanEle.classList.contains(FULLTEMPLATE)) {
+                return;
+            }
+            this.removeItemContent(spanEle);
+            spanEle.classList.add(FULLTEMPLATE);
+            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+        }
+        else if (this.emptyTemplate) {
+            this.removeItemContent(spanEle);
+            spanEle.classList.add(EMPTYTEMPLATE);
+            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+        }
+        else {
+            this.removeItemContent(spanEle);
+            addClass([spanEle], ICONCSS.split(' '));
+        }
+        this.renderReactTemplates();
+    };
+    Rating.prototype.updateTooltipContent = function (isChange) {
+        if (this.showTooltip) {
+            var content = void 0;
+            if (this.tooltipTemplate) {
+                var templateFunction = this.getTemplateString(this.tooltipTemplate);
+                content = templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate)[0];
+            }
+            else {
+                content = this.currentValue.toString();
+            }
+            this.tooltipObj.setProperties({ content: content }, isChange);
+            this.renderReactTemplates();
+        }
+    };
+    Rating.prototype.getTemplateString = function (template) {
+        var stringContent = '';
+        try {
+            var tempEle = select(template);
+            if (tempEle) {
+                //Return innerHTML incase of jsrenderer script else outerHTML
+                stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+            }
+            else {
+                stringContent = template;
+            }
+        }
+        catch (e) {
+            stringContent = template;
+        }
+        return compile(stringContent);
+    };
+    Rating.prototype.displayLabel = function () {
+        if (this.showLabel) {
+            this.spanLabel = this.createElement('span', { className: LABEL });
+            this.updateLabel();
+            this.updateLabelPosition();
+        }
+        else {
+            if (this.wrapper.contains(this.spanLabel)) {
+                remove(this.spanLabel);
+                this.spanLabel = null;
+            }
+        }
+    };
+    Rating.prototype.updateLabel = function () {
+        if (this.showLabel) {
+            if (this.labelTemplate) {
+                if (this.spanLabel.firstChild) {
+                    this.spanLabel.removeChild(this.spanLabel.firstChild);
+                }
+                var templateFunction = this.getTemplateString(this.labelTemplate);
+                this.spanLabel.append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate)[0]);
+            }
+            else {
+                this.spanLabel.textContent = this.currentValue + ' / ' + this.itemsCount;
+            }
+            this.renderReactTemplates();
+        }
+    };
+    Rating.prototype.updateReset = function () {
+        if (this.allowReset) {
+            this.resetElement = this.createElement('span', { className: RESET });
+            this.updateResetButton();
+            EventHandler.add(this.resetElement, 'click', this.resetClicked, this);
+            this.wrapper.insertBefore(this.resetElement, this.ratingItemList);
+        }
+        else {
+            if (this.wrapper.contains(this.resetElement)) {
+                remove(this.resetElement);
+                this.resetElement = null;
+            }
+        }
+    };
+    Rating.prototype.updateLabelPosition = function () {
+        this.clearLabelPosition();
+        this.spanLabel.classList.add('e-label-' + this.labelPosition.toLowerCase());
+        if (this.labelPosition === 'Left' || this.labelPosition === 'Top') {
+            this.wrapper.firstChild.after(this.spanLabel);
+        }
+        else {
+            this.wrapper.appendChild(this.spanLabel);
+        }
+    };
+    Rating.prototype.clearLabelPosition = function () {
+        var removeCss = this.spanLabel.classList.value.match(/(e-label-[top|bottom|right|left]+)/g);
+        if (removeCss) {
+            removeClass([this.spanLabel], removeCss);
+        }
+    };
+    Rating.prototype.wireItemsEvents = function (itemElement, index) {
+        var _this = this;
+        EventHandler.add(itemElement, 'click', function (e) { return _this.clickHandler(e); }, this);
+        EventHandler.add(itemElement, 'mousemove', function (e) { return _this.mouseMoveHandler(index, e); }, this);
+        EventHandler.add(itemElement, 'mouseleave', this.mouseLeaveHandler, this);
+    };
+    Rating.prototype.clickHandler = function (e) {
+        this.currentValue = (this.min > 0 && this.currentValue < this.min) ? this.min : this.currentValue;
+        this.triggerChange(e, this.currentValue);
+        this.updateItemValue();
+        this.updateLabel();
+        if (this.allowReset) {
+            this.updateResetButton();
+        }
+    };
+    Rating.prototype.triggerChange = function (e, val, isInteracted) {
+        if (isInteracted === void 0) { isInteracted = true; }
+        val = this.validateValue(val);
+        this.currentValue = val;
+        if (this.currentValue === this.value) {
+            return;
+        }
+        var eventArgs = { event: e, isInteracted: isInteracted, value: val, previousValue: this.value };
+        this.setProperties({ value: val }, true);
+        this.trigger('valueChanged', eventArgs);
+    };
+    Rating.prototype.mouseMoveHandler = function (index, e) {
+        var currValue = this.calculateCurrentValue(index, e);
+        currValue = this.validateValue(currValue);
+        var element = this.itemElements[parseInt((index - 1).toString(), 10)];
+        if (currValue === this.currentValue) {
+            this.openRatingTooltip(element, false);
+            return;
+        }
+        this.updateCurrentValue(currValue);
+        this.openRatingTooltip(element, true);
+        var eventArgs = { element: element, event: e, value: currValue };
+        this.trigger('onItemHover', eventArgs);
+    };
+    Rating.prototype.openRatingTooltip = function (element, isChange) {
+        if (this.showTooltip) {
+            if (!this.tooltipOpen) {
+                this.updateTooltipContent(false);
+                this.tooltipObj.open(element); //eslint-disable-line
+                this.tooltipOpen = true;
+            }
+            else if (isChange) {
+                this.updateTooltipContent(true);
+                this.tooltipObj.refresh(element);
+            }
+        }
+    };
+    Rating.prototype.closeRatingTooltip = function () {
+        if (this.tooltipOpen) {
+            this.tooltipObj.close();
+            this.tooltipOpen = false;
+        }
+    };
+    Rating.prototype.updateCurrentValue = function (currValue) {
+        this.currentValue = currValue;
+        this.updateItemValue();
+        this.updateLabel();
+    };
+    Rating.prototype.mouseLeaveHandler = function () {
+        this.closeRatingTooltip();
+        this.updateCurrentValue(this.value);
+    };
+    Rating.prototype.calculateCurrentValue = function (index, args) {
+        var currentValue = index;
+        if (this.precision !== PrecisionType.Full) {
+            currentValue = args.offsetX / this.itemElements[index - 1].clientWidth;
+            currentValue = (this.enableRtl) ? (1 - currentValue) : currentValue;
+            if (this.precision === PrecisionType.Quarter) {
+                currentValue = currentValue <= 0.25 ? 0.25 : currentValue <= 0.5 ? 0.5 : currentValue < 0.75 ? 0.75 : 1.0;
+            }
+            else if (this.precision === PrecisionType.Half) {
+                currentValue = currentValue <= 0.5 ? 0.5 : 1;
+            }
+            currentValue = currentValue + index - 1;
+        }
+        return currentValue;
+    };
+    /**
+     * Reset’s the value to minimum.
+     *
+     * @returns {void}
+     */
+    Rating.prototype.reset = function () {
+        this.resetClicked(null, false);
+    };
+    Rating.prototype.resetClicked = function (e, isInteracted) {
+        if (isInteracted === void 0) { isInteracted = true; }
+        this.triggerChange(e, this.min, isInteracted);
+        this.updateItemValue();
+        this.updateLabel();
+        this.updateResetButton();
+    };
+    Rating.prototype.wireKeyboardEvent = function () {
+        this.keyboardModuleRating = new KeyboardEvents(this.wrapper, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    };
+    Rating.prototype.keyActionHandler = function (e) {
+        if (this.disabled || this.readOnly) {
+            return;
+        }
+        if (e.target.classList.contains(ITEMLIST)) {
+            switch (e.action) {
+                case 'uparrow':
+                    this.handleNavigation(e, true);
+                    break;
+                case 'downarrow':
+                    this.handleNavigation(e, false);
+                    break;
+                case 'leftarrow':
+                    this.handleNavigation(e, this.enableRtl);
+                    break;
+                case 'rightarrow':
+                    this.handleNavigation(e, !this.enableRtl);
+                    break;
+            }
+        }
+        if (this.allowReset && e.target.classList.contains('e-reset')) {
+            switch (e.action) {
+                case 'space':
+                    this.resetClicked(e);
+                    break;
+            }
+        }
+    };
+    Rating.prototype.handleNavigation = function (e, isIncrease) {
+        if ((!isIncrease && (this.value > this.min)) || (isIncrease && (this.value < this.itemsCount))) {
+            var currentValue = (this.precision === PrecisionType.Full) ? 1 : (this.precision === PrecisionType.Half) ? 0.5 :
+                (this.precision === PrecisionType.Quarter) ? 0.25 : Math.round(0.1 * 10) / 10;
+            currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;
+            this.triggerChange(e, (currentValue));
+            this.updateItemValue();
+            this.updateLabel();
+            if (this.allowReset) {
+                this.updateResetButton();
+            }
+        }
+    };
+    Rating.prototype.updateContent = function () {
+        for (var i = 0; i < this.itemsCount; i++) {
+            var itemElement = this.itemElements[parseInt(i.toString(), 10)].firstElementChild;
+            this.renderItemContent(itemElement, this.getRatingValue(this.value, i), i, true);
+        }
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    Rating.prototype.getModuleName = function () {
+        return 'rating';
+    };
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    Rating.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    Rating.prototype.removeItemElements = function () {
+        for (var i = 0; i < this.itemElements.length; i++) {
+            remove(this.itemElements[parseInt(i.toString(), 10)]);
+        }
+        this.itemElements = [];
+    };
+    /**
+     * Destroys the Rating instance.
+     *
+     * @returns {void}
+     */
+    Rating.prototype.destroy = function () {
+        var _this = this;
+        _super.prototype.destroy.call(this);
+        // unwires the events and detach the li elements
+        this.removeItemElements();
+        if (this.spanLabel) {
+            remove(this.spanLabel);
+            this.spanLabel = null;
+        }
+        if (this.resetElement) {
+            remove(this.resetElement);
+            this.resetElement = null;
+        }
+        if (this.showTooltip) {
+            this.tooltipObj.destroy();
+            this.tooltipObj = null;
+        }
+        remove(this.ratingItemList);
+        this.ratingItemList = null;
+        this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
+        remove(this.wrapper);
+        this.wrapper = null;
+        this.keyboardModuleRating.destroy();
+        ['value', 'aria-label', 'name'].forEach(function (attr) {
+            _this.element.removeAttribute(attr);
+        });
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {RatingModel} newProp - Specifies new properties
+     * @param  {RatingModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    Rating.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'value':
+                    this.triggerChange(null, (this.value > this.min) ? this.value : this.min, false);
+                    this.updateItemValue();
+                    this.updateLabel();
+                    break;
+                case 'min':
+                    this.updateMinValue();
+                    this.updateItemValue();
+                    this.updateLabel();
+                    break;
+                case 'showLabel':
+                    this.displayLabel();
+                    break;
+                case 'visible':
+                    this.wrapper.classList[!this.visible ? 'add' : 'remove'](HIDDEN);
+                    break;
+                case 'disabled':
+                    this.updateDisabled();
+                    break;
+                case 'readOnly':
+                    this.wrapper.classList[this.readOnly ? 'add' : 'remove'](READONLY);
+                    break;
+                case 'allowReset':
+                    this.updateReset();
+                    break;
+                case 'enableRtl':
+                    this.wrapper.classList[this.enableRtl ? 'add' : 'remove'](RTL$2);
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.wrapper], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.wrapper], newProp.cssClass.split(' '));
+                    }
+                    break;
+                case 'labelPosition':
+                    this.updateLabelPosition();
+                    break;
+                case 'showTooltip':
+                    this.updateTooltip();
+                    break;
+                case 'precision':
+                    this.updatePrecision();
+                    this.updateLabel();
+                    break;
+                case 'enableSingleSelection':
+                    this.updateItemValue();
+                    break;
+                case 'enableAnimation':
+                    this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);
+                    break;
+                case 'emptyTemplate':
+                case 'fullTemplate':
+                    this.updateTemplateFunction();
+                    this.updateContent();
+                    break;
+                case 'labelTemplate':
+                    this.updateLabel();
+                    break;
+                case 'itemsCount':
+                    this.removeItemElements();
+                    this.renderItems();
+                    this.updateItemValue();
+                    this.updateLabel();
+                    break;
+            }
+        }
+    };
+    __decorate$8([
+        Property(false)
+    ], Rating.prototype, "allowReset", void 0);
+    __decorate$8([
+        Property('')
+    ], Rating.prototype, "cssClass", void 0);
+    __decorate$8([
+        Property(false)
+    ], Rating.prototype, "disabled", void 0);
+    __decorate$8([
+        Property(true)
+    ], Rating.prototype, "enableAnimation", void 0);
+    __decorate$8([
+        Property('')
+    ], Rating.prototype, "emptyTemplate", void 0);
+    __decorate$8([
+        Property(false)
+    ], Rating.prototype, "enableSingleSelection", void 0);
+    __decorate$8([
+        Property('')
+    ], Rating.prototype, "fullTemplate", void 0);
+    __decorate$8([
+        Property(5)
+    ], Rating.prototype, "itemsCount", void 0);
+    __decorate$8([
+        Property(LabelPosition.Right)
+    ], Rating.prototype, "labelPosition", void 0);
+    __decorate$8([
+        Property('')
+    ], Rating.prototype, "labelTemplate", void 0);
+    __decorate$8([
+        Property(0.0)
+    ], Rating.prototype, "min", void 0);
+    __decorate$8([
+        Property(PrecisionType.Full)
+    ], Rating.prototype, "precision", void 0);
+    __decorate$8([
+        Property(false)
+    ], Rating.prototype, "readOnly", void 0);
+    __decorate$8([
+        Property(false)
+    ], Rating.prototype, "showLabel", void 0);
+    __decorate$8([
+        Property(true)
+    ], Rating.prototype, "showTooltip", void 0);
+    __decorate$8([
+        Property('')
+    ], Rating.prototype, "tooltipTemplate", void 0);
+    __decorate$8([
+        Property(0.0)
+    ], Rating.prototype, "value", void 0);
+    __decorate$8([
+        Property(true)
+    ], Rating.prototype, "visible", void 0);
+    __decorate$8([
+        Event()
+    ], Rating.prototype, "beforeItemRender", void 0);
+    __decorate$8([
+        Event()
+    ], Rating.prototype, "created", void 0);
+    __decorate$8([
+        Event()
+    ], Rating.prototype, "onItemHover", void 0);
+    __decorate$8([
+        Event()
+    ], Rating.prototype, "valueChanged", void 0);
+    Rating = __decorate$8([
+        NotifyPropertyChanges
+    ], Rating);
+    return Rating;
+}(Component));
+
+/**
+ * Rating modules
+ */
+
 /**
  * Signature base modules
  */
@@ -14971,5 +15817,5 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
  * NumericTextBox all modules
  */
 
-export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox, Signature, SignatureBase };
+export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, escapeRegExp, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox, Signature, LabelPosition, PrecisionType, Rating, SignatureBase };
 //# sourceMappingURL=ej2-inputs.es5.js.map