@syncfusion/ej2-ribbon 30.2.4 → 31.1.17

package/dist/ts/ribbon/base/interface.ts

@@ -0,0 +1,424 @@
+import { BaseEventArgs } from '@syncfusion/ej2-base';
+import { RibbonCollectionModel, RibbonGalleryItemModel, RibbonGroupButtonItemModel, RibbonGroupModel, RibbonItemModel, RibbonTooltipModel } from '../models';
+
+/**
+ * Defines the layout types of ribbon.
+ */
+export enum RibbonLayout {
+    /**
+     * Displays the ribbon tab content in classic layout.
+     */
+    Classic = 'Classic',
+    /**
+     * Displays the ribbon tab content in simplified layout.
+     */
+    Simplified = 'Simplified'
+}
+
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+export enum ItemOrientation {
+    /**
+     * Displays the collection of items in rows.
+     */
+    Row = 'Row',
+    /**
+     * Displays the collection of items in column.
+     */
+    Column = 'Column'
+}
+
+/**
+ * Defines the current size of the ribbon item in normal mode.
+ *
+ * @aspNumberEnum
+ */
+export enum RibbonItemSize {
+    /**
+     * The item appears with large icon and text at the bottom.
+     */
+    Large = 1 << 2,
+    /**
+     * The item appears with small icon and text at the right.
+     */
+    Medium = 1 << 1,
+    /**
+     * The item appears with small icon only.
+     */
+    Small = 1 << 0
+}
+
+/**
+ * Defines how to show an item in ribbon simplified layout.
+ *
+ * @aspNumberEnum
+ */
+export enum DisplayMode {
+    /**
+     * The item appears in the classic layout group.
+     */
+    Classic = 1 << 2,
+    /**
+     * The item appears in the simplified layout group.
+     */
+    Simplified = 1 << 1,
+    /**
+     * The item appears in overflow popup.
+     */
+    Overflow = 1 << 0,
+    /**
+     * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
+     */
+    Auto = Classic | Simplified | Overflow,
+}
+
+/**
+ * Defines the type of the ribbon item.
+ */
+export enum RibbonItemType {
+    /**
+     * Renders button as ribbon item.
+     */
+    Button = 'Button',
+    /**
+     * Renders checkbox as ribbon item.
+     */
+    CheckBox = 'CheckBox',
+    /**
+     * Renders color picker as ribbon item.
+     */
+    ColorPicker = 'ColorPicker',
+    /**
+     * Renders combobox as ribbon item.
+     */
+    ComboBox = 'ComboBox',
+    /**
+     * Renders dropdownbutton as ribbon item.
+     */
+    DropDown = 'DropDown',
+    /**
+     * Renders splitbutton as ribbon item.
+     */
+    SplitButton = 'SplitButton',
+    /**
+     * Renders the group button content as ribbon item.
+     */
+    GroupButton = 'GroupButton',
+    /**
+     * Renders the gallery as ribbon item.
+     */
+    Gallery = 'Gallery',
+    /**
+     * Renders the template content as ribbon item.
+     */
+    Template = 'Template'
+}
+
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+export enum RibbonGroupButtonSelection {
+    /**
+     * Allows selecting single button from button group.
+     */
+    Single = 'Single',
+    /**
+     * Allows selecting multiple buttons from button group.
+     */
+    Multiple = 'Multiple'
+}
+
+/**
+ * Event triggers before selecting the tab item.
+ */
+export interface TabSelectingEventArgs extends BaseEventArgs {
+    /**
+     * Defines whether to cancel the event or not.
+     */
+    cancel: boolean;
+    /**
+     * Specifies whether the event is triggered via user interaction or programmatic way.
+     */
+    isInteracted: boolean;
+    /**
+     * Defines the index of the previously selected tab.
+     */
+    previousIndex: number;
+    /**
+     * Defines the index of the selected tab.
+     */
+    selectedIndex: number;
+    /**
+     * Defines whether the tab is a contextual tab.
+     */
+    isContextual: boolean;
+}
+
+/**
+ * Event triggers after selecting the tab item.
+ */
+export interface TabSelectedEventArgs extends BaseEventArgs {
+    /**
+     *  Defines the index of the previously selected tab.
+     */
+    previousIndex: number;
+    /**
+     *  Defines the index of the selected tab.
+     */
+    selectedIndex: number;
+    /**
+     * Defines whether the tab is a contextual tab.
+     */
+    isContextual: boolean;
+}
+
+/**
+ * Event triggers before expanding and before collapsing the ribbon.
+ */
+export interface ExpandCollapseEventArgs extends BaseEventArgs {
+    /**
+     *  Defines whether to cancel the event or not.
+     */
+    cancel: boolean;
+}
+
+/**
+ * Event triggers when the ribbon layout is switched.
+ */
+export interface LayoutSwitchedEventArgs extends BaseEventArgs {
+    /**
+     *  Specifies the active layout of the ribbon.
+     */
+    activeLayout: string;
+    /**
+     *  Provides the actual native event.
+     */
+    event: Event;
+}
+
+/**
+ * Event Triggers when the launcher icon is clicked.
+ */
+export interface LauncherClickEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the ID of the group in which the launcher icon is present.
+     */
+    groupId: string;
+}
+
+/**
+ * Triggers before clicking the button from group button
+ */
+export interface BeforeClickGroupButtonEventArgs extends BaseEventArgs {
+    /**
+     *  Defines whether to cancel the event or not.
+     */
+    cancel: boolean;
+    /**
+     *  Defines the collection of previous selected group button item(s).
+     */
+    previousItems: RibbonGroupButtonItemModel[];
+    /**
+     *  Defines the collection of current selecting group button item(s).
+     */
+    selectingItems: RibbonGroupButtonItemModel[];
+}
+
+/**
+ * Triggers after clicking the button from group button.
+ */
+export interface ClickGroupButtonEventArgs extends BaseEventArgs {
+    /**
+     *  Defines the collection of previous selected group button item(s).
+     */
+    previousItems: RibbonGroupButtonItemModel[];
+    /**
+     *  Defines the collection of current selected group button item(s).
+     */
+    selectedItems: RibbonGroupButtonItemModel[];
+}
+
+/**
+ * Triggers before open / close of overflow popup menu.
+ */
+export interface OverflowPopupEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the HTML element of the overflow popup.
+     */
+    element: HTMLElement;
+    /**
+     *  Defines the original event arguments.
+     */
+    event: Event;
+    /**
+     *  Defines whether to cancel the  overflow popup open or close.
+     */
+    cancel?: boolean;
+}
+
+/**
+ * Event triggers when the gallery popup open / close.
+ */
+export interface GalleryPopupEventArgs extends BaseEventArgs {
+    /**
+     *  Defines whether to cancel the gallery popup open or close.
+     */
+    cancel: boolean;
+    /**
+     *  Provides the original event.
+     */
+    event: Event;
+    /**
+     *  Specifies name of the event.
+     */
+    name: string;
+}
+
+/**
+ * Event triggers when a user hovers over a gallery item.
+ */
+export interface GalleryHoverEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the original event.
+     */
+    event: Event;
+    /**
+     *  Specifies name of the event.
+     */
+    name: string;
+    /**
+     *  Provides gallery item.
+     */
+    item: RibbonGalleryItemModel;
+}
+
+/**
+ * Event triggers before rendering each gallery item.
+ */
+export interface GalleryItemEventArgs extends BaseEventArgs {
+    /**
+     *  Specifies name of the event.
+     */
+    name: string;
+    /**
+     *  Provides gallery item.
+     */
+    item: RibbonGalleryItemModel;
+}
+
+/**
+ * Event triggers before selecting gallery item.
+ */
+export interface GalleryBeforeSelectEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the previous selected gallery item.
+     */
+    previousItem: RibbonGalleryItemModel;
+    /**
+     *  Provides the current selecting gallery item.
+     */
+    currentItem: RibbonGalleryItemModel;
+    /**
+     *  Defines whether to cancel the selecting event or not.
+     */
+    cancel: boolean;
+    /**
+     *  Specifies name of the event.
+     */
+    name: string;
+    /**
+     *  Provides whether the change is triggered by user interaction.
+     */
+    isInteracted: boolean;
+    /**
+     *  Provides the original event.
+     */
+    event: Event;
+}
+
+/**
+ * Event triggers after selected gallery item.
+ */
+export interface GallerySelectEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the previous selected gallery item.
+     */
+    previousItem: RibbonGalleryItemModel;
+    /**
+     *  Provides the current selected gallery item.
+     */
+    currentItem: RibbonGalleryItemModel;
+    /**
+     *  Specifies name of the event.
+     */
+    name: string;
+    /**
+     *  Provides whether the change is triggered by user interaction.
+     */
+    isInteracted: boolean;
+    /**
+     *  Provides the original event.
+     */
+    event: Event;
+}
+
+/** @hidden */
+export interface itemProps {
+    item?: RibbonItemModel;
+    collection?: RibbonCollectionModel;
+    group?: RibbonGroupModel;
+    element?: HTMLElement;
+    tabIndex?: number;
+    groupIndex?: number;
+    collectionIndex?: number;
+    itemIndex?: number;
+}
+
+/** @hidden */
+export interface commonProperties {
+    enableRtl?: boolean;
+    enablePersistence?: boolean;
+    locale?: string;
+}
+
+/** @hidden */
+export interface EJ2Control {
+    destroy(): void;
+    setProperties(prop: Object, muteOnChange?: boolean): void;
+}
+
+/**
+ * @hidden
+ */
+export interface ribbonItemPropsList {
+    items?: RibbonItemModel[];
+    collections?: RibbonCollectionModel[];
+    groups?: RibbonGroupModel[];
+    id?: string;
+    setProperties?: Function;
+}
+
+/**
+ * @hidden
+ */
+export interface ribbonTooltipData {
+    id: string,
+    data: RibbonTooltipModel
+}
+
+/**
+ * @hidden
+ */
+export interface KeyTipDataType {
+    id: string,
+    keyTip: string,
+    type: string
+}
+
+/**
+ * @hidden
+ */
+export interface KeyTipElements {
+    [key: string]: object
+}

package/dist/ts/ribbon/base/ribbon-model.d.ts

@@ -0,0 +1,195 @@
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Ribbon
+ */
+export interface RibbonModel extends ComponentModel{
+
+    /**
+     * Specifies the active layout of the ribbon.
+     * Accepts one of the below values.
+     * * Classic – Renders the ribbon tab contents in classic layout.
+     * * Simplified – Renders the ribbon tab contents in single row.
+     *
+     * @isenumeration true
+     * @default RibbonLayout.Classic
+     * @asptype RibbonLayout
+     */
+    activeLayout?: RibbonLayout | string;
+
+    /**
+     * Defines one or more CSS classes to customize the appearance of ribbon.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether to enable the key tip or not.
+     *
+     * @default false
+     */
+    enableKeyTips?: boolean;
+
+    /**
+     * Defines the key tip text for the layoutSwitcher icon.
+     *
+     * @default ''
+     */
+    layoutSwitcherKeyTip?: string;
+
+    /**
+     * Defines the properties of ribbon file menu.
+     *
+     * @default {}
+     */
+    fileMenu?: FileMenuSettingsModel;
+
+    /**
+     * Defines the properties of ribbon backstage.
+     *
+     * @default {}
+     */
+    backStageMenu?: BackStageMenuModel;
+
+    /**
+     * Defines the icon CSS for the launcher icon button in group header.
+     *
+     * @default ''
+     */
+    launcherIconCss?: string;
+
+    /**
+     * Specifies whether the ribbon is minimized or not.
+     * When minimized, only the tab header is shown.
+     *
+     * @default false
+     */
+    isMinimized?: boolean;
+
+    /**
+     * Provides the localization value for the controls present in ribbon items.
+     *
+     * @default 'en-us'
+     */
+    locale?: string;
+
+    /**
+     * Specifies the index of the current active tab.
+     *
+     * @default 0
+     */
+    selectedTab?: number;
+
+    /**
+     * Specifies the animation configuration settings for showing the content of the Ribbon Tab.
+     *
+     * @default { previous: { effect: 'SlideLeftIn', duration: 600, easing: 'ease' },next: { effect: 'SlideRightIn', duration: 600, easing: 'ease' } }
+     */
+    tabAnimation?: TabAnimationSettingsModel;
+
+    /**
+     * Defines the list of ribbon tabs.
+     *
+     * @default []
+     */
+    tabs?: RibbonTabModel[];
+
+    /**
+     * Defines the properties of ribbon contextual tab.
+     *
+     * @default []
+     */
+    contextualTabs?: RibbonContextualTabSettingsModel[];
+
+    /**
+     * Specifies the width of the ribbon.
+     *
+     * @default '100%'
+     */
+    width?: string | number;
+
+    /**
+     * Specifies the template content for the help pane of ribbon.
+     * The help pane appears on the right side of the ribbon header row.
+     *
+     * @default ''
+     * @angularType string | object | HTMLElement
+     * @reactType string | function | JSX.Element | HTMLElement
+     * @vueType string | function | HTMLElement
+     * @aspType string
+     */
+    helpPaneTemplate?: string | HTMLElement | Function;
+
+    /**
+     * Defines whether to show the layout switcher button or not.
+     *
+     * @default false
+     */
+    hideLayoutSwitcher?: boolean;
+
+    /**
+     * Event triggers before selecting the tab item.
+     *
+     * @event tabSelecting
+     */
+    tabSelecting?: EmitType<TabSelectingEventArgs>;
+
+    /**
+     * Event triggers after selecting the tab item.
+     *
+     * @event tabSelected
+     */
+    tabSelected?: EmitType<TabSelectedEventArgs>;
+
+    /**
+     * Event triggers before expanding the ribbon.
+     *
+     * @event ribbonExpanding
+     */
+    ribbonExpanding?: EmitType<ExpandCollapseEventArgs>;
+
+    /**
+     * Event triggers before collapsing the ribbon.
+     *
+     * @event ribbonCollapsing
+     */
+    ribbonCollapsing?: EmitType<ExpandCollapseEventArgs>;
+
+    /**
+     * Event triggers when the ribbon layout is switched.
+     *
+     * @event ribbonLayoutSwitched
+     */
+    ribbonLayoutSwitched?: EmitType<LayoutSwitchedEventArgs>;
+
+    /**
+     * Event triggers when the launcher icon of the group is clicked.
+     *
+     * @event launcherIconClick
+     */
+    launcherIconClick?: EmitType<LauncherClickEventArgs>;
+
+    /**
+     * Event triggers once the Ribbon Component rendering is completed.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers when the overflow popup opens.
+     *
+     * @event overflowPopupOpen
+     */
+    overflowPopupOpen?: EmitType<OverflowPopupEventArgs>;
+
+    /**
+     * Event triggers when the overflow popup closes.
+     *
+     * @event overflowPopupClose
+     */
+    overflowPopupClose?: EmitType<OverflowPopupEventArgs>;
+
+}