@syncfusion/ej2-inputs 20.4.54 → 21.1.37

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

@@ -296,7 +296,7 @@ var Input;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function wireClearBtnEvents(element, button, container) {
-        if (isBindClearAction == undefined || isBindClearAction) {
+        if (isBindClearAction === undefined || isBindClearAction) {
             button.addEventListener('click', (event) => {
                 if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
                     event.preventDefault();
@@ -425,7 +425,7 @@ var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container, moduleName) {
-        let elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
+        const elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
         if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
@@ -625,10 +625,10 @@ var Input;
                 parentElement.classList.add(CLASSNAMES.DISABLE);
             }
             if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];
+                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[`${key}`];
             }
             else {
-                element.setAttribute(key, attrs[key]);
+                element.setAttribute(key, attrs[`${key}`]);
             }
         }
     }
@@ -730,7 +730,7 @@ var Input;
      */
     function setRipple(isRipple, inputObj) {
         for (let i = 0; i < inputObj.length; i++) {
-            _internalRipple(isRipple, inputObj[i].container);
+            _internalRipple(isRipple, inputObj[parseInt(i.toString())].container);
         }
     }
     Input.setRipple = setRipple;
@@ -741,14 +741,14 @@ var Input;
             container.querySelectorAll('.e-input-group-icon') : argsButton;
         if (isRipple && buttons.length > 0) {
             for (let index = 0; index < buttons.length; index++) {
-                buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);
-                buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);
+                buttons[parseInt(index.toString())].addEventListener('mousedown', _onMouseDownRipple, false);
+                buttons[parseInt(index.toString())].addEventListener('mouseup', _onMouseUpRipple, false);
             }
         }
         else if (buttons.length > 0) {
             for (let index = 0; index < buttons.length; index++) {
-                buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);
-                buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);
+                buttons[parseInt(index.toString())].removeEventListener('mousedown', _onMouseDownRipple, this);
+                buttons[parseInt(index.toString())].removeEventListener('mouseup', _onMouseUpRipple, this);
             }
         }
     }
@@ -834,7 +834,7 @@ var Input;
             const result = container.querySelectorAll(inputElement.tagName + ' ~ *');
             innerWrapper.appendChild(inputElement);
             for (let i = 0; i < result.length; i++) {
-                innerWrapper.appendChild(result[i]);
+                innerWrapper.appendChild(result[parseInt(i.toString())]);
             }
         }
         innerWrapper.parentNode.insertBefore(button, innerWrapper);
@@ -1022,7 +1022,7 @@ let NumericTextBox = class NumericTextBox extends Component {
             if (this.element.hasAttribute('data-val')) {
                 this.element.setAttribute('data-val', 'false');
             }
-            if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
             this.renderComplete();
@@ -1709,8 +1709,8 @@ let NumericTextBox = class NumericTextBox extends Component {
             return true;
         }
         let currentChar = String.fromCharCode(event.which);
-        let decimalSeparator = getValue('decimal', getNumericObject(this.locale));
-        let isAlterNumPadDecimalChar = event.code === "NumpadDecimal" && currentChar !== decimalSeparator;
+        const decimalSeparator = getValue('decimal', getNumericObject(this.locale));
+        const isAlterNumPadDecimalChar = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;
         //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different
         if (isAlterNumPadDecimalChar) {
             currentChar = decimalSeparator;
@@ -1747,7 +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
+        /* eslint-disable-next-line security/detect-non-literal-regexp */
         return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule +
             ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
     }
@@ -1857,8 +1857,8 @@ let NumericTextBox = class NumericTextBox extends Component {
     }
     touchMoveOnSpinner(event) {
         let target;
-        if (event.type === "touchmove") {
-            let touchEvent = event.touches;
+        if (event.type === 'touchmove') {
+            const touchEvent = event.touches;
             target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);
         }
         else {
@@ -2318,7 +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
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);
                 }
             }
@@ -2617,7 +2617,7 @@ function maskInputBlurHandler(event) {
         event: event,
         value: this.value,
         maskedValue: this.element.value,
-        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,
+        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
     };
     this.trigger('blur', this.blurEventArgs);
     if (this.mask) {
@@ -3078,13 +3078,13 @@ function validateValue(key, isCtrlKey, event) {
                 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
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {
                         allowText = true;
                         break;
                     }
                 }
-                // eslint-disable-next-line detect-non-literal-regexp
+                /* eslint-disable-next-line security/detect-non-literal-regexp */
             }
             else if (!isNullOrUndefined(this.regExpCollec[`${curMask}`]) && keyValue.match(new RegExp(this.regExpCollec[`${curMask}`]))
                 && this.promptMask[startIndex] === this.promptChar) {
@@ -3092,7 +3092,7 @@ function validateValue(key, isCtrlKey, event) {
             }
             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
+                /* eslint-disable-next-line security/detect-non-literal-regexp */
                 && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {
                 allowText = true;
             }
@@ -3744,13 +3744,13 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     else {
                         this.promptChar = '_';
                     }
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/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
+                        /* eslint-disable-next-line security/detect-non-literal-regexp */
                         value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     }
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     this.undoCollec = this.redoCollec = [];
                     setElementValue.call(this, value);
@@ -4155,6 +4155,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * To Initialize the control rendering
+     *
      * @private
      */
     render() {
@@ -4164,7 +4165,7 @@ let Slider = class Slider extends Component {
         this.setZindex();
         this.renderComplete();
         if (this.element.tagName === 'EJS-SLIDER') {
-            if (this.getTheme(this.sliderContainer) == "none") {
+            if (this.getTheme(this.sliderContainer) == 'none') {
                 setTimeout(() => {
                     this.refresh();
                 }, 0);
@@ -4215,6 +4216,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * Initialize the rendering
+     *
      * @private
      */
     initRender() {
@@ -4807,7 +4809,6 @@ 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);
         }
     }
@@ -5632,6 +5633,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * It is used to reposition slider.
+     *
      * @returns void
      */
     reposition() {
@@ -5881,7 +5883,12 @@ let Slider = class Slider extends Component {
             focusedElement.classList.remove(classNames.sliderTabHandle);
         }
         let handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;
-        if (evt.target === handle) {
+        let behindElement;
+        if ((evt.type === 'click' || evt.type === 'mousedown') && evt.target === handle) {
+            const { clientX: eventX, clientY: eventY } = evt;
+            behindElement = document.elementFromPoint(eventX, eventY);
+        }
+        if (evt.target === handle && behindElement != handle) {
             if (this.isMaterial && !this.tooltip.isVisible &&
                 !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
                 this.materialChange();
@@ -6131,7 +6138,6 @@ 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;
         }
@@ -6450,6 +6456,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * Get the properties to be maintained in the persisted state.
+     *
      * @private
      */
     getPersistData() {
@@ -6459,6 +6466,7 @@ let Slider = class Slider extends Component {
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it removes the attributes and classes.
+     *
      * @method destroy
      * @return {void}
      */
@@ -6480,6 +6488,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * Calls internally if any of the property value is changed.
+     *
      * @private
      */
     // tslint:disable-next-line
@@ -6695,6 +6704,7 @@ let Slider = class Slider extends Component {
     }
     /**
      * Gets the component name
+     *
      * @private
      */
     getModuleName() {
@@ -6796,6 +6806,7 @@ const regex = {
     /* eslint-disable no-useless-escape */
     EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +
         '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),
+    /* eslint-disable-next-line security/detect-unsafe-regex */
     URL: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/m,
     DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),
     DIGITS: new RegExp('^[0-9]*$'),
@@ -6910,10 +6921,10 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         if (name) {
             // eslint-disable-next-line no-prototype-builtins
             if (this.rules.hasOwnProperty(name)) {
-                extend(this.rules[name], rules, {});
+                extend(this.rules[`${name}`], rules, {});
             }
             else {
-                this.rules[name] = rules;
+                this.rules[`${name}`] = rules;
             }
         }
     }
@@ -6929,12 +6940,12 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         if (!name && !rules) {
             this.rules = {};
         }
-        else if (this.rules[name] && !rules) {
-            delete this.rules[name];
+        else if (this.rules[`${name}`] && !rules) {
+            delete this.rules[`${name}`];
         }
-        else if (!isNullOrUndefined(this.rules[name] && rules)) {
+        else if (!isNullOrUndefined(this.rules[`${name}`] && rules)) {
             for (let i = 0; i < rules.length; i++) {
-                delete this.rules[name][rules[i]];
+                delete this.rules[`${name}`][rules[parseInt(i.toString())]];
             }
         }
         else {
@@ -7028,7 +7039,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         for (const key of Object.keys(this.defaultMessages)) {
             this.l10n.setLocale(this.locale);
             const value = this.l10n.getConstant(key);
-            this.localyMessage[key] = value;
+            this.localyMessage[`${key}`] = value;
         }
     }
     /**
@@ -7174,7 +7185,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         let customMessage;
         if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {
             this.getInputElement(input.name);
-            customMessage = this.getErrorMessage(this.rules[input.name][ruleName], ruleName);
+            customMessage = this.getErrorMessage(this.rules[input.name][`${ruleName}`], ruleName);
         }
         if (message) {
             value = [value, message];
@@ -7185,7 +7196,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         else if (customMessage) {
             value = [value, customMessage];
         }
-        ruleCon[ruleName] = value;
+        ruleCon[`${ruleName}`] = value;
     }
     // Wire events to the form elements
     wireEvents() {
@@ -7276,10 +7287,10 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     }
     // Validate each rule based on input element name
     validateRules(name) {
-        if (!this.rules[name]) {
+        if (!this.rules[`${name}`]) {
             return;
         }
-        const rules = Object.keys(this.rules[name]);
+        const rules = Object.keys(this.rules[`${name}`]);
         let hiddenType = false;
         let validateHiddenType = false;
         const vhPos = rules.indexOf('validateHidden');
@@ -7300,7 +7311,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             }
             this.getErrorElement(name);
             for (const rule of rules) {
-                const errorMessage = this.getErrorMessage(this.rules[name][rule], rule);
+                const errorMessage = this.getErrorMessage(this.rules[`${name}`][`${rule}`], rule);
                 const errorRule = { name: name, message: errorMessage };
                 const eventArgs = {
                     inputName: name,
@@ -7346,7 +7357,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     }
     // Update the optional validation status
     optionalValidationStatus(name, refer) {
-        if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
+        if (!this.rules[`${name}`][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
             this.infoElement.innerHTML = this.inputElement.value;
             this.infoElement.setAttribute('aria-invalid', 'false');
             refer.status = '';
@@ -7355,9 +7366,9 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     }
     // Check the input element whether it's value satisfy the validation rule or not
     isValid(name, rule) {
-        const params = this.rules[name][rule];
+        const params = this.rules[`${name}`][`${rule}`];
         const param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;
-        const currentRule = this.rules[name][rule];
+        const currentRule = this.rules[`${name}`][`${rule}`];
         const args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };
         this.trigger('validationBegin', args);
         if (!args.param && rule === 'required') {
@@ -7374,7 +7385,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             return selectAll('input[name="' + name + '"]:checked', this.element).length > 0;
         }
         else {
-            return FormValidator_1.checkValidator[rule](args);
+            return FormValidator_1.checkValidator[`${rule}`](args);
         }
     }
     // Return default error message or custom error message
@@ -7382,12 +7393,12 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         let message = this.inputElement.getAttribute('data-' + rule + '-message') ?
             this.inputElement.getAttribute('data-' + rule + '-message') :
             (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :
-                (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[rule] : this.defaultMessages[rule];
+                (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[`${rule}`] : this.defaultMessages[`${rule}`];
         const formats = message.match(/{(\d)}/g);
         if (!isNullOrUndefined(formats)) {
             for (let i = 0; i < formats.length; i++) {
-                const value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;
-                message = message.replace(formats[i], value);
+                const value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;
+                message = message.replace(formats[parseInt(i.toString())], value);
             }
         }
         return message;
@@ -7439,7 +7450,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     // Remove existing rule from errorRules object
     removeErrorRules(name) {
         for (let i = 0; i < this.errorRules.length; i++) {
-            const rule = this.errorRules[i];
+            const rule = this.errorRules[parseInt(i.toString())];
             if (rule.name === name) {
                 this.errorRules.splice(i, 1);
             }
@@ -7463,7 +7474,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     }
     // Check whether the input element have required rule and its value is not empty
     checkRequired(name) {
-        if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
+        if (!this.rules[`${name}`][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
             this.infoElement.innerHTML = this.inputElement.value;
             this.infoElement.setAttribute('aria-invalid', 'false');
             this.hideMessage(name);
@@ -7541,6 +7552,7 @@ FormValidator.checkValidator = {
         }
     },
     regex: (option) => {
+        /* eslint-disable-next-line security/detect-non-literal-regexp */
         return new RegExp(option.param).test(option.value);
     },
     equalTo: (option) => {
@@ -8472,7 +8484,7 @@ let Uploader = class Uploader extends Component {
     /* istanbul ignore next */
     onPasteFile(event) {
         const item = event.clipboardData.items;
-        if (event.type == 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
+        if (event.type === 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
             this.element.files = event.clipboardData.files;
         }
         if (item.length !== 1) {
@@ -8830,15 +8842,15 @@ let Uploader = class Uploader extends Component {
         }
         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) {
+                const sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
+                const sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString())].name);
+                if (sanitizeFileName !== fileData[parseInt(i.toString())].name) {
+                    const encodedFileName = targetFiles[parseInt(i.toString())].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';
+                    fileData[parseInt(i.toString())].name = encodedFileName;
+                    fileData[parseInt(i.toString())].status = this.localizedTexts('invalidFileName');
+                    fileData[parseInt(i.toString())].statusCode = '0';
                 }
             }
         }
@@ -10058,13 +10070,13 @@ let Uploader = class Uploader extends Component {
             this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');
             this.updateProgressBarClasses(liElement, UPLOAD_FAILED);
             this.removeProgressbar(liElement, 'failure');
-            deleteIcon && deleteIcon.classList.remove(ABORT_ICON);
-            deleteIcon && deleteIcon.classList.add(REMOVE_ICON);
-            deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove'));
+            (deleteIcon && deleteIcon.classList.remove(ABORT_ICON));
+            (deleteIcon && deleteIcon.classList.add(REMOVE_ICON));
+            (deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove')));
             const pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.classList.add(RETRY_ICON);
-            pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry'));
+            (pauseIcon && pauseIcon.classList.add(RETRY_ICON));
+            (pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD));
+            (pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry')));
             if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)
                 && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {
                 hideSpinner(spinnerTarget);
@@ -10321,7 +10333,7 @@ let Uploader = class Uploader extends Component {
             }
             if (!isNaN(Math.round((e.loaded / e.total) * 100)) && isNullOrUndefined(this.template) && metaData.file.statusCode !== '4') {
                 let progressVal;
-                let totalChunks = Math.ceil(metaData.file.size / this.asyncSettings.chunkSize) - 1;
+                const totalChunks = Math.ceil(metaData.file.size / this.asyncSettings.chunkSize) - 1;
                 if (this.asyncSettings.chunkSize && totalChunks) {
                     progressVal = Math.round(metaData.chunkIndex / totalChunks * 100);
                     this.changeProgressValue(liElement, progressVal.toString() + '%');
@@ -11142,7 +11154,7 @@ let ColorPicker = class ColorPicker extends Component {
             wrapper.classList.add(RTL$1);
         }
         if (this.cssClass) {
-            addClass([wrapper], this.cssClass.split(' '));
+            addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });
         this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });
@@ -11201,7 +11213,7 @@ let ColorPicker = class ColorPicker extends Component {
         const popupEle = this.getPopupEle();
         addClass([popupEle], 'e-colorpicker-popup');
         if (this.cssClass) {
-            addClass([popupEle], this.cssClass.split(' '));
+            addClass([popupEle], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (Browser.isDevice) {
             const popupInst = this.getPopupInst();
@@ -11834,6 +11846,10 @@ let ColorPicker = class ColorPicker extends Component {
         if (this.isPicker()) {
             const dragHandler = this.getDragHandler();
             EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);
+            const ctrlBtn = select('.' + CTRLBTN, this.container);
+            if (ctrlBtn) {
+                EventHandler.add(ctrlBtn, 'keydown', this.ctrlBtnKeyDown, this);
+            }
             EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);
             if (this.modeSwitcher || this.showButtons) {
                 this.addCtrlSwitchEvent();
@@ -11855,6 +11871,16 @@ let ColorPicker = class ColorPicker extends Component {
             EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);
         }
     }
+    ctrlBtnKeyDown(e) {
+        if (e.keyCode === 13) {
+            const applyBtn = select('.' + APPLY, this.container);
+            if (applyBtn) {
+                const cValue = this.rgbToHex(this.rgb);
+                this.triggerChangeEvent(cValue);
+            }
+            this.splitBtn.element.focus();
+        }
+    }
     pickerKeyDown(e) {
         switch (e.keyCode) {
             case 39:
@@ -11879,7 +11905,6 @@ let ColorPicker = class ColorPicker extends Component {
     enterKeyHandler(value, e) {
         this.triggerChangeEvent(value);
         if (!this.inline) {
-            this.closePopup(e);
             this.splitBtn.element.focus();
         }
     }
@@ -12403,6 +12428,10 @@ let ColorPicker = class ColorPicker extends Component {
         if (this.isPicker()) {
             const dragHandler = this.getDragHandler();
             EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);
+            const ctrlBtn = select('.' + CTRLBTN, this.container);
+            if (ctrlBtn) {
+                EventHandler.remove(ctrlBtn, 'keydown', this.ctrlBtnKeyDown);
+            }
             EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);
             if (this.modeSwitcher || this.showButtons) {
                 EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);
@@ -12644,7 +12673,7 @@ let ColorPicker = class ColorPicker extends Component {
             removeClass([wrapper, popupWrapper], oldProp.split(' '));
         }
         if (newProp) {
-            addClass([wrapper, popupWrapper], newProp.split(' '));
+            addClass([wrapper, popupWrapper], newProp.replace(/\s+/g, ' ').trim().split(' '));
         }
     }
     changeRtlProps(newProp) {
@@ -13072,7 +13101,9 @@ let TextBox = class TextBox extends Component {
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
-        this.element.setAttribute('role', 'textbox');
+        if (this.type === 'text') {
+            this.element.setAttribute('role', 'textbox');
+        }
         this.globalize = new Internationalization(this.locale);
         const localeText = { placeholder: this.placeholder };
         this.l10n = new L10n('textbox', localeText, this.locale);
@@ -13204,7 +13235,7 @@ let TextBox = class TextBox extends Component {
         this.inputPreviousValue = this.value;
         this.respectiveElement.defaultValue = this.respectiveElement.value;
         Input.setWidth(this.width, this.textboxWrapper.container);
-        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.renderComplete();
@@ -13399,8 +13430,8 @@ let TextBox = class TextBox extends Component {
             this.inputPreviousValue = this.respectiveElement.value;
             this.raiseChangeEvent(event, true);
             if (closest(this.element, 'form')) {
-                let element = this.element;
-                let keyupEvent = document.createEvent('KeyboardEvent');
+                const element = this.element;
+                const keyupEvent = document.createEvent('KeyboardEvent');
                 keyupEvent.initEvent('keyup', false, true);
                 element.dispatchEvent(keyupEvent);
             }
@@ -13693,6 +13724,10 @@ class SignatureBase extends Component {
             this.element.width = this.element.offsetWidth;
             this.isResponsive = true;
         }
+        else if (this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1) {
+            this.element.height = this.element.offsetHeight;
+            this.element.width = this.element.offsetWidth;
+        }
         this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
@@ -13785,7 +13820,6 @@ class SignatureBase extends Component {
             this.canvasContext.canvas.width = this.element.offsetWidth;
             this.canvasContext.canvas.height = this.element.offsetHeight;
             this.canvasContext.scale(1, 1);
-            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
             const pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
             for (let i = 0; i < this.signRatioPointsColl.length; i++) {
                 this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);
@@ -14019,11 +14053,11 @@ class SignatureBase extends Component {
     enableOrDisable(isDisable) {
         this.disabled = isDisable;
         if (isDisable) {
-            this.canvasContext.canvas.style.filter = "opacity(0.5)";
+            this.canvasContext.canvas.style.filter = 'opacity(0.5)';
             this.isRead(true);
         }
         else {
-            this.canvasContext.canvas.style.filter = "";
+            this.canvasContext.canvas.style.filter = '';
             this.isRead(false);
         }
     }
@@ -14797,7 +14831,6 @@ let Rating = class Rating extends Component {
     constructor(options, element) {
         super(options, element);
         this.itemElements = [];
-        this.tooltipOpen = false;
     }
     preRender() {
         if (!this.element.id) {
@@ -14810,13 +14843,14 @@ let Rating = class Rating extends Component {
             uparrow: 'uparrow',
             space: 'space'
         };
+        this.tooltipOpen = false;
     }
     render() {
         this.initialize();
         this.updateMinValue();
         this.updateTemplateFunction();
+        this.triggerChange(null, this.value, false);
         this.renderItems();
-        this.updatePrecision();
         this.displayLabel();
     }
     initialize() {
@@ -14829,35 +14863,41 @@ let Rating = class Rating extends Component {
         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.readOnly) {
+            this.wrapper.classList.add(READONLY);
+        }
+        if (!this.visible) {
+            this.wrapper.classList.add(HIDDEN);
+        }
+        if (this.enableRtl) {
+            this.wrapper.classList.add(RTL$2);
+        }
+        if (this.enableAnimation) {
+            this.wrapper.classList.add(ANIMATION);
+        }
         if (this.cssClass) {
             addClass([this.wrapper], this.cssClass.split(' '));
         }
         this.updateTooltip();
         this.wireKeyboardEvent();
+        this.updateDisabled();
     }
     updateDisabled() {
         this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED$2);
         attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        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() });
+        if (this.allowReset) {
+            const isDisabled = (this.value <= this.min) || this.disabled;
+            this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED$2);
+            attributes(this.resetElement, { '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' }
+            id: this.element.id + '_item-list'
         });
         attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });
         this.wrapper.appendChild(this.ratingItemList);
@@ -14905,7 +14945,7 @@ let Rating = class Rating extends Component {
             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);
+            this.renderItemContent(spanItem, ratingValue, i, false);
             ratingItemContainer.appendChild(spanItem);
             this.wireItemsEvents(ratingItemContainer, i + 1);
             this.itemElements.push(ratingItemContainer);
@@ -14915,11 +14955,9 @@ let Rating = class Rating extends Component {
             });
         }
         attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });
-        if (this.disabled) {
-            attributes(this.ratingItemList, { 'tabindex': '-1' });
-        }
+        this.updateItemValue(false);
     }
-    renderItemContent(spanEle, val, index, isrerender = false) {
+    renderItemContent(spanEle, val, index, isrerender) {
         if (isrerender) {
             this.removeItemContent(spanEle);
         }
@@ -14958,17 +14996,12 @@ let Rating = class Rating extends Component {
         }
     }
     updateMinValue() {
-        this.min = this.validateValue(this.min);
+        this.setProperties({ min: this.validateValue(this.min) }, true);
         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;
@@ -14987,7 +15020,10 @@ let Rating = class Rating extends Component {
         return (this.enableSingleSelection) ? (((value > i) && (value <= i + 1)) ? 1 : 0) :
             (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
     }
-    updateItemValue() {
+    updateItemValue(isUpdate = true) {
+        if (isUpdate && this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         for (let i = 0; i < this.itemsCount; i++) {
             const itemElement = this.itemElements[parseInt(i.toString(), 10)];
             itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);
@@ -15001,13 +15037,16 @@ let Rating = class Rating extends Component {
             else if ((this.precision === PrecisionType.Full) && (i + 1 <= this.value) && (!this.enableSingleSelection)) {
                 itemElement.classList.add(SELECTEDVALUE);
             }
-            this.updateItemContent(ratingValue, i);
+            if (isUpdate) {
+                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();
+        if (isUpdate) {
+            this.renderReactTemplates();
         }
+        this.updateResetButton();
         attributes(this.ratingItemList, { 'aria-valuenow': this.currentValue.toString() });
         attributes(this.element, { 'value': this.value.toString() });
     }
@@ -15017,26 +15056,31 @@ let Rating = class Rating extends Component {
         }
         const spanEle = this.itemElements[parseInt(index.toString(), 10)].querySelector('.e-rating-item');
         if (this.fullTemplate && ratingValue === 1) {
-            if (spanEle.classList.contains(FULLTEMPLATE)) {
+            if (!this.isReact && 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]);
+            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate)[0]);
         }
         else if (this.emptyTemplate) {
+            if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {
+                return;
+            }
             this.removeItemContent(spanEle);
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate)[0]);
         }
         else {
             this.removeItemContent(spanEle);
             addClass([spanEle], ICONCSS.split(' '));
         }
-        this.renderReactTemplates();
     }
     updateTooltipContent(isChange) {
         if (this.showTooltip) {
+            if (this.isReact) {
+                this.clearTemplate(['ratingTooltipTemplate']);
+            }
             let content;
             if (this.tooltipTemplate) {
                 const templateFunction = this.getTemplateString(this.tooltipTemplate);
@@ -15082,21 +15126,27 @@ let Rating = class Rating extends Component {
     updateLabel() {
         if (this.showLabel) {
             if (this.labelTemplate) {
+                if (this.isReact) {
+                    this.clearTemplate(['ratingLabelTemplate']);
+                }
                 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]);
+                this.renderReactTemplates();
             }
             else {
                 this.spanLabel.textContent = this.currentValue + ' / ' + this.itemsCount;
             }
-            this.renderReactTemplates();
         }
     }
     updateReset() {
         if (this.allowReset) {
-            this.resetElement = this.createElement('span', { className: RESET });
+            this.resetElement = this.createElement('span', {
+                className: RESET,
+                attrs: { 'aria-label': 'resetbutton', 'role': 'button' }
+            });
             this.updateResetButton();
             EventHandler.add(this.resetElement, 'click', this.resetClicked, this);
             this.wrapper.insertBefore(this.resetElement, this.ratingItemList);
@@ -15134,9 +15184,7 @@ let Rating = class Rating extends Component {
         this.triggerChange(e, this.currentValue);
         this.updateItemValue();
         this.updateLabel();
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        this.updateResetButton();
     }
     updateValueChange(e, val, isInteracted = true) {
         this.triggerChange(e, val, isInteracted);
@@ -15212,6 +15260,8 @@ let Rating = class Rating extends Component {
     /**
      * Reset’s the value to minimum.
      *
+     * {% codeBlock src='rating/reset/index.md' %}{% endcodeBlock %}
+     *
      * @returns {void}
      */
     reset() {
@@ -15263,12 +15313,13 @@ let Rating = class Rating extends Component {
                     Math.round(0.1 * 10) / 10;
             currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;
             this.updateValueChange(e, (currentValue));
-            if (this.allowReset) {
-                this.updateResetButton();
-            }
+            this.updateResetButton();
         }
     }
     updateContent() {
+        if (this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         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);
@@ -15306,6 +15357,7 @@ let Rating = class Rating extends Component {
         super.destroy();
         // unwires the events and detach the li elements
         this.removeItemElements();
+        this.clearTemplate();
         if (this.spanLabel) {
             remove(this.spanLabel);
             this.spanLabel = null;
@@ -15324,6 +15376,7 @@ let Rating = class Rating extends Component {
         remove(this.wrapper);
         this.wrapper = null;
         this.keyboardModuleRating.destroy();
+        this.keyboardModuleRating = null;
         ['value', 'aria-label', 'name'].forEach((attr) => {
             this.element.removeAttribute(attr);
         });
@@ -15383,7 +15436,9 @@ let Rating = class Rating extends Component {
                     this.updateTooltip();
                     break;
                 case 'precision':
-                    this.updatePrecision();
+                    this.updateMinValue();
+                    this.triggerChange(null, this.value, false);
+                    this.updateItemValue();
                     this.updateLabel();
                     break;
                 case 'enableSingleSelection':
@@ -15404,7 +15459,6 @@ let Rating = class Rating extends Component {
                 case 'itemsCount':
                     this.removeItemElements();
                     this.renderItems();
-                    this.updateItemValue();
                     this.updateLabel();
                     break;
             }