@syncfusion/ej2-inputs 21.2.9 → 22.1.38

package/src/slider/slider.d.ts

@@ -231,84 +231,49 @@ export declare class TooltipData extends ChildProperty<TooltipData> {
 }
 /**
  * Ticks Placement.
+ * ```props
+ * Before :- Ticks are placed in the top of the horizontal slider bar or at the left of the vertical slider bar.
+ * After :- Ticks are placed in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
+ * Both :- Ticks are placed on the both side of the slider bar.
+ * None :- Ticks are not shown.
+ * ```
  */
-export declare type Placement = 
-/**
-* Ticks are placed in the top of the horizontal slider bar or at the left of the vertical slider bar.
-*/
-'Before' | 
-/**
-* Ticks are placed in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
-*/
-'After' | 
-/**
-* Ticks are placed on the both side of the slider bar.
-*/
-'Both' | 
-/**
-* Ticks are not shown.
-*/
-'None';
+export declare type Placement = 'Before' | 'After' | 'Both' | 'None';
 /**
  * Tooltip Placement.
+ * ```props
+ * Before :- Tooltip is shown in the top of the horizontal slider bar or at the left of the vertical slider bar.
+ * After :- Tooltip is shown in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
+ * ```
  */
-export declare type TooltipPlacement = 
-/**
-* Tooltip is shown in the top of the horizontal slider bar or at the left of the vertical slider bar.
-*/
-'Before' | 
-/**
-* Tooltip is shown in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
-*/
-'After';
+export declare type TooltipPlacement = 'Before' | 'After';
 /**
  * Tooltip ShowOn.
+ * ```props
+ * Focus :- Tooltip is shown while focusing the Slider handle.
+ * Hover :- Tooltip is shown while hovering the Slider handle.
+ * Always :- Tooltip is shown always.
+ * Auto :- Tooltip is shown while hovering the Slider handle in desktop and tap and hold in touch devices.
+ * ```
  */
-export declare type TooltipShowOn = 
-/**
-* Tooltip is shown while focusing the Slider handle.
-*/
-'Focus' | 
-/**
-* Tooltip is shown while hovering the Slider handle.
-*/
-'Hover' | 
-/**
-* Tooltip is shown always.
-*/
-'Always' | 
-/**
-* Tooltip is shown while hovering the Slider handle in desktop and tap and hold in touch devices.
-*/
-'Auto';
+export declare type TooltipShowOn = 'Focus' | 'Hover' | 'Always' | 'Auto';
 /**
  * Slider type.
+ * ```props
+ * Default :- Allows to select a single value in the Slider.
+ * MinRange :- Allows to select a single value in the Slider, it display’s a shadow from the start to the current value.
+ * Range :- Allows to select a range of values in the Slider.
+ * ```
  */
-export declare type SliderType = 
-/**
-* Allows to select a single value in the Slider.
-*/
-'Default' | 
-/**
-* Allows to select a single value in the Slider, it display’s a shadow from the start to the current value.
-*/
-'MinRange' | 
-/**
-* Allows to select a range of values in the Slider.
-*/
-'Range';
+export declare type SliderType = 'Default' | 'MinRange' | 'Range';
 /**
  * Slider orientation.
+ * ```props
+ * Horizontal :- Renders the slider in horizontal orientation.
+ * Vertical :- Renders the slider in vertical orientation.
+ * ```
  */
-export declare type SliderOrientation = 
-/**
-* Renders the slider in horizontal orientation.
-*/
-'Horizontal' | 
-/**
-* Renders the slider in vertical orientation.
-*/
-'Vertical';
+export declare type SliderOrientation = 'Horizontal' | 'Vertical';
 /**
  * The Slider component allows the user to select a value or range
  * of values in-between a min and max range, by dragging the handle over the slider bar.
@@ -361,6 +326,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private previousChanged;
     private repeatInterval;
     private isMaterial;
+    private isMaterial3;
     private isBootstrap;
     private isBootstrap4;
     private isTailwind;

package/src/slider/slider.js

@@ -21,7 +21,7 @@ import { Component, EventHandler, Property, Event, Complex, Collection } from '@
 import { L10n, Internationalization } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
 import { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { Tooltip, getZindexPartial } from '@syncfusion/ej2-popups';
 /**
  * Configures the ticks data of the Slider.
@@ -437,13 +437,15 @@ var Slider = /** @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') {
@@ -597,7 +599,7 @@ var Slider = /** @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());
@@ -644,9 +646,6 @@ var Slider = /** @class */ (function (_super) {
         }
     };
     Slider.prototype.setHandler = function () {
-        if (this.min > this.max) {
-            this.min = this.max;
-        }
         this.createFirstHandle();
         if (this.type === 'Range') {
             this.createSecondHandle();
@@ -685,12 +684,21 @@ var Slider = /** @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);
@@ -705,7 +713,10 @@ var Slider = /** @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 = '';
@@ -797,7 +808,7 @@ var Slider = /** @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':
@@ -937,9 +948,9 @@ var Slider = /** @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),
@@ -999,7 +1010,7 @@ var Slider = /** @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');
         }
     };
@@ -1178,7 +1189,12 @@ var Slider = /** @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);
             }
@@ -1424,16 +1440,16 @@ var Slider = /** @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();
         }
@@ -1482,12 +1498,12 @@ var Slider = /** @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' });
             }
         }
     };
@@ -1508,8 +1524,8 @@ var Slider = /** @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') {
@@ -1523,8 +1539,8 @@ var Slider = /** @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';
             }
         }
     };
@@ -1550,13 +1566,13 @@ var Slider = /** @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;
             }
@@ -1697,7 +1713,7 @@ var Slider = /** @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 {
@@ -1739,10 +1755,14 @@ var Slider = /** @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) {
@@ -1779,9 +1799,6 @@ var Slider = /** @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)));
         }
@@ -1842,13 +1859,13 @@ var Slider = /** @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) {
@@ -1877,7 +1894,7 @@ var Slider = /** @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;
                 }
@@ -1891,7 +1908,7 @@ var Slider = /** @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;
                 }
@@ -2009,7 +2026,7 @@ var Slider = /** @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) {
@@ -2053,7 +2070,7 @@ var Slider = /** @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();
             }
@@ -2064,7 +2081,7 @@ var Slider = /** @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') {
@@ -2116,16 +2133,28 @@ var Slider = /** @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];
@@ -2146,11 +2175,11 @@ var Slider = /** @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;
@@ -2169,7 +2198,7 @@ var Slider = /** @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);
@@ -2208,7 +2237,7 @@ var Slider = /** @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;
                     }
@@ -2227,7 +2256,7 @@ var Slider = /** @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;
                     }
@@ -2252,7 +2281,7 @@ var Slider = /** @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();
         }
@@ -2693,7 +2722,9 @@ var Slider = /** @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':
@@ -2811,7 +2842,7 @@ var Slider = /** @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) + '';

package/src/textbox/textbox.js

@@ -121,10 +121,8 @@ var TextBox = /** @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]);
@@ -510,7 +508,7 @@ var TextBox = /** @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);
             }

package/src/uploader/uploader-model.d.ts

@@ -161,8 +161,9 @@ export interface UploaderModel extends ComponentModel{
      * > For more information, refer to the [template](../../uploader/template/) section from the documentation.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Specifies a Boolean value that indicates whether the multiple files can be browsed or

package/src/uploader/uploader.d.ts

@@ -575,8 +575,9 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
      * > For more information, refer to the [template](../../uploader/template/) section from the documentation.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Specifies a Boolean value that indicates whether the multiple files can be browsed or
      * dropped simultaneously in the uploader component.
@@ -1048,7 +1049,8 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
      * @param { FileInfo[] } fileData - Specifies the files data for file list creation.
      * @returns {void}
      */
-    createFileList(fileData: FileInfo[], isSelectedFile?: boolean): void;
+    createFileList(fileData: FileInfo[]): void;
+    private internalCreateFileList;
     private getSlicedName;
     private setListToFileInfo;
     private truncateName;