@syncfusion/ej2-inputs 20.4.42 → 20.4.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.42
+*  version : 20.4.51
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@20.4.40",
+  "_id": "@syncfusion/ej2-inputs@20.4.48",
   "_inBundle": false,
-  "_integrity": "sha512-QNBevj26CfCNoO5BrbIa44IZ8wckJUfTbc1aIBQeH+IVTVQcrOcqpSaCWsYt1ocotu6Vw+cqNTBLxUS3taoRhA==",
+  "_integrity": "sha512-FRWDUwkYLJk9gnXe6Vl0eipQzrAurV1MkwWdl4gHD4SSwy0d04AaDO9ppCIUIAQieC+enqNzIlfgaKfhx0AHWw==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.4.40.tgz",
-  "_shasum": "833c32633801cc7e55292c80ee511a1ada4cf67b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.4.48.tgz",
+  "_shasum": "536c3e9c1ad5374b53999855749003f596899ba4",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -48,10 +48,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.42",
-    "@syncfusion/ej2-buttons": "~20.4.42",
-    "@syncfusion/ej2-popups": "~20.4.42",
-    "@syncfusion/ej2-splitbuttons": "~20.4.42"
+    "@syncfusion/ej2-base": "~20.4.51",
+    "@syncfusion/ej2-buttons": "~20.4.50",
+    "@syncfusion/ej2-popups": "~20.4.51",
+    "@syncfusion/ej2-splitbuttons": "~20.4.50"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
@@ -119,7 +119,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "20.4.42",
+  "version": "20.4.51",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/signature-base.js

@@ -663,6 +663,7 @@ var SignatureBase = /** @class */ (function (_super) {
      * @returns {void}.
      */
     SignatureBase.prototype.draw = function (text, fontFamily, fontSize) {
+        var args = { actionName: 'draw-text' };
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
         fontFamily = fontFamily || 'Arial';
         fontSize = fontSize || 30;
@@ -672,6 +673,7 @@ var SignatureBase = /** @class */ (function (_super) {
         this.canvasContext.fillText(text, this.element.width / 2, this.element.height / 2);
         this.updateSnapCollection();
         this.isSignatureEmpty = false;
+        this.trigger('change', args);
     };
     /**
      * To load the signature with the given base 64 string, height and width.

package/src/input/input.d.ts

@@ -51,7 +51,7 @@ export declare namespace Input {
      * @param {any} element - Input element which is need to add.
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
-    function calculateWidth(element: any, container: HTMLElement): void;
+    function calculateWidth(element: any, container: HTMLElement, moduleName?: string): void;
     /**
      * Set the width to the wrapper of input element.
      * ```

package/src/input/input.js

@@ -430,8 +430,8 @@ export var Input;
      * @param {any} element - Input element which is need to add.
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
-    function calculateWidth(element, container) {
-        var elementWidth = element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
+    function calculateWidth(element, container, moduleName) {
+        var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
         if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');

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

@@ -18,7 +18,7 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines one or more CSS classes that can be used to customize the appearance of a rating component.
      * One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects.
-     * 
+     *
      * @default ''
      */
     cssClass?: string;
@@ -27,7 +27,7 @@ export interface RatingModel extends ComponentModel{
      * Defines whether a rating component is enabled or disabled.
      * A disabled rating component may have a different visual appearance than an enabled one.
      * When set to "true", the rating component will be disabled, and the user will not be able to interact with it.
-     * 
+     *
      * @default false
      */
     disabled?: boolean;
@@ -42,7 +42,7 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered.
      * When set to "true", an animation will be added when the user hovers their cursor over an item in the rating component.
-     * 
+     *
      * @default true
      */
     enableAnimation?: boolean;
@@ -51,7 +51,7 @@ export interface RatingModel extends ComponentModel{
      * Defines whether to select all the items before the selected item should be in selected state in a rating component.
      * When set to "true", only the selected item will be in the selected state, and all other items will be un-selected.
      * When set to "false", all items before the selected one will be in the selected state.
-     * 
+     *
      * @default false
      */
     enableSingleSelection?: boolean;
@@ -74,7 +74,7 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Defines the position of the label in rating component.
-     * 
+     *
      * The possible values are:
      * * Top
      * * Bottom
@@ -97,16 +97,16 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines the value that specifies minimum rating that a user can select.
      * The value is set to 0, which means that the minimum possible rating is 0.
-     * 
+     *
      * @default 0.0
      * @aspType double
      */
     min?: number;
 
     /**
-     * Defines the precision type of the rating which used to component the granularity of the rating, 
+     * Defines the precision type of the rating which used to component the granularity of the rating,
      * allowing users to provide ratings with varying levels of precision.
-     * 
+     *
      * The possible values are:
      * * Full
      * * Half
@@ -130,7 +130,7 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines a value that specifies whether to display a label that shows the current value of a rating.
      * When set to "true", a label will be displayed that shows the current value of the rating; otherwise false.
-     * 
+     *
      * @default false
      */
     showLabel?: boolean;
@@ -138,14 +138,14 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines a value that defines whether to show tooltip for the items.
      * When set to "true", show tooltip for the items.
-     * 
+     *
      * @default true
      */
     showTooltip?: boolean;
 
     /**
      * Defines the template that used as tooltip content over default tooltip content of the rating.
-     * The current value of rating passed as context to build the content. 
+     * The current value of rating passed as context to build the content.
      *
      * @default ''
      */
@@ -154,7 +154,7 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines the current rating value which used to display and update the rating selected by the user.
      * Based on "PrecisionType", users can select ratings with varying levels of precision.
-     * The "value" is a decimal value that ranges from the minimum value to the items count, 
+     * The "value" is a decimal value that ranges from the minimum value to the items count,
      * as specified by the "min" and "itemsCount" properties of the rating.
      *
      * @default 0.0
@@ -164,7 +164,7 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Defines a value that indicates whether the rating component is visible or hidden.
-     * When set to "true", if the rating component is visible. 
+     * When set to "true", if the rating component is visible.
      *
      * @default true
      */

package/src/rating/rating.d.ts

@@ -325,6 +325,7 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     private clearLabelPosition;
     private wireItemsEvents;
     private clickHandler;
+    private updateValueChange;
     private triggerChange;
     private mouseMoveHandler;
     private openRatingTooltip;

package/src/rating/rating.js

@@ -259,7 +259,7 @@ var Rating = /** @class */ (function (_super) {
         if (this.showTooltip) {
             this.tooltipObj = new Tooltip({
                 target: '.e-rating-item-container', windowCollision: true,
-                opensOn: 'Custom', cssClass: 'e-rating-tooltip'
+                opensOn: 'Custom', cssClass: this.cssClass ? ('e-rating-tooltip ' + this.cssClass) : 'e-rating-tooltip'
             });
             this.tooltipObj.appendTo(this.ratingItemList);
         }
@@ -290,14 +290,14 @@ var Rating = /** @class */ (function (_super) {
             currentValue = 0;
         }
         else {
-            currentValue = (this.precision === PrecisionType.Full) ? Math.round(currentValue) :
+            currentValue = ((this.precision === PrecisionType.Full) || this.enableSingleSelection) ? Math.round(currentValue) :
                 (this.precision === PrecisionType.Half) ? (Math.round(currentValue * 2) / 2) :
                     (this.precision === PrecisionType.Quarter) ? (Math.round(currentValue * 4) / 4) : (Math.round(currentValue * 10) / 10);
         }
         return currentValue;
     };
     Rating.prototype.getRatingValue = function (value, i) {
-        return (this.enableSingleSelection && this.precision === PrecisionType.Full) ? ((value === i + 1) ? 1 : 0) :
+        return (this.enableSingleSelection) ? (((value > i) && (value <= i + 1)) ? 1 : 0) :
             (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
     };
     Rating.prototype.updateItemValue = function () {
@@ -452,6 +452,12 @@ var Rating = /** @class */ (function (_super) {
             this.updateResetButton();
         }
     };
+    Rating.prototype.updateValueChange = function (e, val, isInteracted) {
+        if (isInteracted === void 0) { isInteracted = true; }
+        this.triggerChange(e, val, isInteracted);
+        this.updateItemValue();
+        this.updateLabel();
+    };
     Rating.prototype.triggerChange = function (e, val, isInteracted) {
         if (isInteracted === void 0) { isInteracted = true; }
         val = this.validateValue(val);
@@ -506,7 +512,7 @@ var Rating = /** @class */ (function (_super) {
     };
     Rating.prototype.calculateCurrentValue = function (index, args) {
         var currentValue = index;
-        if (this.precision !== PrecisionType.Full) {
+        if (!(this.enableSingleSelection || (this.precision === PrecisionType.Full))) {
             currentValue = args.offsetX / this.itemElements[index - 1].clientWidth;
             currentValue = (this.enableRtl) ? (1 - currentValue) : currentValue;
             if (this.precision === PrecisionType.Quarter) {
@@ -529,9 +535,7 @@ var Rating = /** @class */ (function (_super) {
     };
     Rating.prototype.resetClicked = function (e, isInteracted) {
         if (isInteracted === void 0) { isInteracted = true; }
-        this.triggerChange(e, this.min, isInteracted);
-        this.updateItemValue();
-        this.updateLabel();
+        this.updateValueChange(e, this.min, isInteracted);
         this.updateResetButton();
     };
     Rating.prototype.wireKeyboardEvent = function () {
@@ -571,12 +575,11 @@ var Rating = /** @class */ (function (_super) {
     };
     Rating.prototype.handleNavigation = function (e, isIncrease) {
         if ((!isIncrease && (this.value > this.min)) || (isIncrease && (this.value < this.itemsCount))) {
-            var currentValue = (this.precision === PrecisionType.Full) ? 1 : (this.precision === PrecisionType.Half) ? 0.5 :
-                (this.precision === PrecisionType.Quarter) ? 0.25 : Math.round(0.1 * 10) / 10;
+            var currentValue = (this.precision === PrecisionType.Full || this.enableSingleSelection) ? 1 :
+                (this.precision === PrecisionType.Half) ? 0.5 : (this.precision === PrecisionType.Quarter) ? 0.25 :
+                    Math.round(0.1 * 10) / 10;
             currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;
-            this.triggerChange(e, (currentValue));
-            this.updateItemValue();
-            this.updateLabel();
+            this.updateValueChange(e, (currentValue));
             if (this.allowReset) {
                 this.updateResetButton();
             }
@@ -656,9 +659,7 @@ var Rating = /** @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'value':
-                    this.triggerChange(null, (this.value > this.min) ? this.value : this.min, false);
-                    this.updateItemValue();
-                    this.updateLabel();
+                    this.updateValueChange(null, (this.value > this.min) ? this.value : this.min, false);
                     break;
                 case 'min':
                     this.updateMinValue();
@@ -690,6 +691,9 @@ var Rating = /** @class */ (function (_super) {
                     if (newProp.cssClass) {
                         addClass([this.wrapper], newProp.cssClass.split(' '));
                     }
+                    if (this.tooltipObj) {
+                        this.tooltipObj.setProperties({ cssClass: this.cssClass ? ('e-rating-tooltip ' + this.cssClass) : 'e-rating-tooltip' });
+                    }
                     break;
                 case 'labelPosition':
                     this.updateLabelPosition();
@@ -702,7 +706,8 @@ var Rating = /** @class */ (function (_super) {
                     this.updateLabel();
                     break;
                 case 'enableSingleSelection':
-                    this.updateItemValue();
+                    //To validate the value against single selection and update the items, label + trigger change event if value changed
+                    this.updateValueChange(null, this.currentValue, false);
                     break;
                 case 'enableAnimation':
                     this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);

package/src/uploader/uploader.js

@@ -337,7 +337,12 @@ var Uploader = /** @class */ (function (_super) {
             var inputElement = this.createElement('input', { attrs: { type: 'file' } });
             var index = 0;
             for (index; index < this.element.attributes.length; index++) {
-                inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                if (this.element.attributes[index].nodeName !== 'id') {
+                    inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                }
+                else if (this.element.attributes[index].nodeName === 'id') {
+                    inputElement.setAttribute(this.element.attributes[index].nodeName, getUniqueID('uploader'));
+                }
                 inputElement.innerHTML = this.element.innerHTML;
             }
             if (!inputElement.hasAttribute('name')) {

package/styles/bootstrap-dark.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6830,6 +6831,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 2px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6809,6 +6810,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 2px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap4.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6963,6 +6964,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap5-dark.css

@@ -2213,6 +2213,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7113,6 +7114,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap5.css

@@ -2213,6 +2213,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7113,6 +7114,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/color-picker/_layout.scss

@@ -744,12 +744,26 @@
           & .e-slider-track {
             background: linear-gradient(to left, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
           }
+
+          & .e-handle {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
         }
 
         & .e-preview-container {
           margin-left: 0;
           margin-right: $cpicker-preview-margin-left;
         }
+
+        & .e-opacity-slider {
+          & .e-handle-first {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-selected-value {

package/styles/color-picker/fluent-dark.css

@@ -470,10 +470,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;

package/styles/color-picker/fluent.css

@@ -470,10 +470,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;

package/styles/fabric-dark.css

@@ -2081,6 +2081,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6759,6 +6760,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/fabric.css

@@ -2081,6 +2081,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6759,6 +6760,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/fluent-dark.css

@@ -2049,6 +2049,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6557,10 +6558,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;
@@ -6888,6 +6895,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;
@@ -6926,7 +6937,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: center;
       justify-content: center;
   left: 50%;
-  top: -8px;
+  top: -12.5px;
   transform: translate(-50%, -100%);
 }
 .e-rating-container .e-tooltip-wrap.e-rating-tooltip.e-show-tooltip {

package/styles/fluent.css

@@ -2049,6 +2049,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6557,10 +6558,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;
@@ -6888,6 +6895,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;
@@ -6926,7 +6937,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: center;
       justify-content: center;
   left: 50%;
-  top: -8px;
+  top: -12.5px;
   transform: translate(-50%, -100%);
 }
 .e-rating-container .e-tooltip-wrap.e-rating-tooltip.e-show-tooltip {

package/styles/highcontrast-light.css

@@ -2197,6 +2197,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7075,6 +7076,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;