@syncfusion/ej2-ribbon 25.2.3 → 25.2.5

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

@@ -1725,6 +1725,17 @@ var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
 /** @hidden */
 var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
 
+var __assign = (undefined && undefined.__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);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -1767,7 +1778,11 @@ var RibbonButton = /** @__PURE__ @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) {
@@ -1882,6 +1897,17 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
     return RibbonButton;
 }());
 
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = 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$1.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -1910,6 +1936,13 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var checkBoxSettings = item.checkBoxSettings;
+        var htmlAttr = {};
+        if (checkBoxSettings.htmlAttributes) {
+            htmlAttr = __assign$1({}, checkBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new CheckBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -1920,7 +1953,7 @@ var RibbonCheckBox = /** @__PURE__ @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);
@@ -2014,6 +2047,17 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
     return RibbonCheckBox;
 }());
 
+var __assign$2 = (undefined && undefined.__assign) || function () {
+    __assign$2 = 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$2.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2080,7 +2124,11 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         if (colorPickerSettings.htmlAttributes) {
-            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+            var htmlAttr = __assign$2({}, 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);
@@ -2234,6 +2282,17 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
     return RibbonColorPicker;
 }());
 
+var __assign$3 = (undefined && undefined.__assign) || function () {
+    __assign$3 = 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$3.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2262,6 +2321,13 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
         });
         itemEle.appendChild(inputEle);
         var comboBoxSettings = item.comboBoxSettings;
+        var htmlAttr = {};
+        if (comboBoxSettings.htmlAttributes) {
+            htmlAttr = __assign$3({}, comboBoxSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+        }
         new ComboBox({
             locale: this.parent.locale,
             enableRtl: this.parent.enableRtl,
@@ -2293,7 +2359,7 @@ var RibbonComboBox = /** @__PURE__ @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);
@@ -2436,6 +2502,17 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
     return RibbonComboBox;
 }());
 
+var __assign$4 = (undefined && undefined.__assign) || function () {
+    __assign$4 = 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$4.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2496,7 +2573,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             select: dropDownSettings.select
         }).appendTo(buttonEle);
         if (dropDownSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+            var htmlAttr = __assign$4({}, dropDownSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
     };
     /**
@@ -2874,6 +2955,17 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
     return RibbonDropDown;
 }());
 
+var __assign$5 = (undefined && undefined.__assign) || function () {
+    __assign$5 = 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$5.apply(this, arguments);
+};
 /**
  * Defines the items of Ribbon.
  */
@@ -2943,7 +3035,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
             }
         }, buttonEle);
         if (splitButtonSettings.htmlAttributes) {
-            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+            var htmlAttr = __assign$5({}, splitButtonSettings.htmlAttributes);
+            if (htmlAttr.id) {
+                delete htmlAttr.id;
+            }
+            setCustomAttributes(buttonEle, htmlAttr);
         }
         var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = function (e) {
@@ -7573,7 +7669,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < list.length; i++) {
             var listitem = list[parseInt(i.toString(), 10)];
             if (!listitem.id) {
-                listitem.setProperties({ id: initId + key + (this.idIndex++) }, true);
+                var htmlAttrID = void 0;
+                if (type === 'item') {
+                    htmlAttrID = this.hasHtmlAtrrID(listitem);
+                }
+                listitem.setProperties({ id: htmlAttrID ? htmlAttrID : initId + key + (this.idIndex++) }, true);
             }
             switch (type) {
                 case 'tab':
@@ -7591,6 +7691,28 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         return list;
     };
+    Ribbon.prototype.hasHtmlAtrrID = function (listItem) {
+        var id = '';
+        if (listItem.buttonSettings.htmlAttributes.id) {
+            id = listItem.buttonSettings.htmlAttributes.id;
+        }
+        else if (listItem.checkBoxSettings.htmlAttributes.id) {
+            id = listItem.checkBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.colorPickerSettings.htmlAttributes.id) {
+            id = listItem.colorPickerSettings.htmlAttributes.id;
+        }
+        else if (listItem.comboBoxSettings.htmlAttributes.id) {
+            id = listItem.comboBoxSettings.htmlAttributes.id;
+        }
+        else if (listItem.dropDownSettings.htmlAttributes.id) {
+            id = listItem.dropDownSettings.htmlAttributes.id;
+        }
+        else if (listItem.splitButtonSettings.htmlAttributes.id) {
+            id = listItem.splitButtonSettings.htmlAttributes.id;
+        }
+        return id;
+    };
     Ribbon.prototype.updateCommonProperty = function (commonProp) {
         this.tabObj.setProperties(commonProp);
         if (this.ribbonFileMenuModule) {