@syncfusion/ej2-inputs 21.2.9 → 22.1.38

package/dist/es6/ej2-inputs.es5.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 (var 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(function () {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto') {
+                setTimeout(function () {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('blur', function () {
             var parent = getParentNode(this);
@@ -92,9 +94,11 @@ var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.remove('e-input-focus');
             }
-            setTimeout(function () {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto' && args.element.value === '') {
+                setTimeout(function () {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('input', function () {
             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);
             }
@@ -289,10 +294,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');
@@ -300,7 +301,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', function (event) {
                 if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
                     event.preventDefault();
@@ -381,7 +382,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);
         }
@@ -690,9 +693,6 @@ var Input;
                 if (isPrependIcon) {
                     iconEle = container.querySelector('.e-input-group-icon');
                 }
-                if (isNullOrUndefined(iconEle)) {
-                    container.classList.remove(CLASSNAMES.INPUTGROUP);
-                }
             }
             else {
                 var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);
@@ -849,9 +849,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;
     }
@@ -869,9 +866,6 @@ var Input;
     function appendSpan(iconClass, container, internalCreateElement) {
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         var button = createIconEle(iconClass, makeElement);
-        if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {
-            container.classList.add(CLASSNAMES.INPUTGROUP);
-        }
         var wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :
             container;
         wrap.appendChild(button);
@@ -1958,8 +1952,12 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         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.
@@ -4400,13 +4398,15 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.getThemeInitialization = function () {
         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;
     };
     Slider.prototype.createRangeBar = function () {
         if (this.type !== 'Default') {
@@ -4560,7 +4560,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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());
@@ -4607,9 +4607,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Slider.prototype.setHandler = function () {
-        if (this.min > this.max) {
-            this.min = this.max;
-        }
         this.createFirstHandle();
         if (this.type === 'Range') {
             this.createSecondHandle();
@@ -4648,12 +4645,21 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         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, function (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();
+                    }
+                    var contentTemp = function () {
+                        return observedArgs.text;
+                    };
+                    _this.tooltipObj.content = initializeCSPTemplate(contentTemp);
                     _this.setAriaAttrValue(_this.firstHandle);
                     if (_this.type === 'Range') {
                         _this.setAriaAttrValue(_this.secondHandle);
@@ -4668,7 +4674,10 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.setTooltipContent = function () {
         var content;
         content = this.formatContent(this.tooltipFormatInfo, false);
-        this.tooltipObj.content = content;
+        var contentTemp = function () {
+            return content;
+        };
+        this.tooltipObj.content = initializeCSPTemplate(contentTemp);
     };
     Slider.prototype.formatContent = function (formatInfo, ariaContent) {
         var content = '';
@@ -4760,7 +4769,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Slider.prototype.tooltipCollision = function (position) {
-        if (this.isBootstrap || this.isBootstrap4 || (this.isMaterial && !this.isMaterialTooltip)) {
+        if (this.isBootstrap || this.isBootstrap4 || ((this.isMaterial || this.isMaterial3) && !this.isMaterialTooltip)) {
             var tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;
             switch (position) {
                 case 'TopCenter':
@@ -4900,9 +4909,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.renderTooltip = function () {
         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),
@@ -4962,7 +4971,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });
     };
     Slider.prototype.buttonFocusOut = function () {
-        if (this.isMaterial) {
+        if (this.isMaterial || this.isMaterial3) {
             this.getHandle().classList.remove('e-large-thumb-size');
         }
     };
@@ -5139,7 +5148,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                     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);
             }
@@ -5382,16 +5396,16 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                 (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();
         }
@@ -5440,12 +5454,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         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' });
             }
         }
     };
@@ -5466,8 +5480,8 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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') {
@@ -5481,8 +5495,8 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             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';
             }
         }
     };
@@ -5508,13 +5522,13 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.getLimitValueAndPosition = function (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;
             }
@@ -5655,7 +5669,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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 {
@@ -5697,10 +5711,14 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         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) {
@@ -5737,9 +5755,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         return pos;
     };
     Slider.prototype.checkHandleValue = function (value) {
-        if (this.min > this.max) {
-            this.min = this.max;
-        }
         if (this.min === this.max) {
             return (parseFloat(formatUnit(this.max)));
         }
@@ -5800,13 +5815,13 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                 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) {
@@ -5835,7 +5850,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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;
                 }
@@ -5849,7 +5864,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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;
                 }
@@ -5967,7 +5982,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         var handlepos = this.xyToPosition(pos);
         var 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) {
@@ -6011,7 +6026,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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();
             }
@@ -6022,7 +6037,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         if (!this.checkRepeatedValue(handleVal)) {
             return;
         }
-        var transition = this.isMaterial && this.tooltip.isVisible ?
+        var transition = (this.isMaterial || this.isMaterial3) && this.tooltip.isVisible ?
             this.transitionOnMaterialTooltip : this.transition;
         this.getHandle().style.transition = transition.handle;
         if (this.type !== 'Default') {
@@ -6074,16 +6089,28 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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) {
                 var value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);
                 this.handleVal1 = value[0];
@@ -6104,11 +6131,11 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                     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;
@@ -6127,7 +6154,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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);
@@ -6166,7 +6193,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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;
                     }
@@ -6185,7 +6212,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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;
                     }
@@ -6210,7 +6237,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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();
         }
@@ -6651,7 +6678,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                 case 'tooltip':
                     if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {
                         this.setTooltip(prop);
-                        this.wireEvents();
+                        if (!this.showButtons) {
+                            this.wireEvents();
+                        }
                     }
                     break;
                 case 'type':
@@ -6769,7 +6798,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             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) + '';
@@ -7586,7 +7615,17 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             this.customPlacement.call(this, this.inputElement, errorElement);
         }
         else {
-            this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);
+            var inputParent = this.inputElement.parentElement;
+            var 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);
@@ -7681,7 +7720,15 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];
         },
         date: function (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: function (option) {
             if (!isNaN(Number(option.value))) {
@@ -8079,7 +8126,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             detach(this.listParent);
             this.listParent = null;
             this.fileList = [];
-            this.createFileList(this.filesData);
+            this.internalCreateFileList(this.filesData);
             if (this.actionButtons) {
                 this.removeActionButtons();
                 this.renderActionButtons();
@@ -8316,7 +8363,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     Uploader.prototype.renderPreLoadFiles = function () {
         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)) {
@@ -8343,7 +8390,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 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();
             }
@@ -9120,13 +9167,14 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                     var 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);
                     }
@@ -9175,22 +9223,13 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     Uploader.prototype.updateSortedFileList = function (filesData) {
         var previousListClone = this.createElement('div', { id: 'clonewrapper' });
         var added = -1;
-        var removedList;
         if (this.listParent) {
             for (var i = 0; i < this.listParent.querySelectorAll('li').length; i++) {
                 var liElement = this.listParent.querySelectorAll('li')[i];
                 previousListClone.appendChild(liElement.cloneNode(true));
             }
-            removedList = this.listParent.querySelectorAll('li');
-            for (var _i = 0, removedList_1 = removedList; _i < removedList_1.length; _i++) {
-                var item = removedList_1[_i];
-                detach(item);
-            }
             this.removeActionButtons();
             var oldList = [].slice.call(previousListClone.childNodes);
-            detach(this.listParent);
-            this.listParent = null;
-            this.fileList = [];
             this.createParentUL();
             for (var index = 0; index < filesData.length; index++) {
                 for (var j = 0; j < this.filesData.length; j++) {
@@ -9202,12 +9241,12 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 if (added !== index) {
-                    this.createFileList([filesData[index]]);
+                    this.internalCreateFileList([filesData[index]]);
                 }
             }
         }
         else {
-            this.createFileList(filesData);
+            this.internalCreateFileList(filesData);
         }
     };
     Uploader.prototype.isBlank = function (str) {
@@ -9506,10 +9545,13 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
      * @param { FileInfo[] } fileData - Specifies the files data for file list creation.
      * @returns {void}
      */
-    Uploader.prototype.createFileList = function (fileData, isSelectedFile) {
+    Uploader.prototype.createFileList = function (fileData) {
+        this.filesData = this.filesData && this.filesData.length > 0 ? this.filesData.concat(fileData) : fileData;
+        this.internalCreateFileList(fileData);
+    };
+    Uploader.prototype.internalCreateFileList = function (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);
@@ -10030,7 +10072,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     Uploader.prototype.templateComplier = function (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 {
@@ -12460,23 +12502,12 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
     };
     ColorPicker.prototype.paletteKeyDown = function (e) {
         var target = e.target;
+        if (!target.classList.contains(PALETTES)) {
+            return;
+        }
         var selectedEle;
         var idx;
         var 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();
-            }
-        }
         var prevSelectedEle = (tiles.filter(function (tile) { return tile.classList.contains('e-selected'); })).pop();
         switch (!e.altKey && e.keyCode) {
             case 39:
@@ -13338,10 +13369,8 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                     }
                     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]);
@@ -13727,7 +13756,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TextBox.prototype.bindClearEvent = function () {
-        if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {
+        if (this.showClearButton) {
             if (this.enabled) {
                 EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);
             }
@@ -15296,8 +15325,8 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         var 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)) {
@@ -15341,11 +15370,11 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         }
         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(' '));
@@ -15355,7 +15384,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);
         removeClass([spanEle], ICONCSS.split(' '));
         if (spanEle.firstChild) {
-            spanEle.removeChild(spanEle.firstChild);
+            spanEle.innerHTML = '';
         }
     };
     Rating.prototype.updateTooltip = function () {
@@ -15440,7 +15469,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             }
             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)) {
@@ -15448,7 +15477,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             }
             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);
@@ -15460,25 +15489,32 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             if (this.isReact) {
                 this.clearTemplate(['ratingTooltipTemplate']);
             }
-            var content = void 0;
+            var content_1;
             if (this.tooltipTemplate) {
+                content_1 = this.createElement('span', { className: 'e-rating-tooltip-content' });
                 var 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_1);
+                this.tooltipObj.setProperties({ content: content_1 }, isChange);
             }
             else {
-                content = this.currentValue.toString();
+                content_1 = this.currentValue.toString();
+                this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content_1; }) }, isChange);
             }
-            this.tooltipObj.setProperties({ content: content }, isChange);
             this.renderReactTemplates();
         }
     };
     Rating.prototype.getTemplateString = function (template) {
         var stringContent = '';
         try {
-            var tempEle = select(template);
-            if (tempEle) {
-                //Return innerHTML incase of jsrenderer script else outerHTML
-                stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+            if (typeof template !== 'function') {
+                var tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                }
+                else {
+                    stringContent = template;
+                }
             }
             else {
                 stringContent = template;
@@ -15509,10 +15545,10 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
                     this.clearTemplate(['ratingLabelTemplate']);
                 }
                 if (this.spanLabel.firstChild) {
-                    this.spanLabel.removeChild(this.spanLabel.firstChild);
+                    this.spanLabel.innerHTML = '';
                 }
                 var 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 {
@@ -15600,7 +15636,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         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) {