@syncfusion/ej2-ribbon 23.1.36 → 23.1.41

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.36
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.1.41
+*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@21.22.0",
+  "_id": "@syncfusion/ej2-ribbon@23.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-Q0pcyouzFXSEoCBOwpf7hCIWm4z8gYsUYYLhh1xnwJump+inbNer0fUQKSn4cVXCivYuREWJIn17X8Ln4KY6lQ==",
+  "_integrity": "sha512-yLsbJy3HywWin8MhlGR3hdBZgKj/pWypSjlsO85FAwKXr9BDn2cqcL09sg9fjRJCeU74qKVUrUEmW0IV7FtIfA==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.22.0.tgz",
-  "_shasum": "02b50c97b7c2a8fc87f88021d6f10de7e632a8dc",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.38.tgz",
+  "_shasum": "73bb115f3ae57e0e74c88386b15a976aeade5c86",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.36",
-    "@syncfusion/ej2-buttons": "~23.1.36",
-    "@syncfusion/ej2-dropdowns": "~23.1.36",
+    "@syncfusion/ej2-base": "~23.1.41",
+    "@syncfusion/ej2-buttons": "~23.1.41",
+    "@syncfusion/ej2-dropdowns": "~23.1.41",
     "@syncfusion/ej2-lists": "~23.1.36",
-    "@syncfusion/ej2-navigations": "~23.1.36",
-    "@syncfusion/ej2-popups": "~23.1.36",
-    "@syncfusion/ej2-splitbuttons": "~23.1.36"
+    "@syncfusion/ej2-navigations": "~23.1.41",
+    "@syncfusion/ej2-popups": "~23.1.38",
+    "@syncfusion/ej2-splitbuttons": "~23.1.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.1.36",
+  "version": "23.1.41",
   "sideEffects": false
 }

package/src/ribbon/base/ribbon.js

@@ -549,7 +549,7 @@ var Ribbon = /** @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);
@@ -670,7 +670,7 @@ var Ribbon = /** @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);
@@ -684,10 +684,12 @@ var Ribbon = /** @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('.' + constants.RIBBON_ITEM))
+                : overflowBtnTarget.append(itemEle);
         }
         else {
             if (!this.overflowDDB) {
@@ -709,7 +711,7 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
-                    ofGroupContainer.append(itemEle);
+                    isResize ? ofGroupContainer.insertBefore(itemEle, ofGroupContainer.querySelector('.' + constants.RIBBON_ITEM)) : ofGroupContainer.append(itemEle);
                 }
                 else {
                     this.createOfTabContainer(groupId, groupHeader, itemEle, tabIndex);
@@ -1778,21 +1780,82 @@ var Ribbon = /** @class */ (function (_super) {
         remove(this.tabObj.element.querySelector('.' + constants.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 + constants.OVERFLOW_ID + constants.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);
+                    }
+                }
+            }
         }
+        var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
+        this.checkOverflow(this.selectedTab, activeContent);
     };
     Ribbon.prototype.switchLayout = function () {
         this.currentControlIndex = 0;
@@ -2596,8 +2659,8 @@ var Ribbon = /** @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 + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
                 for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
                     var collection = _b[_a];
@@ -3063,8 +3126,8 @@ var Ribbon = /** @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 + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
                     for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
                         var collection = _b[_a];
@@ -3603,7 +3666,7 @@ var Ribbon = /** @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);

package/styles/bootstrap4.css

@@ -130,13 +130,24 @@
 }
 
 .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
-  font-size: 8px;
+  font-size: 12px;
+}
+
+.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
 }
 
-.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+.e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
 }
 
+.e-small.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 12px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
   font-size: 14px;
   line-height: 34px;

package/styles/ribbon/bootstrap4.css

@@ -130,13 +130,24 @@
 }
 
 .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
-  font-size: 8px;
+  font-size: 12px;
+}
+
+.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
 }
 
-.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+.e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
 }
 
+.e-small.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 12px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
   font-size: 14px;
   line-height: 34px;