@syncfusion/ej2-inputs 21.2.9 → 22.1.38

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);
@@ -148,6 +152,7 @@ var Input;
         }
         if (isNullOrUndefined(inputObject.container)) {
             inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div', makeElement);
+            inputObject.container.classList.add(CLASSNAMES.INPUTGROUP);
             if (args.element.parentNode) {
                 args.element.parentNode.insertBefore(inputObject.container, args.element);
             }
@@ -287,10 +292,6 @@ var Input;
                 inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;
             baseElement.insertAdjacentElement('afterend', button);
         }
-        if (!isNullOrUndefined(container) &&
-            container.classList.contains(CLASSNAMES.FLOATINPUT)) {
-            addClass([container], CLASSNAMES.INPUTGROUP);
-        }
         addClass([button], CLASSNAMES.CLEARICONHIDE);
         wireClearBtnEvents(element, button, container);
         button.setAttribute('aria-label', 'close');
@@ -298,7 +299,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 +380,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);
         }
@@ -686,9 +689,6 @@ var Input;
                 if (isPrependIcon) {
                     iconEle = container.querySelector('.e-input-group-icon');
                 }
-                if (isNullOrUndefined(iconEle)) {
-                    container.classList.remove(CLASSNAMES.INPUTGROUP);
-                }
             }
             else {
                 const floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);
@@ -843,9 +843,6 @@ var Input;
             }
         }
         innerWrapper.parentNode.insertBefore(button, innerWrapper);
-        if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {
-            container.classList.add(CLASSNAMES.INPUTGROUP);
-        }
         _internalRipple(true, container, button);
         return button;
     }
@@ -863,9 +860,6 @@ var Input;
     function appendSpan(iconClass, container, internalCreateElement) {
         const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         const button = createIconEle(iconClass, makeElement);
-        if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {
-            container.classList.add(CLASSNAMES.INPUTGROUP);
-        }
         const wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :
             container;
         wrap.appendChild(button);
@@ -1928,8 +1922,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 +4301,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 +4462,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 +4509,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();
@@ -4549,12 +4546,21 @@ let Slider = class Slider extends Component {
         if (this.initialTooltip) {
             this.initialTooltip = false;
             this.setTooltipContent();
-            args.text = text = this.tooltipObj.content;
+            args.text = text = (typeof (this.tooltipObj.content) === 'function' ? this.tooltipObj.content() : this.tooltipObj.content);
             this.trigger('tooltipChange', args, (observedArgs) => {
                 this.addTooltipClass(observedArgs.text);
                 if (text !== observedArgs.text) {
                     this.customAriaText = observedArgs.text;
-                    this.tooltipObj.content = observedArgs.text;
+                    if (this.enableHtmlSanitizer) {
+                        observedArgs.text = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());
+                    }
+                    else {
+                        observedArgs.text = observedArgs.text.toString();
+                    }
+                    const contentTemp = function () {
+                        return observedArgs.text;
+                    };
+                    this.tooltipObj.content = initializeCSPTemplate(contentTemp);
                     this.setAriaAttrValue(this.firstHandle);
                     if (this.type === 'Range') {
                         this.setAriaAttrValue(this.secondHandle);
@@ -4569,7 +4575,10 @@ let Slider = class Slider extends Component {
     setTooltipContent() {
         let content;
         content = this.formatContent(this.tooltipFormatInfo, false);
-        this.tooltipObj.content = content;
+        const contentTemp = function () {
+            return content;
+        };
+        this.tooltipObj.content = initializeCSPTemplate(contentTemp);
     }
     formatContent(formatInfo, ariaContent) {
         let content = '';
@@ -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;
             }
@@ -5551,7 +5565,7 @@ let Slider = class Slider extends Component {
             eventArgs = {
                 value: this.value,
                 previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,
-                action: eventName, text: this.tooltipObj.content, isInteracted: isNullOrUndefined(e) ? false : true
+                action: eventName, text: (typeof (this.tooltipObj.content) === 'function' ? this.tooltipObj.content() : this.tooltipObj.content), isInteracted: isNullOrUndefined(e) ? false : true
             };
         }
         else {
@@ -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))) {
@@ -7909,7 +7956,7 @@ let Uploader = class Uploader extends Component {
             detach(this.listParent);
             this.listParent = null;
             this.fileList = [];
-            this.createFileList(this.filesData);
+            this.internalCreateFileList(this.filesData);
             if (this.actionButtons) {
                 this.removeActionButtons();
                 this.renderActionButtons();
@@ -8146,7 +8193,7 @@ let Uploader = class Uploader extends Component {
     renderPreLoadFiles() {
         if (this.files.length) {
             if (this.enablePersistence && this.filesData.length) {
-                this.createFileList(this.filesData);
+                this.internalCreateFileList(this.filesData);
                 return;
             }
             if (isNullOrUndefined(this.files[0].size)) {
@@ -8172,7 +8219,7 @@ let Uploader = class Uploader extends Component {
                 filesData.push(fileData);
                 this.filesData.push(fileData);
             }
-            this.createFileList(filesData);
+            this.internalCreateFileList(filesData);
             if (!this.autoUpload && this.listParent && !this.actionButtons && (!this.isForm || this.allowUpload()) && this.showFileList) {
                 this.renderActionButtons();
             }
@@ -8929,13 +8976,14 @@ 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);
                     }
                 }
                 else {
-                    this.createFileList(fileData, true);
+                    this.internalCreateFileList(fileData);
+                    this.filesData = this.filesData.concat(fileData);
                     if (!this.isForm || this.allowUpload()) {
                         this.checkAutoUpload(fileData);
                     }
@@ -8984,21 +9032,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++) {
@@ -9010,12 +9050,12 @@ let Uploader = class Uploader extends Component {
                     }
                 }
                 if (added !== index) {
-                    this.createFileList([filesData[index]]);
+                    this.internalCreateFileList([filesData[index]]);
                 }
             }
         }
         else {
-            this.createFileList(filesData);
+            this.internalCreateFileList(filesData);
         }
     }
     isBlank(str) {
@@ -9307,10 +9347,13 @@ let Uploader = class Uploader extends Component {
      * @param { FileInfo[] } fileData - Specifies the files data for file list creation.
      * @returns {void}
      */
-    createFileList(fileData, isSelectedFile) {
+    createFileList(fileData) {
+        this.filesData = this.filesData && this.filesData.length > 0 ? this.filesData.concat(fileData) : fileData;
+        this.internalCreateFileList(fileData);
+    }
+    internalCreateFileList(fileData) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
         this.createParentUL();
-        this.filesData = (isSelectedFile) ? this.filesData.concat(fileData) : fileData;
         if (this.template !== '' && !isNullOrUndefined(this.template)) {
             if (this.isFormUpload()) {
                 this.uploadWrapper.classList.add(FORM_UPLOAD);
@@ -9823,7 +9866,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 {
@@ -12211,23 +12254,12 @@ let ColorPicker = class ColorPicker extends Component {
     }
     paletteKeyDown(e) {
         const target = e.target;
+        if (!target.classList.contains(PALETTES)) {
+            return;
+        }
         let selectedEle;
         let idx;
         const tiles = [].slice.call(selectAll('.' + TILE, target));
-        if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && !e.shiftKey)) {
-            if (this.modeSwitcher || this.showButtons) {
-                this.getPopupEle().querySelector('.e-btn').focus();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-        else if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && e.shiftKey)) {
-            if (this.splitBtn) {
-                this.splitBtn.element.focus();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
         const prevSelectedEle = (tiles.filter((tile) => tile.classList.contains('e-selected'))).pop();
         switch (!e.altKey && e.keyCode) {
             case 39:
@@ -13064,10 +13096,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]);
@@ -13450,7 +13480,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);
             }
@@ -14966,8 +14996,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)) {
@@ -15010,11 +15040,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(' '));
@@ -15024,7 +15054,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() {
@@ -15108,7 +15138,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)) {
@@ -15116,7 +15146,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);
@@ -15130,23 +15160,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;
@@ -15177,10 +15214,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 {
@@ -15265,7 +15302,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) {