@syncfusion/ej2-ribbon 24.2.8 → 25.1.35

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

@@ -53,6 +53,9 @@ var RibbonGroupButton = /** @class */ (function () {
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
                     setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
                 }
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                    groupButtonEle.classList.add(constants.RIBBON_GROUP_BUTTON_CONTENT);
+                }
                 var buttonEle = itemElement.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(constants.RIBBON_SINGLE_BUTTON_SELECTION);

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

@@ -15,6 +15,14 @@ export * from './ribbon-backstage-item';
 export * from './ribbon-tooltip';
 export * from './ribbon-group-button-settings';
 export * from './ribbon-group-button-item';
+export * from './ribbon-contextual-tab-settings';
+export * from './ribbon-gallery-group';
+export * from './ribbon-gallery-item';
+export * from './ribbon-gallery-settings';
+export * from './ribbon-gallery-settings-model';
+export * from './ribbon-gallery-item-model';
+export * from './ribbon-gallery-group-model';
+export * from './ribbon-contextual-tab-settings-model';
 export * from './ribbon-group-button-item-model';
 export * from './ribbon-group-button-settings-model';
 export * from './ribbon-tooltip-model';

package/src/ribbon/models/index.js

@@ -16,3 +16,7 @@ export * from './ribbon-backstage-item';
 export * from './ribbon-tooltip';
 export * from './ribbon-group-button-settings';
 export * from './ribbon-group-button-item';
+export * from './ribbon-contextual-tab-settings';
+export * from './ribbon-gallery-group';
+export * from './ribbon-gallery-item';
+export * from './ribbon-gallery-settings';

package/src/ribbon/models/ribbon-back-stage-settings-model.d.ts

@@ -12,6 +12,13 @@ export interface BackStageMenuModel {
      */
     text?: string;
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
     /**
      * Defines whether to show the backstage menu button.
      *

package/src/ribbon/models/ribbon-back-stage-settings.d.ts

@@ -12,6 +12,12 @@ export declare class BackStageMenu extends ChildProperty<BackStageMenu> {
      * @default 'File'
      */
     text: string;
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * Defines whether to show the backstage menu button.
      *

package/src/ribbon/models/ribbon-back-stage-settings.js

@@ -41,6 +41,9 @@ var BackStageMenu = /** @class */ (function (_super) {
     __decorate([
         Property('File')
     ], BackStageMenu.prototype, "text", void 0);
+    __decorate([
+        Property('')
+    ], BackStageMenu.prototype, "keyTip", void 0);
     __decorate([
         Property(false)
     ], BackStageMenu.prototype, "visible", void 0);

package/src/ribbon/models/ribbon-backstage-item-model.d.ts

@@ -20,6 +20,13 @@ export interface BackstageItemModel {
      */
     id?: string;
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
     /**
      * Specifies the backstage item’s content as selector.
      *

package/src/ribbon/models/ribbon-backstage-item.d.ts

@@ -16,6 +16,12 @@ export declare class BackstageItem extends ChildProperty<BackstageItem> {
      * @default ''
      */
     id: string;
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * Specifies the backstage item’s content as selector.
      *

package/src/ribbon/models/ribbon-backstage-item.js

@@ -32,6 +32,9 @@ var BackstageItem = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], BackstageItem.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], BackstageItem.prototype, "keyTip", void 0);
     __decorate([
         Property('')
     ], BackstageItem.prototype, "content", void 0);

package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts

@@ -0,0 +1,30 @@
+import { ChildProperty, Event, EmitType, Property, Collection } from '@syncfusion/ej2-base';import { RibbonTab } from './ribbon-tab';import { RibbonTabModel } from './ribbon-tab-model';
+
+/**
+ * Interface for a class RibbonContextualTabSettings
+ */
+export interface RibbonContextualTabSettingsModel {
+
+    /**
+     * Specifies whether the contextual tab is visible.
+     *
+     * @default false
+     */
+    visible?: boolean;
+
+    /**
+     * Specifies whether the contextual tab is selected.
+     *
+     * @default false
+     */
+    isSelected?: boolean;
+
+    /**
+     * Defines the tab groups to be rendered in ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonTab>
+     */
+    tabs?: RibbonTabModel[];
+
+}

package/src/ribbon/models/ribbon-contextual-tab-settings.d.ts

@@ -0,0 +1,33 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { RibbonTabModel } from './ribbon-tab-model';
+/**
+ * Defines the ribbon contextual tab.
+ */
+export declare class RibbonContextualTabSettings extends ChildProperty<RibbonContextualTabSettings> {
+    /**
+     * Specifies whether the contextual tab is visible.
+     *
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * Specifies whether the contextual tab is selected.
+     *
+     * @default false
+     */
+    isSelected: boolean;
+    /**
+     * Defines the tab groups to be rendered in ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonTab>
+     */
+    tabs: RibbonTabModel[];
+    /**
+     * @param {Object} prop - Gets the property of contextual tab.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}

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

@@ -0,0 +1,50 @@
+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, Collection } from '@syncfusion/ej2-base';
+import { RibbonTab } from './ribbon-tab';
+/**
+ * Defines the ribbon contextual tab.
+ */
+var RibbonContextualTabSettings = /** @class */ (function (_super) {
+    __extends(RibbonContextualTabSettings, _super);
+    function RibbonContextualTabSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of contextual tab.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonContextualTabSettings.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property(false)
+    ], RibbonContextualTabSettings.prototype, "visible", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonContextualTabSettings.prototype, "isSelected", void 0);
+    __decorate([
+        Collection([], RibbonTab)
+    ], RibbonContextualTabSettings.prototype, "tabs", void 0);
+    return RibbonContextualTabSettings;
+}(ChildProperty));
+export { RibbonContextualTabSettings };

package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts

@@ -113,4 +113,11 @@ export interface FileMenuSettingsModel {
      */
     select?: EmitType<FileMenuEventArgs>;
 
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip?: string;
+
 }

package/src/ribbon/models/ribbon-file-menu-settings.d.ts

@@ -98,6 +98,12 @@ export declare class FileMenuSettings extends ChildProperty<FileMenuSettings> {
      * @event select
      */
     select: EmitType<FileMenuEventArgs>;
+    /**
+     * Specifies the keytip content.
+     *
+     * @default ''
+     */
+    keyTip: string;
     /**
      * @param {Object} prop - Gets the property of FileMenu.
      * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.

package/src/ribbon/models/ribbon-file-menu-settings.js

@@ -79,6 +79,9 @@ var FileMenuSettings = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], FileMenuSettings.prototype, "select", void 0);
+    __decorate([
+        Property('')
+    ], FileMenuSettings.prototype, "keyTip", void 0);
     return FileMenuSettings;
 }(ChildProperty));
 export { FileMenuSettings };

package/src/ribbon/models/ribbon-gallery-group-model.d.ts

@@ -0,0 +1,44 @@
+import { ChildProperty, Collection, Property } from "@syncfusion/ej2-base";import { RibbonGalleryItemModel } from "./ribbon-gallery-item-model";import { RibbonGalleryItem } from "./ribbon-gallery-item";
+
+/**
+ * Interface for a class RibbonGalleryGroup
+ */
+export interface RibbonGalleryGroupModel {
+
+    /**
+     * Defines the properties for collection of gallery items in Ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonGalleryItem>
+     */
+    items?: RibbonGalleryItemModel[];
+
+    /**
+     * Defines the header for the group items present in Ribbon Gallery popup.
+     * 
+     * @default ''
+     */
+    header?: string;
+
+    /**
+     * Defines the width of the gallery items.
+     * 
+     * @default 'auto'
+     */
+    itemWidth?: string;
+
+    /**
+     * Defines the height of the gallery item.
+     * 
+     * @default 'auto'
+     */
+    itemHeight?: string;
+
+    /**
+     * Defines the CSS class to customize the gallery groups.
+     * 
+     * @default ''
+     */
+    cssClass?: string;
+
+}

package/src/ribbon/models/ribbon-gallery-group.d.ts

@@ -0,0 +1,38 @@
+import { ChildProperty } from "@syncfusion/ej2-base";
+import { RibbonGalleryItemModel } from "./ribbon-gallery-item-model";
+/**
+ * Defines the ribbon gallery group.
+ */
+export declare class RibbonGalleryGroup extends ChildProperty<RibbonGalleryGroup> {
+    /**
+     * Defines the properties for collection of gallery items in Ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonGalleryItem>
+     */
+    items: RibbonGalleryItemModel[];
+    /**
+     * Defines the header for the group items present in Ribbon Gallery popup.
+     *
+     * @default ''
+     */
+    header: string;
+    /**
+     * Defines the width of the gallery items.
+     *
+     * @default 'auto'
+     */
+    itemWidth: string;
+    /**
+     * Defines the height of the gallery item.
+     *
+     * @default 'auto'
+     */
+    itemHeight: string;
+    /**
+     * Defines the CSS class to customize the gallery groups.
+     *
+     * @default ''
+     */
+    cssClass: string;
+}

package/src/ribbon/models/ribbon-gallery-group.js

@@ -0,0 +1,47 @@
+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 { RibbonGalleryItem } from "./ribbon-gallery-item";
+/**
+ * Defines the ribbon gallery group.
+ */
+var RibbonGalleryGroup = /** @class */ (function (_super) {
+    __extends(RibbonGalleryGroup, _super);
+    function RibbonGalleryGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Collection([], RibbonGalleryItem)
+    ], RibbonGalleryGroup.prototype, "items", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGalleryGroup.prototype, "header", void 0);
+    __decorate([
+        Property('auto')
+    ], RibbonGalleryGroup.prototype, "itemWidth", void 0);
+    __decorate([
+        Property('auto')
+    ], RibbonGalleryGroup.prototype, "itemHeight", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGalleryGroup.prototype, "cssClass", void 0);
+    return RibbonGalleryGroup;
+}(ChildProperty));
+export { RibbonGalleryGroup };

package/src/ribbon/models/ribbon-gallery-item-model.d.ts

@@ -0,0 +1,43 @@
+import { ChildProperty, Property } from "@syncfusion/ej2-base";
+
+/**
+ * Interface for a class RibbonGalleryItem
+ */
+export interface RibbonGalleryItemModel {
+
+    /**
+     * Defines the content for the gallery item.
+     * 
+     * @default ''
+     */
+    content?: string;
+
+    /**
+     * Defines the image or icons for the gallery item.
+     * 
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Specifies additional HTML attributes to be applied to the Ribbon Gallery item.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
+     * Defines the CSS class to customize the gallery items.
+     * 
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether the item is disabled or not.
+     * 
+     * @default false
+     */
+    disabled?: boolean;
+
+}

package/src/ribbon/models/ribbon-gallery-item.d.ts

@@ -0,0 +1,38 @@
+import { ChildProperty } from "@syncfusion/ej2-base";
+/**
+ * Defines the ribbon gallery item.
+ */
+export declare class RibbonGalleryItem extends ChildProperty<RibbonGalleryItem> {
+    /**
+     * Defines the content for the gallery item.
+     *
+     * @default ''
+     */
+    content: string;
+    /**
+     * Defines the image or icons for the gallery item.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Specifies additional HTML attributes to be applied to the Ribbon Gallery item.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
+     * Defines the CSS class to customize the gallery items.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines whether the item is disabled or not.
+     *
+     * @default false
+     */
+    disabled: boolean;
+}

package/src/ribbon/models/ribbon-gallery-item.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 gallery item.
+ */
+var RibbonGalleryItem = /** @class */ (function (_super) {
+    __extends(RibbonGalleryItem, _super);
+    function RibbonGalleryItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], RibbonGalleryItem.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGalleryItem.prototype, "iconCss", void 0);
+    __decorate([
+        Property({})
+    ], RibbonGalleryItem.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGalleryItem.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonGalleryItem.prototype, "disabled", void 0);
+    return RibbonGalleryItem;
+}(ChildProperty));
+export { RibbonGalleryItem };

package/src/ribbon/models/ribbon-gallery-settings-model.d.ts

@@ -0,0 +1,108 @@
+import { ChildProperty, Collection, EmitType, Property, Event } from "@syncfusion/ej2-base";import { RibbonGalleryGroupModel } from "./ribbon-gallery-group-model";import { RibbonGalleryGroup } from "./ribbon-gallery-group";import { GalleryHoverEventArgs, GalleryItemEventArgs, GalleryPopupEventArgs, GallerySelectEventArgs, GalleryBeforeSelectEventArgs } from "../base/interface";
+
+/**
+ * Interface for a class RibbonGallerySettings
+ */
+export interface RibbonGallerySettingsModel {
+
+    /**
+     * Defines the properties for collection of gallery items in the Ribbon.
+     *
+     * @default []
+     * @aspType List<RibbonGalleryGroup>
+     */
+    groups?: RibbonGalleryGroupModel[];
+
+    /**
+     * Defines the number of items to be displayed in the Ribbon Gallery.
+     *
+     * @default 3
+     */
+    itemCount?: number;
+
+    /**
+     * Defines the index of current selected gallery item.
+     *
+     * @default null
+     */
+    selectedItemIndex?: number;
+
+    /**
+     * Defines the height of the ribbon gallery popup.
+     *
+     * @default 'auto'
+     */
+    popupHeight?: string;
+
+    /**
+     * Defines the width of the ribbon gallery popup.
+     *
+     * @default 'auto'
+     */
+    popupWidth?: string;
+
+    /**
+     * Defines the template for gallery items contents. The current gallery item model passed as context to build the content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Defines the template for gallery items in popup. The current gallery item model passed as context to build the content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    popupTemplate?: string | Function;
+
+    /**
+     * Event triggers when the gallery popup opens.
+     *
+     * @event popupOpen
+     */
+    popupOpen?: EmitType<GalleryPopupEventArgs>;
+
+    /**
+     * Event triggers when the gallery popup closes.
+     *
+     * @event popupClose
+     */
+    popupClose?: EmitType<GalleryPopupEventArgs>;
+
+    /**
+     * Event triggers when a user hovers over a gallery item.
+     *
+     * @event itemHover
+     */
+    itemHover?: EmitType<GalleryHoverEventArgs>;
+
+    /**
+     * Event triggers before rendering each gallery item.
+     *
+     * @event beforeItemRender
+     */
+    beforeItemRender?: EmitType<GalleryItemEventArgs>;
+
+    /**
+     * Event triggers before the gallery items selects.
+     *
+     * @event beforeSelect
+     */
+    beforeSelect?: EmitType<GalleryBeforeSelectEventArgs>;
+
+    /**
+     * Event triggers when the gallery items selects.
+     *
+     * @event select
+     */
+    select?: EmitType<GallerySelectEventArgs>;
+
+}