@syncfusion/ej2-ribbon 23.1.36 → 23.1.38

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

@@ -4083,7 +4083,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     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) {
                             var itemEle = itemContainer.querySelector('#' + item.id);
                             item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
@@ -4204,7 +4204,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer) {
+    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);
@@ -4218,10 +4218,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
+            var 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) {
@@ -4243,7 +4245,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
-                    ofGroupContainer.append(itemEle);
+                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -5312,20 +5314,79 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         remove(this.tabObj.element.querySelector('.' + RIBBON_COLLAPSE_BUTTON));
         this.collapseButton = null;
     };
-    Ribbon.prototype.reRenderTabs = function () {
+    Ribbon.prototype.reRenderTabs = function (tabs) {
         this.destroyScroll();
         this.checkID(this.tabs, 'tab', this.element.id);
-        this.destroyTabItems(this.tabsInternal);
-        this.tabsInternal = this.tabs.slice();
-        this.validateItemSize();
-        var 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 });
-        var contentEle = this.tabObj.items[this.selectedTab].content;
-        if (contentEle.innerHTML === '') {
-            this.renderInitialTab(this.selectedTab);
+        for (var key in tabs) {
+            var index = parseInt(key, 10);
+            var tab = tabs[parseInt(index.toString(), 10)];
+            var 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();
+                var 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 {
+                var groups = this.tabs[parseInt(index.toString(), 10)].groups;
+                var tabEle = this.tabObj.element;
+                var ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+                ribbonTab.setProperties(tab, true);
+                this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+                this.validateItemSize();
+                var 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 (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+                            var group = groups_1[_i];
+                            var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
+                            for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
+                                var collection = _b[_a];
+                                for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
+                                    var item = _d[_c];
+                                    var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                                    if (ele) {
+                                        this.destroyFunction(item, ele);
+                                    }
+                                }
+                            }
+                            if (dropdownElement) {
+                                this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                            }
+                        }
+                        var groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                        // eslint-disable-next-line @typescript-eslint/tslint/config
+                        groupElements.forEach(function (groupEle) { groupEle.remove(); });
+                        var elements = this.createGroups(ribbonTab.groups, index);
+                        append(elements, contentEle);
+                    }
+                }
+            }
         }
     };
     Ribbon.prototype.switchLayout = function () {
@@ -6130,8 +6191,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
         var groups = this.tabs[parseInt(index.toString(), 10)].groups;
         if (groups && (contentEle.innerHTML !== '')) {
-            for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-                var group = groups_1[_i];
+            for (var _i = 0, groups_2 = groups; _i < groups_2.length; _i++) {
+                var group = groups_2[_i];
                 var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
                 for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
                     var collection = _b[_a];
@@ -6597,8 +6658,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             // Check whether group is passed by the user, and if it is, then remove the old values.
             if (tab.groups) {
-                for (var _i = 0, groups_2 = groups; _i < groups_2.length; _i++) {
-                    var group = groups_2[_i];
+                for (var _i = 0, groups_3 = groups; _i < groups_3.length; _i++) {
+                    var group = groups_3[_i];
                     var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
                     for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
                         var collection = _b[_a];
@@ -7137,7 +7198,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     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);