@syncfusion/ej2-inputs 20.3.57 → 20.4.40

package/src/slider/slider.js

@@ -523,7 +523,7 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.createSecondHandle = function () {
         this.secondHandle = this.createElement('div', {
             attrs: {
-                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'
+                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
             }
         });
         this.secondHandle.classList.add(classNames.sliderSecondHandle);
@@ -532,7 +532,7 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.createFirstHandle = function () {
         this.firstHandle = this.createElement('div', {
             attrs: {
-                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0'
+                class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
             }
         });
         this.firstHandle.classList.add(classNames.sliderFirstHandle);
@@ -962,6 +962,7 @@ var Slider = /** @class */ (function (_super) {
             this.sliderContainer.classList.add(classNames.materialSlider);
             this.tooltipValue();
             this.tooltipObj.animation.close.effect = 'None';
+            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(this.firstHandle);
         }
     };
@@ -2295,6 +2296,7 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.openTooltip = function (target) {
         if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {
             this.tooltipValue();
+            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(target);
             this.tooltipTarget = target;
         }

package/src/textbox/textbox.js

@@ -347,19 +347,19 @@ var TextBox = /** @class */ (function (_super) {
                 var key = _a[_i];
                 if (containerAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);
+                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes["" + key]);
                         if (updatedClassValues !== '') {
                             addClass([this.textboxWrapper.container], updatedClassValues.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var setStyle = this.textboxWrapper.container.getAttribute(key);
-                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.textboxWrapper.container.setAttribute(key, setStyle);
                     }
                     else {
-                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -370,7 +370,7 @@ var TextBox = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (containerAttr.indexOf(key) < 0) {
-                    this.element.setAttribute(key, this.htmlAttributes[key]);
+                    this.element.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -576,6 +576,7 @@ var TextBox = /** @class */ (function (_super) {
             detach(this.textboxWrapper.container);
         }
         this.textboxWrapper = null;
+        Input.destroy();
         _super.prototype.destroy.call(this);
     };
     /**
@@ -617,17 +618,17 @@ var TextBox = /** @class */ (function (_super) {
                 Input.setReadonly(this.readonly, this.respectiveElement);
             }
             else if (key === 'class') {
-                this.respectiveElement.classList.add(attributes[key]);
+                this.respectiveElement.classList.add(attributes["" + key]);
             }
             else if (key === 'placeholder') {
-                this.setProperties({ placeholder: attributes[key] }, true);
+                this.setProperties({ placeholder: attributes["" + key] }, true);
                 Input.setPlaceholder(this.placeholder, this.respectiveElement);
             }
             else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {
-                this.respectiveElement.setAttribute(key, attributes[key]);
+                this.respectiveElement.setAttribute(key, attributes["" + key]);
             }
             else {
-                this.respectiveElement.setAttribute(key, attributes[key]);
+                this.respectiveElement.setAttribute(key, attributes["" + key]);
             }
         }
     };

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, EventHandler, L10n, compile, isNullOrUndefined} from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs, getUniqueID, closest, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { select, selectAll } from '@syncfusion/ej2-base';
+import { Component, Property, Event, EmitType, EventHandler, L10n, compile, isNullOrUndefined, SanitizeHtmlHelper} from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs, getUniqueID, closest, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { select, selectAll } from '@syncfusion/ej2-base';
 import {DropEffect,ActionCompleteEventArgs,RenderingEventArgs,BeforeUploadEventArgs,FileListRenderingEventArgs,SelectedEventArgs,UploadingEventArgs,RemovingEventArgs,BeforeRemoveEventArgs,ClearingEventArgs,CancelEventArgs,PauseResumeEventArgs} from "./uploader";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -132,6 +132,7 @@ export interface UploaderModel extends ComponentModel{
     /**
      * You can add the additional html attributes such as disabled, value etc., to the element.
      * If you configured both property and equivalent html attribute then the component considers the property value.
+     * 
      * {% codeBlock src='uploader/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
@@ -180,6 +181,14 @@ export interface UploaderModel extends ComponentModel{
      */
     autoUpload?: boolean;
 
+    /**
+     * Specifies Boolean value that indicates whether to prevent the cross site scripting code in filename or not.
+     * The uploader component removes the cross-site scripting code or functions from the filename and shows the validation error message to the user when enableHtmlSanitizer is true.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * You can customize the default text of “browse, clear, and upload” buttons with plain text or HTML elements.
      * The buttons’ text can be customized from localization also. If you configured both locale and buttons property,

package/src/uploader/uploader.d.ts

@@ -547,6 +547,7 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
     /**
      * You can add the additional html attributes such as disabled, value etc., to the element.
      * If you configured both property and equivalent html attribute then the component considers the property value.
+     *
      * {% codeBlock src='uploader/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
@@ -591,6 +592,13 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
      * @default true
      */
     autoUpload: boolean;
+    /**
+     * Specifies Boolean value that indicates whether to prevent the cross site scripting code in filename or not.
+     * The uploader component removes the cross-site scripting code or functions from the filename and shows the validation error message to the user when enableHtmlSanitizer is true.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * You can customize the default text of “browse, clear, and upload” buttons with plain text or HTML elements.
      * The buttons’ text can be customized from localization also. If you configured both locale and buttons property,

package/src/uploader/uploader.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Property, Event, EventHandler, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Component, Property, Event, EventHandler, L10n, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, detach, append, Animation } from '@syncfusion/ej2-base';
 import { addClass, removeClass, KeyboardEvents, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';
 import { Collection, Complex, Browser, Ajax, getUniqueID, closest, remove } from '@syncfusion/ej2-base';
@@ -265,7 +265,7 @@ var Uploader = /** @class */ (function (_super) {
         var keyValue;
         for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {
             var key = _a[_i];
-            if (this.preLocaleObj[key] === val) {
+            if (this.preLocaleObj["" + key] === val) {
                 keyValue = key;
             }
         }
@@ -316,7 +316,7 @@ var Uploader = /** @class */ (function (_super) {
         }
     };
     Uploader.prototype.preRender = function () {
-        this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload',
+        this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload', invalidFileName: 'File Name is not allowed',
             dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',
             invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',
             uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',
@@ -643,7 +643,7 @@ var Uploader = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var pro = _a[_i];
                 if (wrapperAttr.indexOf(pro) < 0) {
-                    this.element.setAttribute(pro, this.htmlAttributes[pro]);
+                    this.element.setAttribute(pro, this.htmlAttributes["" + pro]);
                 }
             }
         }
@@ -654,19 +654,19 @@ var Uploader = /** @class */ (function (_super) {
                 var pro = _a[_i];
                 if (wrapperAttr.indexOf(pro) > -1) {
                     if (pro === 'class') {
-                        var updatedClassValues = (this.htmlAttributes[pro].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValues = (this.htmlAttributes["" + pro].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValues !== '') {
                             addClass([this.uploadWrapper], updatedClassValues.split(' '));
                         }
                     }
                     else if (pro === 'style') {
                         var uploadStyle = this.uploadWrapper.getAttribute(pro);
-                        uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes[pro]) :
-                            this.htmlAttributes[pro];
+                        uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes["" + pro]) :
+                            this.htmlAttributes["" + pro];
                         this.uploadWrapper.setAttribute(pro, uploadStyle);
                     }
                     else {
-                        this.uploadWrapper.setAttribute(pro, this.htmlAttributes[pro]);
+                        this.uploadWrapper.setAttribute(pro, this.htmlAttributes["" + pro]);
                     }
                 }
             }
@@ -701,7 +701,9 @@ var Uploader = /** @class */ (function (_super) {
     Uploader.prototype.sequenceUpload = function (fileData) {
         if (this.filesData.length - fileData.length === 0 ||
             this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {
-            ++this.count;
+            if (this.multiple || this.count < 0) {
+                ++this.count;
+            }
             var isFileListCreated = this.showFileList ? false : true;
             if (typeof this.filesData[this.count] === 'object') {
                 this.isFirstFileOnSelection = false;
@@ -1049,7 +1051,7 @@ var Uploader = /** @class */ (function (_super) {
                 var data = customData[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 var value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data["" + e];
                 });
                 formData.append(Object.keys(data)[0], value);
             };
@@ -1065,7 +1067,7 @@ var Uploader = /** @class */ (function (_super) {
                 var data = currentRequest[i];
                 // eslint-disable-next-line @typescript-eslint/tslint/config
                 var value = Object.keys(data).map(function (e) {
-                    return data[e];
+                    return data["" + e];
                 });
                 request.setRequestHeader(Object.keys(data)[0], value);
             };
@@ -1276,6 +1278,20 @@ var Uploader = /** @class */ (function (_super) {
         if (this.allowedExtensions.indexOf('*') > -1) {
             this.allTypes = true;
         }
+        if (this.enableHtmlSanitizer) {
+            for (var i = 0; i < fileData.length; i++) {
+                var sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
+                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[i].name);
+                if (sanitizeFileName != fileData[i].name) {
+                    var encodedFileName = targetFiles[i].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+                        return '&#' + i.charCodeAt(0) + ';';
+                    });
+                    fileData[i].name = encodedFileName;
+                    fileData[i].status = this.localizedTexts('invalidFileName');
+                    fileData[i].statusCode = '0';
+                }
+            }
+        }
         if (!this.allTypes) {
             fileData = this.checkExtension(fileData);
         }
@@ -2052,7 +2068,9 @@ var Uploader = /** @class */ (function (_super) {
             this.pauseButton = null;
         }
         /* istanbul ignore next */
-        liElement.classList.add(RESTRICT_RETRY);
+        if (!isNullOrUndefined(liElement)) {
+            liElement.classList.add(RESTRICT_RETRY);
+        }
         this.upload([file]);
     };
     /* istanbul ignore next */
@@ -2879,6 +2897,14 @@ var Uploader = /** @class */ (function (_super) {
             detach(this.uploadWrapper);
         }
         this.uploadWrapper = null;
+        this.uploadWrapper = null;
+        this.browseButton = null;
+        this.dropAreaWrapper = null;
+        this.dropZoneElement = null;
+        this.dropArea = null;
+        this.keyboardModule = null;
+        this.clearButton = null;
+        this.uploadButton = null;
         _super.prototype.destroy.call(this);
     };
     /**
@@ -3378,6 +3404,9 @@ var Uploader = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Uploader.prototype, "autoUpload", void 0);
+    __decorate([
+        Property(true)
+    ], Uploader.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({}, ButtonsProps)
     ], Uploader.prototype, "buttons", void 0);

package/styles/bootstrap-dark.css

@@ -6766,4 +6766,269 @@ body.e-colorpicker-overflow {
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip {
   background-color: #fff;
   border-color: #fff;
+}
+
+.e-rating-container {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  min-width: max-content;
+}
+.e-rating-container .e-rating {
+  display: none;
+}
+.e-rating-container .e-rating-item-list {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0;
+  margin: 4px;
+}
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+  outline: 1px solid;
+}
+.e-rating-container .e-rating-item-list:focus-visible {
+  outline: none;
+}
+.e-rating-container.e-rating-readonly {
+  cursor: default;
+  pointer-events: none;
+}
+.e-rating-container .e-rating-item-container {
+  cursor: pointer;
+  font-size: 20px;
+  padding: 4px;
+  line-height: 9px;
+  display: block;
+  position: relative;
+}
+.e-rating-container .e-rating-item-container .e-rating-item {
+  display: block;
+}
+.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: scale(1.4);
+  pointer-events: none;
+}
+.e-rating-container.e-disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.e-rating-container.e-rating-hidden {
+  display: none;
+}
+.e-rating-container .e-reset {
+  cursor: pointer;
+  margin: auto 2px 6px;
+  font-size: 16px;
+  padding: 2px;
+}
+.e-rating-container .e-reset.e-disabled {
+  cursor: default;
+}
+.e-rating-container .e-rating-label {
+  font-size: 12px;
+  line-height: 18px;
+}
+.e-rating-container .e-rating-label.e-label-right, .e-rating-container .e-rating-label.e-label-left {
+  min-width: 50px;
+}
+.e-rating-container .e-rating-label.e-label-bottom, .e-rating-container .e-rating-label.e-label-top {
+  -ms-flex-preferred-size: 100%;
+      flex-basis: 100%;
+  width: 0;
+  text-align: center;
+}
+.e-rating-container .e-rating-label.e-label-right {
+  text-align: left;
+  margin: auto 4px;
+}
+.e-rating-container .e-rating-label.e-label-left {
+  text-align: right;
+  margin: auto 4px;
+}
+.e-rating-container .e-rating-label.e-label-top {
+  margin: 8px 0;
+}
+.e-rating-container .e-rating-label.e-label-bottom {
+  margin: 8px 0;
+}
+.e-rating-container.e-rtl .e-rating-label.e-label-right {
+  text-align: right;
+}
+.e-rating-container.e-rtl .e-rating-label.e-label-left {
+  text-align: left;
+}
+.e-rating-container .e-tooltip-wrap.e-rating-tooltip {
+  display: none;
+  -ms-flex-pack: center;
+      justify-content: center;
+  left: 50%;
+  top: -8px;
+  transform: translate(-50%, -100%);
+}
+.e-rating-container .e-tooltip-wrap.e-rating-tooltip.e-show-tooltip {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.e-rating-container .e-tooltip-wrap.e-rating-tooltip .e-tip-content {
+  width: max-content;
+}
+.e-rating-container .e-tooltip-wrap.e-rating-tooltip .e-arrow-tip.e-tip-bottom {
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, 0);
+}
+.e-rating-container .e-tooltip-wrap.e-rating-tooltip .e-arrow-tip-inner.e-tip-bottom {
+  top: -6px;
+}
+
+.e-rating-tooltip .e-tip-content {
+  text-align: center;
+}
+
+.e-small.e-rating-container .e-rating-item-container,
+.e-small .e-rating-container .e-rating-item-container {
+  font-size: 16px;
+  line-height: 4px;
+}
+.e-small.e-rating-container .e-rating-label,
+.e-small .e-rating-container .e-rating-label {
+  font-size: 10px;
+  line-height: 16px;
+}
+.e-small.e-rating-container .e-reset,
+.e-small .e-rating-container .e-reset {
+  font-size: 12px;
+}
+
+.e-bigger.e-rating-container .e-rating-item-container,
+.e-bigger .e-rating-container .e-rating-item-container {
+  font-size: 32px;
+  line-height: 16px;
+}
+.e-bigger.e-rating-container .e-rating-label,
+.e-bigger .e-rating-container .e-rating-label {
+  font-size: 14px;
+  line-height: 22px;
+}
+.e-bigger.e-rating-container .e-reset,
+.e-bigger .e-rating-container .e-reset {
+  font-size: 28px;
+}
+
+.e-bigger.e-small.e-rating-container .e-rating-item-container,
+.e-bigger.e-small .e-rating-container .e-rating-item-container,
+.e-bigger .e-small.e-rating-container .e-rating-item-container,
+.e-small .e-bigger.e-rating-container .e-rating-item-container {
+  font-size: 26px;
+  line-height: 9px;
+}
+.e-bigger.e-small.e-rating-container .e-rating-label,
+.e-bigger.e-small .e-rating-container .e-rating-label,
+.e-bigger .e-small.e-rating-container .e-rating-label,
+.e-small .e-bigger.e-rating-container .e-rating-label {
+  font-size: 12px;
+  line-height: 18px;
+}
+.e-bigger.e-small.e-rating-container .e-reset,
+.e-bigger.e-small .e-rating-container .e-reset,
+.e-bigger .e-small.e-rating-container .e-reset,
+.e-small .e-bigger.e-rating-container .e-reset {
+  font-size: 22px;
+}
+
+.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+  outline-color: #676767;
+  border-radius: 2px;
+}
+.e-rating-container .e-reset {
+  color: #acacac;
+}
+.e-rating-container .e-reset:hover {
+  color: #676767;
+}
+.e-rating-container .e-reset.e-disabled {
+  color: #505050;
+}
+.e-rating-container .e-rating-item-container .e-rating-icon {
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 1px #676767;
+}
+.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-container.e-rating-intermediate .e-rating-icon {
+  background: linear-gradient(to right, #acacac var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+  -webkit-text-stroke: 1px #acacac;
+}
+.e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
+  -webkit-text-stroke: 1px #57a5ff;
+}
+.e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
+  background: linear-gradient(to right, #57a5ff var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+  -webkit-text-stroke: 1px #57a5ff;
+}
+.e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
+  background: linear-gradient(to right, #57a5ff var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+  -webkit-text-stroke: 1px #57a5ff;
+}
+.e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
+  background: linear-gradient(to left, #acacac var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+.e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
+  background: linear-gradient(to left, #57a5ff var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+.e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
+  background: linear-gradient(to left, #57a5ff var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+.e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
+  -webkit-text-stroke: 1px #505050;
+}
+.e-rating-container.e-disabled .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled .e-rating-item-container.e-rating-intermediate .e-rating-icon {
+  background: linear-gradient(to right, #505050 var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
+  -webkit-text-stroke: 1px #505050;
+}
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container .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 */
+  -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 {
+  background: linear-gradient(to left, #505050 var(--rating-value), transparent var(--rating-value));
+  background-clip: text;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-background-clip: text;
+  /* stylelint-enable property-no-vendor-prefix */
 }

package/styles/bootstrap-dark.scss

@@ -6,3 +6,4 @@
 @import 'textbox/bootstrap-dark.scss';
 @import 'uploader/bootstrap-dark.scss';
 @import 'color-picker/bootstrap-dark.scss';
+@import 'rating/bootstrap-dark.scss';