@syncfusion/ej2-inputs 21.2.9 → 22.1.34

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

@@ -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();
@@ -797,7 +796,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 +936,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 +998,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 +1177,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 +1428,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 +1486,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 +1512,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 +1527,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 +1554,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;
             }
@@ -1739,10 +1743,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 +1787,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 +1847,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 +1882,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 +1896,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 +2014,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 +2058,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 +2069,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 +2121,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 +2163,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 +2186,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 +2225,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 +2244,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 +2269,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 +2710,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 +2830,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.

package/src/uploader/uploader.js

@@ -1354,7 +1354,7 @@ var Uploader = /** @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);
                     }
@@ -1415,16 +1415,8 @@ var Uploader = /** @class */ (function (_super) {
                 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++) {
@@ -2264,7 +2256,7 @@ var Uploader = /** @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 {

package/styles/bootstrap-dark.css

@@ -2857,8 +2857,8 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
 .e-bigger .e-input-group .e-clear-icon,
 .e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
-  min-height: 0;
   min-width: 38px;
+  min-height: 0;
   padding-bottom: 0;
   padding-right: 0;
   padding-top: 0;
@@ -2874,6 +2874,19 @@ textarea.e-input.e-bigger.e-small,
   padding-top: 0;
 }
 
+.e-input-group.e-small .e-clear-icon,
+.e-input-group .e-clear-icon.e-small,
+.e-small.e-bigger .e-input-group .e-clear-icon,
+.e-input-group.e-control-wrapper.e-small .e-clear-icon,
+.e-input-group.e-control-wrapper .e-clear-icon.e-small,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
+  min-height: 0;
+  min-width: 38px;
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
 .e-input-group.e-small.e-bigger .e-clear-icon,
 .e-input-group.e-small .e-clear-icon.e-bigger,
 .e-bigger .e-input-group.e-small .e-clear-icon,
@@ -6811,6 +6824,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -6953,7 +6968,7 @@ body.e-colorpicker-overflow {
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #676767;
   border-radius: 2px;
 }
@@ -6965,6 +6980,7 @@ body.e-colorpicker-overflow {
 }
 .e-rating-container .e-reset.e-disabled {
   color: #505050;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -7018,6 +7034,9 @@ body.e-colorpicker-overflow {
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #505050;
 }
@@ -7036,7 +7055,7 @@ body.e-colorpicker-overflow {
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #505050 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */