@syncfusion/ej2-ribbon 21.1.35

package/src/ribbon/models/ribbon-tab.js

@@ -0,0 +1,53 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';
+import { RibbonGroup } from './ribbon-group';
+/**
+ * Defines the ribbon tab.
+ */
+var RibbonTab = /** @class */ (function (_super) {
+    __extends(RibbonTab, _super);
+    function RibbonTab() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of tab.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonTab.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property('')
+    ], RibbonTab.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTab.prototype, "cssClass", void 0);
+    __decorate([
+        Collection([], RibbonGroup)
+    ], RibbonTab.prototype, "groups", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTab.prototype, "header", void 0);
+    return RibbonTab;
+}(ChildProperty));
+export { RibbonTab };

package/src/ribbon/models/ribbon-tooltip-model.d.ts

@@ -0,0 +1,43 @@
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class RibbonTooltip
+ */
+export interface RibbonTooltipModel {
+
+    /**
+     * Defines the CSS class to customize the appearance of the tooltip.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the unique ID for the tooltip.
+     *
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Defines the header content of the tooltip.
+     *
+     * @default ''
+     */
+    title?: string;
+
+    /**
+     * Defines the content for the tooltip.
+     *
+     * @default ''
+     */
+    content?: string;
+
+    /**
+     * Defines the CSS class for the icons to be shown in tooltip.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+}

package/src/ribbon/models/ribbon-tooltip.d.ts

@@ -0,0 +1,36 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon tooltip.
+ */
+export declare class RibbonTooltip extends ChildProperty<RibbonTooltip> {
+    /**
+     * Defines the CSS class to customize the appearance of the tooltip.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines the unique ID for the tooltip.
+     *
+     * @default ''
+     */
+    id: string;
+    /**
+     * Defines the header content of the tooltip.
+     *
+     * @default ''
+     */
+    title: string;
+    /**
+     * Defines the content for the tooltip.
+     *
+     * @default ''
+     */
+    content: string;
+    /**
+     * Defines the CSS class for the icons to be shown in tooltip.
+     *
+     * @default ''
+     */
+    iconCss: string;
+}

package/src/ribbon/models/ribbon-tooltip.js

@@ -0,0 +1,46 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon tooltip.
+ */
+var RibbonTooltip = /** @class */ (function (_super) {
+    __extends(RibbonTooltip, _super);
+    function RibbonTooltip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], RibbonTooltip.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTooltip.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTooltip.prototype, "title", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTooltip.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], RibbonTooltip.prototype, "iconCss", void 0);
+    return RibbonTooltip;
+}(ChildProperty));
+export { RibbonTooltip };

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

@@ -0,0 +1 @@
+export * from './ribbon-filemenu';

package/src/ribbon/modules/index.js

@@ -0,0 +1 @@
+export * from './ribbon-filemenu';

package/src/ribbon/modules/ribbon-filemenu.d.ts

@@ -0,0 +1,94 @@
+import { MenuItem, MenuItemModel } from '@syncfusion/ej2-navigations';
+import { FileMenuSettingsModel } from '../models/index';
+import { commonProperties, Ribbon } from '../base/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonFileMenu {
+    private parent;
+    private fileMenuDDB;
+    private menuctrl;
+    private ddbElement;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates File Menu
+     *
+     * @param {FileMenuSettingsModel} fileMenuOptions - Gets the property of filemenu.
+     * @returns {void}
+     * @hidden
+     */
+    createFileMenu(fileMenuOptions: FileMenuSettingsModel): void;
+    private addFileMenuTooltip;
+    private ddbBeforeEvent;
+    private ddbAfterEvent;
+    private cloneMenuItem;
+    private createRibbonMenu;
+    private menuBeforeEvent;
+    private menuAfterEvent;
+    private beforeItemRender;
+    private menuSelect;
+    /**
+     * setRtl
+     *
+     * @param {commonProperties} commonProp - Get the common property of ribbon.
+     * @returns {void}
+     * @hidden
+     */
+    setCommonProperties(commonProp: commonProperties): void;
+    /**
+     * Update FileMenu
+     *
+     * @param {FileMenuSettingsModel} fileMenuOptions - Gets the property of filemenu.
+     * @returns {void}
+     * @hidden
+     */
+    updateFileMenu(fileMenuOptions: FileMenuSettingsModel): void;
+    private destroyMenu;
+    private destroyDDB;
+    private removeFileMenuTooltip;
+    /**
+     * Add items to FileMenu.
+     *
+     * @param {MenuItemModel[]} items - Gets the items to be added.
+     * @param {string} target - Gets the target item to add the items.
+     * @param {boolean} isAfter - Gets the boolean value to add the items after or before the target item.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    addItems(items: MenuItemModel[], target: string, isAfter: boolean, isUniqueId?: boolean): void;
+    /**
+     * Remove items from FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be removed.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    removeItems(items: string[], isUniqueId?: boolean): void;
+    /**
+     * Enable items in FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be enabled.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    enableItems(items: string[], isUniqueId?: boolean): void;
+    /**
+     * Disable items in FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be disabled.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    disableItems(items: string[], isUniqueId?: boolean): void;
+    /**
+     * Update items in FileMenu.
+     *
+     * @param {MenuItem} item - Gets the item to be updated.
+     * @param {boolean} id - Gets the id of the item to be updated.
+     * @param {boolean} isUniqueId - Gets whether the id provided is uniqueId or not.
+     * @returns {void}
+     */
+    setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void;
+}

package/src/ribbon/modules/ribbon-filemenu.js

@@ -0,0 +1,318 @@
+import { EventHandler, remove } from '@syncfusion/ej2-base';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { Menu } from '@syncfusion/ej2-navigations';
+import { getIndex, isTooltipPresent } from '../base/index';
+import * as constants from '../base/constant';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonFileMenu = /** @class */ (function () {
+    function RibbonFileMenu(parent) {
+        this.parent = parent;
+    }
+    RibbonFileMenu.prototype.getModuleName = function () {
+        return 'ribbonFileMenu';
+    };
+    RibbonFileMenu.prototype.destroy = function () {
+        if (this.fileMenuDDB) {
+            this.destroyDDB();
+        }
+        this.parent = null;
+    };
+    /**
+     * Creates File Menu
+     *
+     * @param {FileMenuSettingsModel} fileMenuOptions - Gets the property of filemenu.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonFileMenu.prototype.createFileMenu = function (fileMenuOptions) {
+        var _this = this;
+        if (!fileMenuOptions.visible) {
+            return;
+        }
+        this.ddbElement = this.parent.createElement('button', {
+            id: this.parent.element.id + constants.RIBBON_FILE_MENU_ID,
+        });
+        var tabEle = this.parent.tabObj.element;
+        var toolbarEle = tabEle.querySelector('.e-toolbar');
+        tabEle.insertBefore(this.ddbElement, toolbarEle);
+        this.fileMenuDDB = new DropDownButton({
+            content: fileMenuOptions.text,
+            enableRtl: this.parent.enableRtl,
+            cssClass: 'e-ribbon-file-menu e-caret-hide',
+            created: function () {
+                tabEle.style.setProperty(constants.RIBBON_FILE_MENU_WIDTH, _this.ddbElement.offsetWidth + 'px');
+            },
+            beforeClose: this.ddbBeforeEvent.bind(this, false),
+            beforeOpen: this.ddbBeforeEvent.bind(this, true),
+            close: this.ddbAfterEvent.bind(this, false),
+            open: this.ddbAfterEvent.bind(this, true)
+        }, this.ddbElement);
+        if (this.parent.fileMenu.popupTemplate) {
+            this.fileMenuDDB.setProperties({ target: this.parent.fileMenu.popupTemplate });
+        }
+        else {
+            this.createRibbonMenu(fileMenuOptions);
+        }
+        this.parent.tabObj.refreshActiveTabBorder();
+        this.addFileMenuTooltip(fileMenuOptions);
+    };
+    RibbonFileMenu.prototype.addFileMenuTooltip = function (fileMenuOptions) {
+        if (isTooltipPresent(fileMenuOptions.ribbonTooltipSettings)) {
+            this.ddbElement.classList.add(constants.RIBBON_TOOLTIP_TARGET);
+            this.parent.tooltipData.push({ id: this.ddbElement.id, data: fileMenuOptions.ribbonTooltipSettings });
+        }
+    };
+    RibbonFileMenu.prototype.ddbBeforeEvent = function (isOpen, args) {
+        //args.event is null when dropdown button is closed using a method call
+        if (!isOpen && args.event && args.event.target.closest('.e-ribbon-menu')) {
+            args.cancel = true;
+        }
+        var event = isOpen ? this.parent.fileMenu.beforeOpen :
+            this.parent.fileMenu.beforeClose;
+        if (event) {
+            var eventArgs = { cancel: args.cancel, element: args.element, event: args.event };
+            event.call(this, eventArgs);
+            args.cancel = eventArgs.cancel;
+        }
+    };
+    RibbonFileMenu.prototype.ddbAfterEvent = function (isOpen, args) {
+        var element = isOpen ? this.fileMenuDDB.target : this.fileMenuDDB.element;
+        element.focus();
+        var event = isOpen ? this.parent.fileMenu.open : this.parent.fileMenu.close;
+        if (event) {
+            var eventArgs = { element: args.element };
+            event.call(this, eventArgs);
+        }
+    };
+    //Clone RibbonMenuItems before assigning to avoid reference issues.
+    RibbonFileMenu.prototype.cloneMenuItem = function (items) {
+        var itemsList = [];
+        for (var i = 0; i < items.length; i++) {
+            var item = items[parseInt(i.toString(), 10)];
+            itemsList.push({
+                iconCss: item.iconCss,
+                id: item.id,
+                separator: item.separator,
+                text: item.text,
+                url: item.url,
+                items: this.cloneMenuItem(item.items)
+            });
+        }
+        return itemsList;
+    };
+    RibbonFileMenu.prototype.createRibbonMenu = function (menuOptions) {
+        var _this = this;
+        var ulElem = this.parent.createElement('ul', {
+            id: this.parent.element.id + constants.RIBBON_FILE_MENU_LIST
+        });
+        this.fileMenuDDB.setProperties({ target: ulElem });
+        this.menuctrl = new Menu({
+            orientation: 'Vertical',
+            enableRtl: this.parent.enableRtl,
+            cssClass: 'e-ribbon-menu',
+            animationSettings: menuOptions.animationSettings,
+            items: this.cloneMenuItem(menuOptions.menuItems),
+            showItemOnClick: menuOptions.showItemOnClick,
+            template: menuOptions.itemTemplate,
+            beforeClose: this.menuBeforeEvent.bind(this, false),
+            beforeOpen: this.menuBeforeEvent.bind(this, true),
+            beforeItemRender: this.beforeItemRender.bind(this),
+            onClose: this.menuAfterEvent.bind(this, false),
+            onOpen: this.menuAfterEvent.bind(this, true),
+            select: this.menuSelect.bind(this)
+        }, ulElem);
+        EventHandler.add(ulElem, 'keydown', function (e) {
+            if (e.key === "Tab") {
+                _this.fileMenuDDB.toggle();
+            }
+        }, this);
+    };
+    RibbonFileMenu.prototype.menuBeforeEvent = function (isOpen, args) {
+        var event = isOpen ? this.parent.fileMenu.beforeOpen :
+            this.parent.fileMenu.beforeClose;
+        if (event) {
+            var eventArgs = { cancel: args.cancel, element: args.element, event: args.event,
+                items: args.items, parentItem: args.parentItem };
+            event.call(this, eventArgs);
+            args.cancel = eventArgs.cancel;
+        }
+    };
+    RibbonFileMenu.prototype.menuAfterEvent = function (isOpen, args) {
+        var event = isOpen ? this.parent.fileMenu.open : this.parent.fileMenu.close;
+        if (event) {
+            var eventArgs = { element: args.element, items: args.items, parentItem: args.parentItem };
+            event.call(this, eventArgs);
+        }
+    };
+    RibbonFileMenu.prototype.beforeItemRender = function (args) {
+        var event = this.parent.fileMenu.beforeItemRender;
+        if (event) {
+            var eventArgs = { element: args.element, item: args.item };
+            event.call(this, eventArgs);
+        }
+    };
+    RibbonFileMenu.prototype.menuSelect = function (args) {
+        var event = this.parent.fileMenu.select;
+        if (event) {
+            var eventArgs = { element: args.element, item: args.item, event: args.event };
+            event.call(this, eventArgs);
+            if (!args.element.classList.contains('e-menu-caret-icon')) {
+                this.fileMenuDDB.toggle();
+            }
+        }
+    };
+    /**
+     * setRtl
+     *
+     * @param {commonProperties} commonProp - Get the common property of ribbon.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonFileMenu.prototype.setCommonProperties = function (commonProp) {
+        if (this.fileMenuDDB) {
+            this.fileMenuDDB.setProperties(commonProp);
+            if (this.menuctrl) {
+                this.menuctrl.setProperties(commonProp);
+            }
+        }
+    };
+    /**
+     * Update FileMenu
+     *
+     * @param {FileMenuSettingsModel} fileMenuOptions - Gets the property of filemenu.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonFileMenu.prototype.updateFileMenu = function (fileMenuOptions) {
+        if (fileMenuOptions.visible) {
+            if (this.fileMenuDDB) {
+                if (fileMenuOptions.text) {
+                    this.fileMenuDDB.setProperties({
+                        content: fileMenuOptions.text
+                    });
+                    this.parent.tabObj.element.style.setProperty(constants.RIBBON_FILE_MENU_WIDTH, this.ddbElement.offsetWidth + 'px');
+                }
+                if (fileMenuOptions.popupTemplate) {
+                    if (this.menuctrl) {
+                        this.destroyMenu();
+                    }
+                    this.fileMenuDDB.setProperties({ target: fileMenuOptions.popupTemplate });
+                }
+                else {
+                    if (this.menuctrl) {
+                        this.menuctrl.setProperties({
+                            animationSettings: fileMenuOptions.animationSettings,
+                            items: this.cloneMenuItem(fileMenuOptions.menuItems),
+                            showItemOnClick: fileMenuOptions.showItemOnClick,
+                            template: fileMenuOptions.itemTemplate
+                        });
+                    }
+                    else {
+                        this.createRibbonMenu(fileMenuOptions);
+                    }
+                }
+                this.removeFileMenuTooltip();
+                this.addFileMenuTooltip(fileMenuOptions);
+            }
+            else {
+                this.createFileMenu(fileMenuOptions);
+            }
+        }
+        else if (this.fileMenuDDB) {
+            this.destroyDDB();
+        }
+        this.parent.tabObj.refreshActiveTabBorder();
+    };
+    RibbonFileMenu.prototype.destroyMenu = function () {
+        if (this.menuctrl) {
+            this.menuctrl.destroy();
+            this.menuctrl = null;
+        }
+    };
+    RibbonFileMenu.prototype.destroyDDB = function () {
+        this.removeFileMenuTooltip();
+        var tabEle = this.parent.tabObj.element;
+        tabEle.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
+        this.destroyMenu();
+        this.fileMenuDDB.destroy();
+        this.fileMenuDDB = null;
+        remove(this.ddbElement);
+        this.ddbElement = null;
+    };
+    RibbonFileMenu.prototype.removeFileMenuTooltip = function () {
+        var _this = this;
+        var index = getIndex(this.parent.tooltipData, function (e) { return e.id === _this.ddbElement.id; });
+        if (index !== -1) {
+            this.ddbElement.classList.remove(constants.RIBBON_TOOLTIP_TARGET);
+            this.parent.tooltipData.splice(index, 1);
+        }
+    };
+    /**
+     * Add items to FileMenu.
+     *
+     * @param {MenuItemModel[]} items - Gets the items to be added.
+     * @param {string} target - Gets the target item to add the items.
+     * @param {boolean} isAfter - Gets the boolean value to add the items after or before the target item.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonFileMenu.prototype.addItems = function (items, target, isAfter, isUniqueId) {
+        if (isAfter) {
+            this.menuctrl.insertAfter(items, target, isUniqueId);
+        }
+        else {
+            this.menuctrl.insertBefore(items, target, isUniqueId);
+        }
+        this.parent.fileMenu.setProperties({ menuItems: this.menuctrl.items }, true);
+    };
+    /**
+     * Remove items from FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be removed.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonFileMenu.prototype.removeItems = function (items, isUniqueId) {
+        this.menuctrl.removeItems(items, isUniqueId);
+        this.parent.fileMenu.setProperties({ menuItems: this.menuctrl.items }, true);
+    };
+    /**
+     * Enable items in FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be enabled.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonFileMenu.prototype.enableItems = function (items, isUniqueId) {
+        this.menuctrl.enableItems(items, true, isUniqueId);
+        this.parent.fileMenu.setProperties({ menuItems: this.menuctrl.items }, true);
+    };
+    /**
+     * Disable items in FileMenu.
+     *
+     * @param {string[]} items - Gets the items to be disabled.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonFileMenu.prototype.disableItems = function (items, isUniqueId) {
+        this.menuctrl.enableItems(items, false, isUniqueId);
+        this.parent.fileMenu.setProperties({ menuItems: this.menuctrl.items }, true);
+    };
+    /**
+     * Update items in FileMenu.
+     *
+     * @param {MenuItem} item - Gets the item to be updated.
+     * @param {boolean} id - Gets the id of the item to be updated.
+     * @param {boolean} isUniqueId - Gets whether the id provided is uniqueId or not.
+     * @returns {void}
+     */
+    RibbonFileMenu.prototype.setItem = function (item, id, isUniqueId) {
+        this.menuctrl.setItem(item, id, isUniqueId);
+        this.menuctrl.refresh();
+        this.parent.fileMenu.setProperties({ menuItems: this.menuctrl.items }, true);
+    };
+    return RibbonFileMenu;
+}());
+export { RibbonFileMenu };