@syncfusion/ej2-inputs 20.4.40 → 20.4.48

package/src/rating/rating.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { addClass, Event, attributes, compile, Component, EventHandler, getUniqueID, select } from '@syncfusion/ej2-base';
+import { addClass, Event, attributes, compile, Component, EventHandler, getUniqueID, select, Browser } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, KeyboardEvents, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 var ICONCSS = 'e-rating-icon e-icons e-star-filled';
@@ -37,49 +37,64 @@ var EMPTYTEMPLATE = 'e-rating-empty';
 var SELECTEDVALUE = 'e-selected-value';
 var RATINGVALUE = '--rating-value';
 /**
- * Defines the position of the label in the rating.
+ * Defines where to position the label in rating
  */
 export var LabelPosition;
 (function (LabelPosition) {
     /**
-     * Shows the label above the rating.
+     * The label is positioned at the top center of the rating component.
      */
     LabelPosition["Top"] = "Top";
     /**
-     * Shows the label below the rating.
+     * The label is positioned at the bottom center of the rating component.
      */
     LabelPosition["Bottom"] = "Bottom";
     /**
-     * Shows the label to the left of rating.
+     * The label is positioned at the left side of the rating component.
      */
     LabelPosition["Left"] = "Left";
     /**
-     * Shows the label to the right of rating.
+     * The label is positioned at the right side of the rating component.
      */
     LabelPosition["Right"] = "Right";
 })(LabelPosition || (LabelPosition = {}));
 /**
- * Defines the minimum increase in the value in Rating Control.
+ * Defines the precision type of the rating.
+ * It is used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision.
  */
 export var PrecisionType;
 (function (PrecisionType) {
     /**
-     * Process the value as whole numbers.
+     * The rating is increased in whole number increments.
      */
     PrecisionType["Full"] = "Full";
     /**
-     * Process the value in terms of 0.5 (half).
+     * The rating is increased in increments of 0.5 (half).
      */
     PrecisionType["Half"] = "Half";
     /**
-     * Process the value in terms of 0.25 (quarter).
+     * The rating is increased in increments of 0.25 (quarter).
      */
     PrecisionType["Quarter"] = "Quarter";
     /**
-     * Process the value in terms of 0.1.
+     * The rating is increased in increments of 0.1.
      */
     PrecisionType["Exact"] = "Exact";
 })(PrecisionType || (PrecisionType = {}));
+/**
+ * The Rating component allows the user to rate something by clicking on a set of symbols on a numeric scale.
+ * This allows users to provide feedback or ratings for products, services, or content.
+ *
+ * ```html
+ * <input id="rating">
+ * ```
+ * ```typescript
+ * <script>
+ *   let ratingObj: Rating = new Rating();
+ *   ratingObj.appendTo('#rating');
+ * </script>
+ * ```
+ */
 var Rating = /** @class */ (function (_super) {
     __extends(Rating, _super);
     /**
@@ -158,7 +173,7 @@ var Rating = /** @class */ (function (_super) {
         attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });
         this.wrapper.appendChild(this.ratingItemList);
         EventHandler.add(this.ratingItemList, 'touchmove', function (e) { return _this.touchMoveHandler(e); }, this);
-        EventHandler.add(this.ratingItemList, 'touchend', this.touchEndHandler, this);
+        EventHandler.add(this.ratingItemList, Browser.touchEndEvent, this.touchEndHandler, this);
     };
     Rating.prototype.touchMoveHandler = function (e) {
         var rect = this.ratingItemList.getBoundingClientRect();
@@ -244,9 +259,9 @@ 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.id);
+            this.tooltipObj.appendTo(this.ratingItemList);
         }
         else {
             if (!isNullOrUndefined(this.tooltipObj)) {
@@ -275,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 () {
@@ -437,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);
@@ -491,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) {
@@ -514,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 () {
@@ -556,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();
             }
@@ -641,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();
@@ -675,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();
@@ -687,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);
@@ -718,12 +738,12 @@ var Rating = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Rating.prototype, "disabled", void 0);
-    __decorate([
-        Property(true)
-    ], Rating.prototype, "enableAnimation", void 0);
     __decorate([
         Property('')
     ], Rating.prototype, "emptyTemplate", void 0);
+    __decorate([
+        Property(true)
+    ], Rating.prototype, "enableAnimation", void 0);
     __decorate([
         Property(false)
     ], Rating.prototype, "enableSingleSelection", void 0);

package/src/uploader/uploader.js

@@ -718,13 +718,6 @@ var Uploader = /** @class */ (function (_super) {
         }
     };
     Uploader.prototype.setCSSClass = function (oldCSSClass) {
-        var updatedCssClassValue = this.cssClass;
-        if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
-            updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
-        }
-        if (!isNullOrUndefined(this.cssClass) && updatedCssClassValue !== '') {
-            addClass([this.uploadWrapper], updatedCssClassValue.split(updatedCssClassValue.indexOf(',') > -1 ? ',' : ' '));
-        }
         var updatedOldCssClass = oldCSSClass;
         if (!isNullOrUndefined(oldCSSClass)) {
             updatedOldCssClass = (oldCSSClass.replace(/\s+/g, ' ')).trim();
@@ -732,6 +725,13 @@ var Uploader = /** @class */ (function (_super) {
         if (!isNullOrUndefined(oldCSSClass) && updatedOldCssClass !== '') {
             removeClass([this.uploadWrapper], updatedOldCssClass.split(' '));
         }
+        var updatedCssClassValue = this.cssClass;
+        if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
+            updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
+        }
+        if (!isNullOrUndefined(this.cssClass) && updatedCssClassValue !== '') {
+            addClass([this.uploadWrapper], updatedCssClassValue.split(updatedCssClassValue.indexOf(',') > -1 ? ',' : ' '));
+        }
     };
     Uploader.prototype.wireEvents = function () {
         EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);
@@ -3324,7 +3324,7 @@ var Uploader = /** @class */ (function (_super) {
         var files = this.getFiles(fileData);
         for (var i = 0; i < files.length; i++) {
             if (files[i].statusCode === '5' || files[i].statusCode === '0') {
-                if (this.asyncSettings.chunkSize > 0) {
+                if (this.asyncSettings.chunkSize > 0 && this.getCurrentMetaData(files[i], null)) {
                     this.retryUpload(this.getCurrentMetaData(files[i], null), fromcanceledStage);
                 }
                 else {

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;

package/styles/highcontrast.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;

package/styles/input/_layout.scss

@@ -3036,6 +3036,7 @@
 
   input.e-input.e-rtl#{$css},
   .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,

package/styles/input/bootstrap-dark.css

@@ -2114,6 +2114,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,

package/styles/input/bootstrap.css

@@ -2114,6 +2114,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,

package/styles/input/bootstrap4.css

@@ -2114,6 +2114,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,

package/styles/input/bootstrap5-dark.css

@@ -2203,6 +2203,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,

package/styles/input/bootstrap5.css

@@ -2203,6 +2203,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,

package/styles/input/fabric-dark.css

@@ -2071,6 +2071,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,

package/styles/input/fabric.css

@@ -2071,6 +2071,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,

package/styles/input/fluent-dark.css

@@ -2039,6 +2039,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,