@syncfusion/ej2-ribbon 23.1.41 → 23.1.44

package/dist/es6/ej2-ribbon.es5.js

@@ -182,6 +182,9 @@ var RibbonButtonSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$5([
         Property(false)
     ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+    __decorate$5([
+        Property({})
+    ], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate$5([
         Event()
     ], RibbonButtonSettings.prototype, "created", void 0);
@@ -239,6 +242,9 @@ var RibbonCheckBoxSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$6([
         Property('After')
     ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
+    __decorate$6([
+        Property({})
+    ], RibbonCheckBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate$6([
         Event()
     ], RibbonCheckBoxSettings.prototype, "created", void 0);
@@ -311,6 +317,9 @@ var RibbonColorPickerSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$7([
         Property('#008000ff')
     ], RibbonColorPickerSettings.prototype, "value", void 0);
+    __decorate$7([
+        Property({})
+    ], RibbonColorPickerSettings.prototype, "htmlAttributes", void 0);
     __decorate$7([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);
@@ -431,6 +440,9 @@ var RibbonComboBoxSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Property('150px')
     ], RibbonComboBoxSettings.prototype, "width", void 0);
+    __decorate$8([
+        Property({})
+    ], RibbonComboBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate$8([
         Event()
     ], RibbonComboBoxSettings.prototype, "beforeOpen", void 0);
@@ -512,6 +524,9 @@ var RibbonDropDownSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$9([
         Property(false)
     ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
+    __decorate$9([
+        Property({})
+    ], RibbonDropDownSettings.prototype, "htmlAttributes", void 0);
     __decorate$9([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);
@@ -590,6 +605,9 @@ var RibbonSplitButtonSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$10([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "target", void 0);
+    __decorate$10([
+        Property({})
+    ], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate$10([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);
@@ -701,6 +719,9 @@ var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$13([
         Property(false)
     ], RibbonGroupButtonItem.prototype, "selected", void 0);
+    __decorate$13([
+        Property({})
+    ], RibbonGroupButtonItem.prototype, "htmlAttributes", void 0);
     __decorate$13([
         Event()
     ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
@@ -1478,6 +1499,9 @@ var RibbonButton = /** @__PURE__ @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);
@@ -1629,6 +1653,7 @@ var RibbonCheckBox = /** @__PURE__ @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);
@@ -1782,6 +1807,9 @@ var RibbonColorPicker = /** @__PURE__ @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);
@@ -1977,6 +2005,7 @@ var RibbonComboBox = /** @__PURE__ @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);
@@ -2162,6 +2191,9 @@ var RibbonDropDown = /** @__PURE__ @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.
@@ -2604,6 +2636,9 @@ var RibbonSplitButton = /** @__PURE__ @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') {
@@ -3105,6 +3140,32 @@ 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
+ */
+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]);
+        }
+    }
+}
 
 /**
  * Defines the items of Ribbon.
@@ -3151,6 +3212,9 @@ var RibbonGroupButton = /** @__PURE__ @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 + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -3592,6 +3656,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.preRender = function () {
         this.idIndex = 0;
         this.tooltipData = [];
+        this.initialPropsData = {};
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -4107,21 +4172,23 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4207,7 +4274,7 @@ var Ribbon = /** @__PURE__ @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 + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -4219,9 +4286,12 @@ var Ribbon = /** @__PURE__ @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('.' + RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
         }
@@ -4240,7 +4310,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + 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);
@@ -4297,6 +4367,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(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;
@@ -4893,30 +4972,32 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
-        var itemContainer = itemEle.closest('.' + 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(RIBBON_CONTENT_HEIGHT, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM);
-        if (item.activeSize === RibbonItemSize.Large) {
-            itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
-        }
-        else {
-            itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
-                RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+        if (itemEle) {
+            var itemContainer = itemEle.closest('.' + 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(RIBBON_CONTENT_HEIGHT, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM);
+            if (item.activeSize === RibbonItemSize.Large) {
+                itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
+                    RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+            }
         }
     };
     Ribbon.prototype.createOverflowDropdown = function (tabIndex, tabContent, activeContent) {
@@ -5248,28 +5329,30 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5474,8 +5557,10 @@ var Ribbon = /** @__PURE__ @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);
+                                    }
                                 }
                             }
                         }
@@ -5558,7 +5643,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 }
                                 else {
                                     var itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
-                                    if (!itemEle) {
+                                    if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
                                         if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
@@ -5568,7 +5653,9 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5656,9 +5743,28 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + 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;
@@ -5788,6 +5894,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : 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);
@@ -6355,7 +6468,12 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID);
@@ -6405,7 +6523,12 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID);
@@ -6633,6 +6756,36 @@ var Ribbon = /** @__PURE__ @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)];
+                }
+            }
         }
     };
     /**
@@ -7115,6 +7268,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
+        this.initialPropsData = {};
         remove(this.element.querySelector('#' + this.element.id + TAB_ID));
         this.element.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(RIBBON_HELP_PANE_TEMPLATE_WIDTH);
@@ -8175,5 +8329,5 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, setCustomAttributes, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
 //# sourceMappingURL=ej2-ribbon.es5.js.map