@syncfusion/ej2-ribbon 26.1.40 → 26.1.42

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.40
+*  version : 26.1.42
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@26.1.38",
+  "_id": "@syncfusion/ej2-ribbon@26.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-2keECQflUgb0MtUUp0Rr7UibEduNznYBNPt7810kc001JuzGF4fd7FUjsa2jmAwYBLeSv3komIlm7TUpGkPorA==",
+  "_integrity": "sha512-sFNYCnCHzrse9jMS3esuvQR+axCghFfd5hefHBOyYjs6oN1z2oLTTJKWdukrH30JT1eMIHyTm1K5/AxOLRSHug==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-26.1.38.tgz",
-  "_shasum": "10f6d376c175ad92a84748840dcfad6622788b13",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-26.1.41.tgz",
+  "_shasum": "0fb91a23bb125e13ac150f2f171b26d6a3197818",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-base": "~26.1.42",
     "@syncfusion/ej2-buttons": "~26.1.40",
-    "@syncfusion/ej2-dropdowns": "~26.1.40",
+    "@syncfusion/ej2-dropdowns": "~26.1.42",
     "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-navigations": "~26.1.40",
-    "@syncfusion/ej2-popups": "~26.1.38",
+    "@syncfusion/ej2-navigations": "~26.1.41",
+    "@syncfusion/ej2-popups": "~26.1.42",
     "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.40",
+  "version": "26.1.42",
   "sideEffects": false
 }

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

@@ -173,6 +173,19 @@ export interface ExpandCollapseEventArgs extends BaseEventArgs {
      */
     cancel: boolean;
 }
+/**
+ * Event triggers when the ribbon layout is switched.
+ */
+export interface LayoutSwitchedEventArgs extends BaseEventArgs {
+    /**
+     *  Specifies the active layout of the ribbon.
+     */
+    activeLayout: string;
+    /**
+     *  Provides the actual native event.
+     */
+    event: Event;
+}
 /**
  * Event Triggers when the launcher icon is clicked.
  */

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, 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 { 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';
 
 /**
@@ -157,6 +157,13 @@ export interface RibbonModel extends ComponentModel{
      */
     ribbonCollapsing?: EmitType<ExpandCollapseEventArgs>;
 
+    /**
+     * Event triggers when the ribbon layout is switched.
+     *
+     * @event ribbonLayoutSwitched
+     */
+    ribbonLayoutSwitched?: EmitType<LayoutSwitchedEventArgs>;
+
     /**
      * Event triggers when the launcher icon of the group is clicked.
      *

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

@@ -3,7 +3,7 @@ import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base'
 import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
 import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel, RibbonContextualTabSettingsModel } from '../models/index';
 import { RibbonModel } from './ribbon-model';
-import { ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
+import { ExpandCollapseEventArgs, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
 import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -144,6 +144,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @event ribbonCollapsing
      */
     ribbonCollapsing: EmitType<ExpandCollapseEventArgs>;
+    /**
+     * Event triggers when the ribbon layout is switched.
+     *
+     * @event ribbonLayoutSwitched
+     */
+    ribbonLayoutSwitched: EmitType<LayoutSwitchedEventArgs>;
     /**
      * Event triggers when the launcher icon of the group is clicked.
      *

package/src/ribbon/base/ribbon.js

@@ -556,9 +556,11 @@ var Ribbon = /** @class */ (function (_super) {
             }
         });
     };
-    Ribbon.prototype.toggleLayout = function () {
+    Ribbon.prototype.toggleLayout = function (args) {
         this.setProperties({ activeLayout: this.activeLayout === 'Simplified' ? 'Classic' : 'Simplified' }, true);
         this.switchLayout();
+        var eventArgs = { activeLayout: this.activeLayout, event: args };
+        this.trigger('ribbonLayoutSwitched', eventArgs);
     };
     Ribbon.prototype.tabCreated = function () {
         if (!this.hideLayoutSwitcher) {
@@ -2320,10 +2322,10 @@ var Ribbon = /** @class */ (function (_super) {
             id: this.tabObj.element.id + constants.COLLAPSE_BUTTON_ID,
             attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher', 'role': 'button' }
         });
-        this.collapseButton.onclick = function () { _this.toggleLayout(); };
+        this.collapseButton.onclick = function (e) { _this.toggleLayout(e); };
         this.collapseButton.onkeydown = function (e) {
             if (e.key === 'Enter') {
-                _this.toggleLayout();
+                _this.toggleLayout(e);
             }
         };
         this.element.classList.add(constants.RIBBON_COLLAPSIBLE);
@@ -3205,10 +3207,18 @@ var Ribbon = /** @class */ (function (_super) {
                 for (var i = 0; i < galleryPopupEle.length; i++) {
                     galleryPopupEle[parseInt(i.toString(), 10)].remove();
                 }
+                var galleryPopupBtn = document.querySelector('#' + item.id + '_popupButton');
+                if (galleryPopupBtn) {
+                    galleryPopupBtn.remove();
+                }
+                var galleryWrapper = document.querySelector('#' + item.id + '_galleryWrapper');
+                if (galleryWrapper) {
+                    galleryWrapper.remove();
+                }
             }
             else {
                 var galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
-                var galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                var galleryPopupBtn = ele.parentElement.querySelector('#' + item.id + '_popupButton');
                 if (galleryPopupBtn) {
                     galleryPopupBtn.remove();
                 }
@@ -4558,6 +4568,17 @@ var Ribbon = /** @class */ (function (_super) {
                 else {
                     itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
                     itemEle = contentEle.querySelector('#' + itemId);
+                    if (!itemContainer) {
+                        itemContainer = dropdown ? dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID) : groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                    }
+                    if (!itemEle) {
+                        itemEle = dropdown ? dropdown.target.querySelector('#' + itemId) : contentEle.querySelector('#' + itemId);
+                    }
+                    if (itemProp.item.type === 'Gallery') {
+                        if (!itemEle) {
+                            itemEle = contentEle.querySelector('#' + itemId + '_galleryWrapper');
+                        }
+                    }
                     if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
                         itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
                     }
@@ -4586,12 +4607,6 @@ var Ribbon = /** @class */ (function (_super) {
             ribbonItem.setProperties(item, true);
             this.validateItemSize();
             if (contentEle.innerHTML !== '') {
-                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                    itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
-                }
-                else {
-                    itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
-                }
                 // To avoid undefined items condition is added
                 if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
                     itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
@@ -4615,6 +4630,9 @@ var Ribbon = /** @class */ (function (_super) {
                     }
                 }
                 this.createRibbonItem(ribbonItem, itemContainer);
+                if (itemProp.item.type === 'Gallery' && document.querySelector('#' + itemId + '_container').closest('.e-ribbon-overflow-target') && item.displayOptions !== DisplayMode.Overflow) {
+                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                }
                 if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
                     if (dropdown.target.childElementCount === 0 ||
                         (dropdown.target.childElementCount === 1 &&
@@ -4695,6 +4713,7 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
         var isUpdated = false;
+        var isOverflow = false;
         var itemProp = getItem(this.tabs, itemId);
         if (!itemProp) {
             return;
@@ -4704,6 +4723,15 @@ var Ribbon = /** @class */ (function (_super) {
         if (itemProp.item.type === 'GroupButton') {
             ele = getItemElement(this, itemId + constants.RIBBON_GROUP_BUTTON_ID, itemProp);
         }
+        else if (itemProp.item.type === 'Gallery') {
+            ele = document.querySelector('#' + itemId);
+            if (!ele) {
+                ele = document.querySelector('#' + itemId + '_galleryWrapper');
+            }
+            else {
+                isOverflow = true;
+            }
+        }
         else {
             ele = getItemElement(this, itemId, itemProp);
         }
@@ -4727,6 +4755,14 @@ var Ribbon = /** @class */ (function (_super) {
                             updateControlDisabled(btnEle, 'btn', isDisabled);
                         }
                     }
+                    else if (moduleName === 'gallery') {
+                        ele.classList.toggle(constants.DISABLED_CSS, isDisabled);
+                        document.getElementById(itemId + '_popupButton').classList.toggle(constants.DISABLED_CSS, isDisabled);
+                        if (isOverflow) {
+                            var galleryEle = document.getElementById(itemId + '_galleryWrapper');
+                            galleryEle.classList.toggle(constants.DISABLED_CSS, isDisabled);
+                        }
+                    }
                     else {
                         updateControlDisabled(ele, moduleName, isDisabled);
                     }
@@ -4978,6 +5014,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "ribbonCollapsing", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "ribbonLayoutSwitched", void 0);
     __decorate([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);

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

@@ -502,6 +502,9 @@ var RibbonGallery = /** @class */ (function () {
                 id: item.id
             });
             itemEle.appendChild(buttonEle);
+            if (itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.contains('e-disabled')) {
+                buttonEle.classList.add('e-disabled');
+            }
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
             itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach(function (ele) {
                 ele.classList.add('e-hidden');

package/styles/bootstrap-dark.css

@@ -555,6 +555,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/bootstrap.css

@@ -557,6 +557,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/bootstrap4.css

@@ -621,6 +621,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/bootstrap5-dark.css

@@ -648,6 +648,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/bootstrap5.css

@@ -648,6 +648,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/fabric-dark.css

@@ -530,6 +530,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/fabric.css

@@ -524,6 +524,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/fluent-dark.css

@@ -627,6 +627,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/fluent.css

@@ -627,6 +627,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/fluent2.css

@@ -1700,6 +1700,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: unset;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/highcontrast-light.css

@@ -537,6 +537,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/highcontrast.css

@@ -542,6 +542,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/material-dark.css

@@ -674,6 +674,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/material.css

@@ -700,6 +700,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/material3-dark.css

@@ -678,6 +678,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/material3.css

@@ -734,6 +734,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/_layout.scss

@@ -540,6 +540,7 @@
 
     .e-disabled {
       opacity: $ribbon-disabled-opacity;
+      pointer-events: none;
     }
 
     .e-input-group {

package/styles/ribbon/bootstrap-dark.css

@@ -555,6 +555,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/bootstrap.css

@@ -557,6 +557,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/bootstrap4.css

@@ -621,6 +621,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/bootstrap5-dark.css

@@ -648,6 +648,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/bootstrap5.css

@@ -648,6 +648,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/fabric-dark.css

@@ -530,6 +530,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/fabric.css

@@ -524,6 +524,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/fluent-dark.css

@@ -627,6 +627,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/fluent.css

@@ -627,6 +627,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/fluent2.css

@@ -1700,6 +1700,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: unset;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/highcontrast-light.css

@@ -537,6 +537,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/highcontrast.css

@@ -542,6 +542,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/material-dark.css

@@ -674,6 +674,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/material.css

@@ -700,6 +700,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/material3-dark.css

@@ -678,6 +678,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/material3.css

@@ -734,6 +734,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/tailwind-dark.css

@@ -655,6 +655,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/ribbon/tailwind.css

@@ -655,6 +655,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/tailwind-dark.css

@@ -655,6 +655,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {

package/styles/tailwind.css

@@ -655,6 +655,7 @@
 .e-ribbon.e-rbn .e-disabled,
 .e-ribbon-group-overflow-ddb .e-disabled {
   opacity: 0.35;
+  pointer-events: none;
 }
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {