@syncfusion/ej2-ribbon 23.1.43 → 23.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.43
+*  version : 23.2.4
 *  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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@23.1.41",
+  "_id": "@syncfusion/ej2-ribbon@23.1.44",
   "_inBundle": false,
-  "_integrity": "sha512-KTXgq4hhzbsAEO2xsUfoF0ZsRBK0Jnx3x9qpn8AcczeIqd87Gp09SiXnSSf+PGxOoAixSmkA9aLQzoyLmFMkoA==",
+  "_integrity": "sha512-xT6KW19AWenecFnlvwMfgBJ0UPFa9L7EMy7QCj6X6AVb5+r01bwmcAZ+/2pgb8IEyfpRcfJvfy1jsWqk7pkgSQ==",
   "_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-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.41.tgz",
-  "_shasum": "f1ecd3e3fae61627bdb8f3b7cda411b45fac53ac",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.44.tgz",
+  "_shasum": "77c3d9e46f87b29534cde8f8d6417a66289bc5a7",
   "_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.41",
-    "@syncfusion/ej2-buttons": "~23.1.43",
-    "@syncfusion/ej2-dropdowns": "~23.1.43",
-    "@syncfusion/ej2-lists": "~23.1.43",
-    "@syncfusion/ej2-navigations": "~23.1.43",
-    "@syncfusion/ej2-popups": "~23.1.43",
-    "@syncfusion/ej2-splitbuttons": "~23.1.43"
+    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-buttons": "~23.2.4",
+    "@syncfusion/ej2-dropdowns": "~23.2.4",
+    "@syncfusion/ej2-lists": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.4",
+    "@syncfusion/ej2-popups": "~23.2.4",
+    "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
   "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.43",
+  "version": "23.2.4",
   "sideEffects": false
 }

package/src/ribbon/base/ribbon.d.ts

@@ -181,6 +181,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private currentControlIndex;
     private keyboardModuleRibbon;
     private keyConfigs;
+    private initialPropsData;
     /** @hidden */
     overflowDDB: DropDownButton;
     /** @hidden */
@@ -277,6 +278,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private createLauncherIcon;
     private launcherIconClicked;
     private createGroups;
+    private updateGroupProps;
     private validateItemSize;
     private createCollection;
     private createRibbonItem;
@@ -446,6 +448,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      */
     showItem(itemId: string): void;
     private showHideItem;
+    private updateInitialProps;
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *

package/src/ribbon/base/ribbon.js

@@ -58,6 +58,7 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.preRender = function () {
         this.idIndex = 0;
         this.tooltipData = [];
+        this.initialPropsData = {};
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -573,21 +574,23 @@ var Ribbon = /** @class */ (function (_super) {
         // The position is reversed if RTL is enabled.
         // isRight = ((isGroupOF && isMenu) && !this.enableRtl ) || (!(isGroupOF && isMenu) && this.enableRtl)  ==> (isGroupOF && isMenu) !== this.enableRtl
         var isLeft = (isGroupOF && isMenu) === this.enableRtl;
-        dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
-        if (isMenu) {
-            dropdown.beforeOpen = function () {
-                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 = function () {
+                    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;
+            }
         }
     };
     Ribbon.prototype.removeSimplfiedOverflow = function (tabContent, activeContent, tabIndex, isClear) {
@@ -673,7 +676,7 @@ var Ribbon = /** @class */ (function (_super) {
     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);
+        var groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
             var overflowDDB = groupContainer.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -685,9 +688,12 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var 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('.' + constants.RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
         }
@@ -706,7 +712,7 @@ var Ribbon = /** @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.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);
@@ -763,6 +769,15 @@ var Ribbon = /** @class */ (function (_super) {
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(constants.RIBBON_TAB_ACTIVE);
         }
+        var 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');
+            }
+        }
     };
     Ribbon.prototype.checkGroupShrinking = function (tabIndex, tabContent, activeContent, isLarge) {
         var isOverFlow = true;
@@ -1359,30 +1374,32 @@ var Ribbon = /** @class */ (function (_super) {
         (isRemoveOverflow ? (itemContainer.classList.add(constants.RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(constants.RIBBON_CONTENT_HEIGHT)));
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
-        var itemContainer = itemEle.closest('.' + constants.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(constants.RIBBON_CONTENT_HEIGHT, constants.RIBBON_LARGE_ITEM, constants.RIBBON_MEDIUM_ITEM, constants.RIBBON_SMALL_ITEM);
-        if (item.activeSize === RibbonItemSize.Large) {
-            itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
-        }
-        else {
-            itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
-                constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+        if (itemEle) {
+            var itemContainer = itemEle.closest('.' + constants.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(constants.RIBBON_CONTENT_HEIGHT, constants.RIBBON_LARGE_ITEM, constants.RIBBON_MEDIUM_ITEM, constants.RIBBON_SMALL_ITEM);
+            if (item.activeSize === RibbonItemSize.Large) {
+                itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
+                    constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+            }
         }
     };
     Ribbon.prototype.createOverflowDropdown = function (tabIndex, tabContent, activeContent) {
@@ -1714,28 +1731,30 @@ var Ribbon = /** @class */ (function (_super) {
         }
     };
     Ribbon.prototype.removeOverflowEvent = function (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;
+            }
         }
     };
     Ribbon.prototype.createGroupContainer = function (groupId, groupHeader) {
@@ -1940,8 +1959,10 @@ var Ribbon = /** @class */ (function (_super) {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
                                     item.setProperties({ activeSize: size }, true);
-                                    var ele = itemEle.querySelector('#' + item.id);
-                                    this.setItemSize(ele, item);
+                                    if (itemEle) {
+                                        var ele = itemEle.querySelector('#' + item.id);
+                                        this.setItemSize(ele, item);
+                                    }
                                 }
                             }
                         }
@@ -2024,7 +2045,7 @@ var Ribbon = /** @class */ (function (_super) {
                                 }
                                 else {
                                     var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                    if (!itemEle) {
+                                    if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
                                         if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
@@ -2034,7 +2055,9 @@ var Ribbon = /** @class */ (function (_super) {
                                     if (item.type === RibbonItemType.GroupButton) {
                                         this.ribbonGroupButtonModule.switchGroupButton(item, itemEle);
                                     }
-                                    groupCollection.append(itemEle);
+                                    if (itemEle) {
+                                        groupCollection.append(itemEle);
+                                    }
                                 }
                                 var ele = groupContainer.querySelector('#' + item.id);
                                 if (item.type === RibbonItemType.GroupButton) {
@@ -2122,9 +2145,28 @@ var Ribbon = /** @class */ (function (_super) {
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            var 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;
     };
+    Ribbon.prototype.updateGroupProps = function (key, initialProps, groupEle) {
+        // eslint-disable-next-line
+        var groupIndex = initialProps[key].indexOf(groupEle.id);
+        if (groupIndex !== -1) {
+            key === 'hiddenGroups' ? groupEle.classList.add('e-hidden') : groupEle.classList.add('e-disabled');
+        }
+    };
     Ribbon.prototype.validateItemSize = function () {
         for (var k = 0; k < this.tabs.length; k++) {
             var groupList = this.tabs[parseInt(k.toString(), 10)].groups;
@@ -2254,6 +2296,13 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
             }
+            var initialProps = this.initialPropsData[parseInt(tabIndex.toString(), 10)];
+            if (initialProps && initialProps.hiddenItems && initialProps.hiddenItems.length) {
+                var 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);
@@ -2821,7 +2870,12 @@ var Ribbon = /** @class */ (function (_super) {
         }
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var 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) {
             var overflowEle = this.overflowDDB.target;
             var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
@@ -2871,7 +2925,12 @@ var Ribbon = /** @class */ (function (_super) {
         }
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var 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) {
             var overflowEle = this.overflowDDB.target;
             var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
@@ -3099,6 +3158,36 @@ var Ribbon = /** @class */ (function (_super) {
         if (ele) {
             var 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);
+        }
+    };
+    Ribbon.prototype.updateInitialProps = function (tabIndex, id, key, isInsert) {
+        var 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] = [];
+            var 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)];
+                }
+            }
         }
     };
     /**
@@ -3581,6 +3670,7 @@ var Ribbon = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
+        this.initialPropsData = {};
         remove(this.element.querySelector('#' + this.element.id + constants.TAB_ID));
         this.element.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH);