@syncfusion/ej2-ribbon 25.1.35 → 25.1.41

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

@@ -4288,7 +4288,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.hiddenElements = {};
         this.keyTipElements = {};
         this.hiddenGroups = [];
+        this.itemsModel = [];
+        this.targetTabs = {};
         this.isAddRemove = false;
+        this.isUpdateItems = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
             rightarrow: 'rightarrow',
@@ -4798,6 +4801,19 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
         this.calculateHiddenElementsWidth(selectedIndex);
+        if (this.isUpdateItems) {
+            for (let i = 0; i < this.itemsModel.length; i++) {
+                const item = this.itemsModel[parseInt(i.toString(), 10)];
+                if (this.selectedTab === this.targetTabs[item.id]) {
+                    this.updateItem(item);
+                    this.itemsModel.splice(i, 1);
+                    i--;
+                }
+            }
+            if (this.itemsModel.length === 0) {
+                this.isUpdateItems = false;
+            }
+        }
         this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
             this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
@@ -8545,96 +8561,111 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         //Check whether the tab items are rendered
         const contentEle = this.tabObj.items[itemProp.tabIndex].content;
         const groupEle = contentEle.querySelector('#' + itemProp.group.id);
-        const groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
-        let itemContainer = null;
-        let itemEle = null;
-        let dropdownElement;
-        let dropdown;
-        if (contentEle.innerHTML !== '') {
-            if (this.activeLayout === RibbonLayout.Simplified) {
-                dropdownElement = itemProp.group.enableGroupOverflow ?
-                    contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
-                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-            }
-            if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
-                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
-                itemEle = dropdown.target.querySelector('#' + itemId);
-                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
-                    const collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
-                    if (collectionEle) {
-                        collectionEle.appendChild(itemContainer);
+        if (groupEle) {
+            const groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+            let itemContainer = null;
+            let itemEle = null;
+            let dropdownElement;
+            let dropdown;
+            if (contentEle.innerHTML !== '') {
+                if (this.activeLayout === RibbonLayout.Simplified) {
+                    dropdownElement = itemProp.group.enableGroupOverflow ?
+                        contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
+                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+                }
+                if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+                    itemEle = dropdown.target.querySelector('#' + itemId);
+                    if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                        const collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                        if (collectionEle) {
+                            collectionEle.appendChild(itemContainer);
+                        }
                     }
                 }
-            }
-            else {
-                itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
-                itemEle = contentEle.querySelector('#' + itemId);
-                if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
-                    itemEle = contentEle.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID);
+                else {
+                    itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
+                    itemEle = contentEle.querySelector('#' + itemId);
+                    if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
+                        itemEle = contentEle.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID);
+                    }
+                    if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
+                        this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                        if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                            this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                        }
+                    }
                 }
-                if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
-                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
-                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
-                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                if (item.cssClass) {
+                    if (itemProp.item.cssClass) {
+                        itemContainer.classList.remove(itemProp.item.cssClass);
                     }
                 }
-            }
-            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
-            if (item.cssClass) {
-                if (itemProp.item.cssClass) {
-                    itemContainer.classList.remove(itemProp.item.cssClass);
+                this.destroyFunction(itemProp.item, itemEle);
+                itemEle.remove();
+                const removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+                if (removeCss) {
+                    removeClass([itemContainer], removeCss);
                 }
             }
-            this.destroyFunction(itemProp.item, itemEle);
-            itemEle.remove();
-            const removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
-            if (removeCss) {
-                removeClass([itemContainer], removeCss);
-            }
-        }
-        const ribbonItem = itemProp.item;
-        ribbonItem.setProperties(item, true);
-        this.validateItemSize();
-        if (contentEle.innerHTML !== '') {
-            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
-            }
-            else {
-                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
-            }
-            // To avoid undefined items condition is added
-            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
-                itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
-                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
-            }
-            let size = ribbonItem.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
-                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                ribbonItem.setProperties({ activeSize: size }, true);
-            }
-            if (size & RibbonItemSize.Large) {
-                itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
-            }
-            else {
-                itemContainer.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
-            }
-            this.createRibbonItem(ribbonItem, itemContainer);
-            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
-                if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
-                    this.removeOverflowButton(dropdown);
+            const ribbonItem = itemProp.item;
+            ribbonItem.setProperties(item, true);
+            this.validateItemSize();
+            if (contentEle.innerHTML !== '') {
+                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                    itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
                 }
+                else {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+                }
+                // To avoid undefined items condition is added
+                if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                    itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
+                    this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+                }
+                let size = ribbonItem.activeSize;
+                if (this.activeLayout === 'Simplified') {
+                    size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                        (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    ribbonItem.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    if (size & RibbonItemSize.Medium) {
+                        itemContainer.classList.add(RIBBON_MEDIUM_ITEM);
+                    }
+                    else {
+                        itemContainer.classList.add(RIBBON_SMALL_ITEM);
+                    }
+                }
+                this.createRibbonItem(ribbonItem, itemContainer);
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0 ||
+                        (dropdown.target.childElementCount === 1 &&
+                            this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                if (this.selectedTab === itemProp.tabIndex) {
+                    this.refreshLayout();
+                }
+                if (item.cssClass) {
+                    itemContainer.classList.add(ribbonItem.cssClass);
+                }
+                if (!(ribbonItem.disabled) && itemContainer.classList.contains(DISABLED_CSS)) {
+                    itemContainer.classList.remove(DISABLED_CSS);
+                }
+                this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
             }
-            if (this.selectedTab === itemProp.tabIndex) {
-                this.refreshLayout();
-            }
-            if (item.cssClass) {
-                itemContainer.classList.add(ribbonItem.cssClass);
-            }
-            if (!(ribbonItem.disabled) && itemContainer.classList.contains(DISABLED_CSS)) {
-                itemContainer.classList.remove(DISABLED_CSS);
-            }
-            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+        else {
+            this.isUpdateItems = true;
+            this.itemsModel.push(item);
+            this.targetTabs[item.id] = itemProp.tabIndex;
         }
     }
     removeItemElement(contentEle, item, dropdown) {
@@ -8768,6 +8799,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         this.hiddenGroups = [];
         this.hiddenElements = {};
         this.keyTipElements = {};
+        this.itemsModel = [];
+        this.targetTabs = {};
         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);