@syncfusion/ej2-ribbon 23.1.43 → 23.2.4

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

@@ -3656,6 +3656,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.preRender = function () {
         this.idIndex = 0;
         this.tooltipData = [];
+        this.initialPropsData = {};
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -4171,21 +4172,23 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4271,7 +4274,7 @@ var Ribbon = /** @__PURE__ @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 + GROUPOF_BUTTON_ID);
             if (!overflowDDB) {
@@ -4283,9 +4286,12 @@ var Ribbon = /** @__PURE__ @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('.' + RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
         }
@@ -4304,7 +4310,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + 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);
@@ -4361,6 +4367,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (tabIndex === this.selectedTab) {
             ofTabContainer.classList.add(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;
@@ -4957,30 +4972,32 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         (isRemoveOverflow ? (itemContainer.classList.add(RIBBON_CONTENT_HEIGHT)) : (itemContainer.classList.remove(RIBBON_CONTENT_HEIGHT)));
     };
     Ribbon.prototype.setItemSize = function (itemEle, item) {
-        var itemContainer = itemEle.closest('.' + 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(RIBBON_CONTENT_HEIGHT, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM);
-        if (item.activeSize === RibbonItemSize.Large) {
-            itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
-        }
-        else {
-            itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
-                RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+        if (itemEle) {
+            var itemContainer = itemEle.closest('.' + 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(RIBBON_CONTENT_HEIGHT, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM);
+            if (item.activeSize === RibbonItemSize.Large) {
+                itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((item.activeSize === RibbonItemSize.Medium) ?
+                    RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+            }
         }
     };
     Ribbon.prototype.createOverflowDropdown = function (tabIndex, tabContent, activeContent) {
@@ -5312,28 +5329,30 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5538,8 +5557,10 @@ var Ribbon = /** @__PURE__ @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);
+                                    }
                                 }
                             }
                         }
@@ -5622,7 +5643,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 }
                                 else {
                                     var itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
-                                    if (!itemEle) {
+                                    if (!itemEle && overflowtarget) {
                                         itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
                                         if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                                             this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
@@ -5632,7 +5653,9 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5720,9 +5743,28 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + 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;
@@ -5852,6 +5894,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : 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);
@@ -6419,7 +6468,12 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID);
@@ -6469,7 +6523,12 @@ var Ribbon = /** @__PURE__ @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 + OVERFLOW_ID);
@@ -6697,6 +6756,36 @@ var Ribbon = /** @__PURE__ @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)];
+                }
+            }
         }
     };
     /**
@@ -7179,6 +7268,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
+        this.initialPropsData = {};
         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);