@syncfusion/ej2-ribbon 21.1.35

package/src/ribbon/base/utils.d.ts

@@ -0,0 +1,113 @@
+import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups';
+import { RibbonTabModel, RibbonTooltipModel } from '../models/index';
+import { commonProperties, itemProps, ribbonTooltipData } from './interface';
+import { Ribbon } from './ribbon';
+/**
+ * Gets index value.
+ *
+ * @param {Array} arr - Gets the array to find index.
+ * @param {boolean} condition - Defines whether index matches with the value.
+ * @returns {number} - Gets the index value.
+ */
+export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index: number) => boolean): number;
+/**
+ * Gets template content based on the template property value.
+ *
+ * @param {string | HTMLElement} template - Template property value.
+ * @returns {Function} - Return template function.
+ */
+export declare function getTemplateFunction(template: string | HTMLElement): Function;
+/**
+ * Gets the ribbon item
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon item.
+ */
+export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
+/**
+ * Gets the ribbon collection.
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon collection.
+ */
+export declare function getCollection(tabs: RibbonTabModel[], id: string): itemProps;
+/**
+ * Gets the ribbon group.
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon group.
+ */
+export declare function getGroup(tabs: RibbonTabModel[], id: string): itemProps;
+/**
+ * @param {HTMLElement} element - Gets the element to be destroyed.
+ * @param {string} moduleName - Gets the module name.
+ * @returns {void}
+ */
+export declare function destroyControl(element: HTMLElement, moduleName: string): void;
+/**
+ * Updates common properties.
+ *
+ * @param {HTMLElement} element - Gets the element to be updated.
+ * @param {string} moduleName - Gets the module name.
+ * @param {commonProperties} commonProp - Gets the common properties to be updated.
+ * @returns {void}
+ */
+export declare function updateCommonProperty(element: HTMLElement, moduleName: string, commonProp: commonProperties): void;
+/**
+ * Updates disabled control.
+ *
+ * @param {HTMLElement} element - Gets the element to be disabled.
+ * @param {string} moduleName - Gets the module name.
+ * @param {boolean} disable - Defines whether the control to be disabled or not.
+ * @returns {void}
+ */
+export declare function updateControlDisabled(element: HTMLElement, moduleName: string, disable: boolean): void;
+/**
+ * Gets the ribbon item element.
+ *
+ * @param {Ribbon} parent - Gets the parent element.
+ * @param {itemProps} itemProp - Gets the ribbon item.
+ * @param {string} id - Gets the ID of the item.
+ * @returns {HTMLElement} - Gets the ribbon item element.
+ */
+export declare function getItemElement(parent: Ribbon, id: string, itemProp?: itemProps): HTMLElement;
+/**
+ * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
+ * @returns {boolean} - Gets whether the tooltip is present or not.
+ */
+export declare function isTooltipPresent(tooltip: RibbonTooltipModel): boolean;
+/**
+ * Sets content for tooltip.
+ *
+ * @param {TooltipEventArgs} args - Gets the argument of tooltip.
+ * @param {Tooltip} tooltip - Gets the tooltip to set the content.
+ * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
+ * @returns {void}
+ */
+export declare function setToolTipContent(args: TooltipEventArgs, tooltip: Tooltip, tooltipData: ribbonTooltipData[]): void;
+/**
+ * Creates tooltip.
+ *
+ * @param {HTMLElement} element - Gets the element to add tooltip.
+ * @param {Ribbon} ribbon - Gets the ribbon.
+ * @returns {void}
+ */
+export declare function createTooltip(element: HTMLElement, ribbon: Ribbon): void;
+/**
+ * Destroys tooltip
+ *
+ * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
+ * @returns {void}
+ */
+export declare function destroyTooltip(element: HTMLElement): void;
+/**
+ * Updates tooltip
+ *
+ * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
+ * @param {commonProperties} prop - Gets the property to be updated.
+ * @returns {void}
+ */
+export declare function updateTooltipProp(element: HTMLElement, prop: commonProperties): void;

package/src/ribbon/base/utils.js

@@ -0,0 +1,288 @@
+import { compile, getComponent, select } from '@syncfusion/ej2-base';
+import { Tooltip } from '@syncfusion/ej2-popups';
+import { DisplayMode, RibbonLayout } from './interface';
+import * as constants from './constant';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Gets index value.
+ *
+ * @param {Array} arr - Gets the array to find index.
+ * @param {boolean} condition - Defines whether index matches with the value.
+ * @returns {number} - Gets the index value.
+ */
+export function getIndex(arr, condition) {
+    for (var i = 0; i < arr.length; i++) {
+        if (condition(arr[parseInt(i.toString(), 10)], i)) {
+            return i;
+        }
+    }
+    return -1;
+}
+/**
+ * Gets template content based on the template property value.
+ *
+ * @param {string | HTMLElement} template - Template property value.
+ * @returns {Function} - Return template function.
+ */
+export function getTemplateFunction(template) {
+    if (typeof template === 'string') {
+        var content = '';
+        try {
+            var tempEle = select(template);
+            if (tempEle) {
+                //Return innerHTML incase of jsrenderer script else outerHTML
+                content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+            }
+            else {
+                content = template;
+            }
+        }
+        catch (e) {
+            content = template;
+        }
+        return compile(content);
+    }
+    else {
+        /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+        return compile(template);
+    }
+}
+/**
+ * Gets the ribbon item
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon item.
+ */
+export function getItem(tabs, id) {
+    for (var i = 0; i < tabs.length; i++) {
+        var tab = tabs[parseInt(i.toString(), 10)];
+        for (var j = 0; j < tab.groups.length; j++) {
+            var group = tab.groups[parseInt(j.toString(), 10)];
+            for (var k = 0; k < group.collections.length; k++) {
+                var collection = group.collections[parseInt(k.toString(), 10)];
+                for (var l = 0; l < collection.items.length; l++) {
+                    var item = collection.items[parseInt(l.toString(), 10)];
+                    if (item.id === id) {
+                        return {
+                            item: item, collection: collection, group: group,
+                            tabIndex: i, groupIndex: j, collectionIndex: k, itemIndex: l
+                        };
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Gets the ribbon collection.
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon collection.
+ */
+export function getCollection(tabs, id) {
+    for (var i = 0; i < tabs.length; i++) {
+        var tab = tabs[parseInt(i.toString(), 10)];
+        for (var j = 0; j < tab.groups.length; j++) {
+            var group = tab.groups[parseInt(j.toString(), 10)];
+            for (var k = 0; k < group.collections.length; k++) {
+                var collection = group.collections[parseInt(k.toString(), 10)];
+                if (collection.id === id) {
+                    return {
+                        collection: collection, group: group,
+                        tabIndex: i, groupIndex: j, collectionIndex: k
+                    };
+                }
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Gets the ribbon group.
+ *
+ * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
+ * @param {string} id - Gets the ID of the tab.
+ * @returns {itemProps} - Gets the ribbon group.
+ */
+export function getGroup(tabs, id) {
+    for (var i = 0; i < tabs.length; i++) {
+        var tab = tabs[parseInt(i.toString(), 10)];
+        for (var j = 0; j < tab.groups.length; j++) {
+            var group = tab.groups[parseInt(j.toString(), 10)];
+            if (group.id === id) {
+                return {
+                    group: group, tabIndex: i, groupIndex: j
+                };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * @param {HTMLElement} element - Gets the element to be destroyed.
+ * @param {string} moduleName - Gets the module name.
+ * @returns {void}
+ */
+export function destroyControl(element, moduleName) {
+    var control = getComponent(element, moduleName);
+    control.destroy();
+}
+/**
+ * Updates common properties.
+ *
+ * @param {HTMLElement} element - Gets the element to be updated.
+ * @param {string} moduleName - Gets the module name.
+ * @param {commonProperties} commonProp - Gets the common properties to be updated.
+ * @returns {void}
+ */
+export function updateCommonProperty(element, moduleName, commonProp) {
+    var control = getComponent(element, moduleName);
+    control.setProperties(commonProp);
+}
+/**
+ * Updates disabled control.
+ *
+ * @param {HTMLElement} element - Gets the element to be disabled.
+ * @param {string} moduleName - Gets the module name.
+ * @param {boolean} disable - Defines whether the control to be disabled or not.
+ * @returns {void}
+ */
+export function updateControlDisabled(element, moduleName, disable) {
+    var control = getComponent(element, moduleName);
+    control.setProperties(moduleName === 'combobox' ? { enabled: !disable } : { disabled: disable });
+}
+/**
+ * Gets the ribbon item element.
+ *
+ * @param {Ribbon} parent - Gets the parent element.
+ * @param {itemProps} itemProp - Gets the ribbon item.
+ * @param {string} id - Gets the ID of the item.
+ * @returns {HTMLElement} - Gets the ribbon item element.
+ */
+export function getItemElement(parent, id, itemProp) {
+    if (!itemProp) {
+        itemProp = getItem(parent.tabs, id);
+        if (!itemProp) {
+            return null;
+        }
+    }
+    var contentEle = parent.tabObj.items[itemProp.tabIndex].content;
+    if (contentEle.innerHTML === '') {
+        return null;
+    }
+    if (parent.activeLayout === RibbonLayout.Classic) {
+        contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
+            : contentEle;
+        return contentEle.querySelector('#' + id);
+    }
+    else {
+        //Checks for Simplified and Auto options (Auto = simplified + popup)
+        var ele = (itemProp.item.displayOptions & DisplayMode.Simplified) ?
+            contentEle.querySelector('#' + itemProp.item.id) : null;
+        // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
+        if (!ele && (DisplayMode.Simplified !== DisplayMode.None)) {
+            var dropdown = itemProp.group.enableGroupOverflow ?
+                getComponent(contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID), DropDownButton)
+                : parent.overflowDDB;
+            ele = dropdown.target.querySelector('#' + itemProp.item.id);
+        }
+        return ele;
+    }
+}
+/**
+ * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
+ * @returns {boolean} - Gets whether the tooltip is present or not.
+ */
+export function isTooltipPresent(tooltip) {
+    return (tooltip.content || tooltip.iconCss || tooltip.title || tooltip.id || tooltip.cssClass) ? true : false;
+}
+/**
+ * Sets content for tooltip.
+ *
+ * @param {TooltipEventArgs} args - Gets the argument of tooltip.
+ * @param {Tooltip} tooltip - Gets the tooltip to set the content.
+ * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
+ * @returns {void}
+ */
+export function setToolTipContent(args, tooltip, tooltipData) {
+    var targetId = args.target.getAttribute('id');
+    var dataObj = tooltipData.filter(function (e) { return e.id === targetId; })[0];
+    var data = dataObj.data;
+    var content = tooltip.createElement('div', {
+        id: data.id ? constants.RIBBON_TOOLTIP_CONTAINER + '_' + data.id : constants.RIBBON_TOOLTIP_CONTAINER
+    });
+    tooltip.element.append(content);
+    if (data.title) {
+        var header = tooltip.createElement('div', {
+            innerHTML: data.title,
+            className: constants.RIBBON_TOOLTIP_TITLE
+        });
+        content.appendChild(header);
+    }
+    var textContainer = tooltip.createElement('div', {
+        className: constants.RIBBON_TEXT_CONTAINER
+    });
+    content.appendChild(textContainer);
+    if (data.iconCss) {
+        var customCss = tooltip.createElement('div', {
+            className: data.cssClass ? data.cssClass + ' ' + data.iconCss + ' ' + constants.RIBBON_TOOLTIP_ICON : data.iconCss + ' ' + constants.RIBBON_TOOLTIP_ICON
+        });
+        textContainer.appendChild(customCss);
+    }
+    if (data.content) {
+        var tooltipContent = tooltip.createElement('div', {
+            innerHTML: data.content,
+            className: constants.RIBBON_TOOLTIP_CONTENT
+        });
+        textContainer.appendChild(tooltipContent);
+    }
+    tooltip.setProperties({
+        content: content
+    });
+}
+/**
+ * Creates tooltip.
+ *
+ * @param {HTMLElement} element - Gets the element to add tooltip.
+ * @param {Ribbon} ribbon - Gets the ribbon.
+ * @returns {void}
+ */
+export function createTooltip(element, ribbon) {
+    var ribbonTooltip = new Tooltip({
+        cssClass: (constants.RIBBON_TOOLTIP + ' ' + ribbon.cssClass).trim(),
+        target: '.' + constants.RIBBON_TOOLTIP_TARGET,
+        beforeRender: beforeTooltipRender.bind(this)
+    });
+    ribbonTooltip.appendTo(element);
+    /**
+     * @param {TooltipEventArgs} args - Gets the tooltip argument.
+     * @returns {void}
+     */
+    function beforeTooltipRender(args) {
+        setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
+    }
+}
+/**
+ * Destroys tooltip
+ *
+ * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
+ * @returns {void}
+ */
+export function destroyTooltip(element) {
+    var control = getComponent(element, Tooltip);
+    control.destroy();
+}
+/**
+ * Updates tooltip
+ *
+ * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
+ * @param {commonProperties} prop - Gets the property to be updated.
+ * @returns {void}
+ */
+export function updateTooltipProp(element, prop) {
+    var control = getComponent(element, Tooltip);
+    control.setProperties(prop);
+}

package/src/ribbon/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Ribbon modules
+ */
+export * from './base/index';
+export * from './models/index';
+export * from './items/index';
+export * from './modules/index';

package/src/ribbon/index.js

@@ -0,0 +1,7 @@
+/**
+ * Ribbon modules
+ */
+export * from './base/index';
+export * from './models/index';
+export * from './items/index';
+export * from './modules/index';

package/src/ribbon/items/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ribbon-button';
+export * from './ribbon-checkbox';
+export * from './ribbon-colorpicker';
+export * from './ribbon-combobox';
+export * from './ribbon-dropdown';
+export * from './ribbon-splitbutton';

package/src/ribbon/items/index.js

@@ -0,0 +1,6 @@
+export * from './ribbon-button';
+export * from './ribbon-checkbox';
+export * from './ribbon-colorpicker';
+export * from './ribbon-combobox';
+export * from './ribbon-dropdown';
+export * from './ribbon-splitbutton';

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

@@ -0,0 +1,65 @@
+import { Ribbon } from '../base/index';
+import { RibbonButtonSettingsModel, RibbonItemModel } from '../models/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonButton {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates button.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createButton(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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;
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    /**
+     * Triggers the click action on the button.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    click(controlId: string): void;
+    /**
+     * Updates the button properties.
+     *
+     * @param {RibbonButtonSettingsModel} prop - Gets the button property.
+     * @param {string} id - Gets the ID of button item.
+     * @returns {void}
+     */
+    updateButton(prop: RibbonButtonSettingsModel, id: string): void;
+    /**
+     * Updates the button size.
+     *
+     * @param {HTMLElement} element - Gets the button element.
+     * @param {RibbonItemModel} item - Gets the ribbon item.
+     * @returns {void}
+     * @hidden
+     */
+    updateButtonSize(element: HTMLElement, item: RibbonItemModel): void;
+}

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

@@ -0,0 +1,153 @@
+import { getComponent, merge } from '@syncfusion/ej2-base';
+import { Button } from '@syncfusion/ej2-buttons';
+import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, SPACE } from '../base/constant';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonButton = /** @class */ (function () {
+    function RibbonButton(parent) {
+        this.parent = parent;
+    }
+    RibbonButton.prototype.getModuleName = function () {
+        return 'ribbonButton';
+    };
+    RibbonButton.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates button.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonButton.prototype.createButton = function (item, itemEle) {
+        var _this = this;
+        var buttonEle = this.parent.createElement('button', {
+            id: item.id
+        });
+        itemEle.appendChild(buttonEle);
+        var btnSettings = item.buttonSettings;
+        new Button({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+            iconCss: btnSettings.iconCss,
+            disabled: item.disabled,
+            cssClass: (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + (btnSettings.cssClass ? btnSettings.cssClass : '')).trim(),
+            content: item.activeSize === RibbonItemSize.Small ? '' : btnSettings.content,
+            isPrimary: btnSettings.isPrimary,
+            isToggle: btnSettings.isToggle,
+            created: btnSettings.created
+        }, buttonEle);
+        buttonEle.onclick = function (e) {
+            if (btnSettings.clicked) {
+                btnSettings.clicked.call(_this, e);
+            }
+        };
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @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
+     */
+    RibbonButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        var buttonEle = itemEle.querySelector('#' + item.id);
+        var buttonObj = getComponent(buttonEle, Button);
+        buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
+        buttonEle.onclick = function (e) {
+            if (item.buttonSettings.clicked) {
+                item.buttonSettings.clicked.call(_this, e);
+            }
+            overflowButton.toggle();
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @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
+     */
+    RibbonButton.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var buttonEle = itemEle.querySelector('#' + item.id);
+        var buttonObj = getComponent(buttonEle, Button);
+        var cssClass = buttonObj.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        buttonObj.setProperties({ cssClass: cssClass.join(SPACE) });
+        buttonEle.onclick = function (e) {
+            if (item.buttonSettings.clicked) {
+                item.buttonSettings.clicked.call(_this, e);
+            }
+        };
+    };
+    /**
+     * Triggers the click action on the button.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    RibbonButton.prototype.click = function (controlId) {
+        var buttonEle = getItemElement(this.parent, controlId);
+        if (!buttonEle) {
+            return;
+        }
+        var buttonObj = getComponent(buttonEle, Button);
+        buttonObj.click();
+    };
+    /**
+     * Updates the button properties.
+     *
+     * @param {RibbonButtonSettingsModel} prop - Gets the button property.
+     * @param {string} id - Gets the ID of button item.
+     * @returns {void}
+     */
+    RibbonButton.prototype.updateButton = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.buttonSettings, prop);
+        var buttonEle = getItemElement(this.parent, id, itemProp);
+        if (!buttonEle) {
+            return;
+        }
+        var buttonObj = getComponent(buttonEle, Button);
+        if (prop.cssClass) {
+            prop.cssClass = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + prop.cssClass).trim();
+        }
+        if (prop.content) {
+            prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
+        }
+        delete prop.clicked;
+        buttonObj.setProperties(prop);
+    };
+    /**
+     * Updates the button size.
+     *
+     * @param {HTMLElement} element - Gets the button element.
+     * @param {RibbonItemModel} item - Gets the ribbon item.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonButton.prototype.updateButtonSize = function (element, item) {
+        var buttonObj = getComponent(element, Button);
+        buttonObj.setProperties({
+            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+            content: item.activeSize === RibbonItemSize.Small ? '' : item.buttonSettings.content
+        });
+    };
+    return RibbonButton;
+}());
+export { RibbonButton };