@syncfusion/ej2-ribbon 26.1.40 → 26.1.42

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

@@ -4588,6 +4588,9 @@ var RibbonGallery = /** @__PURE__ @class */ (function () {
                 id: item.id
             });
             itemEle.appendChild(buttonEle);
+            if (itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.contains('e-disabled')) {
+                buttonEle.classList.add('e-disabled');
+            }
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
             itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach(function (ele) {
                 ele.classList.add('e-hidden');
@@ -5410,9 +5413,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
-    Ribbon.prototype.toggleLayout = function () {
+    Ribbon.prototype.toggleLayout = function (args) {
         this.setProperties({ activeLayout: this.activeLayout === 'Simplified' ? 'Classic' : 'Simplified' }, true);
         this.switchLayout();
+        var eventArgs = { activeLayout: this.activeLayout, event: args };
+        this.trigger('ribbonLayoutSwitched', eventArgs);
     };
     Ribbon.prototype.tabCreated = function () {
         if (!this.hideLayoutSwitcher) {
@@ -7174,10 +7179,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             id: this.tabObj.element.id + COLLAPSE_BUTTON_ID,
             attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher', 'role': 'button' }
         });
-        this.collapseButton.onclick = function () { _this.toggleLayout(); };
+        this.collapseButton.onclick = function (e) { _this.toggleLayout(e); };
         this.collapseButton.onkeydown = function (e) {
             if (e.key === 'Enter') {
-                _this.toggleLayout();
+                _this.toggleLayout(e);
             }
         };
         this.element.classList.add(RIBBON_COLLAPSIBLE);
@@ -8057,10 +8062,18 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 for (var i = 0; i < galleryPopupEle.length; i++) {
                     galleryPopupEle[parseInt(i.toString(), 10)].remove();
                 }
+                var galleryPopupBtn = document.querySelector('#' + item.id + '_popupButton');
+                if (galleryPopupBtn) {
+                    galleryPopupBtn.remove();
+                }
+                var galleryWrapper = document.querySelector('#' + item.id + '_galleryWrapper');
+                if (galleryWrapper) {
+                    galleryWrapper.remove();
+                }
             }
             else {
                 var galleryEle = ele.querySelectorAll('.e-ribbon-gallery-item');
-                var galleryPopupBtn = ele.querySelector('#' + item.id + '_popupButton');
+                var galleryPopupBtn = ele.parentElement.querySelector('#' + item.id + '_popupButton');
                 if (galleryPopupBtn) {
                     galleryPopupBtn.remove();
                 }
@@ -9410,6 +9423,17 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 else {
                     itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
                     itemEle = contentEle.querySelector('#' + itemId);
+                    if (!itemContainer) {
+                        itemContainer = dropdown ? dropdown.target.querySelector('#' + itemId + CONTAINER_ID) : groupContainer.querySelector('#' + itemId + CONTAINER_ID);
+                    }
+                    if (!itemEle) {
+                        itemEle = dropdown ? dropdown.target.querySelector('#' + itemId) : contentEle.querySelector('#' + itemId);
+                    }
+                    if (itemProp.item.type === 'Gallery') {
+                        if (!itemEle) {
+                            itemEle = contentEle.querySelector('#' + itemId + '_galleryWrapper');
+                        }
+                    }
                     if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
                         itemEle = contentEle.querySelector('#' + itemId + RIBBON_GROUP_BUTTON_ID);
                     }
@@ -9438,12 +9462,6 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             ribbonItem.setProperties(item, true);
             this.validateItemSize();
             if (contentEle.innerHTML !== '') {
-                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                    itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
-                }
-                else {
-                    itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
-                }
                 // To avoid undefined items condition is added
                 if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
                     itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
@@ -9467,6 +9485,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 this.createRibbonItem(ribbonItem, itemContainer);
+                if (itemProp.item.type === 'Gallery' && document.querySelector('#' + itemId + '_container').closest('.e-ribbon-overflow-target') && item.displayOptions !== DisplayMode.Overflow) {
+                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                }
                 if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
                     if (dropdown.target.childElementCount === 0 ||
                         (dropdown.target.childElementCount === 1 &&
@@ -9547,6 +9568,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
         var isUpdated = false;
+        var isOverflow = false;
         var itemProp = getItem(this.tabs, itemId);
         if (!itemProp) {
             return;
@@ -9556,6 +9578,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (itemProp.item.type === 'GroupButton') {
             ele = getItemElement(this, itemId + RIBBON_GROUP_BUTTON_ID, itemProp);
         }
+        else if (itemProp.item.type === 'Gallery') {
+            ele = document.querySelector('#' + itemId);
+            if (!ele) {
+                ele = document.querySelector('#' + itemId + '_galleryWrapper');
+            }
+            else {
+                isOverflow = true;
+            }
+        }
         else {
             ele = getItemElement(this, itemId, itemProp);
         }
@@ -9579,6 +9610,14 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                             updateControlDisabled(btnEle, 'btn', isDisabled);
                         }
                     }
+                    else if (moduleName === 'gallery') {
+                        ele.classList.toggle(DISABLED_CSS, isDisabled);
+                        document.getElementById(itemId + '_popupButton').classList.toggle(DISABLED_CSS, isDisabled);
+                        if (isOverflow) {
+                            var galleryEle = document.getElementById(itemId + '_galleryWrapper');
+                            galleryEle.classList.toggle(DISABLED_CSS, isDisabled);
+                        }
+                    }
                     else {
                         updateControlDisabled(ele, moduleName, isDisabled);
                     }
@@ -9830,6 +9869,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     __decorate$l([
         Event()
     ], Ribbon.prototype, "ribbonCollapsing", void 0);
+    __decorate$l([
+        Event()
+    ], Ribbon.prototype, "ribbonLayoutSwitched", void 0);
     __decorate$l([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);