@syncfusion/ej2-ribbon 22.2.12 → 23.1.38

package/src/ribbon/models/ribbon-back-button.js

@@ -0,0 +1,40 @@
+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 backstage back button.
+ */
+var BackstageBackButton = /** @class */ (function (_super) {
+    __extends(BackstageBackButton, _super);
+    function BackstageBackButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], BackstageBackButton.prototype, "text", void 0);
+    __decorate([
+        Property('')
+    ], BackstageBackButton.prototype, "iconCss", void 0);
+    __decorate([
+        Property(true)
+    ], BackstageBackButton.prototype, "visible", void 0);
+    return BackstageBackButton;
+}(ChildProperty));
+export { BackstageBackButton };

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

@@ -0,0 +1,76 @@
+import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { BackstageBackButton } from './ribbon-back-button';import { BackstageBackButtonModel } from './ribbon-back-button-model';import { BackstageItem } from './ribbon-backstage-item';import { BackstageItemModel } from './ribbon-backstage-item-model';import { RibbonTooltipModel } from './ribbon-tooltip-model';import { RibbonTooltip } from './ribbon-tooltip';
+
+/**
+ * Interface for a class BackStageMenu
+ */
+export interface BackStageMenuModel {
+
+    /**
+     * Defines the text content of backstage menu button.
+     *
+     * @default 'File'
+     */
+    text?: string;
+
+    /**
+     * Defines whether to show the backstage menu button.
+     *
+     * @default false
+     */
+    visible?: boolean;
+
+    /**
+     * Defines the height of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    height?: string;
+
+    /**
+     * Defines the width of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    width?: string;
+
+    /**
+     * Defines the selector that points to the element in which backstage will be positioned.
+     *
+     * @default null
+     */
+    target?: string | HTMLElement;
+
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default {}
+     */
+    backButton?: BackstageBackButtonModel;
+
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default []
+     * @aspType List<BackstageItem>
+     */
+    items?: BackstageItemModel[];
+
+    /**
+     * Defines the template for Backstage content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Specifies the tooltip settings for the file menu button.
+     *
+     * @default {}
+     */
+    ribbonTooltipSettings?: RibbonTooltipModel;
+
+}

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

@@ -0,0 +1,75 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { BackstageBackButtonModel } from './ribbon-back-button-model';
+import { BackstageItemModel } from './ribbon-backstage-item-model';
+import { RibbonTooltipModel } from './ribbon-tooltip-model';
+/**
+ * Defines the ribbon file menu settings.
+ */
+export declare class BackStageMenu extends ChildProperty<BackStageMenu> {
+    /**
+     * Defines the text content of backstage menu button.
+     *
+     * @default 'File'
+     */
+    text: string;
+    /**
+     * Defines whether to show the backstage menu button.
+     *
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * Defines the height of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    height: string;
+    /**
+     * Defines the width of the backstage menu.
+     *
+     * @default 'auto'
+     */
+    width: string;
+    /**
+     * Defines the selector that points to the element in which backstage will be positioned.
+     *
+     * @default null
+     */
+    target: string | HTMLElement;
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default {}
+     */
+    backButton: BackstageBackButtonModel;
+    /**
+     * Defines the properties of ribbon backstage back button.
+     *
+     * @default []
+     * @aspType List<BackstageItem>
+     */
+    items: BackstageItemModel[];
+    /**
+     * Defines the template for Backstage content.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Specifies the tooltip settings for the file menu button.
+     *
+     * @default {}
+     */
+    ribbonTooltipSettings: RibbonTooltipModel;
+    /**
+     * @param {Object} prop - Gets the property of Backstage Menu.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}

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

@@ -0,0 +1,70 @@
+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, Complex, Collection } from '@syncfusion/ej2-base';
+import { BackstageBackButton } from './ribbon-back-button';
+import { BackstageItem } from './ribbon-backstage-item';
+import { RibbonTooltip } from './ribbon-tooltip';
+/**
+ * Defines the ribbon file menu settings.
+ */
+var BackStageMenu = /** @class */ (function (_super) {
+    __extends(BackStageMenu, _super);
+    function BackStageMenu() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of Backstage Menu.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    BackStageMenu.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property('File')
+    ], BackStageMenu.prototype, "text", void 0);
+    __decorate([
+        Property(false)
+    ], BackStageMenu.prototype, "visible", void 0);
+    __decorate([
+        Property('auto')
+    ], BackStageMenu.prototype, "height", void 0);
+    __decorate([
+        Property('auto')
+    ], BackStageMenu.prototype, "width", void 0);
+    __decorate([
+        Property(null)
+    ], BackStageMenu.prototype, "target", void 0);
+    __decorate([
+        Complex({}, BackstageBackButton)
+    ], BackStageMenu.prototype, "backButton", void 0);
+    __decorate([
+        Collection([], BackstageItem)
+    ], BackStageMenu.prototype, "items", void 0);
+    __decorate([
+        Property('')
+    ], BackStageMenu.prototype, "template", void 0);
+    __decorate([
+        Complex({}, RibbonTooltip)
+    ], BackStageMenu.prototype, "ribbonTooltipSettings", void 0);
+    return BackStageMenu;
+}(ChildProperty));
+export { BackStageMenu };

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

@@ -0,0 +1,62 @@
+import { ChildProperty, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import {BackstageItemClickArgs} from "./ribbon-backstage-item";
+
+/**
+ * Interface for a class BackstageItem
+ */
+export interface BackstageItemModel {
+
+    /**
+     * Specifies the text for backstage item.
+     *
+     * @default ''
+     */
+    text?: string;
+
+    /**
+     * Defines a unique identifier for the backstage item.
+     *
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Specifies the backstage item’s content as selector.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    content?: string | Function;
+
+    /**
+     * Specifies the icon css class for backstage back button.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Specifies the separator between the backstage items.
+     *
+     * @default false
+     */
+    separator?: boolean;
+
+    /**
+     * Specifies whether the item is placed in Footer section of backstage.
+     *
+     * @default false
+     */
+    isFooter?: boolean;
+
+    /**
+     * Event triggers when backstage item is clicked.
+     *
+     * @event backStageItemClick
+     */
+    backStageItemClick?: EmitType<BackstageItemClickArgs>;
+
+}

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

@@ -0,0 +1,74 @@
+import { ChildProperty, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import { BackstageItemModel } from './ribbon-backstage-item-model';
+/**
+ * Defines the ribbon backstage back button.
+ */
+export declare class BackstageItem extends ChildProperty<BackstageItem> {
+    /**
+     * Specifies the text for backstage item.
+     *
+     * @default ''
+     */
+    text: string;
+    /**
+     * Defines a unique identifier for the backstage item.
+     *
+     * @default ''
+     */
+    id: string;
+    /**
+     * Specifies the backstage item’s content as selector.
+     *
+     * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    content: string | Function;
+    /**
+     * Specifies the icon css class for backstage back button.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Specifies the separator between the backstage items.
+     *
+     * @default false
+     */
+    separator: boolean;
+    /**
+     * Specifies whether the item is placed in Footer section of backstage.
+     *
+     * @default false
+     */
+    isFooter: boolean;
+    /**
+     * Event triggers when backstage item is clicked.
+     *
+     * @event backStageItemClick
+     */
+    backStageItemClick: EmitType<BackstageItemClickArgs>;
+}
+/**
+ * Event triggers when backstage item is clicked.
+ */
+export interface BackstageItemClickArgs extends BaseEventArgs {
+    /**
+     * Set to true when the event has to be canceled, else false.
+     */
+    cancel: boolean;
+    /**
+     * Provides the backstage menu item object.
+     */
+    item?: BackstageItemModel;
+    /**
+     *  Provides the HTML element of the backstage menu item clicked.
+     */
+    target: HTMLElement;
+    /**
+     * Returns true when back button item is clicked.
+     */
+    isBackButton: boolean;
+}

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

@@ -0,0 +1,52 @@
+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, Event } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon backstage back button.
+ */
+var BackstageItem = /** @class */ (function (_super) {
+    __extends(BackstageItem, _super);
+    function BackstageItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], BackstageItem.prototype, "text", void 0);
+    __decorate([
+        Property('')
+    ], BackstageItem.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], BackstageItem.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], BackstageItem.prototype, "iconCss", void 0);
+    __decorate([
+        Property(false)
+    ], BackstageItem.prototype, "separator", void 0);
+    __decorate([
+        Property(false)
+    ], BackstageItem.prototype, "isFooter", void 0);
+    __decorate([
+        Event()
+    ], BackstageItem.prototype, "backStageItemClick", void 0);
+    return BackstageItem;
+}(ChildProperty));
+export { BackstageItem };

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

@@ -82,6 +82,9 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     footerTemplate?: string | Function;
@@ -90,6 +93,9 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     groupTemplate?: string | Function;
@@ -98,6 +104,9 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate?: string | Function;
@@ -113,6 +122,9 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate?: string | Function;
@@ -121,6 +133,9 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     noRecordsTemplate?: string | Function;

package/src/ribbon/models/ribbon-combobox-settings.d.ts

@@ -78,6 +78,9 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     footerTemplate: string | Function;
@@ -85,6 +88,9 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     groupTemplate: string | Function;
@@ -92,6 +98,9 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate: string | Function;
@@ -105,6 +114,9 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate: string | Function;
@@ -112,6 +124,9 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     noRecordsTemplate: string | Function;

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

@@ -48,6 +48,13 @@ export interface RibbonDropDownSettingsModel {
      */
     target?: string | HTMLElement;
 
+    /**
+     * Specifies whether to create popup element on open.
+     *
+     * @default false
+     */
+    createPopupOnClick?: boolean;
+
     /**
      * Triggers before closing the DropDownButton popup.
      *

package/src/ribbon/models/ribbon-dropdown-settings.d.ts

@@ -41,6 +41,12 @@ export declare class RibbonDropDownSettings extends ChildProperty<RibbonDropDown
      * @aspType string
      */
     target: string | HTMLElement;
+    /**
+     * Specifies whether to create popup element on open.
+     *
+     * @default false
+     */
+    createPopupOnClick: boolean;
     /**
      * Triggers before closing the DropDownButton popup.
      *

package/src/ribbon/models/ribbon-dropdown-settings.js

@@ -54,6 +54,9 @@ var RibbonDropDownSettings = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], RibbonDropDownSettings.prototype, "target", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
     __decorate([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);

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

@@ -46,6 +46,9 @@ export interface FileMenuSettingsModel {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate?: string | Function;
@@ -54,6 +57,9 @@ export interface FileMenuSettingsModel {
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @angularType string | HTMLElement
+     * @reactType string | HTMLElement | JSX.Element
+     * @vueType string | HTMLElement
      * @aspType string
      */
     popupTemplate?: string | HTMLElement;

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

@@ -40,6 +40,9 @@ export declare class FileMenuSettings extends ChildProperty<FileMenuSettings> {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate: string | Function;
@@ -47,6 +50,9 @@ export declare class FileMenuSettings extends ChildProperty<FileMenuSettings> {
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @angularType string | HTMLElement
+     * @reactType string | HTMLElement | JSX.Element
+     * @vueType string | HTMLElement
      * @aspType string
      */
     popupTemplate: string | HTMLElement;

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

@@ -0,0 +1,50 @@
+import { ChildProperty, Event, EmitType, Property, Complex } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class RibbonGroupButtonItem
+ */
+export interface RibbonGroupButtonItemModel {
+
+    /**
+     * 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>;
+
+}