@syncfusion/ej2-ribbon 23.2.4 → 23.2.7

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

@@ -3674,6 +3674,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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);
@@ -3783,6 +3784,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     createSimplfiedOverflow(tabContent, activeContent, tabIndex) {
         const orderedGroups = this.getGroupResizeOrder(true, tabIndex);
+        let isEmptyCollection;
         for (let i = 0; ((i < orderedGroups.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); i++) {
             const group = orderedGroups[parseInt(i.toString(), 10)];
             const groupEle = tabContent.querySelector('#' + group.id);
@@ -3811,7 +3813,25 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            let 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);
+        }
+    }
+    checkEmptyCollection(itemsLength) {
+        let isEmptyCollection = true;
+        for (let i = 0; i < itemsLength.length; i++) {
+            if (!(itemsLength[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
+                isEmptyCollection = false;
+                break;
+            }
         }
+        return isEmptyCollection;
     }
     updatePopupItems(item, itemEle, isGroupOF, isMenu) {
         const dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
@@ -3842,6 +3862,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     removeSimplfiedOverflow(tabContent, activeContent, tabIndex, isClear = false) {
         const orderedGroups = this.getGroupResizeOrder(false, tabIndex);
         let flag = true;
+        let isEmptyCollection;
         for (let i = 0; ((i < orderedGroups.length) && flag); i++) {
             const group = orderedGroups[parseInt(i.toString(), 10)];
             let overflowDDB;
@@ -3889,7 +3910,13 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const groupEle = tabContent.querySelector('#' + group.id);
             const itemEle = groupEle.querySelector('.' + RIBBON_ITEM);
             if (groupEle.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                groupEle.classList.remove('e-ribbon-emptyCollection');
+                let itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+                if (itemsLength) {
+                    isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                    if (!isEmptyCollection) {
+                        groupEle.classList.remove('e-ribbon-emptyCollection');
+                    }
+                }
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
@@ -3909,6 +3936,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     }
                 }
             }
+            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
         }
         if (this.overflowDDB) {
             const overflowEle = this.overflowDDB.target;
@@ -3918,6 +3946,50 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
     }
+    checkOverflowHiddenItems(isGroupOF, tabIndex, groupId) {
+        if (isGroupOF) {
+            const overflowDDB = document.querySelector('#' + groupId + GROUPOF_BUTTON_ID);
+            if (overflowDDB) {
+                const overflowButton = getInstance(overflowDDB, DropDownButton);
+                const overflowBtnTarget = overflowButton.target;
+                let itemEle = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                let isHidden = true;
+                for (let 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) {
+                let isGroupHidden = true;
+                let isItemHidden;
+                const overflowEle = this.overflowDDB.target;
+                const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                if (ofTabContainer) {
+                    for (let k = 0; k < ofTabContainer.children.length; k++) {
+                        isItemHidden = true;
+                        const overflowTab = ofTabContainer.children[parseInt(k.toString(), 10)];
+                        let groupTabContainer = overflowTab.querySelectorAll('.e-ribbon-item');
+                        for (let 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);
+                }
+            }
+        }
+    }
     createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         let overflowButton;
         const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
@@ -3933,11 +4005,16 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             const 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);
@@ -3957,8 +4034,16 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     let 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);
                     }
@@ -4022,6 +4107,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             if (groupEle.classList.contains('e-hidden')) {
                 ofGroupContainer.classList.add('e-hidden');
             }
+            if (groupEle.classList.contains('e-hide-group')) {
+                ofGroupContainer.classList.add('e-hide-group');
+            }
         }
     }
     checkGroupShrinking(tabIndex, tabContent, activeContent, isLarge) {
@@ -4827,11 +4915,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             locale: this.locale,
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
+            beforeOpen: (args) => {
+                const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                this.trigger('overflowPopupOpen', eventArgs, (ribbonArgs) => {
+                    if (ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
+            },
             beforeClose: (args) => {
                 const ele = args.event ? closest(args.event.target, '.' + RIBBON_POPUP_CONTROL) : null;
-                if (ele) {
-                    args.cancel = true;
-                }
+                const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                this.trigger('overflowPopupClose', eventArgs, (ribbonArgs) => {
+                    if (ele || ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
             }
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
@@ -5356,6 +5455,20 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             const elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
+            let isItemsHidden = true;
+            for (let j = 0; j < elements.length; j++) {
+                if (isItemsHidden) {
+                    for (let 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');
             }
@@ -6355,6 +6468,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (ele) {
             const 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 {
@@ -6387,6 +6501,76 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
     }
+    checkHiddenItems(group, isHidden, tabIndex) {
+        let isItemsHidden = true;
+        let isEmptyCollection;
+        const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        const groupEle = contentEle.querySelector('#' + group.id);
+        if (isHidden) {
+            for (let i = 0; i < group.collections.length; i++) {
+                if (isItemsHidden) {
+                    const collection = group.collections[parseInt(i.toString(), 10)];
+                    for (let j = 0; j < collection.items.length; j++) {
+                        const item = collection.items[parseInt(j.toString(), 10)];
+                        let itemEle;
+                        if (item.type === 'GroupButton') {
+                            const itemProp = getItem(this.tabs, item.id);
+                            itemEle = getItemElement(this, item.id + RIBBON_GROUP_BUTTON_ID, itemProp);
+                        }
+                        else {
+                            itemEle = getItemElement(this, item.id);
+                        }
+                        let 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) {
+            let itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
+            if (itemsLength) {
+                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                groupEle.classList[isEmptyCollection ? 'add' : 'remove']('e-ribbon-emptyCollection');
+            }
+        }
+    }
+    checkOverflowItems(isHidden, contentEle, isGroupOF, tabIndex, groupID) {
+        let overflowDDB;
+        let overflowtarget;
+        if (isGroupOF) {
+            const 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) {
+                const overflowEle = this.overflowDDB.target;
+                const ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                if (ofTabContainer) {
+                    const 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.
      *
@@ -7040,6 +7224,12 @@ __decorate([
 __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);