@syncfusion/ej2-ribbon 21.1.37 → 21.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.37
+*  version : 21.2.3
 *  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-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@21.1.35",
+  "_id": "@syncfusion/ej2-ribbon@21.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-/LDAXvqgmh7oonyPvW0RpUpmajmXn6OHEHDWuQN/4ijVcs+G8xOwH5kD5uFdDKX1uY7mgsFS4CxmIIq2G5JJ0A==",
+  "_integrity": "sha512-gWwlbD+kTmoNDnyq+liFGtG0dXmxD7B5M/OMAWv8wXSJZWlzmdrVUIa8fSL80eQSFzyzU/fU8z0pjyXVu8VSXA==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -18,13 +18,10 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-ribbon",
-    "/@syncfusion/ej2-react-ribbon",
-    "/@syncfusion/ej2-vue-ribbon"
+    "/@syncfusion/ej2"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.1.35.tgz",
-  "_shasum": "c0b6b9ec2253aa727068716ab0d79c122c2d2a89",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.1.37.tgz",
+  "_shasum": "724d27c29aa2886be6969a2149fc3c97645677e2",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,13 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.37",
-    "@syncfusion/ej2-buttons": "~21.1.37",
-    "@syncfusion/ej2-dropdowns": "~21.1.37",
-    "@syncfusion/ej2-lists": "~21.1.37",
-    "@syncfusion/ej2-navigations": "~21.1.37",
-    "@syncfusion/ej2-popups": "~21.1.37",
-    "@syncfusion/ej2-splitbuttons": "~21.1.37"
+    "@syncfusion/ej2-base": "~21.2.3",
+    "@syncfusion/ej2-buttons": "~21.2.3",
+    "@syncfusion/ej2-dropdowns": "~21.2.3",
+    "@syncfusion/ej2-lists": "~21.2.3",
+    "@syncfusion/ej2-navigations": "~21.2.3",
+    "@syncfusion/ej2-popups": "~21.2.3",
+    "@syncfusion/ej2-splitbuttons": "~21.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +59,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "21.1.37",
+  "version": "21.2.3",
   "sideEffects": false
 }

package/src/ribbon/base/constant.d.ts

@@ -96,6 +96,8 @@ export declare const DROPDOWNBUTTON: string;
 /** @hidden */
 export declare const DROPDOWNBUTTON_HIDE: string;
 /** @hidden */
+export declare const RIBBON_TEMPLATE: string;
+/** @hidden */
 export declare const RIBBON_HELP_TEMPLATE: string;
 /** @hidden */
 export declare const RIBBON_TOOLTIP: string;

package/src/ribbon/base/constant.js

@@ -96,6 +96,8 @@ export var DROPDOWNBUTTON = 'e-dropdown-btn';
 /** @hidden */
 export var DROPDOWNBUTTON_HIDE = 'e-caret-hide';
 /** @hidden */
+export var RIBBON_TEMPLATE = 'e-ribbon-template';
+/** @hidden */
 export var RIBBON_HELP_TEMPLATE = 'e-ribbon-help-template';
 /** @hidden */
 export var RIBBON_TOOLTIP = 'e-ribbon-tooltip';

package/src/ribbon/base/ribbon.js

@@ -177,7 +177,7 @@ var Ribbon = /** @class */ (function (_super) {
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
         this.setProperties({ selectedTab: selectedIndex }, true);
-        this.checkOverflow(selectedIndex, e.selectedContent);
+        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + constants.RIBBON_TAB_ACTIVE);
@@ -196,9 +196,6 @@ var Ribbon = /** @class */ (function (_super) {
         this.trigger('tabSelected', eventArgs);
     };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
-        if (!activeContent) {
-            activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.CONTENT_ID);
-        }
         var tabContent = activeContent.closest('.' + constants.TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
         if (isOverFlow && !this.scrollModule) {
@@ -1627,10 +1624,11 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
-            className: item.disabled ? constants.DISABLED_CSS + constants.SPACE + item.cssClass : item.cssClass,
+            className: item.cssClass ? (constants.RIBBON_TEMPLATE + constants.SPACE + item.cssClass) : constants.RIBBON_TEMPLATE,
             id: item.id
         });
         if (item.disabled) {
+            itemEle.classList.add(constants.DISABLED_CSS);
             itemEle.setAttribute('disabled', '');
         }
         itemElement.appendChild(itemEle);
@@ -1792,7 +1790,10 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.destroyFunction = function (item, ele) {
         var moduleName = this.getItemModuleName(item);
-        if (moduleName !== 'template') {
+        if (moduleName === 'colorpicker') {
+            this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
+        }
+        else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
         if (item.ribbonTooltipSettings) {
@@ -2347,6 +2348,7 @@ var Ribbon = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
+                    this.refreshLayout();
                     break;
                 case 'fileMenu':
                     if (this.ribbonFileMenuModule) {

package/src/ribbon/items/ribbon-colorpicker.d.ts

@@ -18,6 +18,7 @@ export declare class RibbonColorPicker {
      * @hidden
      */
     createColorPicker(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private toggleWrapperHover;
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
      *
@@ -62,4 +63,10 @@ export declare class RibbonColorPicker {
      * @returns {void}
      */
     updateColorPicker(prop: RibbonColorPickerSettingsModel, id: string): void;
+    /**
+     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
+     * @returns {void}
+     * @hidden
+     */
+    unwireColorPickerEvents(element: HTMLElement): void;
 }

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

@@ -63,8 +63,16 @@ var RibbonColorPicker = /** @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         var wrapper = colorPicker.element.parentElement;
-        EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
-        EventHandler.add(wrapper, 'mouseleave', function () { wrapper.classList.remove(RIBBON_HOVER); }, this);
+        EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
+        EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);
+    };
+    RibbonColorPicker.prototype.toggleWrapperHover = function (wrapper, isAdd) {
+        if (isAdd) {
+            wrapper.classList.add(RIBBON_HOVER);
+        }
+        else {
+            wrapper.classList.remove(RIBBON_HOVER);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -76,13 +84,24 @@ var RibbonColorPicker = /** @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         colorPickerObj.setProperties({ cssClass: colorPickerObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         var splitBtn = colorPickerObj['splitBtn'];
+        var target;
+        colorPickerObj.beforeClose = function (e) {
+            target = e.event ? e.event.target : null;
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
         splitBtn.close = function () {
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -94,6 +113,7 @@ var RibbonColorPicker = /** @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         var cssClass = colorPickerObj.cssClass.split(SPACE);
@@ -102,6 +122,12 @@ var RibbonColorPicker = /** @class */ (function () {
         var splitBtn = colorPickerObj['splitBtn'];
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         splitBtn.close = null;
+        colorPickerObj.beforeClose = function (e) {
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
     };
     RibbonColorPicker.prototype.getColorPickerObj = function (controlId) {
         var inputEle = getItemElement(this.parent, controlId);
@@ -157,6 +183,17 @@ var RibbonColorPicker = /** @class */ (function () {
         var colorPickerObj = getComponent(inputEle, ColorPicker);
         colorPickerObj.setProperties(prop);
     };
+    /**
+     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonColorPicker.prototype.unwireColorPickerEvents = function (element) {
+        var colorPickerObj = getComponent(element, ColorPicker);
+        var wrapper = colorPickerObj.element.parentElement;
+        EventHandler.remove(wrapper, 'mouseenter', this.toggleWrapperHover);
+        EventHandler.remove(wrapper, 'mouseleave', this.toggleWrapperHover);
+    };
     return RibbonColorPicker;
 }());
 export { RibbonColorPicker };

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

@@ -86,10 +86,13 @@ var RibbonComboBox = /** @class */ (function () {
         var comboBoxObj = getComponent(inputEle, ComboBox);
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {
+            var target = e.event ? e.event.target : null;
             if (item.comboBoxSettings.close) {
                 item.comboBoxSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**

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

@@ -45,7 +45,11 @@ var RibbonDropDown = /** @class */ (function () {
             iconCss: dropDownSettings.iconCss,
             items: dropDownSettings.items,
             target: dropDownSettings.target,
-            beforeClose: dropDownSettings.beforeClose,
+            beforeClose: function (e) {
+                if (dropDownSettings.beforeClose) {
+                    dropDownSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: dropDownSettings.beforeItemRender,
             beforeOpen: dropDownSettings.beforeOpen,
             close: function (e) {
@@ -73,11 +77,20 @@ var RibbonDropDown = /** @class */ (function () {
         var dropdown = getComponent(dropdownElement, DropDownButton);
         dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         dropdown.dataBind();
+        var target;
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         dropdown.close = function (e) {
             if (item.dropDownSettings.close) {
                 item.dropDownSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -101,6 +114,11 @@ var RibbonDropDown = /** @class */ (function () {
                 item.dropDownSettings.close.call(_this, e);
             }
         };
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+        };
     };
     /**
      * Creates Overflow DropDown.
@@ -236,6 +254,7 @@ var RibbonDropDown = /** @class */ (function () {
             control.cssClass = prop.cssClass;
         }
         delete prop.close;
+        delete prop.beforeClose;
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
         }

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

@@ -43,7 +43,11 @@ var RibbonSplitButton = /** @class */ (function () {
             iconCss: splitButtonSettings.iconCss,
             items: splitButtonSettings.items,
             target: splitButtonSettings.target,
-            beforeClose: splitButtonSettings.beforeClose,
+            beforeClose: function (e) {
+                if (splitButtonSettings.beforeClose) {
+                    splitButtonSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: splitButtonSettings.beforeItemRender,
             beforeOpen: splitButtonSettings.beforeOpen,
             close: function () {
@@ -86,6 +90,13 @@ var RibbonSplitButton = /** @class */ (function () {
         var splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        var target;
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -97,7 +108,9 @@ var RibbonSplitButton = /** @class */ (function () {
                 item.splitButtonSettings.close.call(_this, e);
             }
             splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -116,6 +129,11 @@ var RibbonSplitButton = /** @class */ (function () {
         cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -195,6 +213,7 @@ var RibbonSplitButton = /** @class */ (function () {
         delete prop.open;
         delete prop.click;
         delete prop.close;
+        delete prop.beforeClose;
         control.setProperties(prop);
         if (prop.content) {
             this.setContent(itemProp.item, control);

package/styles/bootstrap-dark.css

@@ -130,9 +130,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -308,6 +305,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -595,6 +595,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -713,7 +714,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -737,22 +739,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 2px 8px;
   font-weight: 400;
   line-height: 22px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 8px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 8px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -905,6 +909,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1119,7 +1129,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1127,6 +1139,18 @@
   margin: 10px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/bootstrap.css

@@ -135,9 +135,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -313,6 +310,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -600,6 +600,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -718,7 +719,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -742,22 +744,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 2px 8px;
   font-weight: 400;
   line-height: 22px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 8px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 8px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -910,6 +914,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1124,7 +1134,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1132,6 +1144,18 @@
   margin: 10px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,