@syncfusion/ej2-navigations 30.2.7 → 31.1.17

package/dist/ts/menu/menu.ts

@@ -0,0 +1,313 @@
+/* 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';
+
+/**
+ * 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 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
+     * @aspType string
+     */
+    @Property(null)
+    public template: string | Function;
+
+    /**
+     * 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;
+
+    /**
+     * 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
+     */
+    @Property(true)
+    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 (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
+                    this.template = document.querySelector(this.template).innerHTML.trim();
+                    this.clearChanges();
+                }
+            } catch (e) {
+                /* action on catch */
+            }
+            this.updateMenuItems(this.items);
+        } 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;
+            case 'template':
+                this.template = newProp.template;
+                this.refresh();
+                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 as number]].items) {
+                    items[idx[i as number]].items = [];
+                }
+                items = items[idx[i as number]].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();
+    }
+}

package/dist/ts/sidebar/index.d.ts

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

package/dist/ts/sidebar/index.ts

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

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

@@ -0,0 +1,200 @@
+import { Component, formatUnit, EventHandler, Event, isNullOrUndefined, closest, Browser } from '@syncfusion/ej2-base';import { Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, addClass, removeClass, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';
+import {SidebarPosition,SidebarType,EventArgs,ChangeEventArgs} from "./sidebar";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Sidebar
+ */
+export interface SidebarModel extends ComponentModel{
+
+    /**
+     * Specifies the size of the Sidebar in dock state.
+     * > For more details about dockSize refer to
+     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
+     *
+     * @default 'auto'
+     */
+    dockSize?: string | number;
+
+    /**
+     * Specifies the media query string for resolution, which when met opens the Sidebar.
+     * ```typescript
+     *   let defaultSidebar: Sidebar = new Sidebar({
+     *       mediaQuery:'(min-width: 600px)'
+     *   });
+     * ```
+     * > For more details about mediaQuery refer to
+     * [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) documentation.
+     *
+     * @default null
+     * @aspType string
+     */
+    mediaQuery?: string | MediaQueryList;
+
+    /**
+     * Specifies the docking state of the component.
+     * > For more details about enableDock refer to
+     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
+     *
+     * @default false
+     */
+    enableDock?: boolean;
+
+    /**
+     * Enables the expand or collapse while swiping in touch devices.
+     * This is not a sidebar property.
+     *
+     * @default 'en-US'
+     * @private
+     */
+    locale?: string;
+
+    /**
+     * Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
+     * 1. Position
+     * 2. Type
+     *
+     * @default false
+     */
+    enablePersistence?: boolean;
+
+    /**
+     * Enables the expand or collapse while swiping in touch devices.
+     *
+     * @default true
+     */
+    enableGestures?: boolean;
+
+    /**
+     * Gets or sets the Sidebar component is open or close.
+     * > When the Sidebar type is set to `Auto`,
+     * the component will be expanded in the desktop and collapsed in the mobile mode regardless of the isOpen property.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+
+    /**
+     * Specifies the Sidebar in RTL mode that displays the content in the right-to-left direction.
+     *
+     * @default false
+     */
+    enableRtl?: boolean;
+
+    /**
+     * Enable or disable the animation transitions on expanding or collapsing the Sidebar.
+     *
+     * @default true
+     */
+    animate?: boolean;
+
+    /**
+     * Specifies the height of the Sidebar.
+     *
+     * @default 'auto'
+     * @private
+     */
+    height?: string | number;
+
+    /**
+     * Specifies whether the Sidebar need to be closed or not when document area is clicked.
+     *
+     * @default false
+     */
+    closeOnDocumentClick?: boolean;
+
+    /**
+     * Specifies the position of the Sidebar (Left/Right) corresponding to the main content.
+     * > For more details about SidebarPosition refer to
+     * [`position`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#position) documentation.
+     *
+     * @default 'Left'
+     */
+    position?: SidebarPosition;
+
+    /**
+     * Allows to place the sidebar inside the target element.
+     * > For more details about target refer to
+     * [`Custom Context`](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) documentation.
+     *
+     * @default null
+     */
+    target?: HTMLElement | string;
+
+    /**
+     * Specifies the whether to apply overlay options to main content when the Sidebar is in an open state.
+     * > For more details about showBackdrop refer to
+     * [`Backdrop`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#enable-backdrop) documentation.
+     *
+     * @default false
+     */
+    showBackdrop?: boolean;
+
+    /**
+     * Specifies the expanding types of the Sidebar.
+     * * `Over` - The sidebar floats over the main content area.
+     * * `Push` - The sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
+     * * `Slide` - The sidebar translates the x and y positions of main content area based on the sidebar width.
+     * The main content area will not be adjusted within the screen width.
+     * * `Auto` - Sidebar with `Over` type in mobile resolution and `Push` type in other higher resolutions.
+     * > For more details about SidebarType refer to
+     * [`SidebarType`](../../sidebar/variations/) documentation.
+     *
+     * @default 'Auto'
+     */
+    type?: SidebarType;
+
+    /**
+     * Specifies the width of the Sidebar. By default, the width of the Sidebar sets based on the size of its content.
+     * Width can also be set in pixel values.
+     *
+     * @default 'auto'
+     */
+    width?: string | number;
+
+    /**
+     * Specifies the z-index of the Sidebar. It is applicable only when sidebar act as overlay type.
+     *
+     * @default 1000
+     * @aspType double
+     */
+    zIndex?: string | number;
+
+    /**
+     * Triggers when component is created.
+     *
+     * @event created
+     *
+     *
+     */
+    created?: EmitType<Object>;
+
+    /**
+     * Triggers when component is closed.
+     *
+     * @event close
+     */
+    close?: EmitType<EventArgs>;
+
+    /**
+     * Triggers when component is opened.
+     *
+     * @event open
+     */
+    open?: EmitType<EventArgs>;
+
+    /**
+     * Triggers when the state(expand/collapse) of the component is changed.
+     *
+     * @event change
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Triggers when component gets destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed?: EmitType<Object>;
+
+}