@syncfusion/ej2-inputs 20.3.57 → 20.4.38

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

@@ -324,6 +324,10 @@ var Input;
         });
     }
     Input.wireClearBtnEvents = wireClearBtnEvents;
+    function destroy() {
+        
+    }
+    Input.destroy = destroy;
     function validateLabel(element, floatLabelType) {
         const parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
@@ -379,7 +383,7 @@ var Input;
             if (!isNullOrUndefined(parentElement)) {
                 const 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 {
@@ -896,6 +900,7 @@ const CONTROL = 'e-control';
 const NUMERIC_FOCUS = 'e-input-focus';
 const HIDDENELEMENT = 'e-numeric-hidden';
 const wrapperAttributes = ['title', 'style', 'class'];
+let selectionTimeOut = 0;
 /**
  * Represents the NumericTextBox component that allows the user to enter only numeric values.
  * ```html
@@ -956,7 +961,7 @@ let NumericTextBox = class NumericTextBox extends Component {
             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' });
         const localeText = {
             incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
         };
@@ -1157,7 +1162,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
         for (const key of Object.keys(attr)) {
             if (key.indexOf('data') === 0) {
-                this.hiddenInput.setAttribute(key, attr[key]);
+                this.hiddenInput.setAttribute(key, attr[`${key}`]);
             }
         }
     }
@@ -1165,7 +1170,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const pro of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(pro) < 0) {
-                    this.element.setAttribute(pro, this.htmlAttributes[pro]);
+                    this.element.setAttribute(pro, this.htmlAttributes[`${pro}`]);
                 }
             }
         }
@@ -1185,19 +1190,19 @@ let NumericTextBox = class NumericTextBox extends Component {
             for (const pro of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(pro) > -1) {
                     if (pro === 'class') {
-                        const updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);
+                        const updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[`${pro}`]);
                         if (updatedClassValue !== '') {
                             addClass([this.container], updatedClassValue.split(' '));
                         }
                     }
                     else if (pro === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -1742,6 +1747,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         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 + ')))?$');
     }
@@ -1765,6 +1771,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         this.cancelEvent(event);
     }
     focusHandler(event) {
+        clearTimeout(selectionTimeOut);
         this.focusEventArgs = { event: event, value: this.value, container: this.container };
         this.trigger('focus', this.focusEventArgs);
         if (!this.enabled || this.readonly) {
@@ -1782,7 +1789,7 @@ let NumericTextBox = class NumericTextBox extends Component {
                 }
                 else {
                     const delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;
-                    setTimeout(() => {
+                    selectionTimeOut = setTimeout(() => {
                         this.element.setSelectionRange(0, formatValue.length);
                     }, delay);
                 }
@@ -1954,13 +1961,22 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
         const 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 (let 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.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns */
@@ -2302,6 +2318,7 @@ function createMask() {
         if (!isNullOrUndefined(this.customCharacters)) {
             for (let 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);
                 }
             }
@@ -2496,7 +2513,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) {
@@ -2563,21 +2580,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);
@@ -2592,12 +2609,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) {
@@ -2830,8 +2850,8 @@ function removeMaskInputValues(event) {
                         ++startIndex;
                     }
                     let 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))) {
@@ -3043,8 +3063,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))
@@ -3054,22 +3074,25 @@ function validateValue(key, isCtrlKey, event) {
                     curMask = this.hiddenMask[startIndex];
                 }
             }
-            if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[curMask])) {
-                const customValStr = this.customCharacters[curMask];
+            if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[`${curMask}`])) {
+                const customValStr = this.customCharacters[`${curMask}`];
                 const customValArr = customValStr.split(',');
                 for (let 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;
             }
@@ -3514,7 +3537,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) < 0) {
-                    this.element.setAttribute(key, this.htmlAttributes[key]);
+                    this.element.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -3534,19 +3557,19 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValues = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValues !== '') {
                             addClass([this.inputObj.container], updatedClassValues.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -3721,10 +3744,13 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     else {
                         this.promptChar = '_';
                     }
+                    // eslint-disable-next-line detect-non-literal-regexp
                     let 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);
@@ -3786,8 +3812,14 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             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.destroy();
     }
 };
@@ -4339,7 +4371,7 @@ let Slider = class Slider extends Component {
     createSecondHandle() {
         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);
@@ -4348,7 +4380,7 @@ let Slider = class Slider extends Component {
     createFirstHandle() {
         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);
@@ -4775,6 +4807,7 @@ let Slider = class Slider extends Component {
             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);
         }
     }
@@ -6098,6 +6131,7 @@ let Slider = class Slider extends Component {
     openTooltip(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;
         }
@@ -7797,7 +7831,7 @@ let Uploader = class Uploader extends Component {
     getKeyValue(val) {
         let keyValue;
         for (const key of Object.keys(this.preLocaleObj)) {
-            if (this.preLocaleObj[key] === val) {
+            if (this.preLocaleObj[`${key}`] === val) {
                 keyValue = key;
             }
         }
@@ -7848,7 +7882,7 @@ let Uploader = class Uploader extends Component {
         }
     }
     preRender() {
-        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',
@@ -8173,7 +8207,7 @@ let Uploader = class Uploader extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const pro of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr$1.indexOf(pro) < 0) {
-                    this.element.setAttribute(pro, this.htmlAttributes[pro]);
+                    this.element.setAttribute(pro, this.htmlAttributes[`${pro}`]);
                 }
             }
         }
@@ -8183,19 +8217,19 @@ let Uploader = class Uploader extends Component {
             for (const pro of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr$1.indexOf(pro) > -1) {
                     if (pro === 'class') {
-                        const updatedClassValues = (this.htmlAttributes[pro].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValues = (this.htmlAttributes[`${pro}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValues !== '') {
                             addClass([this.uploadWrapper], updatedClassValues.split(' '));
                         }
                     }
                     else if (pro === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -8230,7 +8264,9 @@ let Uploader = class Uploader extends Component {
     sequenceUpload(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;
+            }
             const isFileListCreated = this.showFileList ? false : true;
             if (typeof this.filesData[this.count] === 'object') {
                 this.isFirstFileOnSelection = false;
@@ -8577,7 +8613,7 @@ let Uploader = class Uploader extends Component {
                 const data = customData[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 const value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data[`${e}`];
                 });
                 formData.append(Object.keys(data)[0], value);
             }
@@ -8590,7 +8626,7 @@ let Uploader = class Uploader extends Component {
                 const data = currentRequest[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 const value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data[`${e}`];
                 });
                 request.setRequestHeader(Object.keys(data)[0], value);
             }
@@ -8787,6 +8823,20 @@ let Uploader = class Uploader extends Component {
         if (this.allowedExtensions.indexOf('*') > -1) {
             this.allTypes = true;
         }
+        if (this.enableHtmlSanitizer) {
+            for (let i = 0; i < fileData.length; i++) {
+                let sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
+                let sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[i].name);
+                if (sanitizeFileName != fileData[i].name) {
+                    let 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);
         }
@@ -9550,7 +9600,9 @@ let Uploader = class Uploader extends Component {
             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 */
@@ -10366,6 +10418,14 @@ let Uploader = class Uploader extends Component {
             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.destroy();
     }
     /**
@@ -10854,6 +10914,9 @@ __decorate$4([
 __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);
@@ -11464,7 +11527,7 @@ let ColorPicker = class ColorPicker extends Component {
             if (!wrapper.classList.contains(HIDEHEX)) {
                 const hexInput = this.createElement('input', {
                     className: HEX,
-                    attrs: { 'maxlength': '7', 'spellcheck': 'false' }
+                    attrs: { 'maxlength': '7', 'spellcheck': 'false', 'aria-label': 'HEX' }
                 });
                 container.appendChild(hexInput);
                 Input.createInput({
@@ -11506,7 +11569,8 @@ let ColorPicker = class ColorPicker extends Component {
     }
     appendValueSwitchBtn(targetEle) {
         const 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)) {
@@ -11557,6 +11621,7 @@ let ColorPicker = class ColorPicker extends Component {
         });
         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' }));
@@ -13144,19 +13209,19 @@ let TextBox = class TextBox extends Component {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (containerAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);
+                        const updatedClassValues = this.getInputValidClassList(this.htmlAttributes[`${key}`]);
                         if (updatedClassValues !== '') {
                             addClass([this.textboxWrapper.container], updatedClassValues.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -13166,7 +13231,7 @@ let TextBox = class TextBox extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (containerAttr.indexOf(key) < 0) {
-                    this.element.setAttribute(key, this.htmlAttributes[key]);
+                    this.element.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -13372,6 +13437,7 @@ let TextBox = class TextBox extends Component {
             detach(this.textboxWrapper.container);
         }
         this.textboxWrapper = null;
+        Input.destroy();
         super.destroy();
     }
     /**
@@ -13412,17 +13478,17 @@ let TextBox = class TextBox extends Component {
                 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}`]);
             }
         }
     }
@@ -13631,6 +13697,7 @@ class SignatureBase extends Component {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
         }
     }
+    // eslint-disable-next-line
     mouseDownHandler(e, canvas, panStart, zoomState) {
         if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
             if (e.type === 'touchstart') {
@@ -13960,20 +14027,14 @@ class SignatureBase extends Component {
     enableOrDisable(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);
         }
     }
-    reDraw(opacity) {
-        const 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);
-    }
     updateSnapCollection(isClear) {
         if (isNullOrUndefined(this.incStep)) {
             this.incStep = -1;
@@ -14650,6 +14711,766 @@ Signature = __decorate$7([
  * Signature modules
  */
 
+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;
+};
+const ICONCSS = 'e-rating-icon e-icons e-star-filled';
+const ITEMLIST = 'e-rating-item-list';
+const ITEMCONTAINER = 'e-rating-item-container';
+const SELECTED = 'e-rating-selected';
+const INTERMEDIATE = 'e-rating-intermediate';
+const LABEL = 'e-rating-label';
+const RESET = 'e-icons e-reset';
+const HIDDEN = 'e-rating-hidden';
+const DISABLED$2 = 'e-disabled';
+const READONLY = 'e-rating-readonly';
+const RTL$2 = 'e-rtl';
+const ANIMATION = 'e-rating-animation';
+const FULLTEMPLATE = 'e-rating-full';
+const EMPTYTEMPLATE = 'e-rating-empty';
+const SELECTEDVALUE = 'e-selected-value';
+const 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 = {}));
+let Rating = class Rating extends Component {
+    /**
+     * Constructor for creating the widget
+     *
+     * @param  {RatingModel} options - Specifies the rating model
+     * @param  {string|HTMLButtonElement} element - Specifies the target element
+     */
+    constructor(options, element) {
+        super(options, element);
+        this.itemElements = [];
+        this.tooltipOpen = false;
+    }
+    preRender() {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+        this.keyConfigs = {
+            downarrow: 'downarrow',
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            uparrow: 'uparrow',
+            space: 'space'
+        };
+    }
+    render() {
+        this.initialize();
+        this.updateMinValue();
+        this.updateTemplateFunction();
+        this.renderItems();
+        this.updatePrecision();
+        this.displayLabel();
+    }
+    initialize() {
+        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();
+    }
+    updateDisabled() {
+        this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED$2);
+        attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });
+        if (this.allowReset) {
+            this.updateResetButton();
+        }
+    }
+    updateResetButton() {
+        const 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() });
+    }
+    renderItemList() {
+        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', (e) => this.touchMoveHandler(e), this);
+        EventHandler.add(this.ratingItemList, 'touchend', this.touchEndHandler, this);
+    }
+    touchMoveHandler(e) {
+        const rect = this.ratingItemList.getBoundingClientRect();
+        const x = e.touches[0].clientX - rect.x;
+        let 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);
+        const 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;
+        }
+        const 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();
+            }
+        }
+    }
+    touchEndHandler() {
+        this.closeRatingTooltip();
+    }
+    updateTemplateFunction() {
+        this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
+        this.fullTemplateFunction = this.fullTemplate ? this.getTemplateString(this.fullTemplate) : null;
+    }
+    renderItems() {
+        for (let i = 0; i < this.itemsCount; i++) {
+            const ratingItemContainer = this.createElement('span', { className: ITEMCONTAINER });
+            const spanItem = this.createElement('span', { className: 'e-rating-item' });
+            const ratingValue = this.getRatingValue(this.value, i);
+            this.renderItemContent(spanItem, ratingValue, i);
+            ratingItemContainer.appendChild(spanItem);
+            this.wireItemsEvents(ratingItemContainer, i + 1);
+            this.itemElements.push(ratingItemContainer);
+            const eventArgs = { element: ratingItemContainer, value: i + 1 };
+            this.trigger('beforeItemRender', eventArgs, (args) => {
+                this.ratingItemList.appendChild(args.element);
+            });
+        }
+        attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });
+        if (this.disabled) {
+            attributes(this.ratingItemList, { 'tabindex': '-1' });
+        }
+    }
+    renderItemContent(spanEle, val, index, 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(' '));
+        }
+    }
+    removeItemContent(spanEle) {
+        spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);
+        removeClass([spanEle], ICONCSS.split(' '));
+        if (spanEle.firstChild) {
+            spanEle.removeChild(spanEle.firstChild);
+        }
+    }
+    updateTooltip() {
+        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;
+            }
+        }
+    }
+    updateMinValue() {
+        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() });
+    }
+    updatePrecision() {
+        this.min = this.validateValue(this.min);
+        this.triggerChange(null, this.validateValue(this.value), false);
+        this.updateItemValue();
+    }
+    validateValue(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;
+    }
+    getRatingValue(value, i) {
+        return (this.enableSingleSelection && this.precision === PrecisionType.Full) ? ((value === i + 1) ? 1 : 0) :
+            (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
+    }
+    updateItemValue() {
+        for (let i = 0; i < this.itemsCount; i++) {
+            const itemElement = this.itemElements[parseInt(i.toString(), 10)];
+            itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);
+            const 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() });
+    }
+    updateItemContent(ratingValue, index) {
+        if (!this.fullTemplate && !this.emptyTemplate) {
+            return;
+        }
+        const 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();
+    }
+    updateTooltipContent(isChange) {
+        if (this.showTooltip) {
+            let content;
+            if (this.tooltipTemplate) {
+                const 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();
+        }
+    }
+    getTemplateString(template) {
+        let stringContent = '';
+        try {
+            const 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);
+    }
+    displayLabel() {
+        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;
+            }
+        }
+    }
+    updateLabel() {
+        if (this.showLabel) {
+            if (this.labelTemplate) {
+                if (this.spanLabel.firstChild) {
+                    this.spanLabel.removeChild(this.spanLabel.firstChild);
+                }
+                const 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();
+        }
+    }
+    updateReset() {
+        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;
+            }
+        }
+    }
+    updateLabelPosition() {
+        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);
+        }
+    }
+    clearLabelPosition() {
+        const removeCss = this.spanLabel.classList.value.match(/(e-label-[top|bottom|right|left]+)/g);
+        if (removeCss) {
+            removeClass([this.spanLabel], removeCss);
+        }
+    }
+    wireItemsEvents(itemElement, index) {
+        EventHandler.add(itemElement, 'click', (e) => this.clickHandler(e), this);
+        EventHandler.add(itemElement, 'mousemove', (e) => this.mouseMoveHandler(index, e), this);
+        EventHandler.add(itemElement, 'mouseleave', this.mouseLeaveHandler, this);
+    }
+    clickHandler(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();
+        }
+    }
+    triggerChange(e, val, isInteracted = true) {
+        val = this.validateValue(val);
+        this.currentValue = val;
+        if (this.currentValue === this.value) {
+            return;
+        }
+        const eventArgs = { event: e, isInteracted: isInteracted, value: val, previousValue: this.value };
+        this.setProperties({ value: val }, true);
+        this.trigger('valueChanged', eventArgs);
+    }
+    mouseMoveHandler(index, e) {
+        let currValue = this.calculateCurrentValue(index, e);
+        currValue = this.validateValue(currValue);
+        const element = this.itemElements[parseInt((index - 1).toString(), 10)];
+        if (currValue === this.currentValue) {
+            this.openRatingTooltip(element, false);
+            return;
+        }
+        this.updateCurrentValue(currValue);
+        this.openRatingTooltip(element, true);
+        const eventArgs = { element: element, event: e, value: currValue };
+        this.trigger('onItemHover', eventArgs);
+    }
+    openRatingTooltip(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);
+            }
+        }
+    }
+    closeRatingTooltip() {
+        if (this.tooltipOpen) {
+            this.tooltipObj.close();
+            this.tooltipOpen = false;
+        }
+    }
+    updateCurrentValue(currValue) {
+        this.currentValue = currValue;
+        this.updateItemValue();
+        this.updateLabel();
+    }
+    mouseLeaveHandler() {
+        this.closeRatingTooltip();
+        this.updateCurrentValue(this.value);
+    }
+    calculateCurrentValue(index, args) {
+        let 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}
+     */
+    reset() {
+        this.resetClicked(null, false);
+    }
+    resetClicked(e, isInteracted = true) {
+        this.triggerChange(e, this.min, isInteracted);
+        this.updateItemValue();
+        this.updateLabel();
+        this.updateResetButton();
+    }
+    wireKeyboardEvent() {
+        this.keyboardModuleRating = new KeyboardEvents(this.wrapper, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    }
+    keyActionHandler(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;
+            }
+        }
+    }
+    handleNavigation(e, isIncrease) {
+        if ((!isIncrease && (this.value > this.min)) || (isIncrease && (this.value < this.itemsCount))) {
+            let 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();
+            }
+        }
+    }
+    updateContent() {
+        for (let i = 0; i < this.itemsCount; i++) {
+            const 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
+     */
+    getModuleName() {
+        return 'rating';
+    }
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    getPersistData() {
+        return this.addOnPersist([]);
+    }
+    removeItemElements() {
+        for (let i = 0; i < this.itemElements.length; i++) {
+            remove(this.itemElements[parseInt(i.toString(), 10)]);
+        }
+        this.itemElements = [];
+    }
+    /**
+     * Destroys the Rating instance.
+     *
+     * @returns {void}
+     */
+    destroy() {
+        super.destroy();
+        // 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((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
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            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);
+
+/**
+ * Rating modules
+ */
+
 /**
  * Signature base modules
  */
@@ -14658,5 +15479,5 @@ Signature = __decorate$7([
  * 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.es2015.js.map