@syncfusion/ej2-ribbon 23.2.4 → 23.2.7

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

@@ -4026,6 +4026,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if (activeTab) {
                 activeTab.classList.add(RIBBON_TAB_ACTIVE);
                 this.overflowDDB.element.classList.remove(HIDE_CSS);
+                this.checkOverflowHiddenItems(false, selectedIndex);
             }
             else {
                 this.overflowDDB.element.classList.add(HIDE_CSS);
@@ -4135,6 +4136,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.createSimplfiedOverflow = function (tabContent, activeContent, tabIndex) {
         var orderedGroups = this.getGroupResizeOrder(true, tabIndex);
+        var isEmptyCollection;
         for (var i = 0; ((i < orderedGroups.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); i++) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
@@ -4163,7 +4165,25 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            var itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+            if (itemsLength && !group.enableGroupOverflow) {
+                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                if (isEmptyCollection) {
+                    groupEle.classList.add('e-ribbon-emptyCollection');
+                }
+            }
+            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
+        }
+    };
+    Ribbon.prototype.checkEmptyCollection = function (itemsLength) {
+        var isEmptyCollection = true;
+        for (var i = 0; i < itemsLength.length; i++) {
+            if (!(itemsLength[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
+                isEmptyCollection = false;
+                break;
+            }
         }
+        return isEmptyCollection;
     };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
         var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
@@ -4195,6 +4215,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (isClear === void 0) { isClear = false; }
         var orderedGroups = this.getGroupResizeOrder(false, tabIndex);
         var flag = true;
+        var isEmptyCollection;
         for (var i = 0; ((i < orderedGroups.length) && flag); i++) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var overflowDDB = void 0;
@@ -4242,7 +4263,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             var groupEle = tabContent.querySelector('#' + group.id);
             var itemEle = groupEle.querySelector('.' + RIBBON_ITEM);
             if (groupEle.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                groupEle.classList.remove('e-ribbon-emptyCollection');
+                var itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+                if (itemsLength) {
+                    isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                    if (!isEmptyCollection) {
+                        groupEle.classList.remove('e-ribbon-emptyCollection');
+                    }
+                }
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
@@ -4262,6 +4289,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
+            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
         }
         if (this.overflowDDB) {
             var overflowEle = this.overflowDDB.target;
@@ -4271,6 +4299,50 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Ribbon.prototype.checkOverflowHiddenItems = function (isGroupOF, tabIndex, groupId) {
+        if (isGroupOF) {
+            var overflowDDB = document.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
+            if (overflowDDB) {
+                var overflowButton = getInstance(overflowDDB, DropDownButton);
+                var overflowBtnTarget = overflowButton.target;
+                var itemEle = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                var isHidden = true;
+                for (var i = 0; i < itemEle.length; i++) {
+                    if (!(itemEle[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
+                        isHidden = false;
+                        break;
+                    }
+                }
+                overflowButton.element.classList[isHidden ? 'add' : 'remove']('e-hidden');
+            }
+        }
+        else {
+            if (this.overflowDDB) {
+                var isGroupHidden = true;
+                var isItemHidden = void 0;
+                var overflowEle = this.overflowDDB.target;
+                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                if (ofTabContainer) {
+                    for (var k = 0; k < ofTabContainer.children.length; k++) {
+                        isItemHidden = true;
+                        var overflowTab = ofTabContainer.children[parseInt(k.toString(), 10)];
+                        var groupTabContainer = overflowTab.querySelectorAll('.e-ribbon-item');
+                        for (var n = 0; n < groupTabContainer.length; n++) {
+                            if (!(groupTabContainer[parseInt(n.toString(), 10)].classList.contains('e-hidden'))) {
+                                isItemHidden = false;
+                                break;
+                            }
+                        }
+                        overflowTab.classList[isItemHidden ? 'add' : 'remove']('e-hide-group');
+                        if (!(overflowTab.classList.contains('e-hide-group')) && !(overflowTab.classList.contains('e-hidden'))) {
+                            isGroupHidden = false;
+                        }
+                    }
+                    this.overflowDDB.element.classList[isGroupHidden ? 'add' : 'remove'](HIDE_CSS);
+                }
+            }
+        }
+    };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
@@ -4286,11 +4358,16 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var overflowBtnTarget = overflowButton.target;
-            if (groupEle && groupEle.classList.contains('e-disabled')) {
-                overflowBtnTarget.classList.add('e-disabled');
-            }
-            if (groupEle && groupEle.classList.contains('e-hidden')) {
-                overflowBtnTarget.classList.add('e-hidden');
+            if (groupEle) {
+                if (groupEle.classList.contains('e-disabled')) {
+                    overflowBtnTarget.classList.add('e-disabled');
+                }
+                if (groupEle.classList.contains('e-hidden')) {
+                    overflowBtnTarget.classList.add('e-hidden');
+                }
+                if (groupEle.classList.contains('e-hide-group')) {
+                    overflowBtnTarget.classList.add('e-hide-group');
+                }
             }
             isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
@@ -4310,8 +4387,16 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + CONTAINER_ID);
                     if (!ofGroupContainer) {
                         ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
-                        if (groupEle && groupEle.classList.contains('e-disabled')) {
-                            ofGroupContainer.classList.add('e-disabled');
+                        if (groupEle) {
+                            if (groupEle.classList.contains('e-disabled')) {
+                                ofGroupContainer.classList.add('e-disabled');
+                            }
+                            if (groupEle.classList.contains('e-hidden')) {
+                                ofGroupContainer.classList.add('e-hidden');
+                            }
+                            if (groupEle.classList.contains('e-hide-group')) {
+                                ofGroupContainer.classList.add('e-hide-group');
+                            }
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
@@ -4375,6 +4460,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             if (groupEle.classList.contains('e-hidden')) {
                 ofGroupContainer.classList.add('e-hidden');
             }
+            if (groupEle.classList.contains('e-hide-group')) {
+                ofGroupContainer.classList.add('e-hide-group');
+            }
         }
     };
     Ribbon.prototype.checkGroupShrinking = function (tabIndex, tabContent, activeContent, isLarge) {
@@ -5205,11 +5293,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             locale: this.locale,
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
+            beforeOpen: function (args) {
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupOpen', eventArgs, function (ribbonArgs) {
+                    if (ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
+            },
             beforeClose: function (args) {
                 var ele = args.event ? closest(args.event.target, '.' + RIBBON_POPUP_CONTROL) : null;
-                if (ele) {
-                    args.cancel = true;
-                }
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupClose', eventArgs, function (ribbonArgs) {
+                    if (ele || ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
             }
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
@@ -5740,6 +5839,20 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
+            var isItemsHidden = true;
+            for (var j = 0; j < elements.length; j++) {
+                if (isItemsHidden) {
+                    for (var k = 0; k < elements[parseInt(j.toString(), 10)].children.length; k++) {
+                        if (!(elements[parseInt(j.toString(), 10)].children[parseInt(k.toString(), 10)].classList.contains('e-hidden'))) {
+                            isItemsHidden = false;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (isItemsHidden) {
+                groupEle.classList.add('e-hide-group');
+            }
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
@@ -6756,6 +6869,7 @@ 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.checkHiddenItems(itemProp.group, isHidden, itemProp.tabIndex);
             this.refreshLayout();
         }
         else {
@@ -6788,6 +6902,76 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Ribbon.prototype.checkHiddenItems = function (group, isHidden, tabIndex) {
+        var isItemsHidden = true;
+        var isEmptyCollection;
+        var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        var groupEle = contentEle.querySelector('#' + group.id);
+        if (isHidden) {
+            for (var i = 0; i < group.collections.length; i++) {
+                if (isItemsHidden) {
+                    var collection = group.collections[parseInt(i.toString(), 10)];
+                    for (var j = 0; j < collection.items.length; j++) {
+                        var item = collection.items[parseInt(j.toString(), 10)];
+                        var itemEle = void 0;
+                        if (item.type === 'GroupButton') {
+                            var itemProp = getItem(this.tabs, item.id);
+                            itemEle = getItemElement(this, item.id + RIBBON_GROUP_BUTTON_ID, itemProp);
+                        }
+                        else {
+                            itemEle = getItemElement(this, item.id);
+                        }
+                        var itemContainer = itemEle ? itemEle.closest('.e-ribbon-item') : null;
+                        if (!(itemContainer.classList.contains('e-hidden'))) {
+                            isItemsHidden = false;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (isItemsHidden) {
+                groupEle.classList.add('e-hide-group');
+                this.checkOverflowItems(isHidden, contentEle, group.enableGroupOverflow, tabIndex, group.id);
+            }
+        }
+        else {
+            groupEle.classList.remove('e-hide-group');
+            this.checkOverflowItems(isHidden, contentEle, group.enableGroupOverflow, tabIndex, group.id);
+        }
+        if (this.activeLayout === 'Simplified' && !group.enableGroupOverflow) {
+            var itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+            if (itemsLength) {
+                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                groupEle.classList[isEmptyCollection ? 'add' : 'remove']('e-ribbon-emptyCollection');
+            }
+        }
+    };
+    Ribbon.prototype.checkOverflowItems = function (isHidden, contentEle, isGroupOF, tabIndex, groupID) {
+        var overflowDDB;
+        var overflowtarget;
+        if (isGroupOF) {
+            var overflowDDBEle = contentEle.querySelector('#' + groupID + GROUPOF_BUTTON_ID);
+            if (overflowDDBEle) {
+                overflowDDB = getInstance(overflowDDBEle, DropDownButton);
+                overflowtarget = overflowDDB.target;
+            }
+            if (overflowtarget) {
+                isHidden ? overflowtarget.classList.add('e-hide-group') : overflowtarget.classList.remove('e-hide-group');
+            }
+        }
+        else {
+            if (this.overflowDDB) {
+                var overflowEle = this.overflowDDB.target;
+                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                if (ofTabContainer) {
+                    var grpContainer = ofTabContainer.querySelector('#' + groupID + CONTAINER_ID);
+                    if (grpContainer) {
+                        isHidden ? grpContainer.classList.add('e-hide-group') : grpContainer.classList.remove('e-hide-group');
+                    }
+                }
+            }
+        }
+    };
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *
@@ -7450,6 +7634,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupOpen", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupClose", void 0);
     Ribbon = Ribbon_1 = __decorate([
         NotifyPropertyChanges
     ], Ribbon);