@syncfusion/ej2-ribbon 31.1.17 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,68 +1,32 @@
 {
-  "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@29.2.0",
-  "_inBundle": false,
-  "_integrity": "sha512-PKSghxn/5lD1mn/t7tFf/5FyuDmn98o7zexy6FKAEAXAguwjab6HN9+br7S1Dx2r7F+bs19MtWkabyBqYYeShg==",
-  "_location": "/@syncfusion/ej2-ribbon",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-ribbon@*",
-    "name": "@syncfusion/ej2-ribbon",
-    "escapedName": "@syncfusion%2fej2-ribbon",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-ribbon",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-react-ribbon",
-    "/@syncfusion/ej2-vue-ribbon"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-ribbon/-/ej2-ribbon-29.2.0.tgz",
-  "_shasum": "676ff1dd9bb014d2b225fecd12f2701d9087165e",
-  "_spec": "@syncfusion/ej2-ribbon@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-ribbon-component/issues"
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-ribbon",
+  "version": "31.1.22",
+  "description": "Essential JS 2 Component",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-ribbon.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-ribbon.es5.js",
+  "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.17",
-    "@syncfusion/ej2-buttons": "~31.1.17",
-    "@syncfusion/ej2-dropdowns": "~31.1.17",
+    "@syncfusion/ej2-base": "~31.1.22",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-dropdowns": "~31.1.22",
     "@syncfusion/ej2-lists": "~31.1.17",
-    "@syncfusion/ej2-navigations": "~31.1.17",
-    "@syncfusion/ej2-popups": "~31.1.17",
+    "@syncfusion/ej2-navigations": "~31.1.20",
+    "@syncfusion/ej2-popups": "~31.1.20",
     "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 Component",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-ribbon.es5.js",
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
     "ej2-ribbon"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-ribbon.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-ribbon",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
+    "url": "https://github.com/syncfusion/ej2-ribbon-component.git"
   },
-  "typings": "index.d.ts",
-  "version": "31.1.17",
-  "sideEffects": false
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/ribbon/base/ribbon-model.d.ts

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { ColorPicker } from '@syncfusion/ej2-inputs';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -27,6 +27,7 @@ import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSpl
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
 import { Popup } from '@syncfusion/ej2-popups';
+import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 /**
@@ -396,13 +397,21 @@ var Ribbon = /** @class */ (function (_super) {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            var activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
-            if (!isNullOrUndefined(activePopup) && activePopup.length) {
-                for (var i = 0; i < activePopup.length; i++) {
-                    var dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            var colorPickerPopups = document.querySelectorAll('.e-ribbon .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker, .e-ribbon-group-overflow-ddb .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker');
+            activePopups.forEach(function (popup) {
+                var dropDownBtn = getInstance(popup, DropDownButton);
+                if (dropDownBtn) {
                     dropDownBtn.toggle();
                 }
-            }
+            });
+            colorPickerPopups.forEach(function (picker) {
+                var colorPickerObj = getInstance(picker, ColorPicker);
+                if (colorPickerObj) {
+                    colorPickerObj.toggle();
+                    colorPickerObj.refresh();
+                }
+            });
         }
         var galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
         if (galleryPopupEle) {

package/src/ribbon/items/ribbon-splitbutton.js

@@ -121,6 +121,11 @@ var RibbonSplitButton = /** @class */ (function () {
             }
         };
         var target;
+        splitbutton.beforeOpen = function (e) {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitbutton.beforeClose = function (e) {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(_this, e);
@@ -163,6 +168,11 @@ var RibbonSplitButton = /** @class */ (function () {
         cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeOpen = function (e) {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitbutton.beforeClose = function (e) {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(_this, e);
@@ -250,6 +260,7 @@ var RibbonSplitButton = /** @class */ (function () {
                 (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
             control.cssClass = prop.cssClass;
         }
+        delete prop.beforeOpen;
         delete prop.open;
         delete prop.click;
         delete prop.close;

package/styles/bds-lite.css

@@ -1118,6 +1118,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1323,6 +1329,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bds.css

@@ -1118,6 +1118,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1323,6 +1329,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-dark-lite.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-dark.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-lite.css

@@ -879,6 +879,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1084,6 +1090,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap.css

@@ -879,6 +879,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1084,6 +1090,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap4-lite.css

@@ -93,6 +93,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -921,6 +929,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1126,6 +1140,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap4.css

@@ -93,6 +93,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -921,6 +929,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1126,6 +1140,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-dark-lite.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-dark.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-lite.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.3-lite.css

@@ -956,6 +956,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1161,6 +1167,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.3.css

@@ -956,6 +956,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1161,6 +1167,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-dark-lite.css

@@ -853,6 +853,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1058,6 +1064,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-dark.css

@@ -853,6 +853,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1058,6 +1064,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-lite.css

@@ -854,6 +854,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1059,6 +1065,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric.css

@@ -854,6 +854,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1059,6 +1065,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;