@syncfusion/ej2-navigations 30.2.5 → 31.1.17

package/dist/ts/context-menu/context-menu.ts

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path='../common/menu-base-model.d.ts'/>
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property, removeClass, isNullOrUndefined, addClass } from '@syncfusion/ej2-base';
+import { getZindexPartial } from '@syncfusion/ej2-popups';
+import { ContextMenuModel } from './context-menu-model';
+import { MenuBase, MenuItem } from '../common/menu-base';
+import { MenuItemModel } from './../common/menu-base-model';
+const CONTEXTMENUTEMPLATE: string = 'e-contextmenu-template';
+/**
+ * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
+ * ```html
+ * <div id = 'target'></div>
+ * <ul id = 'contextmenu'></ul>
+ * ```
+ * ```typescript
+ * <script>
+ * var contextMenuObj = new ContextMenu({items: [{ text: 'Cut' }, { text: 'Copy' },{ text: 'Paste' }], target: '#target'});
+ * </script>
+ * ```
+ */
+@NotifyPropertyChanges
+export class ContextMenu extends MenuBase implements INotifyPropertyChanged {
+    /**
+     * Constructor for creating the widget.
+     *
+     * @private
+     * @param {ContextMenuModel} options - Specifies the context menu model
+     * @param {string} element - Specifies the element
+     */
+    constructor(options?: ContextMenuModel, element?: string | HTMLUListElement) {
+        super(options, <HTMLUListElement | string>element);
+    }
+
+    /**
+     * Specifies target element selector in which the ContextMenu should be opened.
+     *
+     * @default ''
+     */
+    @Property('')
+    public target: string;
+
+    /**
+     * Specifies the filter selector for elements inside the target in that the context menu will be opened.
+     *
+     * @default ''
+     */
+    @Property('')
+    public filter: string;
+
+    /**
+     * Specifies menu items with its properties which will be rendered as ContextMenu.
+     *
+     * @default []
+     * @aspType object
+     * @blazorType object
+     */
+    @Collection<MenuItemModel>([], MenuItem)
+    public items: MenuItemModel[];
+
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    @Property(null)
+    public itemTemplate: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    @Property(false)
+    public enableScrolling: boolean;
+
+    /**
+     * For internal use only - prerender processing.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void {
+        this.isMenu = false;
+        this.element.id = this.element.id || getUniqueID('ej2-contextmenu');
+        super.preRender();
+    }
+
+    protected initialize(): void {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
+        this.addTemplateClass();
+        super.initialize();
+        attributes(this.element, <{ [key: string]: string }>{ 'role': 'menubar', 'tabindex': '0' });
+        this.element.style.zIndex = getZindexPartial(this.element).toString();
+    }
+
+    /**
+     * This method is used to open the ContextMenu in specified position.
+     *
+     * @param {number} top - To specify ContextMenu vertical positioning.
+     * @param {number} left - To specify ContextMenu horizontal positioning.
+     * @param {HTMLElement} target - To calculate z-index for ContextMenu based upon the specified target.
+     * @function open
+     * @returns {void}
+     */
+    public open(top: number, left: number, target?: HTMLElement): void {
+        super.openMenu(null, null, top, left, null, target);
+    }
+
+    /**
+     * Closes the ContextMenu if it is opened.
+     *
+     * @function close
+     * @returns {void}
+     */
+    public close(): void {
+        super.closeMenu();
+    }
+
+    private addTemplateClass(): void {
+        if (!isNullOrUndefined(this.itemTemplate) && typeof this.itemTemplate === 'function' ||
+            (typeof this.itemTemplate === 'string' && this.itemTemplate !== '')) {
+            addClass([this.element], CONTEXTMENUTEMPLATE);
+        }
+    }
+
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {ContextMenuModel} newProp - Specifies new properties
+     * @param {ContextMenuModel} oldProp - Specifies old properties
+     * @returns {void}
+     */
+    public onPropertyChanged(newProp: ContextMenuModel, oldProp: ContextMenuModel): void {
+        super.onPropertyChanged(newProp, oldProp);
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+            case 'filter':
+                this.close();
+                this.filter = newProp.filter;
+                break;
+            case 'target':
+                this.unWireEvents(oldProp.target);
+                this.wireEvents();
+                break;
+            case 'itemTemplate':
+                this.itemTemplate = newProp.itemTemplate;
+                removeClass([this.element], CONTEXTMENUTEMPLATE);
+                this.addTemplateClass();
+                this.refresh();
+            }
+        }
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    protected getModuleName(): string {
+        return 'contextmenu';
+    }
+}

package/dist/ts/context-menu/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * ContextMenu modules
+ */
+export * from './context-menu';
+export * from './context-menu-model';

package/dist/ts/context-menu/index.ts

@@ -0,0 +1,5 @@
+/**
+ * ContextMenu modules
+ */
+export * from './context-menu';
+export * from './context-menu-model';

package/dist/ts/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Navigation all modules
+ */
+export * from './common/index';
+export * from './toolbar/index';
+export * from './accordion/index';
+export * from './context-menu/index';
+export * from './menu/index';
+export * from './tab/index';
+export * from './treeview/index';
+export * from './sidebar/index';
+export * from './breadcrumb/index';
+export * from './carousel/index';
+export * from './appbar/index';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/dist/ts/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Navigation all modules
+ */
+export * from './common/index';
+export * from './toolbar/index';
+export * from './accordion/index';
+export * from './context-menu/index';
+export * from './menu/index';
+export * from './tab/index';
+export * from './treeview/index';
+export * from './sidebar/index';
+export * from './breadcrumb/index';
+export * from './carousel/index';
+export * from './appbar/index';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/dist/ts/menu/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Menu modules
+ */
+export * from './menu';
+export * from './menu-model';

package/dist/ts/menu/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Menu modules
+ */
+export * from './menu';
+export * from './menu-model';

package/dist/ts/menu/menu-model.d.ts

@@ -0,0 +1,70 @@
+import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex, getUniqueID, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
+import {Orientation} from "./menu";
+import {MenuBaseModel} from "../common/menu-base-model";
+
+/**
+ * Interface for a class Menu
+ */
+export interface MenuModel extends MenuBaseModel{
+
+    /**
+     * Specified the orientation of Menu whether it can be horizontal or vertical.
+     *
+     * @default 'Horizontal'
+     */
+    orientation?: Orientation;
+
+    /**
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
+     * @default ''
+     */
+    target?: string;
+
+    /**
+     * Specifies the template for Menu item.
+     *
+     * @default null
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
+
+    /**
+     * Specifies whether to enable / disable the hamburger mode in Menu.
+     *
+     * @default false
+     */
+    hamburgerMode?: boolean;
+
+    /**
+     * Specifies the title text for hamburger mode in Menu.
+     *
+     * @default 'Menu'
+     */
+    title?: string;
+
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
+     * Specifies mapping fields from the dataSource.
+     *
+     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
+     * children: "items" }
+     */
+    // eslint:disable-next-line
+    fields?: FieldSettingsModel;
+
+}

package/dist/ts/menu/menu.d.ts

@@ -0,0 +1,127 @@
+/// <reference path="../common/menu-base-model.d.ts" />
+import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { MenuBase } from '../common/menu-base';
+import { FieldSettingsModel } from '../common/menu-base-model';
+import { MenuModel } from './menu-model';
+/**
+ * Defines the different types of orientation option available in the Menu.
+ * ```props
+ * Horizontal - It renders the menu in a horizontal orientation mode.
+ * Vertical - It renders the menu in a vertical orientation mode.
+ * ```
+ */
+export declare type Orientation = 'Horizontal' | 'Vertical';
+/**
+ * The Menu is a graphical user interface that serve as navigation headers for your application or site.
+ * ```html
+ * <ul id = 'menu'></ul>
+ * ```
+ * ```typescript
+ * <script>
+ * var menuObj = new Menu({ items: [{ text: 'Home' }, { text: 'Contact Us' },{ text: 'Login' }]});
+ * menuObj.appendTo("#menu");
+ * </script>
+ * ```
+ */
+export declare class Menu extends MenuBase implements INotifyPropertyChanged {
+    private tempItems;
+    /**
+     * Specified the orientation of Menu whether it can be horizontal or vertical.
+     *
+     * @default 'Horizontal'
+     */
+    orientation: Orientation;
+    /**
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
+     * @default ''
+     */
+    target: string;
+    /**
+     * Specifies the template for Menu item.
+     *
+     * @default null
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     *
+     * @default false
+     */
+    enableScrolling: boolean;
+    /**
+     * Specifies whether to enable / disable the hamburger mode in Menu.
+     *
+     * @default false
+     */
+    hamburgerMode: boolean;
+    /**
+     * Specifies the title text for hamburger mode in Menu.
+     *
+     * @default 'Menu'
+     */
+    title: string;
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer: boolean;
+    /**
+     * Specifies mapping fields from the dataSource.
+     *
+     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
+     * children: "items" }
+     */
+    fields: FieldSettingsModel;
+    /**
+     * Constructor for creating the component.
+     *
+     * @private
+     * @param {MenuModel} options - Specifies the menu model
+     * @param {string} element - Specifies the element
+     */
+    constructor(options?: MenuModel, element?: string | HTMLUListElement);
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    protected getModuleName(): string;
+    /**
+     * For internal use only - prerender processing.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void;
+    protected initialize(): void;
+    private updateMenuItems;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {MenuModel} newProp - Specifies the new properties.
+     * @param {MenuModel} oldProp - Specifies the old properties.
+     * @returns {void}
+     */
+    onPropertyChanged(newProp: MenuModel, oldProp: MenuModel): void;
+    private createMenuItems;
+    /**
+     * This method is used to open the Menu in hamburger mode.
+     *
+     * @function open
+     * @returns {void}
+     */
+    open(): void;
+    /**
+     * Closes the Menu if it is opened in hamburger mode.
+     *
+     * @function close
+     * @returns {void}
+     */
+    close(): void;
+}