@syncfusion/ej2-navigations 31.1.17 → 31.1.20

package/dist/ts/menu/menu.ts

@@ -1,313 +0,0 @@
-/* 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

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

package/dist/ts/sidebar/index.ts

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

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

@@ -1,200 +0,0 @@
-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>;
-
-}