@syncfusion/ej2-ribbon 24.2.8 → 25.1.35

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

@@ -1,6 +1,6 @@
 import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups';
 import { RibbonTabModel, RibbonTooltipModel } from '../models/index';
-import { commonProperties, itemProps, ribbonTooltipData } from './interface';
+import { commonProperties, itemProps, ribbonTooltipData, RibbonItemType } from './interface';
 import { Ribbon } from './ribbon';
 /**
  * Gets index value.
@@ -24,10 +24,11 @@ export declare function getTemplateFunction(template: string | HTMLElement | Fun
  *
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
+ * @param {RibbonItemType} type - Gets the type of the item.
  * @returns {itemProps} - Gets the ribbon item.
  * @hidden
  */
-export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
+export declare function getItem(tabs: RibbonTabModel[], id: string, type?: RibbonItemType): itemProps;
 /**
  * Gets the ribbon collection.
  *

package/src/ribbon/base/utils.js

@@ -54,10 +54,11 @@ export function getTemplateFunction(template) {
  *
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
+ * @param {RibbonItemType} type - Gets the type of the item.
  * @returns {itemProps} - Gets the ribbon item.
  * @hidden
  */
-export function getItem(tabs, id) {
+export function getItem(tabs, id, type) {
     for (var i = 0; i < tabs.length; i++) {
         var tab = tabs[parseInt(i.toString(), 10)];
         for (var j = 0; j < tab.groups.length; j++) {
@@ -66,7 +67,7 @@ export function getItem(tabs, id) {
                 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) {
+                    if ((id && item.id === id) || (type && item.type === type)) {
                         return {
                             item: item, collection: collection, group: group,
                             tabIndex: i, groupIndex: j, collectionIndex: k, itemIndex: l

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

@@ -5,3 +5,4 @@ export * from './ribbon-combobox';
 export * from './ribbon-dropdown';
 export * from './ribbon-splitbutton';
 export * from './ribbon-groupbutton';
+export * from './ribbon-gallery';

package/src/ribbon/items/index.js

@@ -5,3 +5,4 @@ export * from './ribbon-combobox';
 export * from './ribbon-dropdown';
 export * from './ribbon-splitbutton';
 export * from './ribbon-groupbutton';
+export * from './ribbon-gallery';

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

@@ -53,7 +53,12 @@ var RibbonColorPicker = /** @class */ (function () {
             beforeOpen: colorPickerSettings.beforeOpen,
             beforeTileRender: colorPickerSettings.beforeTileRender,
             created: colorPickerSettings.created,
-            change: colorPickerSettings.change,
+            change: function (e) {
+                colorPickerSettings.value = e.value.toString();
+                if (colorPickerSettings.change) {
+                    colorPickerSettings.change.call(_this, e);
+                }
+            },
             open: function () {
                 colorPicker.element.parentElement.classList.add(RIBBON_POPUP_OPEN);
                 if (colorPickerSettings.open) {

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

@@ -0,0 +1,87 @@
+import { Ribbon } from '../base/index';
+import { RibbonItemModel } from '../models/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonGallery {
+    private parent;
+    private count;
+    private isAdded;
+    private galleryItemsIndex;
+    constructor(parent: Ribbon);
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates gallery.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    createGallery(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private renderGalleryItems;
+    private setWrapperWidth;
+    /**
+     * Checks the gallery items height.
+     *
+     * @param {number} selectedTab - Gets the current selected tab.
+     * @param {HTMLElement} activeContent - Gets the current active content.
+     * @returns {void}
+     * @hidden
+     */
+    checkAvailableHeight(selectedTab: number, activeContent: HTMLElement): void;
+    private checkCollision;
+    private createPopup;
+    /**
+     * Updates gallery in mode switching.
+     *
+     * @param {string} activeLayout - Gets the current active layout.
+     * @param {string} itemID - Gets the ribbon item id.
+     * @returns {void}
+     * @hidden
+     */
+    switchGalleryItems(activeLayout: string, itemID: string): 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 into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    removeOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    private setActiveState;
+    private popupEvents;
+    private showPopup;
+    private hidePopup;
+    /**
+     * Shows a specific gallery popup in the ribbon.
+     *
+     * @param {string} id - Gets the ribbon item id.
+     * @returns {void}
+     */
+    showGalleryPopup(id: string): void;
+    /**
+     * Hides a specific gallery popup in the ribbon.
+     *
+     * @param {string} id - Gets the ribbon item id.
+     * @returns {void}
+     */
+    hideGalleryPopup(id: string): void;
+    private setFoucsToFirstItem;
+    private handleGalleryPopupNavigation;
+    private createGalleryTemplate;
+    private createGalleryPopupTemplate;
+}