@syncfusion/ej2-navigations 20.1.47 → 20.1.51-10460

package/{src/context-menu/context-menu.d.ts → dist/ts/context-menu/context-menu.ts}

@@ -1,88 +1,134 @@
-/// <reference path="../common/menu-base-model.d.ts" />
-import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { ContextMenuModel } from './context-menu-model';
-import { MenuBase } from '../common/menu-base';
-import { MenuItemModel } from './../common/menu-base-model';
-/**
- * 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>
- * ```
- */
-export declare 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);
-    /**
-     * Specifies target element selector in which the ContextMenu should be opened.
-     *
-     * @default ''
-     */
-    target: string;
-    /**
-     * Specifies the filter selector for elements inside the target in that the context menu will be opened.
-     *
-     * @default ''
-     */
-    filter: string;
-    /**
-     * Specifies menu items with its properties which will be rendered as ContextMenu.
-     *
-     * @default []
-     * @aspType object
-     * @blazorType object
-     */
-    items: MenuItemModel[];
-    /**
-     * For internal use only - prerender processing.
-     *
-     * @private
-     * @returns {void}
-     */
-    protected preRender(): void;
-    protected initialize(): void;
-    /**
-     * 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}
-     */
-    open(top: number, left: number, target?: HTMLElement): void;
-    /**
-     * Closes the ContextMenu if it is opened.
-     *
-     * @function close
-     * @returns {void}
-     */
-    close(): void;
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @private
-     * @param {ContextMenuModel} newProp - Specifies new properties
-     * @param {ContextMenuModel} oldProp - Specifies old properties
-     * @returns {void}
-     */
-    onPropertyChanged(newProp: ContextMenuModel, oldProp: ContextMenuModel): void;
-    /**
-     * Get module name.
-     *
-     * @returns {string} - Module Name
-     * @private
-     */
-    protected getModuleName(): string;
-}
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path='../common/menu-base-model.d.ts'/>
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } 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';
+
+/**
+ * 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[];
+
+    /**
+     * 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 {
+        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();
+    }
+
+    /**
+     * 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;
+            }
+        }
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    protected getModuleName(): string {
+        return 'contextmenu';
+    }
+}

package/dist/ts/menu/menu.ts

@@ -0,0 +1,302 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path='../common/menu-base-model.d.ts'/>
+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 { MenuModel } from './menu-model';
+
+const VMENU: string = 'e-vertical';
+
+const SCROLLABLE: string = 'e-scrollable';
+
+const HAMBURGER: string = 'e-hamburger';
+
+/**
+ * Specifies the option for orientation mode of Menu. By default, component rendered in Horizontal orientation mode.
+ */
+export type Orientation = 'Horizontal' | 'Vertical';
+
+type objColl = { [key: string]: Object }[];
+type obj = { [key: string]: Object };
+
+/**
+ * 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>
+ * ```
+ */
+@NotifyPropertyChanges
+export class Menu extends MenuBase implements INotifyPropertyChanged {
+    private tempItems: objColl = [];
+
+    /**
+     * Specified the orientation of Menu whether it can be horizontal or vertical.
+     *
+     * @default 'Horizontal'
+     */
+    @Property('Horizontal')
+    public orientation: Orientation;
+
+    /**
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
+     * @default ''
+     */
+    @Property('')
+    public target: string;
+
+    /**
+     * Specifies the template for Menu item.
+     *
+     * @default null
+     */
+    @Property(null)
+    public template: string;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     *
+     * @default false
+     */
+    @Property(false)
+    public enableScrolling: boolean;
+
+    /**
+     * Specifies whether to enable / disable the hamburger mode in Menu.
+     *
+     * @default false
+     */
+    @Property(false)
+    public hamburgerMode: boolean;
+
+    /**
+     * Specifies the title text for hamburger mode in Menu.
+     *
+     * @default 'Menu'
+     */
+    @Property('Menu')
+    public title: string;
+
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default false
+     */
+    @Property(false)
+    public 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
+    @Complex<FieldSettingsModel>({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
+    public 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) {
+        super(options, <HTMLUListElement | string>element);
+    }
+
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    protected getModuleName(): string {
+        return 'menu';
+    }
+
+    /**
+     * For internal use only - prerender processing.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void {
+        this.isMenu = true;
+        this.element.id = this.element.id || getUniqueID('ej2-menu');
+        if (this.template) {
+            try {
+                if (document.querySelectorAll(this.template).length) {
+                    this.template = document.querySelector(this.template).innerHTML.trim();
+                    this.clearChanges();
+                }
+            } catch (e) {
+                /* action on catch */
+            }
+        } else {
+            this.updateMenuItems(this.items);
+        }
+        super.preRender();
+    }
+
+    protected initialize(): void {
+        super.initialize();
+        attributes(this.element, <{ [key: string]: string }>{ 'role': 'menubar', 'tabindex': '0' });
+        if (this.orientation === 'Vertical') {
+            this.element.classList.add(VMENU);
+            if (this.hamburgerMode && !this.target) {
+                this.element.previousElementSibling.classList.add(VMENU);
+            }
+            this.element.setAttribute('aria-orientation', 'vertical');
+        } else {
+            if (Browser.isDevice && !this.enableScrolling) {
+                this.element.parentElement.classList.add(SCROLLABLE);
+            }
+        }
+        if (this.hamburgerMode) {
+            this.element.parentElement.classList.add(HAMBURGER);
+            if (this.orientation === 'Horizontal') {
+                this.element.classList.add('e-hide-menu');
+            }
+        }
+    }
+
+    private updateMenuItems(items: MenuItemModel[]): void {
+        this.tempItems =  items as objColl;
+        this.items = [];
+        this.tempItems.map(this.createMenuItems, this);
+        this.setProperties({ items: this.items }, true);
+        this.tempItems = [];
+    }
+
+    /**
+     * 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}
+     */
+    public onPropertyChanged(newProp: MenuModel, oldProp: MenuModel): void {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+            case 'orientation':
+                if (newProp.orientation === 'Vertical') {
+                    this.element.classList.add(VMENU);
+                    if (this.hamburgerMode) {
+                        if (!this.target) { this.element.previousElementSibling.classList.add(VMENU); }
+                        this.element.classList.remove('e-hide-menu');
+                    }
+                    this.element.setAttribute('aria-orientation', 'vertical');
+                } else {
+                    this.element.classList.remove(VMENU);
+                    if (this.hamburgerMode) {
+                        if (!this.target) { this.element.previousElementSibling.classList.remove(VMENU); }
+                        this.element.classList.add('e-hide-menu');
+                    }
+                    this.element.removeAttribute('aria-orientation');
+                }
+                break;
+            case 'items':
+                if (!Object.keys(oldProp.items).length) { this.updateMenuItems(newProp.items); }
+                break;
+            case 'hamburgerMode':
+                if (!this.element.previousElementSibling) {
+                    super.createHeaderContainer();
+                }
+                if (newProp.hamburgerMode) {
+                    this.element.parentElement.classList.add(HAMBURGER);
+                    [].slice.call(this.element.getElementsByClassName('e-blankicon')).forEach((li: HTMLElement): void => {
+                        li.style[this.enableRtl ? 'paddingRight' : 'paddingLeft'] = '';
+                    });
+                } else {
+                    this.element.parentElement.classList.remove(HAMBURGER);
+                    if (this.orientation === 'Vertical') { this.setBlankIconStyle(this.element); }
+                }
+                if (this.orientation === 'Vertical') {
+                    if (!this.target) { this.element.previousElementSibling.classList.add(VMENU); }
+                    this.element.classList.remove('e-hide-menu');
+                } else {
+                    if (this.target) {
+                        this.element.previousElementSibling.classList.add(VMENU);
+                    } else {
+                        this.element.previousElementSibling.classList.remove(VMENU);
+                    }
+                    this.element.classList[newProp.hamburgerMode ? 'add' : 'remove']('e-hide-menu');
+                }
+                break;
+            case 'title':
+                if (this.hamburgerMode && this.element.previousElementSibling) {
+                    newProp.title = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(newProp.title) : newProp.title;
+                    this.element.previousElementSibling.querySelector('.e-menu-title').innerHTML = newProp.title;
+                }
+                break;
+            case 'target':
+                if (this.hamburgerMode) {
+                    this.unWireEvents(oldProp.target);
+                    this.wireEvents();
+                    if (this.orientation === 'Horizontal') {
+                        if (!newProp.target) {
+                            if (!this.element.previousElementSibling) {
+                                super.createHeaderContainer();
+                            }
+                            this.element.previousElementSibling.classList.remove(VMENU);
+                        } else {
+                            this.element.previousElementSibling.classList.add(VMENU);
+                        }
+                        this.element.classList.add('e-hide-menu');
+                    }
+                }
+                break;
+            }
+        }
+        super.onPropertyChanged(newProp, oldProp);
+    }
+
+    private createMenuItems(item: obj): void {
+        let idx: number[];
+        let i: number;
+        let items: MenuItemModel[] = this.items as objColl;
+        const pIdField: string = this.getField('parentId');
+        if (item[pIdField]) {
+            idx = this.getIndex(item[pIdField].toString(), true);
+            for (i = 0; i < idx.length; i++) {
+                if (!items[idx[i]].items) {
+                    items[idx[i]].items = [];
+                }
+                items = items[idx[i]].items;
+            }
+            items.push(item);
+        } else {
+            (<MenuItemModel[]>this.items).push(item);
+        }
+    }
+
+    /**
+     * This method is used to open the Menu in hamburger mode.
+     *
+     * @function open
+     * @returns {void}
+     */
+    public open(): void {
+        super.openHamburgerMenu();
+    }
+
+    /**
+     * Closes the Menu if it is opened in hamburger mode.
+     *
+     * @function close
+     * @returns {void}
+     */
+    public close(): void {
+        super.closeHamburgerMenu();
+    }
+}