@syncfusion/ej2-ribbon 23.1.38 → 23.1.43

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

@@ -182,6 +182,9 @@ var RibbonButtonSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$5([
         Property(false)
     ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+    __decorate$5([
+        Property({})
+    ], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate$5([
         Event()
     ], RibbonButtonSettings.prototype, "created", void 0);
@@ -239,6 +242,9 @@ var RibbonCheckBoxSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$6([
         Property('After')
     ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
+    __decorate$6([
+        Property({})
+    ], RibbonCheckBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate$6([
         Event()
     ], RibbonCheckBoxSettings.prototype, "created", void 0);
@@ -311,6 +317,9 @@ var RibbonColorPickerSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$7([
         Property('#008000ff')
     ], RibbonColorPickerSettings.prototype, "value", void 0);
+    __decorate$7([
+        Property({})
+    ], RibbonColorPickerSettings.prototype, "htmlAttributes", void 0);
     __decorate$7([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);
@@ -431,6 +440,9 @@ var RibbonComboBoxSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Property('150px')
     ], RibbonComboBoxSettings.prototype, "width", void 0);
+    __decorate$8([
+        Property({})
+    ], RibbonComboBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate$8([
         Event()
     ], RibbonComboBoxSettings.prototype, "beforeOpen", void 0);
@@ -512,6 +524,9 @@ var RibbonDropDownSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$9([
         Property(false)
     ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
+    __decorate$9([
+        Property({})
+    ], RibbonDropDownSettings.prototype, "htmlAttributes", void 0);
     __decorate$9([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);
@@ -590,6 +605,9 @@ var RibbonSplitButtonSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$10([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "target", void 0);
+    __decorate$10([
+        Property({})
+    ], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate$10([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);
@@ -701,6 +719,9 @@ var RibbonGroupButtonItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$13([
         Property(false)
     ], RibbonGroupButtonItem.prototype, "selected", void 0);
+    __decorate$13([
+        Property({})
+    ], RibbonGroupButtonItem.prototype, "htmlAttributes", void 0);
     __decorate$13([
         Event()
     ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
@@ -1478,6 +1499,9 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
             isToggle: btnSettings.isToggle,
             created: btnSettings.created
         }, buttonEle);
+        if (btnSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+        }
         buttonEle.onclick = function (e) {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(_this, e);
@@ -1629,6 +1653,7 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
+            htmlAttributes: checkBoxSettings.htmlAttributes,
             change: function (e) {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(_this, e);
@@ -1782,6 +1807,9 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
             },
             select: colorPickerSettings.select
         }, inputEle);
+        if (colorPickerSettings.htmlAttributes) {
+            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+        }
         var wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
         EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);
@@ -1977,6 +2005,7 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
             close: function (e) {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(_this, e);
@@ -2162,6 +2191,9 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             open: dropDownSettings.open,
             select: dropDownSettings.select
         }).appendTo(buttonEle);
+        if (dropDownSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -2604,6 +2636,9 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
                 }
             }
         }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
         var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = function (e) {
             if (e.key === 'Enter') {
@@ -3105,6 +3140,32 @@ function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);
     control.setProperties(prop);
 }
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+function setCustomAttributes(element, attributes) {
+    for (var key in attributes) {
+        if (key === 'class') {
+            var elementClass = attributes['class'].replace(/\s+/g, ' ').trim();
+            if (elementClass) {
+                addClass([element], elementClass.split(' '));
+            }
+        }
+        else if (key === 'style') {
+            var prevStyles = element.getAttribute('style') || '';
+            var value = "" + prevStyles + attributes["" + key];
+            element.setAttribute("" + key, value);
+        }
+        else {
+            element.setAttribute(key, attributes["" + key]);
+        }
+    }
+}
 
 /**
  * Defines the items of Ribbon.
@@ -3151,6 +3212,9 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                     content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content,
                     iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left'
                 }, groupButtonEle);
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
+                    setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
+                }
                 var buttonEle = itemElement.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(RIBBON_SINGLE_BUTTON_SELECTION);
@@ -5388,6 +5452,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        this.checkOverflow(this.selectedTab, activeContent);
     };
     Ribbon.prototype.switchLayout = function () {
         this.currentControlIndex = 0;
@@ -8173,5 +8239,5 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, RibbonGroupButtonSelection, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, BACKSTAGE_CLOSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_SINGLE_BUTTON_SELECTION, RIBBON_MULTIPLE_BUTTON_SELECTION, RIBBON_GROUP_BUTTON, RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, RIBBON_BACKSTAGE_POPUP, RIBBON_BACKSTAGE_OPEN, RIBBON_BACKSTAGE_CONTENT, RIBBON_SELECTED_CONTENT, RIBBON_BACKSTAGE, RIBBON_BACKSTAGE_MENU, RIBBON_BACKSTAGE_TEMPLATE, RIBBON_BACKSTAGE_MENU_WRAPPER, RIBBON_BACKSTAGE_ITEMS_WRAPPER, RIBBON_BACKSTAGE_TEXT_MENU, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_BACKSTAGE_MENU_ID, RIBBON_BACKSTAGE_POPUP_ID, RIBBON_FILE_MENU_LIST, RIBBON_MENU_LIST, RIBBON_FOOTER_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_GROUP_BUTTON_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, setCustomAttributes, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, BackStageMenu, BackstageBackButton, BackstageItem, RibbonTooltip, RibbonGroupButtonSettings, RibbonGroupButtonItem, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonGroupButton, RibbonFileMenu, RibbonBackstage };
 //# sourceMappingURL=ej2-ribbon.es5.js.map