@syncfusion/ej2-ribbon 23.1.41 → 23.1.44

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

@@ -166,6 +166,9 @@ __decorate$5([
 __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);
@@ -205,6 +208,9 @@ __decorate$6([
 __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);
@@ -259,6 +265,9 @@ __decorate$7([
 __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);
@@ -361,6 +370,9 @@ __decorate$8([
 __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);
@@ -424,6 +436,9 @@ __decorate$9([
 __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);
@@ -484,6 +499,9 @@ __decorate$10([
 __decorate$10([
     Property('')
 ], RibbonSplitButtonSettings.prototype, "target", void 0);
+__decorate$10([
+    Property({})
+], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
 __decorate$10([
     Event()
 ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);
@@ -559,6 +577,9 @@ __decorate$13([
 __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);
@@ -1171,6 +1192,9 @@ class RibbonButton {
             isToggle: btnSettings.isToggle,
             created: btnSettings.created
         }, buttonEle);
+        if (btnSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+        }
         buttonEle.onclick = (e) => {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(this, e);
@@ -1318,6 +1342,7 @@ class RibbonCheckBox {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
+            htmlAttributes: checkBoxSettings.htmlAttributes,
             change: (e) => {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(this, e);
@@ -1467,6 +1492,9 @@ class RibbonColorPicker {
             },
             select: colorPickerSettings.select
         }, inputEle);
+        if (colorPickerSettings.htmlAttributes) {
+            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+        }
         const 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);
@@ -1658,6 +1686,7 @@ class RibbonComboBox {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
             close: (e) => {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(this, e);
@@ -1839,6 +1868,9 @@ class RibbonDropDown {
             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.
@@ -2276,6 +2308,9 @@ class RibbonSplitButton {
                 }
             }
         }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
         const dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = (e) => {
             if (e.key === 'Enter') {
@@ -2774,6 +2809,32 @@ function updateTooltipProp(element, prop) {
     const 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 (const key in attributes) {
+        if (key === 'class') {
+            const elementClass = attributes['class'].replace(/\s+/g, ' ').trim();
+            if (elementClass) {
+                addClass([element], elementClass.split(' '));
+            }
+        }
+        else if (key === 'style') {
+            const prevStyles = element.getAttribute('style') || '';
+            const value = `${prevStyles}${attributes[`${key}`]}`;
+            element.setAttribute(`${key}`, value);
+        }
+        else {
+            element.setAttribute(key, attributes[`${key}`]);
+        }
+    }
+}
 
 /**
  * Defines the items of Ribbon.
@@ -2819,6 +2880,9 @@ class RibbonGroupButton {
                     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);
+                }
                 const buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -3241,6 +3305,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     preRender() {
         this.idIndex = 0;
         this.tooltipData = [];
+        this.initialPropsData = {};
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -3755,21 +3820,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         // The position is reversed if RTL is enabled.
         // isRight = ((isGroupOF && isMenu) && !this.enableRtl ) || (!(isGroupOF && isMenu) && this.enableRtl)  ==> (isGroupOF && isMenu) !== this.enableRtl
         const isLeft = (isGroupOF && isMenu) === this.enableRtl;
-        dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
-        if (isMenu) {
-            dropdown.beforeOpen = () => {
-                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 = () => {
+                    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;
+            }
         }
     }
     removeSimplfiedOverflow(tabContent, activeContent, tabIndex, isClear = false) {
@@ -3854,7 +3921,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         let overflowButton;
         const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
-        const isDisabledGroup = contentEle.querySelector('#' + groupId);
+        const groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             const overflowDDB = groupContainer.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -3866,9 +3933,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             const 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);
         }
@@ -3887,7 +3957,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     let 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);
@@ -3944,6 +4014,15 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(RIBBON_TAB_ACTIVE);
         }
+        let 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');
+            }
+        }
     }
     checkGroupShrinking(tabIndex, tabContent, activeContent, isLarge) {
         let isOverFlow = true;
@@ -4532,30 +4611,32 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
     }
     setItemSize(itemEle, item) {
-        const 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) {
+            const 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);
+            }
         }
     }
     createOverflowDropdown(tabIndex, tabContent, activeContent) {
@@ -4870,28 +4951,30 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
     }
     removeOverflowEvent(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;
+            }
         }
     }
     createGroupContainer(groupId, groupHeader) {
@@ -5091,8 +5174,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
                                     item.setProperties({ activeSize: size }, true);
-                                    const ele = itemEle.querySelector('#' + item.id);
-                                    this.setItemSize(ele, item);
+                                    if (itemEle) {
+                                        const ele = itemEle.querySelector('#' + item.id);
+                                        this.setItemSize(ele, item);
+                                    }
                                 }
                             }
                         }
@@ -5175,7 +5260,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 }
                                 else {
                                     let 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);
@@ -5185,7 +5270,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                     if (item.type === RibbonItemType.GroupButton) {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
-                                    groupCollection.append(itemEle);
+                                    if (itemEle) {
+                                        groupCollection.append(itemEle);
+                                    }
                                 }
                                 let ele = groupContainer.querySelector('#' + item.id);
                                 if (item.type === RibbonItemType.GroupButton) {
@@ -5272,9 +5359,28 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            const 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;
     }
+    updateGroupProps(key, initialProps, groupEle) {
+        // eslint-disable-next-line
+        let groupIndex = initialProps[key].indexOf(groupEle.id);
+        if (groupIndex !== -1) {
+            key === 'hiddenGroups' ? groupEle.classList.add('e-hidden') : groupEle.classList.add('e-disabled');
+        }
+    }
     validateItemSize() {
         for (let k = 0; k < this.tabs.length; k++) {
             const groupList = this.tabs[parseInt(k.toString(), 10)].groups;
@@ -5403,6 +5509,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
             }
+            const initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+            if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
+                const 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);
@@ -5955,7 +6068,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         const contentEle = this.tabObj.items[itemProp.tabIndex].content;
         const 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) {
             const overflowEle = this.overflowDDB.target;
             const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
@@ -6005,7 +6123,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         const contentEle = this.tabObj.items[itemProp.tabIndex].content;
         const 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) {
             const overflowEle = this.overflowDDB.target;
             const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
@@ -6232,6 +6355,36 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (ele) {
             const 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);
+        }
+    }
+    updateInitialProps(tabIndex, id, key, isInsert) {
+        let 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] = [];
+            const 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)];
+                }
+            }
         }
     }
     /**
@@ -6708,6 +6861,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         super.destroy();
         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);
@@ -7739,5 +7893,5 @@ class RibbonBackstage extends Component {
 // 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.es2015.js.map