@syncfusion/ej2-ribbon 22.2.12 → 23.1.38

package/src/ribbon/models/ribbon-group-button-item.d.ts

@@ -0,0 +1,44 @@
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { BeforeClickGroupButtonEventArgs, ClickGroupButtonEventArgs } from '../base/interface';
+import { RibbonTooltipModel } from './ribbon-tooltip-model';
+/**
+ * Defines the ribbon group button settings.
+ */
+export declare class RibbonGroupButtonItem extends ChildProperty<RibbonGroupButtonItem> {
+    /**
+     * Defines the content for the button.
+     *
+     * @default ''
+     */
+    content: string;
+    /**
+     * Defines the CSS class for the icons to be shown in button.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Specifies the tooltip settings for the group button items.
+     *
+     * @default {}
+     */
+    ribbonTooltipSettings: RibbonTooltipModel;
+    /**
+     * Defines whether the button is selected or not.
+     *
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Triggers before clicking the button from group button.
+     *
+     * @event beforeClick
+     */
+    beforeClick: EmitType<BeforeClickGroupButtonEventArgs>;
+    /**
+     * Triggers after clicking the button from group button.
+     *
+     * @event click
+     */
+    click: EmitType<ClickGroupButtonEventArgs>;
+}

package/src/ribbon/models/ribbon-group-button-item.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, Event, Property, Complex } from '@syncfusion/ej2-base';
+import { RibbonTooltip } from './ribbon-tooltip';
+/**
+ * Defines the ribbon group button settings.
+ */
+var RibbonGroupButtonItem = /** @class */ (function (_super) {
+    __extends(RibbonGroupButtonItem, _super);
+    function RibbonGroupButtonItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], RibbonGroupButtonItem.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGroupButtonItem.prototype, "iconCss", void 0);
+    __decorate([
+        Complex({}, RibbonTooltip)
+    ], RibbonGroupButtonItem.prototype, "ribbonTooltipSettings", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonGroupButtonItem.prototype, "selected", void 0);
+    __decorate([
+        Event()
+    ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);
+    __decorate([
+        Event()
+    ], RibbonGroupButtonItem.prototype, "click", void 0);
+    return RibbonGroupButtonItem;
+}(ChildProperty));
+export { RibbonGroupButtonItem };

package/src/ribbon/models/ribbon-group-button-settings-model.d.ts

@@ -0,0 +1,25 @@
+import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class RibbonGroupButtonSettings
+ */
+export interface RibbonGroupButtonSettingsModel {
+
+    /**
+     * Defines options for Selection Type.
+     *
+     * @isenumeration true
+     * @default 'Single'
+     * @asptype RibbonGroupButtonSelection
+     */
+    selection?: RibbonGroupButtonSelection;
+
+    /**
+     * Defines the properties for collection of button items in Ribbon group button.
+     *
+     * @default []
+     * @aspType List<RibbonGroupButtonItem>
+     */
+    items?: RibbonGroupButtonItemModel[];
+
+}

package/src/ribbon/models/ribbon-group-button-settings.d.ts

@@ -0,0 +1,23 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { RibbonGroupButtonSelection } from '../base/interface';
+import { RibbonGroupButtonItemModel } from './ribbon-group-button-item-model';
+/**
+ * Defines the ribbon group button settings.
+ */
+export declare class RibbonGroupButtonSettings extends ChildProperty<RibbonGroupButtonSettings> {
+    /**
+     * Defines options for Selection Type.
+     *
+     * @isenumeration true
+     * @default 'Single'
+     * @asptype RibbonGroupButtonSelection
+     */
+    selection: RibbonGroupButtonSelection;
+    /**
+     * Defines the properties for collection of button items in Ribbon group button.
+     *
+     * @default []
+     * @aspType List<RibbonGroupButtonItem>
+     */
+    items: RibbonGroupButtonItemModel[];
+}

package/src/ribbon/models/ribbon-group-button-settings.js

@@ -0,0 +1,38 @@
+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 { RibbonGroupButtonItem } from './ribbon-group-button-item';
+/**
+ * Defines the ribbon group button settings.
+ */
+var RibbonGroupButtonSettings = /** @class */ (function (_super) {
+    __extends(RibbonGroupButtonSettings, _super);
+    function RibbonGroupButtonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Single')
+    ], RibbonGroupButtonSettings.prototype, "selection", void 0);
+    __decorate([
+        Collection([], RibbonGroupButtonItem)
+    ], RibbonGroupButtonSettings.prototype, "items", void 0);
+    return RibbonGroupButtonSettings;
+}(ChildProperty));
+export { RibbonGroupButtonSettings };

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

@@ -1,4 +1,4 @@
-import { ChildProperty, Complex, Property } from '@syncfusion/ej2-base';import { RibbonItemType, RibbonItemSize, DisplayMode } from '../base/interface';import { RibbonButtonSettings } from './ribbon-button-settings';import { RibbonButtonSettingsModel } from './ribbon-button-settings-model';import { RibbonCheckBoxSettings } from './ribbon-checkbox-settings';import { RibbonCheckBoxSettingsModel } from './ribbon-checkbox-settings-model';import { RibbonColorPickerSettings } from './ribbon-colorpicker-settings';import { RibbonColorPickerSettingsModel } from './ribbon-colorpicker-settings-model';import { RibbonComboBoxSettings } from './ribbon-combobox-settings';import { RibbonComboBoxSettingsModel } from './ribbon-combobox-settings-model';import { RibbonDropDownSettings } from './ribbon-dropdown-settings';import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';import { RibbonTooltip } from './ribbon-tooltip';import { RibbonTooltipModel } from './ribbon-tooltip-model';
+import { ChildProperty, Complex, Property } from '@syncfusion/ej2-base';import { RibbonItemType, RibbonItemSize, DisplayMode } from '../base/interface';import { RibbonButtonSettings } from './ribbon-button-settings';import { RibbonButtonSettingsModel } from './ribbon-button-settings-model';import { RibbonCheckBoxSettings } from './ribbon-checkbox-settings';import { RibbonCheckBoxSettingsModel } from './ribbon-checkbox-settings-model';import { RibbonColorPickerSettings } from './ribbon-colorpicker-settings';import { RibbonColorPickerSettingsModel } from './ribbon-colorpicker-settings-model';import { RibbonComboBoxSettings } from './ribbon-combobox-settings';import { RibbonComboBoxSettingsModel } from './ribbon-combobox-settings-model';import { RibbonDropDownSettings } from './ribbon-dropdown-settings';import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';import { RibbonTooltip } from './ribbon-tooltip';import { RibbonTooltipModel } from './ribbon-tooltip-model';import { RibbonGroupButtonSettingsModel } from './ribbon-group-button-settings-model';import { RibbonGroupButtonSettings } from './ribbon-group-button-settings';
 
 /**
  * Interface for a class RibbonItem
@@ -47,6 +47,9 @@ export interface RibbonItemModel {
      * `ActiveSize` property is passed as string in template context.
      *
      * @default ''
+     * @angularType string | object | HTMLElement
+     * @reactType string | function | JSX.Element | HTMLElement
+     * @vueType string | function | HTMLElement
      * @aspType string
      */
     itemTemplate?: string | HTMLElement | Function;
@@ -117,4 +120,11 @@ export interface RibbonItemModel {
      */
     splitButtonSettings?: RibbonSplitButtonSettingsModel;
 
+    /**
+     * Defines the properties for group button in Ribbon
+     *
+     * @default {}
+     */
+    groupButtonSettings?: RibbonGroupButtonSettingsModel;
+
 }

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

@@ -7,6 +7,7 @@ import { RibbonComboBoxSettingsModel } from './ribbon-combobox-settings-model';
 import { RibbonDropDownSettingsModel } from './ribbon-dropdown-settings-model';
 import { RibbonSplitButtonSettingsModel } from './ribbon-splitbutton-settings-model';
 import { RibbonTooltipModel } from './ribbon-tooltip-model';
+import { RibbonGroupButtonSettingsModel } from './ribbon-group-button-settings-model';
 /**
  * Defines the ribbon item.
  */
@@ -48,6 +49,9 @@ export declare class RibbonItem extends ChildProperty<RibbonItem> {
      * `ActiveSize` property is passed as string in template context.
      *
      * @default ''
+     * @angularType string | object | HTMLElement
+     * @reactType string | function | JSX.Element | HTMLElement
+     * @vueType string | function | HTMLElement
      * @aspType string
      */
     itemTemplate: string | HTMLElement | Function;
@@ -108,6 +112,12 @@ export declare class RibbonItem extends ChildProperty<RibbonItem> {
      * @default {}
      */
     splitButtonSettings: RibbonSplitButtonSettingsModel;
+    /**
+     * Defines the properties for group button in Ribbon
+     *
+     * @default {}
+     */
+    groupButtonSettings: RibbonGroupButtonSettingsModel;
     /**
      * @param {Object} prop - Gets the property of item.
      * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.

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

@@ -26,6 +26,7 @@ import { RibbonComboBoxSettings } from './ribbon-combobox-settings';
 import { RibbonDropDownSettings } from './ribbon-dropdown-settings';
 import { RibbonSplitButtonSettings } from './ribbon-splitbutton-settings';
 import { RibbonTooltip } from './ribbon-tooltip';
+import { RibbonGroupButtonSettings } from './ribbon-group-button-settings';
 /**
  * Defines the ribbon item.
  */
@@ -88,6 +89,9 @@ var RibbonItem = /** @class */ (function (_super) {
     __decorate([
         Complex({}, RibbonSplitButtonSettings)
     ], RibbonItem.prototype, "splitButtonSettings", void 0);
+    __decorate([
+        Complex({}, RibbonGroupButtonSettings)
+    ], RibbonItem.prototype, "groupButtonSettings", void 0);
     return RibbonItem;
 }(ChildProperty));
 export { RibbonItem };

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

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

package/src/ribbon/modules/index.js

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

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

@@ -0,0 +1,112 @@
+import { Component } from '@syncfusion/ej2-base';
+import { BackStageMenuModel, BackstageItemModel } from '../models/index';
+import { commonProperties, Ribbon } from '../base/index';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonBackstage extends Component<HTMLElement> {
+    private parent;
+    private backstageButton;
+    private popupEle;
+    private menuCtrl;
+    private footerMenuCtrl;
+    private backstageButtonEle;
+    private closeBtn;
+    private popupHTMLElement;
+    private backstageContentEle;
+    private ulMenuElem;
+    private isBackButtonClicked;
+    private menuWrapper;
+    private contentItem;
+    private backstageTempEle;
+    private itemsWrapperEle;
+    constructor(parent: Ribbon);
+    /**
+    * @private
+    * @returns {void}
+    */
+    protected render(): void;
+    /**
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void;
+    protected getPersistData(): string;
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected onPropertyChanged(): void;
+    protected getModuleName(): string;
+    protected destroy(): void;
+    /**
+     * Creates Backstage Menu
+     *
+     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage.
+     * @returns {void}
+     * @hidden
+     */
+    createBackStage(backStageOptions: BackStageMenuModel): void;
+    private onClickEvent;
+    private addBackStageMenuTooltip;
+    private checkMenuItems;
+    private createBackStagePopup;
+    private updatePopupPositionOnRtl;
+    private createBackstageMenu;
+    private cloneMenuItem;
+    private cloneFooterMenuItem;
+    private createBackStageContent;
+    private createBackStageTemplate;
+    private menuSelect;
+    /**
+     * setRtl
+     *
+     * @param {commonProperties} commonProp - Get the common property of ribbon.
+     * @returns {void}
+     * @hidden
+     */
+    setCommonProperties(commonProp: commonProperties): void;
+    /**
+     * Update Backstage menu
+     *
+     * @param {BackStageMenuModel} backStageOptions - Gets the property of backstage menu.
+     * @returns {void}
+     * @hidden
+     */
+    updateBackStageMenu(backStageOptions: BackStageMenuModel): void;
+    private destroyMenu;
+    private destroyDDB;
+    private removeBackstageMenuTooltip;
+    /**
+     * Add items to Backstage Menu.
+     *
+     * @param {BackstageItemModel[]} 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}
+     */
+    addBackstageItems(items: BackstageItemModel[], target: string, isAfter: boolean, isUniqueId?: boolean): void;
+    /**
+     * Remove items from Backstage Menu.
+     *
+     * @param {string[]} items - Gets the items to be removed.
+     * @param {boolean} isUniqueId - Gets whether the target provided is uniqueId or not.
+     * @returns {void}
+     */
+    removeBackstageItems(items: string[], isUniqueId?: boolean): void;
+    /**
+     * Renders the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    showBackstage(): void;
+    /**
+     * Hides the backstage dynamically.
+     *
+     * @returns {void}
+     */
+    hideBackstage(): void;
+}