@syncfusion/ej2-inputs 20.4.54 → 21.1.37

package/src/slider/slider.d.ts

@@ -13,23 +13,27 @@ export declare class TicksData extends ChildProperty<TicksData> {
      *  * both - Ticks are placed on the both side of the Slider bar.
      *  * none - Ticks are not shown.
      * {% codeBlock src='slider/placement/index.md' %}{% endcodeBlock %}
+     *
      * @default 'None'
      */
     placement: Placement;
     /**
      * It is used to denote the distance between two major (large) ticks from the scale of the Slider.
      * {% codeBlock src='slider/largestep/index.md' %}{% endcodeBlock %}
+     *
      * @default 10
      */
     largeStep: number;
     /**
      * It is used to denote the distance between two minor (small) ticks from the scale of the Slider.
      * {% codeBlock src='slider/smallstep/index.md' %}{% endcodeBlock %}
+     *
      * @default 1
      */
     smallStep: number;
     /**
      * We can show or hide the small ticks in the Slider, which will be appeared in between the largeTicks.
+     *
      * @default false
      */
     showSmallTicks: boolean;
@@ -45,6 +49,7 @@ export declare class TicksData extends ChildProperty<TicksData> {
 export interface SliderTooltipEventArgs {
     /**
      * It is used to get the value of the Slider.
+     *
      * @isGenericType true
      */
     value: number | number[];
@@ -59,11 +64,13 @@ export interface SliderTooltipEventArgs {
 export interface SliderChangeEventArgs {
     /**
      * It is used to get the current value of the Slider.
+     *
      * @isGenericType true
      */
     value: number | number[];
     /**
      * It is used to get the previous value of the Slider.
+     *
      * @isGenericType true
      */
     previousValue: number | number[];
@@ -117,16 +124,19 @@ export interface SliderTickRenderedEventArgs {
 export declare class ColorRangeData extends ChildProperty<ColorRangeData> {
     /**
      * It is used to set the color in the slider bar.
+     *
      * @default ''
      */
     color: string;
     /**
      * It is used to get the starting value for applying color.
+     *
      * @default null
      */
     start: number;
     /**
      * It is used to get the end value for applying color.
+     *
      * @default null
      */
     end: number;
@@ -138,38 +148,45 @@ export declare class ColorRangeData extends ChildProperty<ColorRangeData> {
 export declare class LimitData extends ChildProperty<LimitData> {
     /**
      * It is used to enable the limit in the slider.
+     *
      * @default false
      */
     enabled: boolean;
     /**
      * It is used to set the minimum start limit value.
+     *
      * @default null
      */
     minStart: number;
     /**
      * It is used to set the minimum end limit value.
+     *
      * @default null
      */
     minEnd: number;
     /**
      * It is used to set the maximum start limit value.
+     *
      * @default null
      */
     maxStart: number;
     /**
      * It is used to set the maximum end limit value.
+     *
      * @default null
      */
     maxEnd: number;
     /**
      * It is used to lock the first handle.
      * {% codeBlock src='slider/limitStartHandleFixed/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     startHandleFixed: boolean;
     /**
      * It is used to lock the second handle.
      * {% codeBlock src='slider/limitEndHandleFixed/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     endHandleFixed: boolean;
@@ -181,6 +198,7 @@ export declare class TooltipData extends ChildProperty<TooltipData> {
     /**
      * It is used to customize the Tooltip which accepts custom CSS class names that define
      *  specific user-defined styles and themes to be applied on the Tooltip element.
+     *
      * @default ''
      */
     cssClass: string;
@@ -196,6 +214,7 @@ export declare class TooltipData extends ChildProperty<TooltipData> {
      * If it is in desktop, it will show the Tooltip content when hovering on the target element.
      * If it is in touch device. It will show the Tooltip content when tap and holding on the target element.
      * {% codeBlock src='slider/tooltipShowOn/index.md' %}{% endcodeBlock %}
+     *
      * @default 'Auto'
      */
     showOn: TooltipShowOn;
@@ -213,23 +232,83 @@ export declare class TooltipData extends ChildProperty<TooltipData> {
 /**
  * Ticks Placement.
  */
-export declare type Placement = 'Before' | 'After' | 'Both' | 'None';
+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';
 /**
  * Tooltip Placement.
  */
-export declare type TooltipPlacement = 'Before' | 'After';
+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';
 /**
  * Tooltip ShowOn.
  */
-export declare type TooltipShowOn = 'Focus' | 'Hover' | 'Always' | 'Auto';
+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';
 /**
  * Slider type.
  */
-export declare type SliderType = 'Default' | 'MinRange' | 'Range';
+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';
 /**
  * Slider orientation.
  */
-export declare type SliderOrientation = 'Horizontal' | 'Vertical';
+export declare type SliderOrientation = 
+/**
+* Renders the slider in horizontal orientation.
+*/
+'Horizontal' | 
+/**
+* Renders the slider in vertical orientation.
+*/
+'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.
@@ -312,6 +391,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      * The value should be specified in array of number when render Slider type as range.
      *
      * {% codeBlock src="slider/value-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default null
      * @isGenericType true
      */
@@ -319,6 +399,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     /**
      * Specifies an array of slider values in number or string type.
      * The min and max step values are not considered.
+     *
      * @default null
      */
     customValues: string[] | number[];
@@ -329,11 +410,13 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      *  to know more about this property.
      *
      * {% codeBlock src="slider/step-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 1
      */
     step: number;
     /**
      * Specifies the width of the Slider.
+     *
      * @default null
      */
     width: number | string;
@@ -341,6 +424,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      * Gets/Sets the minimum value of the slider.
      *
      * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 0
      */
     min: number;
@@ -348,12 +432,14 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      * Gets/Sets the maximum value of the slider.
      *
      * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 100
      */
     max: number;
     /**
      * Specifies whether the render the slider in read-only mode to restrict any user interaction.
      * The slider rendered with user defined values and can’t be interacted with user actions.
+     *
      * @default false
      */
     readonly: boolean;
@@ -363,6 +449,8 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      *  * 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. It displays shadow in-between the selection range.
      * {% codeBlock src='slider/types/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Default'
      */
     type: SliderType;
     /**
@@ -375,6 +463,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      *  to know more about this property with demo.
      * {% codeBlock src='slider/ticks/index.md' %}{% endcodeBlock %}
      * {% codeBlock src="slider/ticks-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { placement: 'before' }
      */
     ticks: TicksDataModel;
@@ -384,11 +473,13 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      *  to know more about this property.
      *
      * {% codeBlock src="slider/limits-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { enabled: false }
      */
     limits: LimitDataModel;
     /**
-     * Enables or Disables the slider.
+     * Enable or Disable the slider.
+     *
      * @default true
      */
     enabled: boolean;
@@ -396,6 +487,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      * Specifies the visibility, position of the tooltip over the slider element.
      *
      * {% codeBlock src="slider/tooltip-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { placement: 'Before', isVisible: false, showOn: 'Focus', format: null }
      */
     tooltip: TooltipDataModel;
@@ -406,34 +498,40 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
      *  to know more about this property.
      *
      * {% codeBlock src="slider/showButtons-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default false
      */
     showButtons: boolean;
     /**
-     * Enables/Disables the animation for slider movement.
+     * Enable or Disable the animation for slider movement.
+     *
      * @default true
      */
     enableAnimation: boolean;
     /**
      *  Specifies whether to render the slider in vertical or horizontal orientation.
-     *  Refer the documentation [here](../../slider/getting-started#orientation)
+     *  Refer the documentation [here](../../slider/orientation/)
      *  to know more about this property.
+     *
      * @default 'Horizontal'
      */
     orientation: SliderOrientation;
     /**
      * Specifies the custom classes to be added to the element used to customize the slider.
      * {% codeBlock src='slider/cssClass/index.md' %}{% endcodeBlock %}
+     *
      * @default ''
      */
     cssClass: string;
     /**
      * Defines whether to allow the cross-scripting site or not.
+     *
      * @default false
      */
     enableHtmlSanitizer: boolean;
     /**
      * Triggers when the Slider is successfully created.
+     *
      * @event
      */
     created: EmitType<Object>;
@@ -481,6 +579,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private fractionalToInteger;
     /**
      * To Initialize the control rendering
+     *
      * @private
      */
     render(): void;
@@ -491,6 +590,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private getTheme;
     /**
      * Initialize the rendering
+     *
      * @private
      */
     private initRender;
@@ -571,6 +671,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private checkHandleValue;
     /**
      * It is used to reposition slider.
+     *
      * @returns void
      */
     reposition(): void;
@@ -608,18 +709,21 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private limitsPropertyChange;
     /**
      * Get the properties to be maintained in the persisted state.
+     *
      * @private
      */
     protected getPersistData(): string;
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it removes the attributes and classes.
+     *
      * @method destroy
      * @return {void}
      */
     destroy(): void;
     /**
      * Calls internally if any of the property value is changed.
+     *
      * @private
      */
     onPropertyChanged(newProp: SliderModel, oldProp: SliderModel): void;
@@ -630,6 +734,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private setBarColor;
     /**
      * Gets the component name
+     *
      * @private
      */
     getModuleName(): string;

package/src/slider/slider.js

@@ -305,6 +305,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * To Initialize the control rendering
+     *
      * @private
      */
     Slider.prototype.render = function () {
@@ -315,7 +316,7 @@ var Slider = /** @class */ (function (_super) {
         this.setZindex();
         this.renderComplete();
         if (this.element.tagName === 'EJS-SLIDER') {
-            if (this.getTheme(this.sliderContainer) == "none") {
+            if (this.getTheme(this.sliderContainer) == 'none') {
                 setTimeout(function () {
                     _this.refresh();
                 }, 0);
@@ -366,6 +367,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * Initialize the rendering
+     *
      * @private
      */
     Slider.prototype.initRender = function () {
@@ -962,7 +964,6 @@ 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);
         }
     };
@@ -1795,6 +1796,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * It is used to reposition slider.
+     *
      * @returns void
      */
     Slider.prototype.reposition = function () {
@@ -2045,7 +2047,12 @@ var Slider = /** @class */ (function (_super) {
             focusedElement.classList.remove(classNames.sliderTabHandle);
         }
         var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;
-        if (evt.target === handle) {
+        var behindElement;
+        if ((evt.type === 'click' || evt.type === 'mousedown') && evt.target === handle) {
+            var eventX = evt.clientX, eventY = evt.clientY;
+            behindElement = document.elementFromPoint(eventX, eventY);
+        }
+        if (evt.target === handle && behindElement != handle) {
             if (this.isMaterial && !this.tooltip.isVisible &&
                 !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
                 this.materialChange();
@@ -2296,7 +2303,6 @@ 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;
         }
@@ -2616,6 +2622,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * Get the properties to be maintained in the persisted state.
+     *
      * @private
      */
     Slider.prototype.getPersistData = function () {
@@ -2625,6 +2632,7 @@ var Slider = /** @class */ (function (_super) {
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it removes the attributes and classes.
+     *
      * @method destroy
      * @return {void}
      */
@@ -2646,6 +2654,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * Calls internally if any of the property value is changed.
+     *
      * @private
      */
     // tslint:disable-next-line
@@ -2864,6 +2873,7 @@ var Slider = /** @class */ (function (_super) {
     };
     /**
      * Gets the component name
+     *
      * @private
      */
     Slider.prototype.getModuleName = function () {

package/src/textbox/textbox.js

@@ -203,7 +203,9 @@ var TextBox = /** @class */ (function (_super) {
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
-        this.element.setAttribute('role', 'textbox');
+        if (this.type === 'text') {
+            this.element.setAttribute('role', 'textbox');
+        }
         this.globalize = new Internationalization(this.locale);
         var localeText = { placeholder: this.placeholder };
         this.l10n = new L10n('textbox', localeText, this.locale);
@@ -336,7 +338,7 @@ var TextBox = /** @class */ (function (_super) {
         this.inputPreviousValue = this.value;
         this.respectiveElement.defaultValue = this.respectiveElement.value;
         Input.setWidth(this.width, this.textboxWrapper.container);
-        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.renderComplete();

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

@@ -132,7 +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 {}

package/src/uploader/uploader.js

@@ -909,7 +909,7 @@ var Uploader = /** @class */ (function (_super) {
     /* istanbul ignore next */
     Uploader.prototype.onPasteFile = function (event) {
         var item = event.clipboardData.items;
-        if (event.type == 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
+        if (event.type === 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
             this.element.files = event.clipboardData.files;
         }
         if (item.length !== 1) {
@@ -1286,14 +1286,14 @@ var Uploader = /** @class */ (function (_super) {
         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) {
+                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString())].name);
+                if (sanitizeFileName !== fileData[parseInt(i.toString())].name) {
+                    var encodedFileName = targetFiles[parseInt(i.toString())].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';
+                    fileData[parseInt(i.toString())].name = encodedFileName;
+                    fileData[parseInt(i.toString())].status = this.localizedTexts('invalidFileName');
+                    fileData[parseInt(i.toString())].statusCode = '0';
                 }
             }
         }
@@ -2533,13 +2533,13 @@ var Uploader = /** @class */ (function (_super) {
             this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');
             this.updateProgressBarClasses(liElement, UPLOAD_FAILED);
             this.removeProgressbar(liElement, 'failure');
-            deleteIcon && deleteIcon.classList.remove(ABORT_ICON);
-            deleteIcon && deleteIcon.classList.add(REMOVE_ICON);
-            deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove'));
+            (deleteIcon && deleteIcon.classList.remove(ABORT_ICON));
+            (deleteIcon && deleteIcon.classList.add(REMOVE_ICON));
+            (deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove')));
             var pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.classList.add(RETRY_ICON);
-            pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry'));
+            (pauseIcon && pauseIcon.classList.add(RETRY_ICON));
+            (pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD));
+            (pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry')));
             if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)
                 && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {
                 hideSpinner(spinnerTarget);

package/styles/bootstrap-dark.css

@@ -6162,6 +6162,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.e-bigger .e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger .e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
+  line-height: 0;
+}
 
 .e-container {
   border: 0;
@@ -6805,6 +6811,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -6900,6 +6908,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -6915,6 +6925,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 16px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -6932,6 +6944,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 9px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/bootstrap.css

@@ -6141,6 +6141,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.e-bigger .e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger .e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
+  line-height: 0;
+}
 
 .e-container {
   border: 0;
@@ -6784,6 +6790,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -6879,6 +6887,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -6894,6 +6904,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 16px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -6911,6 +6923,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 9px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,