@syncfusion/ej2-ribbon 23.1.41 → 23.1.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.41
+*  version : 23.1.44
 *  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@23.1.38",
+  "_id": "@syncfusion/ej2-ribbon@23.1.43",
   "_inBundle": false,
-  "_integrity": "sha512-yLsbJy3HywWin8MhlGR3hdBZgKj/pWypSjlsO85FAwKXr9BDn2cqcL09sg9fjRJCeU74qKVUrUEmW0IV7FtIfA==",
+  "_integrity": "sha512-bF6XJhfqt4MDcbcZfZCPOoiOasDBmubxKWFQLvT1Ts9lQZEUwdL7xfQ6IuaMCJMQp7jOkZ1mPB8DH+JKRzNu+A==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.38.tgz",
-  "_shasum": "73bb115f3ae57e0e74c88386b15a976aeade5c86",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.43.tgz",
+  "_shasum": "19d571e0fc8aabc19f75d3e2fe1e644c2cadab2f",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -36,12 +36,12 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~23.1.41",
-    "@syncfusion/ej2-buttons": "~23.1.41",
-    "@syncfusion/ej2-dropdowns": "~23.1.41",
-    "@syncfusion/ej2-lists": "~23.1.36",
-    "@syncfusion/ej2-navigations": "~23.1.41",
-    "@syncfusion/ej2-popups": "~23.1.38",
-    "@syncfusion/ej2-splitbuttons": "~23.1.41"
+    "@syncfusion/ej2-buttons": "~23.1.43",
+    "@syncfusion/ej2-dropdowns": "~23.1.44",
+    "@syncfusion/ej2-lists": "~23.1.43",
+    "@syncfusion/ej2-navigations": "~23.1.44",
+    "@syncfusion/ej2-popups": "~23.1.44",
+    "@syncfusion/ej2-splitbuttons": "~23.1.43"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.1.41",
+  "version": "23.1.44",
   "sideEffects": false
 }

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

@@ -181,6 +181,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private currentControlIndex;
     private keyboardModuleRibbon;
     private keyConfigs;
+    private initialPropsData;
     /** @hidden */
     overflowDDB: DropDownButton;
     /** @hidden */
@@ -277,6 +278,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private createLauncherIcon;
     private launcherIconClicked;
     private createGroups;
+    private updateGroupProps;
     private validateItemSize;
     private createCollection;
     private createRibbonItem;
@@ -446,6 +448,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      */
     showItem(itemId: string): void;
     private showHideItem;
+    private updateInitialProps;
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *

package/src/ribbon/base/ribbon.js

@@ -58,6 +58,7 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.preRender = function () {
         this.idIndex = 0;
         this.tooltipData = [];
+        this.initialPropsData = {};
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -573,21 +574,23 @@ var Ribbon = /** @class */ (function (_super) {
         // The position is reversed if RTL is enabled.
         // isRight = ((isGroupOF && isMenu) && !this.enableRtl ) || (!(isGroupOF && isMenu) && this.enableRtl)  ==> (isGroupOF && isMenu) !== this.enableRtl
         var isLeft = (isGroupOF && isMenu) === this.enableRtl;
-        dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
-        if (isMenu) {
-            dropdown.beforeOpen = function () {
-                if (isLeft) {
-                    dropDownPopup.element.style.setProperty('visibility', 'hidden');
-                    dropDownPopup.element.style.setProperty('display', 'block');
-                    dropDownPopup.setProperties({ offsetX: -1 * dropDownPopup.element.offsetWidth });
-                    dropDownPopup.element.style.removeProperty('display');
-                    dropDownPopup.element.style.removeProperty('visibility');
-                }
-            };
-        }
-        else {
-            dropDownPopup.setProperties({ offsetX: 0 }, true);
-            dropdown.beforeOpen = null;
+        if (dropDownPopup) {
+            dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
+            if (isMenu) {
+                dropdown.beforeOpen = function () {
+                    if (isLeft) {
+                        dropDownPopup.element.style.setProperty('visibility', 'hidden');
+                        dropDownPopup.element.style.setProperty('display', 'block');
+                        dropDownPopup.setProperties({ offsetX: -1 * dropDownPopup.element.offsetWidth });
+                        dropDownPopup.element.style.removeProperty('display');
+                        dropDownPopup.element.style.removeProperty('visibility');
+                    }
+                };
+            }
+            else {
+                dropDownPopup.setProperties({ offsetX: 0 }, true);
+                dropdown.beforeOpen = null;
+            }
         }
     };
     Ribbon.prototype.removeSimplfiedOverflow = function (tabContent, activeContent, tabIndex, isClear) {
@@ -673,7 +676,7 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
-        var isDisabledGroup = contentEle.querySelector('#' + groupId);
+        var groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var overflowDDB = groupContainer.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -685,9 +688,12 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var overflowBtnTarget = overflowButton.target;
-            if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
+            if (groupEle && groupEle.classList.contains('e-disabled')) {
                 overflowBtnTarget.classList.add('e-disabled');
             }
+            if (groupEle && groupEle.classList.contains('e-hidden')) {
+                overflowBtnTarget.classList.add('e-hidden');
+            }
             isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + constants.RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
         }
@@ -706,7 +712,7 @@ var Ribbon = /** @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.CONTAINER_ID);
                     if (!ofGroupContainer) {
                         ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
-                        if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
+                        if (groupEle && groupEle.classList.contains('e-disabled')) {
                             ofGroupContainer.classList.add('e-disabled');
                         }
                         ofTabContainer.append(ofGroupContainer);
@@ -763,6 +769,15 @@ var Ribbon = /** @class */ (function (_super) {
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(constants.RIBBON_TAB_ACTIVE);
         }
+        var groupEle = document.querySelector('#' + groupId);
+        if (groupEle) {
+            if (groupEle.classList.contains('e-disabled')) {
+                ofGroupContainer.classList.add('e-disabled');
+            }
+            if (groupEle.classList.contains('e-hidden')) {
+                ofGroupContainer.classList.add('e-hidden');
+            }
+        }
     };
     Ribbon.prototype.checkGroupShrinking = function (tabIndex, tabContent, activeContent, isLarge) {
         var isOverFlow = true;
@@ -1359,30 +1374,32 @@ var Ribbon = /** @class */ (function (_super) {
         (isRemoveOverflow ? (itemContainer.classList.add(constants.RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT)));
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
-        var itemContainer = itemEle.closest('.' + constants.RIBBON_ITEM);
-        if (item.type === RibbonItemType.Button) {
-            this.ribbonButtonModule.updateButtonSize(itemEle, item);
-        }
-        else if (item.type === RibbonItemType.DropDown) {
-            this.ribbonDropDownModule.updateDropDownSize(itemEle, item);
-        }
-        else if (item.type === RibbonItemType.SplitButton) {
-            this.ribbonSplitButtonModule.updateSplitButtonSize(itemEle, item);
-        }
-        else if (item.type === RibbonItemType.Template) {
-            remove(itemEle);
-            this.createTemplateContent(item, itemContainer);
-        }
-        else if (item.type === RibbonItemType.GroupButton) {
-            this.ribbonGroupButtonModule.updateGroupButtonSize(itemEle, item);
-        }
-        itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT, constants.RIBBON_LARGE_ITEM, constants.RIBBON_MEDIUM_ITEM, constants.RIBBON_SMALL_ITEM);
-        if (item.activeSize === RibbonItemSize.Large) {
-            itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
-        }
-        else {
-            itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
-                constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+        if (itemEle) {
+            var itemContainer = itemEle.closest('.' + constants.RIBBON_ITEM);
+            if (item.type === RibbonItemType.Button) {
+                this.ribbonButtonModule.updateButtonSize(itemEle, item);
+            }
+            else if (item.type === RibbonItemType.DropDown) {
+                this.ribbonDropDownModule.updateDropDownSize(itemEle, item);
+            }
+            else if (item.type === RibbonItemType.SplitButton) {
+                this.ribbonSplitButtonModule.updateSplitButtonSize(itemEle, item);
+            }
+            else if (item.type === RibbonItemType.Template) {
+                remove(itemEle);
+                this.createTemplateContent(item, itemContainer);
+            }
+            else if (item.type === RibbonItemType.GroupButton) {
+                this.ribbonGroupButtonModule.updateGroupButtonSize(itemEle, item);
+            }
+            itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT, constants.RIBBON_LARGE_ITEM, constants.RIBBON_MEDIUM_ITEM, constants.RIBBON_SMALL_ITEM);
+            if (item.activeSize === RibbonItemSize.Large) {
+                itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
+                    constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+            }
         }
     };
     Ribbon.prototype.createOverflowDropdown = function (tabIndex, tabContent, activeContent) {
@@ -1714,28 +1731,30 @@ var Ribbon = /** @class */ (function (_super) {
         }
     };
     Ribbon.prototype.removeOverflowEvent = function (item, itemEle) {
-        switch (item.type) {
-            case 'Button':
-                this.ribbonButtonModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'DropDown':
-                this.ribbonDropDownModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'SplitButton':
-                this.ribbonSplitButtonModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'CheckBox':
-                this.ribbonCheckBoxModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'ColorPicker':
-                this.ribbonColorPickerModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'ComboBox':
-                this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
-                break;
-            case 'GroupButton':
-                this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
-                break;
+        if (itemEle) {
+            switch (item.type) {
+                case 'Button':
+                    this.ribbonButtonModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'DropDown':
+                    this.ribbonDropDownModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'SplitButton':
+                    this.ribbonSplitButtonModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'CheckBox':
+                    this.ribbonCheckBoxModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'ColorPicker':
+                    this.ribbonColorPickerModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'ComboBox':
+                    this.ribbonComboBoxModule.removeOverFlowEvents(item, itemEle);
+                    break;
+                case 'GroupButton':
+                    this.ribbonGroupButtonModule.removeOverFlowEvents(item, itemEle);
+                    break;
+            }
         }
     };
     Ribbon.prototype.createGroupContainer = function (groupId, groupHeader) {
@@ -1940,8 +1959,10 @@ var Ribbon = /** @class */ (function (_super) {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
                                     item.setProperties({ activeSize: size }, true);
-                                    var ele = itemEle.querySelector('#' + item.id);
-                                    this.setItemSize(ele, item);
+                                    if (itemEle) {
+                                        var ele = itemEle.querySelector('#' + item.id);
+                                        this.setItemSize(ele, item);
+                                    }
                                 }
                             }
                         }
@@ -2024,7 +2045,7 @@ var Ribbon = /** @class */ (function (_super) {
                                 }
                                 else {
                                     var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                    if (!itemEle) {
+                                    if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
                                         if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
@@ -2034,7 +2055,9 @@ var Ribbon = /** @class */ (function (_super) {
                                     if (item.type === RibbonItemType.GroupButton) {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
-                                    groupCollection.append(itemEle);
+                                    if (itemEle) {
+                                        groupCollection.append(itemEle);
+                                    }
                                 }
                                 var ele = groupContainer.querySelector('#' + item.id);
                                 if (item.type === RibbonItemType.GroupButton) {
@@ -2122,9 +2145,28 @@ var Ribbon = /** @class */ (function (_super) {
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+            if (initialProps) {
+                if (initialProps.hiddenGroups && initialProps.hiddenGroups.length) {
+                    this.updateGroupProps('hiddenGroups', initialProps, groupEle);
+                }
+                if (initialProps.disabledGroups && initialProps.disabledGroups.length) {
+                    this.updateGroupProps('disabledGroups', initialProps, groupEle);
+                }
+            }
+        }
+        if (this.initialPropsData[parseInt(tabIndex.toString(), 10)]) {
+            delete this.initialPropsData[parseInt(tabIndex.toString(), 10)];
         }
         return groupElements;
     };
+    Ribbon.prototype.updateGroupProps = function (key, initialProps, groupEle) {
+        // eslint-disable-next-line
+        var groupIndex = initialProps[key].indexOf(groupEle.id);
+        if (groupIndex !== -1) {
+            key === 'hiddenGroups' ? groupEle.classList.add('e-hidden') : groupEle.classList.add('e-disabled');
+        }
+    };
     Ribbon.prototype.validateItemSize = function () {
         for (var k = 0; k < this.tabs.length; k++) {
             var groupList = this.tabs[parseInt(k.toString(), 10)].groups;
@@ -2254,6 +2296,13 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
             }
+            var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+            if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
+                var itemIndex = initialProps.hiddenItems.indexOf(item.id);
+                if (itemIndex !== -1) {
+                    itemEle.classList.add('e-hidden');
+                }
+            }
             this.createRibbonItem(item, itemEle);
             if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
@@ -2821,7 +2870,12 @@ var Ribbon = /** @class */ (function (_super) {
         }
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + groupID);
-        isHidden ? groupEle.classList.add('e-hidden') : groupEle.classList.remove('e-hidden');
+        if (groupEle) {
+            isHidden ? groupEle.classList.add('e-hidden') : groupEle.classList.remove('e-hidden');
+        }
+        else {
+            this.updateInitialProps(itemProp.tabIndex, groupID, 'hiddenGroups', isHidden);
+        }
         if (this.overflowDDB) {
             var overflowEle = this.overflowDDB.target;
             var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
@@ -2871,7 +2925,12 @@ var Ribbon = /** @class */ (function (_super) {
         }
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + groupID);
-        isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+        if (groupEle) {
+            isDisabled ? groupEle.classList.add('e-disabled') : groupEle.classList.remove('e-disabled');
+        }
+        else {
+            this.updateInitialProps(itemProp.tabIndex, groupID, 'disabledGroups', isDisabled);
+        }
         if (this.overflowDDB) {
             var overflowEle = this.overflowDDB.target;
             var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
@@ -3099,6 +3158,36 @@ var Ribbon = /** @class */ (function (_super) {
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
             isHidden ? itemEle.classList.add('e-hidden') : itemEle.classList.remove('e-hidden');
+            this.refreshLayout();
+        }
+        else {
+            this.updateInitialProps(itemProp.tabIndex, itemId, 'hiddenItems', isHidden);
+        }
+    };
+    Ribbon.prototype.updateInitialProps = function (tabIndex, id, key, isInsert) {
+        var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+        if (!initialProps) {
+            this.initialPropsData[parseInt(tabIndex.toString(), 10)] = {};
+            initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+        }
+        if (initialProps) {
+            /* eslint-disable */
+            if (!initialProps[key])
+                initialProps[key] = [];
+            var itemIndex = initialProps[key].indexOf(id);
+            if (isInsert) {
+                if (itemIndex === -1)
+                    initialProps[key].push(id);
+            }
+            else {
+                if (itemIndex !== -1)
+                    initialProps[key].splice(itemIndex, 1);
+                initialProps[key].length === 0 && delete initialProps[key];
+                /* eslint-enable */
+                if (Object.keys(initialProps).length === 0) {
+                    delete this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+                }
+            }
         }
     };
     /**
@@ -3581,6 +3670,7 @@ var Ribbon = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
+        this.initialPropsData = {};
         remove(this.element.querySelector('#' + this.element.id + constants.TAB_ID));
         this.element.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH);

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

@@ -125,3 +125,14 @@ export declare function destroyTooltip(element: HTMLElement): void;
  * @hidden
  */
 export declare function updateTooltipProp(element: HTMLElement, prop: commonProperties): void;
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+export declare function setCustomAttributes(element: HTMLElement, attributes: {
+    [key: string]: string;
+}): void;

package/src/ribbon/base/utils.js

@@ -1,4 +1,4 @@
-import { compile, getComponent, select } from '@syncfusion/ej2-base';
+import { compile, getComponent, select, addClass } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import { DisplayMode, RibbonLayout } from './interface';
 import * as constants from './constant';
@@ -307,3 +307,29 @@ export function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);
     control.setProperties(prop);
 }
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+export function setCustomAttributes(element, attributes) {
+    for (var key in attributes) {
+        if (key === 'class') {
+            var elementClass = attributes['class'].replace(/\s+/g, ' ').trim();
+            if (elementClass) {
+                addClass([element], elementClass.split(' '));
+            }
+        }
+        else if (key === 'style') {
+            var prevStyles = element.getAttribute('style') || '';
+            var value = "" + prevStyles + attributes["" + key];
+            element.setAttribute("" + key, value);
+        }
+        else {
+            element.setAttribute(key, attributes["" + key]);
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import { getComponent, merge } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
-import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
 import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, SPACE } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -43,6 +43,9 @@ var RibbonButton = /** @class */ (function () {
             isToggle: btnSettings.isToggle,
             created: btnSettings.created
         }, buttonEle);
+        if (btnSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+        }
         buttonEle.onclick = function (e) {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(_this, e);

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

@@ -39,6 +39,7 @@ var RibbonCheckBox = /** @class */ (function () {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
+            htmlAttributes: checkBoxSettings.htmlAttributes,
             change: function (e) {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(_this, e);

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

@@ -1,6 +1,6 @@
 import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
-import { getItem, getItemElement } from '../base/index';
+import { getItem, getItemElement, setCustomAttributes } from '../base/index';
 import { RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -62,6 +62,9 @@ var RibbonColorPicker = /** @class */ (function () {
             },
             select: colorPickerSettings.select
         }, inputEle);
+        if (colorPickerSettings.htmlAttributes) {
+            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+        }
         var wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
         EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);

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

@@ -60,6 +60,7 @@ var RibbonComboBox = /** @class */ (function () {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
             close: function (e) {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(_this, e);

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

@@ -1,7 +1,7 @@
 import { closest, getComponent, isNullOrUndefined, merge, remove } from '@syncfusion/ej2-base';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Tooltip } from '@syncfusion/ej2-popups';
-import { getItem, getItemElement, RibbonItemSize, createTooltip } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, createTooltip, setCustomAttributes } from '../base/index';
 import { DROPDOWN_ID, ITEM_VERTICAL_CENTER, OVERFLOW_ID, RIBBON_CONTROL, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_POPUP_CONTROL, SPACE, VERTICAL_DDB } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -62,6 +62,9 @@ var RibbonDropDown = /** @class */ (function () {
             open: dropDownSettings.open,
             select: dropDownSettings.select
         }).appendTo(buttonEle);
+        if (dropDownSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.

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

@@ -3,7 +3,7 @@ import * as constants from '../base/constant';
 import { Button } from '@syncfusion/ej2-buttons';
 import { RibbonGroupButtonSelection, RibbonItemSize } from '../base/interface';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { createTooltip, isTooltipPresent } from '../base/utils';
+import { createTooltip, isTooltipPresent, setCustomAttributes } from '../base/utils';
 import { Tooltip } from '@syncfusion/ej2-popups';
 /**
  * Defines the items of Ribbon.
@@ -50,6 +50,9 @@ var RibbonGroupButton = /** @class */ (function () {
                     content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content,
                     iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left'
                 }, groupButtonEle);
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
+                    setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
+                }
                 var buttonEle = itemElement.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(constants.RIBBON_SINGLE_BUTTON_SELECTION);

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

@@ -1,6 +1,6 @@
 import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
 import { SplitButton } from '@syncfusion/ej2-splitbuttons';
-import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
 import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, VERTICAL_DDB } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -70,6 +70,9 @@ var RibbonSplitButton = /** @class */ (function () {
                 }
             }
         }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
         var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = function (e) {
             if (e.key === 'Enter') {

package/src/ribbon/models/ribbon-button-settings-model.d.ts

@@ -40,6 +40,13 @@ export interface RibbonButtonSettingsModel {
      */
     isPrimary?: boolean;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the button.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Event triggers once the button is created.
      *

package/src/ribbon/models/ribbon-button-settings.d.ts

@@ -33,6 +33,14 @@ export declare class RibbonButtonSettings extends ChildProperty<RibbonButtonSett
      * @default false
      */
     isPrimary: boolean;
+    /**
+     * Specifies additional HTML attributes to be applied to the button.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Event triggers once the button is created.
      *

package/src/ribbon/models/ribbon-button-settings.js

@@ -50,6 +50,9 @@ var RibbonButtonSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+    __decorate([
+        Property({})
+    ], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonButtonSettings.prototype, "created", void 0);