@syncfusion/ej2-ribbon 23.1.36 → 23.1.41

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

@@ -3731,7 +3731,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     if (((item.displayOptions === DisplayMode.Auto) ||
                         (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         itemContainer.setAttribute('data-simplified-width', activeContent.offsetWidth.toString());
-                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer);
+                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer, true);
                         if (item.activeSize === RibbonItemSize.Small) {
                             const itemEle = itemContainer.querySelector('#' + item.id);
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
@@ -3851,7 +3851,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
     }
-    createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer) {
+    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);
@@ -3865,10 +3865,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
+            const overflowBtnTarget = overflowButton.target;
             if (isDisabledGroup && isDisabledGroup.classList.contains('e-disabled')) {
-                overflowButton.target.classList.add('e-disabled');
+                overflowBtnTarget.classList.add('e-disabled');
             }
-            overflowButton.target.append(itemEle);
+            isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + RIBBON_ITEM))
+                : overflowBtnTarget.append(itemEle);
         }
         else {
             if (!this.overflowDDB) {
@@ -3890,7 +3892,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
-                    ofGroupContainer.append(itemEle);
+                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -4932,21 +4934,79 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         remove(this.tabObj.element.querySelector('.' + RIBBON_COLLAPSE_BUTTON));
         this.collapseButton = null;
     }
-    reRenderTabs() {
+    reRenderTabs(tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        this.destroyTabItems(this.tabsInternal);
-        this.tabsInternal = this.tabs.slice();
-        this.validateItemSize();
-        const tabItems = this.createTabItems(this.tabs);
-        if (this.selectedTab >= this.tabs.length) {
-            this.selectedTab = this.tabs.length - 1;
-        }
-        this.tabObj.setProperties({ items: tabItems, selectedItem: this.selectedTab });
-        const contentEle = this.tabObj.items[this.selectedTab].content;
-        if (contentEle.innerHTML === '') {
-            this.renderInitialTab(this.selectedTab);
+        for (const key in tabs) {
+            const index = parseInt(key, 10);
+            const tab = tabs[parseInt(index.toString(), 10)];
+            let isNewTab = false;
+            for (var j = 0; j < (this.tabObj.items.length); j++) {
+                if (this.tabs[parseInt(index.toString(), 10)].id === this.tabObj.items[parseInt(j.toString(), 10)].id) {
+                    isNewTab = true;
+                    break;
+                }
+            }
+            if (!isNewTab) {
+                this.destroyTabItems(this.tabsInternal);
+                this.tabsInternal = this.tabs.slice();
+                this.validateItemSize();
+                const tabItems = this.createTabItems(this.tabs);
+                if (this.selectedTab >= this.tabs.length) {
+                    this.selectedTab = this.tabs.length - 1;
+                }
+                this.tabObj.setProperties({ items: tabItems, selectedItem: this.selectedTab });
+                break;
+            }
+            else {
+                const groups = this.tabs[parseInt(index.toString(), 10)].groups;
+                const tabEle = this.tabObj.element;
+                const ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+                ribbonTab.setProperties(tab, true);
+                this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+                this.validateItemSize();
+                const contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
+                if (groups) {
+                    // Check whether header is passed by the user and sets the updated values.
+                    if (tab.header) {
+                        this.tabObj.items[parseInt(index.toString(), 10)].header.text.innerText = ribbonTab.header;
+                    }
+                    // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                    if (tab.cssClass) {
+                        if (this.tabObj.items[parseInt(index.toString(), 10)].cssClass) {
+                            contentEle.classList.remove(this.tabObj.items[parseInt(index.toString(), 10)].cssClass);
+                            tabEle.querySelector('.e-active').classList.remove(this.tabObj.items[parseInt(index.toString(), 10)].cssClass);
+                        }
+                        contentEle.classList.add(ribbonTab.cssClass);
+                        tabEle.querySelector('.e-active').classList.add(ribbonTab.cssClass);
+                    }
+                    // Check whether group is passed by the user, and if it is, then remove the old values.
+                    if (tab.groups) {
+                        for (const group of groups) {
+                            const dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
+                            for (const collection of group.collections) {
+                                for (const item of collection.items) {
+                                    const ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                                    if (ele) {
+                                        this.destroyFunction(item, ele);
+                                    }
+                                }
+                            }
+                            if (dropdownElement) {
+                                this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                            }
+                        }
+                        const groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                        // eslint-disable-next-line @typescript-eslint/tslint/config
+                        groupElements.forEach(groupEle => { groupEle.remove(); });
+                        const elements = this.createGroups(ribbonTab.groups, index);
+                        append(elements, contentEle);
+                    }
+                }
+            }
         }
+        const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        this.checkOverflow(this.selectedTab, activeContent);
     }
     switchLayout() {
         this.currentControlIndex = 0;
@@ -6730,7 +6790,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     this.tabObj.setProperties({ animation: newProp.tabAnimation });
                     break;
                 case 'tabs':
-                    this.reRenderTabs();
+                    this.reRenderTabs(newProp.tabs);
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);