@syncfusion/ej2-inputs 22.2.9 → 23.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.9
+*  version : 23.1.36
 *  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@22.2.7",
+  "_id": "@syncfusion/ej2-inputs@18.78.3",
   "_inBundle": false,
-  "_integrity": "sha512-0hx3hO3kTQC0NH+7B7fz/0AKH40oIczyevk7gqF2fDCpEp/wYqDa90KpVhJO1PB5CiIv2Viaj6nMMG8C8onJYA==",
+  "_integrity": "sha512-NiJqjeQrct8TL4pr9tzbaRtGslss9anV9SOE/wroStN7DpkumSvV6Dm4PkSBAoDDruSR8zWuz4Y2JbqNeibDAw==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,19 +39,19 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-22.2.7.tgz",
-  "_shasum": "acfc7de93f0416695774f7a3a39f1e8066b6db65",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.78.3.tgz",
+  "_shasum": "d8087ab30bd22ee3335d37a4025a319dc08ab373",
   "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.9",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-popups": "~22.2.9",
-    "@syncfusion/ej2-splitbuttons": "~22.2.8"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.36",
+    "@syncfusion/ej2-splitbuttons": "~23.1.36"
   },
   "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": "22.2.9",
+  "version": "23.1.36",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/color-picker/color-picker-model.d.ts

@@ -1,4 +1,4 @@
-import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
+import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
 import {ColorPickerMode,ColorPickerEventArgs,PaletteTileEventArgs,BeforeOpenCloseEventArgs,OpenEventArgs,ModeSwitchEventArgs} from "./color-picker";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/color-picker/color-picker.js

@@ -24,7 +24,7 @@ import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncf
 import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';
 import { SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
 import { Deferred } from '@syncfusion/ej2-splitbuttons';
-import { Tooltip, getZindexPartial, Popup } from '@syncfusion/ej2-popups';
+import { Tooltip, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';
 import { Input } from './../input/index';
 import { NumericTextBox } from './../numerictextbox/index';
 import { Slider } from './../slider/slider';
@@ -220,6 +220,15 @@ var ColorPicker = /** @class */ (function (_super) {
     };
     ColorPicker.prototype.onOpen = function () {
         this.trigger('open', { element: this.container });
+        if (!Browser.isDevice) {
+            var popupInst = this.getPopupInst();
+            var collision = isCollide(popupInst.element);
+            if (collision.length > 0) {
+                popupInst.collision = { X: 'flip', Y: 'fit' };
+                popupInst.position = { X: 'right', Y: 'bottom' };
+                popupInst.targetType = 'container';
+            }
+        }
     };
     ColorPicker.prototype.getPopupInst = function () {
         return getInstance(this.getPopupEle(), Popup);
@@ -635,7 +644,6 @@ var ColorPicker = /** @class */ (function (_super) {
         });
         tooltip.createElement = this.createElement;
         tooltip.appendTo(this.container);
-        // eslint-disable-next-line
         tooltip.open(this.container);
         this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
         select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));

package/src/form-validator/form-validator.js

@@ -308,7 +308,7 @@ var FormValidator = /** @class */ (function (_super) {
             input.removeAttribute('aria-invalid');
             var inputParent = input.parentElement;
             var grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.errorClass);
             }
             else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
@@ -322,7 +322,7 @@ var FormValidator = /** @class */ (function (_super) {
                 this.getErrorElement(input.name);
                 this.hideMessage(input.name);
             }
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.validClass);
             }
             else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
@@ -580,7 +580,7 @@ var FormValidator = /** @class */ (function (_super) {
                     this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
                     var inputParent = this.inputElement.parentElement;
                     var grandParent = inputParent.parentElement;
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
@@ -600,7 +600,7 @@ var FormValidator = /** @class */ (function (_super) {
                     }
                     eventArgs.errorElement = this.infoElement;
                     eventArgs.status = 'failure';
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
@@ -755,7 +755,7 @@ var FormValidator = /** @class */ (function (_super) {
             this.removeErrorRules(name);
             var inputParent = this.inputElement.parentElement;
             var grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.add(this.validClass);
                 inputParent.classList.remove(this.errorClass);
             }

package/src/input/input.js

@@ -111,11 +111,23 @@ export var Input;
     Input.bindInitialEvent = bindInitialEvent;
     function checkInputValue(floatLabelType, inputElement) {
         var inputValue = inputElement.value;
-        if (inputValue !== '' && !isNullOrUndefined(inputValue) && inputElement.parentElement) {
-            inputElement.parentElement.classList.add('e-valid-input');
+        var inputParent = inputElement.parentElement;
+        var grandParent = inputParent.parentElement;
+        if (inputValue !== '' && !isNullOrUndefined(inputValue)) {
+            if (inputParent && inputParent.classList.contains('e-input-group')) {
+                inputParent.classList.add('e-valid-input');
+            }
+            else if (grandParent && grandParent.classList.contains('e-input-group')) {
+                grandParent.classList.add('e-valid-input');
+            }
         }
-        else if (floatLabelType !== 'Always' && inputElement.parentElement) {
-            inputElement.parentElement.classList.remove('e-valid-input');
+        else if (floatLabelType !== 'Always') {
+            if (inputParent && inputParent.classList.contains('e-input-group')) {
+                inputParent.classList.remove('e-valid-input');
+            }
+            else if (grandParent && grandParent.classList.contains('e-input-group')) {
+                grandParent.classList.remove('e-valid-input');
+            }
         }
     }
     function _focusFn() {
@@ -849,7 +861,11 @@ export var Input;
             var result = container.querySelectorAll(inputElement.tagName + ' ~ *');
             innerWrapper.appendChild(inputElement);
             for (var i = 0; i < result.length; i++) {
-                innerWrapper.appendChild(result[parseInt(i.toString())]);
+                var element = result[parseInt(i.toString())];
+                var parentElement = innerWrapper.parentElement;
+                if (!(element.classList.contains('e-float-line')) || (!(parentElement && parentElement.classList.contains('e-filled')) && parentElement)) {
+                    innerWrapper.appendChild(element);
+                }
             }
         }
         innerWrapper.parentNode.insertBefore(button, innerWrapper);

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

@@ -38,6 +38,9 @@ export interface RatingModel extends ComponentModel{
      * Defines the template that defines the appearance of each un-rated item in a rating component.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     emptyTemplate?: string | Function;
@@ -65,6 +68,9 @@ export interface RatingModel extends ComponentModel{
      * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     fullTemplate?: string | Function;
@@ -101,6 +107,9 @@ export interface RatingModel extends ComponentModel{
      * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     labelTemplate?: string | Function;
@@ -165,6 +174,9 @@ export interface RatingModel extends ComponentModel{
      * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     tooltipTemplate?: string | Function;

package/src/rating/rating.d.ts

@@ -137,6 +137,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * Defines the template that defines the appearance of each un-rated item in a rating component.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     emptyTemplate: string | Function;
@@ -161,6 +164,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     fullTemplate: string | Function;
@@ -194,6 +200,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     labelTemplate: string | Function;
@@ -252,6 +261,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     tooltipTemplate: string | Function;

package/styles/bootstrap-dark.css

@@ -6823,7 +6823,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 9px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -6921,7 +6920,6 @@ body.e-colorpicker-overflow {
 .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 {
@@ -6936,7 +6934,6 @@ body.e-colorpicker-overflow {
 .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 {
@@ -6953,7 +6950,6 @@ body.e-colorpicker-overflow {
 .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,

package/styles/bootstrap.css

@@ -6802,7 +6802,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 9px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -6900,7 +6899,6 @@ body.e-colorpicker-overflow {
 .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 {
@@ -6915,7 +6913,6 @@ body.e-colorpicker-overflow {
 .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 {
@@ -6932,7 +6929,6 @@ body.e-colorpicker-overflow {
 .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,

package/styles/bootstrap4.css

@@ -6956,7 +6956,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 11px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -7054,7 +7053,6 @@ body.e-colorpicker-overflow {
 .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 {
@@ -7069,7 +7067,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
-  line-height: 13px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7086,7 +7083,6 @@ body.e-colorpicker-overflow {
 .e-bigger .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
-  line-height: 9px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/bootstrap5-dark.css

@@ -7106,7 +7106,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 22px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -7204,7 +7203,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 6px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7219,7 +7217,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
-  line-height: 13px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7236,7 +7233,6 @@ body.e-colorpicker-overflow {
 .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: 13px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/bootstrap5.css

@@ -7106,7 +7106,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 22px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -7204,7 +7203,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 6px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7219,7 +7217,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
-  line-height: 13px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7236,7 +7233,6 @@ body.e-colorpicker-overflow {
 .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: 13px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/color-picker/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/bootstrap-dark-definition.scss';

package/styles/color-picker/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-buttons/styles/button/bootstrap-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/bootstrap-definition.scss';

package/styles/color-picker/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/bootstrap4-definition.scss';

package/styles/color-picker/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/bootstrap5-dark-definition.scss';

package/styles/color-picker/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/bootstrap5-definition.scss';

package/styles/color-picker/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/fabric-dark-definition.scss';

package/styles/color-picker/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'ej2-buttons/styles/button/fabric-definition.scss';
 @import 'ej2-popups/styles/popup/fabric-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/fabric-definition.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/fluent-dark-definition.scss';

package/styles/color-picker/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'ej2-buttons/styles/button/fluent-definition.scss';
 @import 'ej2-popups/styles/popup/fluent-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/fluent-definition.scss';

package/styles/color-picker/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
 @import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/highcontrast-light-definition.scss';

package/styles/color-picker/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-buttons/styles/button/highcontrast-definition.scss';
 @import 'ej2-popups/styles/popup/highcontrast-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/highcontrast-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/color-picker/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'ej2-buttons/styles/button/material-dark-definition.scss';
 @import 'ej2-popups/styles/popup/material-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/material-dark-definition.scss';

package/styles/color-picker/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/color-picker/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'ej2-buttons/styles/button/material-definition.scss';
 @import 'ej2-popups/styles/popup/material-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/material-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/color-picker/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'ej2-buttons/styles/button/material3-dark-definition.scss';
 @import 'ej2-popups/styles/popup/material3-dark-definition.scss';

package/styles/color-picker/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/color-picker/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'ej2-buttons/styles/button/material3-definition.scss';
 @import 'ej2-popups/styles/popup/material3-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 .e-container .e-value-switch-btn::before {

package/styles/color-picker/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
 @import 'ej2-popups/styles/popup/tailwind-dark-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/tailwind-dark-definition.scss';

package/styles/color-picker/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 .e-container .e-value-switch-btn::before {

package/styles/color-picker/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'ej2-buttons/styles/button/tailwind-definition.scss';
 @import 'ej2-popups/styles/popup/tailwind-definition.scss';
 @import 'ej2-splitbuttons/styles/split-button/tailwind-definition.scss';

package/styles/fabric-dark.css

@@ -6752,7 +6752,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -6850,7 +6849,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 10px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -6865,7 +6863,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
-  line-height: 21px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -6882,7 +6879,6 @@ body.e-colorpicker-overflow {
 .e-bigger .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
-  line-height: 19px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,