@syncfusion/ej2-ribbon 21.1.35

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

@@ -0,0 +1,123 @@
+import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
+import { Ribbon, itemProps } from '../base/index';
+import { RibbonDropDownSettingsModel, RibbonItemModel } from '../models/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonDropDown {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates DropDown.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createDropDown(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;
+    /**
+     * Creates Overflow DropDown.
+     *
+     * @param {string} id - Gets the ID of the dropdown item.
+     * @param {string} name - Gets the name of the dropdown item.
+     * @param {string} iconCss - Gets the icon of the dropdown item.
+     * @param {HTMLElement} groupEle - Gets the overflow group element.
+     * @param {HTMLElement} overflowEle - Gets the overflow element.
+     * @returns {void}
+     * @hidden
+     */
+    createOverFlowDropDown(id: string, name: string, iconCss: string, groupEle: HTMLElement, overflowEle: HTMLElement): DropDownButton;
+    /**
+     * Removes Overflow DropDown.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @returns {void}
+     * @hidden
+     */
+    removeOverFlowDropDown(dropdownElement: HTMLElement): void;
+    /**
+     * Gets DropDown item element.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @param {string} id - Gets the ID of ribbon DropDown element.
+     * @returns {HTMLElement} - Returns the DropDown item element.
+     * @hidden
+     */
+    getDDBItemElement(dropdownElement: HTMLElement, id: string): HTMLElement;
+    /**
+     * Gets Overflow DropDown Popup.
+     *
+     * @param {itemProps} itemProp - Gets the property of ribbon item.
+     * @param {HTMLElement} contentEle - Gets the content element.
+     * @returns {HTMLElement} - Returns the Overflow DropDown Popup.
+     * @hidden
+     */
+    getOverflowDropDownPopup(itemProp: itemProps, contentEle: HTMLElement): HTMLElement;
+    private getDropDownObj;
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the DropDown items.
+     * @param {string} text - Gets the text of the dropdown item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    addItems(controlId: string, Items: ItemModel[], text?: string): void;
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    removeItems(controlId: string, Items: string[], isUniqueId?: boolean): void;
+    /**
+     * To open/close DropDownButton popup based on current state of the DropDownButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    toggle(controlId: string): void;
+    /**
+     * Updates the dropdown.
+     *
+     * @param {RibbonDropDownSettingsModel} prop - Gets the dropdown property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    updateDropDown(prop: RibbonDropDownSettingsModel, id: string): void;
+    /**
+     * Updated DropDown size
+     *
+     * @param {HTMLElement} element - Gets the dropdown element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    updateDropDownSize(element: HTMLElement, item: RibbonItemModel): void;
+}

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

@@ -0,0 +1,268 @@
+import { closest, getComponent, isNullOrUndefined, merge, remove } from '@syncfusion/ej2-base';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { Tooltip } from '@syncfusion/ej2-popups';
+import { getItem, getItemElement, RibbonItemSize, createTooltip } from '../base/index';
+import { DROPDOWN_ID, ITEM_VERTICAL_CENTER, OVERFLOW_ID, RIBBON_CONTROL, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_POPUP_CONTROL, SPACE, VERTICAL_DDB } from '../base/constant';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonDropDown = /** @class */ (function () {
+    function RibbonDropDown(parent) {
+        this.parent = parent;
+    }
+    RibbonDropDown.prototype.getModuleName = function () {
+        return 'ribbonDropDown';
+    };
+    RibbonDropDown.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates DropDown.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonDropDown.prototype.createDropDown = function (item, itemEle) {
+        var _this = this;
+        var buttonEle = this.parent.createElement('button', {
+            id: item.id
+        });
+        itemEle.appendChild(buttonEle);
+        var dropDownSettings = item.dropDownSettings;
+        var cssClass = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + (dropDownSettings.cssClass ?
+            dropDownSettings.cssClass : '')).trim();
+        new DropDownButton({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+            closeActionEvents: dropDownSettings.closeActionEvents,
+            content: item.activeSize === RibbonItemSize.Small ? '' : dropDownSettings.content,
+            cssClass: cssClass + ((item.activeSize === RibbonItemSize.Large) ? (SPACE + VERTICAL_DDB) : ''),
+            disabled: item.disabled,
+            iconCss: dropDownSettings.iconCss,
+            items: dropDownSettings.items,
+            target: dropDownSettings.target,
+            beforeClose: dropDownSettings.beforeClose,
+            beforeItemRender: dropDownSettings.beforeItemRender,
+            beforeOpen: dropDownSettings.beforeOpen,
+            close: function (e) {
+                if (dropDownSettings.close) {
+                    dropDownSettings.close.call(_this, e);
+                }
+            },
+            created: dropDownSettings.created,
+            open: dropDownSettings.open,
+            select: dropDownSettings.select
+        }, buttonEle);
+    };
+    /**
+     * 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
+     */
+    RibbonDropDown.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        var dropdownElement = itemEle.querySelector('#' + item.id);
+        var dropdown = getComponent(dropdownElement, DropDownButton);
+        dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
+        dropdown.dataBind();
+        dropdown.close = function (e) {
+            if (item.dropDownSettings.close) {
+                item.dropDownSettings.close.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
+     */
+    RibbonDropDown.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var dropdownElement = itemEle.querySelector('#' + item.id);
+        var dropdown = getComponent(dropdownElement, DropDownButton);
+        var cssClass = dropdown.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        dropdown.cssClass = cssClass.join(SPACE);
+        dropdown.dataBind();
+        dropdown.close = function (e) {
+            if (item.dropDownSettings.close) {
+                item.dropDownSettings.close.call(_this, e);
+            }
+        };
+    };
+    /**
+     * Creates Overflow DropDown.
+     *
+     * @param {string} id - Gets the ID of the dropdown item.
+     * @param {string} name - Gets the name of the dropdown item.
+     * @param {string} iconCss - Gets the icon of the dropdown item.
+     * @param {HTMLElement} groupEle - Gets the overflow group element.
+     * @param {HTMLElement} overflowEle - Gets the overflow element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle) {
+        var buttonEle = this.parent.createElement('button', {
+            id: id + OVERFLOW_ID + DROPDOWN_ID
+        });
+        overflowEle.appendChild(buttonEle);
+        var dropdown = new DropDownButton({
+            iconCss: iconCss,
+            target: groupEle,
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            cssClass: VERTICAL_DDB + SPACE + RIBBON_GROUP_OVERFLOW_DDB,
+            iconPosition: 'Top',
+            content: name,
+            beforeClose: function (args) {
+                args.cancel = !isNullOrUndefined(args.event && closest(args.event.target, '.' + RIBBON_POPUP_CONTROL));
+            }
+        }, buttonEle);
+        createTooltip(groupEle, this.parent);
+        return dropdown;
+    };
+    /**
+     * Removes Overflow DropDown.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonDropDown.prototype.removeOverFlowDropDown = function (dropdownElement) {
+        var dropdown = getComponent(dropdownElement, DropDownButton);
+        var tooltip = getComponent(dropdown.target, Tooltip);
+        tooltip.destroy();
+        dropdownElement.parentElement.parentElement.insertBefore(dropdown.target, dropdownElement.parentElement);
+        dropdown.destroy();
+        remove(dropdownElement);
+    };
+    /**
+     * Gets DropDown item element.
+     *
+     * @param {HTMLElement} dropdownElement - Gets the ribbon DropDown element.
+     * @param {string} id - Gets the ID of ribbon DropDown element.
+     * @returns {HTMLElement} - Returns the DropDown item element.
+     * @hidden
+     */
+    RibbonDropDown.prototype.getDDBItemElement = function (dropdownElement, id) {
+        var dropdown = getComponent(dropdownElement, DropDownButton);
+        var dropDownPopup = dropdown.dropDown.element;
+        return dropDownPopup.querySelector('#' + id);
+    };
+    /**
+     * Gets Overflow DropDown Popup.
+     *
+     * @param {itemProps} itemProp - Gets the property of ribbon item.
+     * @param {HTMLElement} contentEle - Gets the content element.
+     * @returns {HTMLElement} - Returns the Overflow DropDown Popup.
+     * @hidden
+     */
+    RibbonDropDown.prototype.getOverflowDropDownPopup = function (itemProp, contentEle) {
+        var dropdownElement = contentEle.querySelector('#' + this.parent.tabs[itemProp.tabIndex].groups[itemProp.groupIndex].id + OVERFLOW_ID + DROPDOWN_ID);
+        var dropdown = getComponent(dropdownElement, DropDownButton);
+        return dropdown.dropDown.element;
+    };
+    RibbonDropDown.prototype.getDropDownObj = function (controlId) {
+        var dropDownEle = getItemElement(this.parent, controlId);
+        return dropDownEle ? getComponent(dropDownEle, DropDownButton) : null;
+    };
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the DropDown items.
+     * @param {string} text - Gets the text of the dropdown item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    RibbonDropDown.prototype.addItems = function (controlId, Items, text) {
+        this.getDropDownObj(controlId).addItems(Items, text);
+    };
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    RibbonDropDown.prototype.removeItems = function (controlId, Items, isUniqueId) {
+        this.getDropDownObj(controlId).removeItems(Items, isUniqueId);
+    };
+    /**
+     * To open/close DropDownButton popup based on current state of the DropDownButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    RibbonDropDown.prototype.toggle = function (controlId) {
+        this.getDropDownObj(controlId).toggle();
+    };
+    /**
+     * Updates the dropdown.
+     *
+     * @param {RibbonDropDownSettingsModel} prop - Gets the dropdown property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    RibbonDropDown.prototype.updateDropDown = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.dropDownSettings, prop);
+        var btnEle = getItemElement(this.parent, id, itemProp);
+        if (!btnEle) {
+            return;
+        }
+        var control = getComponent(btnEle, DropDownButton);
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + ITEM_VERTICAL_CENTER + SPACE + prop.cssClass).trim();
+            prop.cssClass = itemProp.item.activeSize === RibbonItemSize.Large ?
+                (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
+            control.cssClass = prop.cssClass;
+        }
+        delete prop.close;
+        if (prop.content) {
+            prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
+        }
+        control.setProperties(prop);
+    };
+    /**
+     * Updated DropDown size
+     *
+     * @param {HTMLElement} element - Gets the dropdown element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonDropDown.prototype.updateDropDownSize = function (element, item) {
+        var control = getComponent(element, DropDownButton);
+        var cssClass = control.cssClass.split(SPACE);
+        if (item.activeSize === RibbonItemSize.Large) {
+            cssClass.push(VERTICAL_DDB);
+        }
+        else {
+            cssClass = cssClass.filter(function (value) { return value !== VERTICAL_DDB; });
+        }
+        control.cssClass = cssClass.join(SPACE);
+        control.setProperties({ iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left' });
+        control.setProperties({ content: item.activeSize === RibbonItemSize.Small ? '' : item.dropDownSettings.content });
+    };
+    return RibbonDropDown;
+}());
+export { RibbonDropDown };

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

@@ -0,0 +1,86 @@
+import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
+import { Ribbon } from '../base/index';
+import { RibbonSplitButtonSettingsModel, RibbonItemModel } from '../models/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonSplitButton {
+    private parent;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates SplitButton.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createSplitButton(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;
+    private setContent;
+    private getSplitButtonObj;
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the SplitButton items.
+     * @param {string} text - Gets the text of the splitbutton item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    addItems(controlId: string, Items: ItemModel[], text?: string): void;
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    removeItems(controlId: string, Items: string[], isUniqueId?: boolean): void;
+    /**
+     * To open/close SplitButton popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    toggle(controlId: string): void;
+    /**
+     * Updates the splitbutton.
+     *
+     * @param {RibbonSplitButtonSettingsModel} prop - Gets the splitbutton property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    updateSplitButton(prop: RibbonSplitButtonSettingsModel, id: string): void;
+    /**
+     * Updated SplitButton size
+     *
+     * @param {HTMLElement} element - Gets the splibutton element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    updateSplitButtonSize(element: HTMLElement, item: RibbonItemModel): void;
+}