@syncfusion/ej2-ribbon 21.1.35

package/src/ribbon/base/interface.js

@@ -0,0 +1,106 @@
+/**
+ * Defines the layout types of ribbon.
+ */
+export var RibbonLayout;
+(function (RibbonLayout) {
+    /**
+     * Displays the ribbon tab content in classic layout.
+     */
+    RibbonLayout["Classic"] = "Classic";
+    /**
+     * Displays the ribbon tab content in simplified layout.
+     */
+    RibbonLayout["Simplified"] = "Simplified";
+})(RibbonLayout || (RibbonLayout = {}));
+/**
+ * Defines the alignment of the items in the ribbon group.
+ */
+export var ItemOrientation;
+(function (ItemOrientation) {
+    /**
+     * Displays the collection of items in rows.
+     */
+    ItemOrientation["Row"] = "Row";
+    /**
+     * Displays the collection of items in column.
+     */
+    ItemOrientation["Column"] = "Column";
+})(ItemOrientation || (ItemOrientation = {}));
+/**
+ * Defines the current size of the ribbon item in normal mode.
+ *
+ * @aspNumberEnum
+ */
+export var RibbonItemSize;
+(function (RibbonItemSize) {
+    /**
+     * The item appears with large icon and text at the bottom.
+     */
+    RibbonItemSize[RibbonItemSize["Large"] = 4] = "Large";
+    /**
+     * The item appears with small icon and text at the right.
+     */
+    RibbonItemSize[RibbonItemSize["Medium"] = 2] = "Medium";
+    /**
+     * The item appears with small icon only.
+     */
+    RibbonItemSize[RibbonItemSize["Small"] = 1] = "Small";
+})(RibbonItemSize || (RibbonItemSize = {}));
+/**
+ * Defines how to show an item in ribbon simplified layout.
+ *
+ * @aspNumberEnum
+ */
+export var DisplayMode;
+(function (DisplayMode) {
+    /**
+     * The item appears in the simplified layout group.
+     */
+    DisplayMode[DisplayMode["Simplified"] = 2] = "Simplified";
+    /**
+     * The item appears in overflow popup.
+     */
+    DisplayMode[DisplayMode["Overflow"] = 1] = "Overflow";
+    /**
+     * The item appears in both simplified layout group and overflow popup based on ribbon overflow state.
+     */
+    DisplayMode[DisplayMode["Auto"] = 3] = "Auto";
+    /**
+     * The item is hidden in simplified mode.
+     */
+    DisplayMode[DisplayMode["None"] = 0] = "None";
+})(DisplayMode || (DisplayMode = {}));
+/**
+ * Defines the type of the ribbon item.
+ */
+export var RibbonItemType;
+(function (RibbonItemType) {
+    /**
+     * Renders button as ribbon item.
+     */
+    RibbonItemType["Button"] = "Button";
+    /**
+     * Renders checkbox as ribbon item.
+     */
+    RibbonItemType["CheckBox"] = "CheckBox";
+    /**
+     * Renders color picker as ribbon item.
+     */
+    RibbonItemType["ColorPicker"] = "ColorPicker";
+    /**
+     * Renders combobox as ribbon item.
+     */
+    RibbonItemType["ComboBox"] = "ComboBox";
+    /**
+     * Renders dropdownbutton as ribbon item.
+     */
+    RibbonItemType["DropDown"] = "DropDown";
+    /**
+     * Renders splitbutton as ribbon item.
+     */
+    RibbonItemType["SplitButton"] = "SplitButton";
+    /**
+     * Renders the template content as ribbon item.
+     */
+    RibbonItemType["Template"] = "Template";
+})(RibbonItemType || (RibbonItemType = {}));

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

@@ -0,0 +1,129 @@
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } 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, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, EJ2Control, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } 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 } 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 {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 the properties of ribbon file menu.
+     *
+     * @default {}
+     */
+    fileMenu?: FileMenuSettingsModel;
+
+    /**
+     * 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[];
+
+    /**
+     * 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 ''
+     * @aspType string
+     */
+    helpPaneTemplate?: string | HTMLElement;
+
+    /**
+     * 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 launcher icon of the group is clicked.
+     *
+     * @event launcherIconClick
+     */
+    launcherIconClick?: EmitType<LauncherClickEventArgs>;
+
+}

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

@@ -0,0 +1,357 @@
+import { Component, EmitType } from '@syncfusion/ej2-base';
+import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base';
+import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
+import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel } from '../models/index';
+import { RibbonModel } from './ribbon-model';
+import { ExpandCollapseEventArgs, LauncherClickEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
+import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';
+import { RibbonFileMenu } from '../modules/index';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+/**
+ * The Ribbon Component is a structured layout to manage tools with tabs and groups.
+ */
+export declare class Ribbon extends Component<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     * 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 the properties of ribbon file menu.
+     *
+     * @default {}
+     */
+    fileMenu: FileMenuSettingsModel;
+    /**
+     * 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[];
+    /**
+     * 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 ''
+     * @aspType string
+     */
+    helpPaneTemplate: string | HTMLElement;
+    /**
+     * 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 launcher icon of the group is clicked.
+     *
+     * @event launcherIconClick
+     */
+    launcherIconClick: EmitType<LauncherClickEventArgs>;
+    /**
+     * The `ribbonButtonModule` is used to create and manipulate buttons in ribbon item.
+     */
+    ribbonButtonModule: RibbonButton;
+    /**
+     * The `ribbonDropDownModule` is used to create and manipulate dropdown buttons in ribbon item.
+     */
+    ribbonDropDownModule: RibbonDropDown;
+    /**
+     * The `ribbonSplitButtonModule` is used to create and manipulate split buttons in ribbon item.
+     */
+    ribbonSplitButtonModule: RibbonSplitButton;
+    /**
+     * The `ribbonCheckBoxModule` is used to create and manipulate checkbox in ribbon item.
+     */
+    ribbonCheckBoxModule: RibbonCheckBox;
+    /**
+     * The `ribbonColorPickerModule` is used to create and manipulate color picker in ribbon item.
+     */
+    ribbonColorPickerModule: RibbonColorPicker;
+    /**
+     * The `ribbonComboBoxModule` is used to create and manipulate combobox in ribbon item.
+     */
+    ribbonComboBoxModule: RibbonComboBox;
+    /**
+     * The `ribbonFileMenuModule` is used to create and manipulate the ribbon file menu.
+     */
+    ribbonFileMenuModule: RibbonFileMenu;
+    private idIndex;
+    private isAddRemove;
+    private collapseButton;
+    private ribbonTempEle;
+    private scrollModule;
+    /** @hidden */
+    overflowDDB: DropDownButton;
+    /** @hidden */
+    tabsInternal: RibbonTabModel[];
+    /** @hidden */
+    tabObj: Tab;
+    /** @hidden */
+    tooltipData: ribbonTooltipData[];
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param  {RibbonModel} options - Specifies the ribbon model
+     * @param  {string|HTMLDivElement} element - Specifies the target element
+     */
+    constructor(options?: RibbonModel, element?: string | HTMLElement);
+    /**
+     * Initialize the control rendering.
+     *
+     * @returns {void}
+     * @private
+     */
+    protected render(): void;
+    protected preRender(): void;
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    protected getPersistData(): string;
+    /**
+     * Get component name.
+     *
+     * @returns {string} - Module name
+     * @private
+     */
+    protected getModuleName(): string;
+    /**
+     * To provide the array of modules needed for component rendering
+     *
+     * @returns {ModuleDeclaration[]} - returns module declaration.
+     * @hidden
+     */
+    protected requiredModules(): ModuleDeclaration[];
+    private initialize;
+    private wireEvents;
+    private resizeHandler;
+    private renderTabs;
+    private minimize;
+    private toggleLayout;
+    private tabCreated;
+    private ribbonTabSelected;
+    private checkOverflow;
+    private checkSimplifiedItemShrinking;
+    private checkSimplifiedItemExpanding;
+    private createSimplfiedOverflow;
+    private updatePopupItems;
+    private removeSimplfiedOverflow;
+    private createOverflowPopup;
+    private addOverflowEvents;
+    private createOfTabContainer;
+    private checkGroupShrinking;
+    private checkLargeToMedium;
+    private checkMediumToSmall;
+    private checkGroupExpanding;
+    private checkSmallToMedium;
+    private checkMediumToLarge;
+    private setItemSize;
+    private createOverflowDropdown;
+    private removeOverflowDropdown;
+    private removeDropdown;
+    private getGroupResizeOrder;
+    private destroyScroll;
+    private clearOverflowDropDown;
+    private ribbonTabSelecting;
+    private createTabItems;
+    private renderInitialTab;
+    private addOverflowButton;
+    private removeOverflowButton;
+    private removeOverflowEvent;
+    private createGroupContainer;
+    private addExpandCollapse;
+    private removeExpandCollapse;
+    private reRenderTabs;
+    private switchLayout;
+    private launcherIconClicked;
+    private createGroups;
+    private validateItemSize;
+    private createCollection;
+    private createItems;
+    private createHelpPaneTemplate;
+    private createTemplateContent;
+    private renderItemTemplate;
+    private checkID;
+    private updateCommonProperty;
+    private removeLauncherIcon;
+    private destroyTabItems;
+    private destroyFunction;
+    private getItemModuleName;
+    private clearOverflowResize;
+    /**
+     * Refreshes the layout.
+     *
+     * @returns {void}
+     */
+    refreshLayout(): void;
+    /**
+     * Selects the tab
+     *
+     * @param  {string} tabId - Gets the tab ID
+     * @returns {void}
+     */
+    selectTab(tabId: string): void;
+    /**
+     * Adds the ribbon tab.
+     *
+     * @param {RibbonTabModel} tab - Gets the ribbon tab model
+     * @param {string} targetId  - Gets the ID of the target tab to add the new tab.
+     * @param {boolean} isAfter - Defines whether the tab is added before or after the target.
+     * @returns {void}
+     */
+    addTab(tab: RibbonTabModel, targetId?: string, isAfter?: boolean): void;
+    /**
+     * Removes the ribbon tab.
+     *
+     * @param {string} tabId - Gets the tab ID
+     * @returns {void}
+     */
+    removeTab(tabId: string): void;
+    /**
+     * Adds the ribbon group.
+     *
+     * @param {string} tabId - Gets the tab ID.
+     * @param {RibbonGroupModel} group - Gets the ribbon group model.
+     * @param {string} targetId - Gets the ID of the target group to add the new group.
+     * @param {boolean} isAfter - Defines whether the group is added before or after the target.
+     * @returns {void}
+     */
+    addGroup(tabId: string, group: RibbonGroupModel, targetId?: string, isAfter?: boolean): void;
+    /**
+     * Removes the ribbon group.
+     *
+     * @param {string} groupId -Gets the group ID.
+     * @returns {void}
+     */
+    removeGroup(groupId: string): void;
+    /**
+     * adds the ribbon collection.
+     *
+     * @param {string} groupId - Gets the ribbon group ID.
+     * @param {RibbonCollectionModel} collection - Gets the ribbon collection model.
+     * @param {string} targetId - Gets the ID of the target collection to add the new collection.
+     * @param {boolean} isAfter - Defines whether the collection is added before or after the target.
+     * @returns {void}
+     */
+    addCollection(groupId: string, collection: RibbonCollectionModel, targetId?: string, isAfter?: boolean): void;
+    /**
+     * Removes the ribbon collection.
+     *
+     * @param {string} collectionId - Gets the collection ID.
+     * @returns {void}
+     */
+    removeCollection(collectionId: string): void;
+    /**
+     * Adds ribbon item.
+     *
+     * @param {string} collectionId - Gets the collection ID.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {string} targetId - Gets the ID of the target item to add the new item.
+     * @param {boolean} isAfter - Defines whether the item is added before or after the target.
+     * @returns {void}
+     */
+    addItem(collectionId: string, item: RibbonItemModel, targetId?: string, isAfter?: boolean): void;
+    /**
+     * Removes ribbon item.
+     *
+     * @param {string} itemId - Gets the item ID.
+     * @returns {void}
+     */
+    removeItem(itemId: string): void;
+    private removeItemElement;
+    /**
+     * Enables ribbon item.
+     *
+     * @param {string} itemId - Gets the item ID.
+     * @returns {void}
+     */
+    enableItem(itemId: string): void;
+    /**
+     * Disables ribbon item.
+     *
+     * @param {string} itemId - Gets the item ID.
+     * @returns {void}
+     */
+    disableItem(itemId: string): void;
+    private enableDisableItem;
+    private unwireEvents;
+    destroy(): void;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {RibbonModel} newProp - Specifies new properties
+     * @param  {RibbonModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp: RibbonModel, oldProp?: RibbonModel): void;
+}