@syncfusion/ej2-inputs 21.2.8 → 22.1.34

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

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, isNullOrUndefined, merge, onIntlChange, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, initializeCSPTemplate, isNullOrUndefined, merge, onIntlChange, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
 
@@ -52,14 +52,14 @@ var Input;
         }
         bindInitialEvent(args);
         if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&
-            args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {
+            args.properties.showClearButton) {
             setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);
             inputObject.clearButton.setAttribute('role', 'button');
             if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {
                 addClass([inputObject.container], CLASSNAMES.INPUTGROUP);
             }
         }
-        if (!isNullOrUndefined(args.buttons) && args.element.tagName !== 'TEXTAREA') {
+        if (!isNullOrUndefined(args.buttons)) {
             for (let i = 0; i < args.buttons.length; i++) {
                 inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));
             }
@@ -82,9 +82,11 @@ var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.add('e-input-focus');
             }
-            setTimeout(() => {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto') {
+                setTimeout(() => {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('blur', function () {
             const parent = getParentNode(this);
@@ -92,9 +94,11 @@ var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.remove('e-input-focus');
             }
-            setTimeout(() => {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto' && args.element.value === '') {
+                setTimeout(() => {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('input', () => {
             checkInputValue(floatType, args.element);
@@ -298,7 +302,7 @@ var Input;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function wireClearBtnEvents(element, button, container) {
-        if (!isNullOrUndefined(button) && (isBindClearAction === undefined || isBindClearAction)) {
+        if (isBindClearAction === undefined || isBindClearAction) {
             button.addEventListener('click', (event) => {
                 if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
                     event.preventDefault();
@@ -379,7 +383,9 @@ var Input;
      */
     function setValue$$1(value, element, floatLabelType, clearButton) {
         element.value = value;
-        calculateWidth(element, element.parentElement);
+        if (floatLabelType === 'Auto' && value === '') {
+            calculateWidth(element, element.parentElement);
+        }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }
@@ -1928,8 +1934,12 @@ let NumericTextBox = class NumericTextBox extends Component {
         event.stopPropagation();
         clearInterval(this.timeOut);
         this.isCalled = false;
-        EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);
-        EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
+        if (this.spinUp) {
+            EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);
+        }
+        if (this.spinDown) {
+            EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
+        }
     }
     /**
      * Increments the NumericTextBox value with the specified step value.
@@ -4303,13 +4313,15 @@ let Slider = class Slider extends Component {
     getThemeInitialization() {
         this.isMaterial = this.getTheme(this.sliderContainer) === 'material'
             || this.getTheme(this.sliderContainer) === 'material-dark';
+        this.isMaterial3 = this.getTheme(this.sliderContainer) === 'Material3'
+            || this.getTheme(this.sliderContainer) === 'Material3-dark';
         this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap'
             || this.getTheme(this.sliderContainer) === 'bootstrap-dark';
         this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
         this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
         this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
-        this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
+        this.isMaterialTooltip = (this.isMaterial || this.isMaterial3) && this.type !== 'Range' && this.tooltip.isVisible;
     }
     createRangeBar() {
         if (this.type !== 'Default') {
@@ -4462,7 +4474,7 @@ let Slider = class Slider extends Component {
             if (this.type !== 'Default') {
                 this.rangeBar.style.transition = 'none';
             }
-            if (this.isMaterial && this.tooltip.isVisible && this.type === 'Default') {
+            if ((this.isMaterial || this.isMaterial3) && this.tooltip.isVisible && this.type === 'Default') {
                 this.tooltipElement.style.transition = this.transition.handle;
             }
             this.tooltipToggle(this.getHandle());
@@ -4509,9 +4521,6 @@ let Slider = class Slider extends Component {
         }
     }
     setHandler() {
-        if (this.min > this.max) {
-            this.min = this.max;
-        }
         this.createFirstHandle();
         if (this.type === 'Range') {
             this.createSecondHandle();
@@ -4661,7 +4670,7 @@ let Slider = class Slider extends Component {
         }
     }
     tooltipCollision(position) {
-        if (this.isBootstrap || this.isBootstrap4 || (this.isMaterial && !this.isMaterialTooltip)) {
+        if (this.isBootstrap || this.isBootstrap4 || ((this.isMaterial || this.isMaterial3) && !this.isMaterialTooltip)) {
             const tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;
             switch (position) {
                 case 'TopCenter':
@@ -4799,9 +4808,9 @@ let Slider = class Slider extends Component {
     }
     renderTooltip() {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
             cssClass: classNames.sliderTooltip,
-            height: this.isMaterial ? 30 : 'auto',
+            height: (this.isMaterial || this.isMaterial3) ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
             opensOn: 'Custom',
             beforeOpen: this.tooltipBeforeOpen.bind(this),
@@ -4861,7 +4870,7 @@ let Slider = class Slider extends Component {
         attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });
     }
     buttonFocusOut() {
-        if (this.isMaterial) {
+        if (this.isMaterial || this.isMaterial3) {
             this.getHandle().classList.remove('e-large-thumb-size');
         }
     }
@@ -5038,7 +5047,12 @@ let Slider = class Slider extends Component {
                     start = this.makeRoundNumber(start + smallStep, decimalPoints);
                 }
                 else {
-                    start = this.makeRoundNumber(start - smallStep, decimalPoints);
+                    if (this.min > this.max) {
+                        start = this.makeRoundNumber(start + smallStep, decimalPoints);
+                    }
+                    else {
+                        start = this.makeRoundNumber(start - smallStep, decimalPoints);
+                    }
                 }
                 left = this.makeRoundNumber(left + smallStep, decimalPoints);
             }
@@ -5279,16 +5293,16 @@ let Slider = class Slider extends Component {
                 (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));
         }
         else if ((args.keyCode === 36)) {
-            value = parseFloat(this.min.toString());
+            value = parseFloat(this.min < this.max ? this.min.toString() : this.max.toString());
         }
         else if ((args.keyCode === 35)) {
-            value = parseFloat(this.max.toString());
+            value = parseFloat(this.min < this.max ? this.max.toString() : this.min.toString());
         }
         if (this.limits.enabled) {
             value = this.getLimitCorrectedValues(value);
         }
         this.changeHandleValue(value);
-        if (this.isMaterial && !this.tooltip.isVisible &&
+        if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&
             !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
             this.materialChange();
         }
@@ -5337,12 +5351,12 @@ let Slider = class Slider extends Component {
         }
         else {
             if (this.type === 'MinRange') {
-                this.rangeBar.style.bottom = '0px';
-                setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });
+                this.rangeBar.style.bottom = this.min > this.max ? this.handlePos1 + 'px' : '0px';
+                setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.min > this.max ? this.element.clientHeight - this.handlePos1 + 'px' : this.handlePos1 + 'px' });
             }
             else {
-                this.rangeBar.style.bottom = this.handlePos1 + 'px';
-                setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });
+                this.rangeBar.style.bottom = this.min > this.max ? this.handlePos2 + 'px' : this.handlePos1 + 'px';
+                setStyleAttribute(this.rangeBar, { 'height': this.min > this.max ? this.handlePos1 - this.handlePos2 + 'px' : this.handlePos2 - this.handlePos1 + 'px' });
             }
         }
     }
@@ -5363,8 +5377,8 @@ let Slider = class Slider extends Component {
             }
         }
         else {
-            this.limitBarFirst.style.bottom = fromMinPostion + 'px';
-            this.limitBarFirst.style.height = (fromMaxpostion - fromMinPostion) + 'px';
+            this.limitBarFirst.style.bottom = (this.min < this.max ? fromMinPostion : fromMaxpostion) + 'px';
+            this.limitBarFirst.style.height = (this.min < this.max ? (fromMaxpostion - fromMinPostion) : (fromMinPostion - fromMaxpostion)) + 'px';
         }
         if (this.type === 'Range') {
             if (this.orientation === 'Horizontal') {
@@ -5378,8 +5392,8 @@ let Slider = class Slider extends Component {
                 }
             }
             else {
-                this.limitBarSecond.style.bottom = toMinPostion + 'px';
-                this.limitBarSecond.style.height = (toMaxpostion - toMinPostion) + 'px';
+                this.limitBarSecond.style.bottom = (this.min < this.max ? toMinPostion : toMaxpostion) + 'px';
+                this.limitBarSecond.style.height = (this.min < this.max ? (toMaxpostion - toMinPostion) : (toMinPostion - toMaxpostion)) + 'px';
             }
         }
     }
@@ -5405,13 +5419,13 @@ let Slider = class Slider extends Component {
     }
     getLimitValueAndPosition(currentValue, minValue, maxValue, limitBar) {
         if (isNullOrUndefined(minValue)) {
-            minValue = this.min;
+            minValue = this.min < this.max ? this.min : this.max;
             if (isNullOrUndefined(currentValue) && limitBar) {
                 currentValue = minValue;
             }
         }
         if (isNullOrUndefined(maxValue)) {
-            maxValue = this.max;
+            maxValue = this.min < this.max ? this.max : this.min;
             if (isNullOrUndefined(currentValue) && limitBar) {
                 currentValue = maxValue;
             }
@@ -5593,10 +5607,14 @@ let Slider = class Slider extends Component {
         }
         this.handlePos1 = this.checkHandlePosition(this.handleVal1);
         this.handlePos2 = this.checkHandlePosition(this.handleVal2);
-        if (this.handlePos1 > this.handlePos2) {
+        if (this.min < this.max && this.handlePos1 > this.handlePos2) {
             this.handlePos1 = this.handlePos2;
             this.handleVal1 = this.handleVal2;
         }
+        if (this.min > this.max && this.handlePos1 < this.handlePos2) {
+            this.handlePos2 = this.handlePos1;
+            this.handleVal2 = this.handleVal1;
+        }
         this.preHandlePos1 = this.handlePos1;
         this.preHandlePos2 = this.handlePos2;
         if (this.limits.enabled) {
@@ -5633,9 +5651,6 @@ let Slider = class Slider extends Component {
         return pos;
     }
     checkHandleValue(value) {
-        if (this.min > this.max) {
-            this.min = this.max;
-        }
         if (this.min === this.max) {
             return (parseFloat(formatUnit(this.max)));
         }
@@ -5695,13 +5710,13 @@ let Slider = class Slider extends Component {
                 this.materialHandle.style.bottom = `${this.handlePos1}px`;
             }
             if (this.type === 'MinRange') {
-                this.rangeBar.style.bottom = '0px';
-                setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });
+                this.rangeBar.style.bottom = this.min > this.max ? this.handlePos1 + 'px' : '0px';
+                setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.min > this.max ? this.element.clientHeight - this.handlePos1 + 'px' : this.handlePos1 + 'px' });
             }
             else if (this.type === 'Range') {
                 this.secondHandle.style.bottom = `${this.handlePos2}px`;
-                this.rangeBar.style.bottom = this.handlePos1 + 'px';
-                setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });
+                this.rangeBar.style.bottom = this.min > this.max ? this.handlePos2 + 'px' : this.handlePos1 + 'px';
+                setStyleAttribute(this.rangeBar, { 'height': this.min > this.max ? this.handlePos1 - this.handlePos2 + 'px' : this.handlePos2 - this.handlePos1 + 'px' });
             }
         }
         if (this.limits.enabled) {
@@ -5730,7 +5745,7 @@ let Slider = class Slider extends Component {
             if (!(this.limits.enabled && this.limits.startHandleFixed)) {
                 this.handleVal1 = this.checkHandleValue(value);
                 this.handlePos1 = this.checkHandlePosition(this.handleVal1);
-                if (this.type === 'Range' && this.handlePos1 > this.handlePos2) {
+                if (this.type === 'Range' && ((this.handlePos1 > this.handlePos2 && this.min < this.max) || (this.handlePos1 < this.handlePos2 && this.min > this.max))) {
                     this.handlePos1 = this.handlePos2;
                     this.handleVal1 = this.handleVal2;
                 }
@@ -5744,7 +5759,7 @@ let Slider = class Slider extends Component {
             if (!(this.limits.enabled && this.limits.endHandleFixed)) {
                 this.handleVal2 = this.checkHandleValue(value);
                 this.handlePos2 = this.checkHandlePosition(this.handleVal2);
-                if (this.type === 'Range' && this.handlePos2 < this.handlePos1) {
+                if (this.type === 'Range' && ((this.handlePos2 < this.handlePos1 && this.min < this.max) || (this.handlePos2 > this.handlePos1 && this.min > this.max))) {
                     this.handlePos2 = this.handlePos1;
                     this.handleVal2 = this.handleVal1;
                 }
@@ -5862,7 +5877,7 @@ let Slider = class Slider extends Component {
         }
         let handlepos = this.xyToPosition(pos);
         let handleVal = this.positionToValue(handlepos);
-        if (this.type === 'Range' && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1)) {
+        if (this.type === 'Range' && (this.min < (this.max) && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1) || (this.min > this.max) && (this.handlePos1 - handlepos) > (handlepos - this.handlePos2))) {
             this.activeHandle = 2;
             if (!(this.limits.enabled && this.limits.endHandleFixed)) {
                 if (this.limits.enabled) {
@@ -5906,7 +5921,7 @@ let Slider = class Slider extends Component {
             behindElement = document.elementFromPoint(eventX, eventY);
         }
         if (evt.target === handle && behindElement != handle) {
-            if (this.isMaterial && !this.tooltip.isVisible &&
+            if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&
                 !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
                 this.materialChange();
             }
@@ -5917,7 +5932,7 @@ let Slider = class Slider extends Component {
         if (!this.checkRepeatedValue(handleVal)) {
             return;
         }
-        let transition = this.isMaterial && this.tooltip.isVisible ?
+        let transition = (this.isMaterial || this.isMaterial3) && this.tooltip.isVisible ?
             this.transitionOnMaterialTooltip : this.transition;
         this.getHandle().style.transition = transition.handle;
         if (this.type !== 'Default') {
@@ -5968,16 +5983,28 @@ let Slider = class Slider extends Component {
             else {
                 pos = { x: xPostion + this.secondPartRemain, y: yPostion + this.secondPartRemain };
             }
-            this.handlePos1 = this.xyToPosition(pos);
-            this.handleVal1 = this.positionToValue(this.handlePos1);
+            if (this.min > this.max) {
+                this.handlePos2 = this.xyToPosition(pos);
+                this.handleVal2 = this.positionToValue(this.handlePos2);
+            }
+            else {
+                this.handlePos1 = this.xyToPosition(pos);
+                this.handleVal1 = this.positionToValue(this.handlePos1);
+            }
             if (!this.enableRtl) {
                 pos = { x: xPostion + this.secondPartRemain, y: yPostion - this.firstPartRemain };
             }
             else {
                 pos = { x: xPostion - this.firstPartRemain, y: yPostion - this.firstPartRemain };
             }
-            this.handlePos2 = this.xyToPosition(pos);
-            this.handleVal2 = this.positionToValue(this.handlePos2);
+            if (this.min > this.max) {
+                this.handlePos1 = this.xyToPosition(pos);
+                this.handleVal1 = this.positionToValue(this.handlePos1);
+            }
+            else {
+                this.handlePos2 = this.xyToPosition(pos);
+                this.handleVal2 = this.positionToValue(this.handlePos2);
+            }
             if (this.limits.enabled) {
                 let value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);
                 this.handleVal1 = value[0];
@@ -5998,11 +6025,11 @@ let Slider = class Slider extends Component {
                     this.handleValueAdjust(this.handleVal2, this.limits.maxEnd, 2);
                 }
             }
-            if (this.handleVal2 === this.max) {
-                this.handleValueAdjust(this.handleVal2, this.max, 2);
+            if (this.handleVal2 === (this.min > this.max ? this.min : this.max)) {
+                this.handleValueAdjust(this.handleVal2, (this.min > this.max ? this.min : this.max), 2);
             }
-            if (this.handleVal1 === this.min) {
-                this.handleValueAdjust(this.handleVal1, this.min, 1);
+            if (this.handleVal1 === (this.min > this.max ? this.max : this.min)) {
+                this.handleValueAdjust(this.handleVal1, (this.min > this.max ? this.max : this.min), 1);
             }
         }
         this.activeHandle = 1;
@@ -6021,7 +6048,7 @@ let Slider = class Slider extends Component {
             this.secondHandle.classList.remove(classNames.sliderActiveHandle);
         }
         this.closeTooltip();
-        if (this.isMaterial) {
+        if (this.isMaterial || this.isMaterial3) {
             this.getHandle().classList.remove('e-large-thumb-size');
             if (this.isMaterialTooltip) {
                 this.tooltipElement.classList.remove(classNames.materialTooltipActive);
@@ -6060,7 +6087,7 @@ let Slider = class Slider extends Component {
             if (this.activeHandle === 1) {
                 this.firstHandle.classList.add(classNames.sliderActiveHandle);
                 if (!(this.limits.enabled && this.limits.startHandleFixed)) {
-                    if (handlepos > this.handlePos2) {
+                    if ((this.min < this.max && handlepos > this.handlePos2 || (this.min > this.max && handlepos < this.handlePos2))) {
                         handlepos = this.handlePos2;
                         handleVal = this.handleVal2;
                     }
@@ -6079,7 +6106,7 @@ let Slider = class Slider extends Component {
             else if (this.activeHandle === 2) {
                 this.secondHandle.classList.add(classNames.sliderActiveHandle);
                 if (!(this.limits.enabled && this.limits.endHandleFixed)) {
-                    if (handlepos < this.handlePos1) {
+                    if ((this.min < this.max && handlepos < this.handlePos1) || (this.min > this.max && handlepos > this.handlePos1)) {
                         handlepos = this.handlePos1;
                         handleVal = this.handleVal1;
                     }
@@ -6104,7 +6131,7 @@ let Slider = class Slider extends Component {
             this.rangeBar.style.transition = 'none';
         }
         this.setHandlePosition(evt);
-        if (this.isMaterial && !this.tooltip.isVisible &&
+        if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&
             !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
             this.materialChange();
         }
@@ -6542,7 +6569,9 @@ let Slider = class Slider extends Component {
                 case 'tooltip':
                     if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {
                         this.setTooltip(prop);
-                        this.wireEvents();
+                        if (!this.showButtons) {
+                            this.wireEvents();
+                        }
                     }
                     break;
                 case 'type':
@@ -6659,7 +6688,7 @@ let Slider = class Slider extends Component {
             this.ul.style.zIndex = (this.zIndex + -7) + '';
             this.element.style.zIndex = (this.zIndex + 2) + '';
         }
-        if (!this.isMaterial && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {
+        if (!this.isMaterial && !this.isMaterial3 && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {
             this.element.style.zIndex = (this.zIndex + 2) + '';
         }
         this.firstHandle.style.zIndex = (this.zIndex + 3) + '';
@@ -7450,7 +7479,17 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             this.customPlacement.call(this, this.inputElement, errorElement);
         }
         else {
-            this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);
+            const inputParent = this.inputElement.parentElement;
+            const grandParent = inputParent.parentElement;
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                grandParent.insertBefore(errorElement, inputParent.nextSibling);
+            }
+            else if (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper')) {
+                grandParent.parentElement.insertBefore(errorElement, grandParent.nextSibling);
+            }
+            else {
+                inputParent.insertBefore(errorElement, this.inputElement.nextSibling);
+            }
         }
         errorElement.style.display = 'block';
         this.getErrorElement(name);
@@ -7545,7 +7584,15 @@ FormValidator.checkValidator = {
         return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];
     },
     date: (option) => {
-        return !isNaN(new Date(option.value).getTime());
+        if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {
+            var globalize = new Internationalization;
+            var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };
+            var dateValue = globalize.parseDate(option.value, dateOptions);
+            return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));
+        }
+        else {
+            return !isNaN(new Date(option.value).getTime());
+        }
     },
     max: (option) => {
         if (!isNaN(Number(option.value))) {
@@ -8929,7 +8976,7 @@ let Uploader = class Uploader extends Component {
                     const dataFiles = this.allTypes ? eventArgs.modifiedFilesData :
                         this.checkExtension(eventArgs.modifiedFilesData);
                     this.updateSortedFileList(dataFiles);
-                    this.filesData = dataFiles;
+                    this.filesData = this.filesData.concat(dataFiles);
                     if (!this.isForm || this.allowUpload()) {
                         this.checkAutoUpload(dataFiles);
                     }
@@ -8984,21 +9031,13 @@ let Uploader = class Uploader extends Component {
     updateSortedFileList(filesData) {
         const previousListClone = this.createElement('div', { id: 'clonewrapper' });
         let added = -1;
-        let removedList;
         if (this.listParent) {
             for (let i = 0; i < this.listParent.querySelectorAll('li').length; i++) {
                 const liElement = this.listParent.querySelectorAll('li')[i];
                 previousListClone.appendChild(liElement.cloneNode(true));
             }
-            removedList = this.listParent.querySelectorAll('li');
-            for (const item of removedList) {
-                detach(item);
-            }
             this.removeActionButtons();
             const oldList = [].slice.call(previousListClone.childNodes);
-            detach(this.listParent);
-            this.listParent = null;
-            this.fileList = [];
             this.createParentUL();
             for (let index = 0; index < filesData.length; index++) {
                 for (let j = 0; j < this.filesData.length; j++) {
@@ -9823,7 +9862,7 @@ let Uploader = class Uploader extends Component {
     templateComplier(uploadTemplate) {
         if (uploadTemplate) {
             try {
-                if (selectAll(uploadTemplate, document).length) {
+                if (typeof uploadTemplate !== 'function' && selectAll(uploadTemplate, document).length) {
                     return compile(select(uploadTemplate, document).innerHTML.trim());
                 }
                 else {
@@ -11414,7 +11453,7 @@ let ColorPicker = class ColorPicker extends Component {
         hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));
         const dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });
         hsvContainer.appendChild(dragHandler);
-        if (this.value === null) {
+        if (this.value === null || this.value === '') {
             this.value = '#008000ff';
         }
         this.rgb = this.hexToRgb(this.value);
@@ -12756,6 +12795,10 @@ let ColorPicker = class ColorPicker extends Component {
                     preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));
                 }
             }
+            else if (this.noColor && this.mode === 'Palette' && this.value === '') {
+                const preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);
+                preview.style.backgroundColor = '';
+            }
             else {
                 this.value = oldProp.value;
             }
@@ -13049,10 +13092,8 @@ let TextBox = class TextBox extends Component {
                     }
                     break;
                 case 'showClearButton':
-                    if (this.respectiveElement.tagName !== 'TEXTAREA') {
-                        Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);
-                        this.bindClearEvent();
-                    }
+                    Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);
+                    this.bindClearEvent();
                     break;
                 case 'enableRtl':
                     Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);
@@ -13435,7 +13476,7 @@ let TextBox = class TextBox extends Component {
         }
     }
     bindClearEvent() {
-        if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {
+        if (this.showClearButton) {
             if (this.enabled) {
                 EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);
             }
@@ -14951,8 +14992,8 @@ let Rating = class Rating extends Component {
             return;
         }
         const previousValue = this.currentValue;
-        this.updateCurrentValue(currValue);
         this.triggerChange(e, currValue);
+        this.updateCurrentValue(currValue);
         if (this.showTooltip) {
             if (element) {
                 if (Math.ceil(currValue) !== Math.ceil(previousValue)) {
@@ -14995,11 +15036,11 @@ let Rating = class Rating extends Component {
         }
         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]);
+            append(this.fullTemplateFunction({ index: index, ratingValue: val }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate), spanEle);
         }
         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]);
+            append(this.emptyTemplateFunction({ index: index, ratingValue: val }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate'), this.isStringTemplate), spanEle);
         }
         else {
             addClass([spanEle], ICONCSS.split(' '));
@@ -15009,7 +15050,7 @@ let Rating = class Rating extends Component {
         spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);
         removeClass([spanEle], ICONCSS.split(' '));
         if (spanEle.firstChild) {
-            spanEle.removeChild(spanEle.firstChild);
+            spanEle.innerHTML = '';
         }
     }
     updateTooltip() {
@@ -15093,7 +15134,7 @@ let Rating = class Rating extends Component {
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(FULLTEMPLATE);
-            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate)[0]);
+            append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate), spanEle);
         }
         else if (this.emptyTemplate) {
             if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {
@@ -15101,7 +15142,7 @@ let Rating = class Rating extends Component {
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate)[0]);
+            append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate), spanEle);
         }
         else {
             this.removeItemContent(spanEle);
@@ -15115,23 +15156,30 @@ let Rating = class Rating extends Component {
             }
             let content;
             if (this.tooltipTemplate) {
+                content = this.createElement('span', { className: 'e-rating-tooltip-content' });
                 const templateFunction = this.getTemplateString(this.tooltipTemplate);
-                content = templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate)[0];
+                append(templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate), content);
+                this.tooltipObj.setProperties({ content: content }, isChange);
             }
             else {
                 content = this.currentValue.toString();
+                this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content; }) }, isChange);
             }
-            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;
+            if (typeof template !== 'function') {
+                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;
+                }
             }
             else {
                 stringContent = template;
@@ -15162,10 +15210,10 @@ let Rating = class Rating extends Component {
                     this.clearTemplate(['ratingLabelTemplate']);
                 }
                 if (this.spanLabel.firstChild) {
-                    this.spanLabel.removeChild(this.spanLabel.firstChild);
+                    this.spanLabel.innerHTML = '';
                 }
                 const templateFunction = this.getTemplateString(this.labelTemplate);
-                this.spanLabel.append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate)[0]);
+                append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate), this.spanLabel);
                 this.renderReactTemplates();
             }
             else {
@@ -15250,7 +15298,7 @@ let Rating = class Rating extends Component {
         if (this.showTooltip) {
             if (!this.tooltipOpen) {
                 this.updateTooltipContent(false);
-                this.tooltipObj.open(element); //eslint-disable-line
+                this.tooltipObj.open(element);
                 this.tooltipOpen = true;
             }
             else if (isChange) {