@syncfusion/ej2-ribbon 25.2.3 → 26.1.35

package/src/ribbon/items/ribbon-button.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { getComponent, merge } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { getItem, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
@@ -44,14 +55,23 @@ var RibbonButton = /** @class */ (function () {
             created: btnSettings.created
         }, buttonEle);
         if (btnSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+            var htmlAttr = __assign({}, btnSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         buttonEle.onclick = function (e) {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(_this, e);
             }
         };
-        buttonEle.setAttribute('aria-label', btnSettings.content);
+        if (btnSettings.content) {
+            buttonEle.setAttribute('aria-label', btnSettings.content);
+        }
+        else {
+            buttonEle.setAttribute('aria-label', 'button');
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.

package/src/ribbon/items/ribbon-checkbox.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { getComponent, merge } from '@syncfusion/ej2-base';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 import { getItem, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
@@ -29,6 +40,13 @@ var RibbonCheckBox = /** @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var checkBoxSettings = item.checkBoxSettings;
+        var htmlAttr = {};
+        if (checkBoxSettings.htmlAttributes) {
+            htmlAttr = __assign({}, checkBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new CheckBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -39,7 +57,7 @@ var RibbonCheckBox = /** @class */ (function () {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
-            htmlAttributes: checkBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             change: function (e) {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(_this, e);

package/src/ribbon/items/ribbon-colorpicker.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { getItem, getItemElement, setCustomAttributes } from '../base/index';
@@ -68,7 +79,11 @@ var RibbonColorPicker = /** @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         if (colorPickerSettings.htmlAttributes) {
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+            var htmlAttr = __assign({}, colorPickerSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(inputEle, htmlAttr);
         }
         var wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);

package/src/ribbon/items/ribbon-combobox.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { getComponent, merge } from '@syncfusion/ej2-base';
 import { ComboBox } from '@syncfusion/ej2-dropdowns';
 import { getItem, getItemElement, RIBBON_CONTROL, SPACE, RIBBON_POPUP_CONTROL } from '../base/index';
@@ -29,6 +40,13 @@ var RibbonComboBox = /** @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var comboBoxSettings = item.comboBoxSettings;
+        var htmlAttr = {};
+        if (comboBoxSettings.htmlAttributes) {
+            htmlAttr = __assign({}, comboBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new ComboBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -60,7 +78,7 @@ var RibbonComboBox = /** @class */ (function () {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
-            htmlAttributes: comboBoxSettings.htmlAttributes,
+            htmlAttributes: htmlAttr,
             close: function (e) {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(_this, e);

package/src/ribbon/items/ribbon-dropdown.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { closest, getComponent, isNullOrUndefined, merge, remove } from '@syncfusion/ej2-base';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Tooltip } from '@syncfusion/ej2-popups';
@@ -63,7 +74,11 @@ var RibbonDropDown = /** @class */ (function () {
             select: dropDownSettings.select
         }).appendTo(buttonEle);
         if (dropDownSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+            var htmlAttr = __assign({}, dropDownSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
     };
     /**

package/src/ribbon/items/ribbon-gallery.d.ts

@@ -1,6 +1,6 @@
 import { Ribbon } from '../base/index';
 import { RibbonItemModel } from '../models/index';
-import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { Popup } from '@syncfusion/ej2-popups';
 /**
  * Defines the items of Ribbon.
  */
@@ -9,6 +9,7 @@ export declare class RibbonGallery {
     private count;
     private isAdded;
     private galleryItemsIndex;
+    private registeredTemplate;
     constructor(parent: Ribbon);
     protected getModuleName(): string;
     protected destroy(): void;
@@ -26,13 +27,22 @@ export declare class RibbonGallery {
     /**
      * Checks the gallery items height.
      *
-     * @param {number} selectedTab - Gets the current selected tab.
      * @param {HTMLElement} activeContent - Gets the current active content.
      * @returns {void}
      * @hidden
      */
-    checkAvailableHeight(selectedTab: number, activeContent: HTMLElement): void;
-    private checkCollision;
+    checkAvailableHeight(activeContent: HTMLElement): void;
+    /**
+     * Checks the popup collision.
+     *
+     * @param {Popup} popup - Gets the popup.
+     * @param {HTMLElement} popupEle - Gets the popup element.
+     * @param {number} offsetValue - Gets the offset value of gallery popup button.
+     * @returns {void}
+     * @hidden
+     */
+    checkCollision(popup: Popup, popupEle: HTMLElement, offsetValue?: number): void;
+    private setGalleryPopupHeight;
     private createPopup;
     /**
      * Updates gallery in mode switching.
@@ -48,11 +58,10 @@ export declare class RibbonGallery {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
      *