@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

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

@@ -1,4 +1,4 @@
-import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
+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";
 
@@ -9,27 +9,60 @@ 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
      */
     template?: string;
 
     /**
      * 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;
+
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default false
+     */
+    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/src/menu/menu.d.ts

@@ -4,7 +4,11 @@ import { MenuBase } from '../common/menu-base';
 import { FieldSettingsModel } from '../common/menu-base-model';
 import { MenuModel } from './menu-model';
 /**
- * Specifies the option for orientation mode of Menu. By default, component rendered in Horizontal orientation mode.
+ * 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';
 /**
@@ -23,49 +27,99 @@ 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
      */
     template: string;
     /**
      * 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;
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default false
+     */
+    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.
-     * @returns string
+     *
      * @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
+     * Called internally if any of the property value changed.
+     *
      * @private
-     * @param {MenuModel} newProp
-     * @param {MenuModel} oldProp
-     * @returns void
+     * @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;
 }

package/src/menu/menu.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,12 +17,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path='../common/menu-base-model.d.ts'/>
 import { attributes, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
-import { Browser, Complex } from '@syncfusion/ej2-base';
+import { Browser, Complex, getUniqueID, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { MenuBase, FieldSettings } from '../common/menu-base';
 var VMENU = 'e-vertical';
 var SCROLLABLE = 'e-scrollable';
+var HAMBURGER = 'e-hamburger';
 /**
  * The Menu is a graphical user interface that serve as navigation headers for your application or site.
  * ```html
@@ -39,7 +41,10 @@ var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
     /**
      * Constructor for creating the component.
+     *
      * @private
+     * @param {MenuModel} options - Specifies the menu model
+     * @param {string} element - Specifies the element
      */
     function Menu(options, element) {
         var _this = _super.call(this, options, element) || this;
@@ -48,18 +53,22 @@ var Menu = /** @class */ (function (_super) {
     }
     /**
      * Get module name.
-     * @returns string
+     *
      * @private
+     * @returns {string} - Module Name
      */
     Menu.prototype.getModuleName = function () {
         return 'menu';
     };
     /**
      * For internal use only - prerender processing.
+     *
      * @private
+     * @returns {void}
      */
     Menu.prototype.preRender = function () {
         this.isMenu = true;
+        this.element.id = this.element.id || getUniqueID('ej2-menu');
         if (this.template) {
             try {
                 if (document.querySelectorAll(this.template).length) {
@@ -70,13 +79,10 @@ var Menu = /** @class */ (function (_super) {
             catch (e) {
                 /* action on catch */
             }
+            this.updateMenuItems(this.items);
         }
         else {
-            this.tempItems = this.items;
-            this.items = [];
-            this.tempItems.map(this.createMenuItems, this);
-            this.setProperties({ items: this.items }, true);
-            this.tempItems = [];
+            this.updateMenuItems(this.items);
         }
         _super.prototype.preRender.call(this);
     };
@@ -85,6 +91,9 @@ var Menu = /** @class */ (function (_super) {
         attributes(this.element, { '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 {
@@ -92,40 +101,127 @@ var Menu = /** @class */ (function (_super) {
                 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');
+            }
+        }
+    };
+    Menu.prototype.updateMenuItems = function (items) {
+        this.tempItems = items;
+        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
+     * Called internally if any of the property value changed.
+     *
      * @private
-     * @param {MenuModel} newProp
-     * @param {MenuModel} oldProp
-     * @returns void
+     * @param {MenuModel} newProp - Specifies the new properties.
+     * @param {MenuModel} oldProp - Specifies the old properties.
+     * @returns {void}
      */
     Menu.prototype.onPropertyChanged = function (newProp, oldProp) {
-        _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
+        var _this = this;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             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.prototype.createHeaderContainer.call(this);
+                    }
+                    if (newProp.hamburgerMode) {
+                        this.element.parentElement.classList.add(HAMBURGER);
+                        [].slice.call(this.element.getElementsByClassName('e-blankicon')).forEach(function (li) {
+                            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.prototype.createHeaderContainer.call(this);
+                                }
+                                this.element.previousElementSibling.classList.remove(VMENU);
+                            }
+                            else {
+                                this.element.previousElementSibling.classList.add(VMENU);
+                            }
+                            this.element.classList.add('e-hide-menu');
+                        }
+                    }
+                    break;
             }
         }
+        _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
     };
     Menu.prototype.createMenuItems = function (item) {
-        var pIdField;
         var idx;
         var i;
         var items = this.items;
-        pIdField = this.getField('parentId');
-        if (item[pIdField]) {
-            idx = this.getIndex(item[pIdField].toString(), true);
+        var pIdField = 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 = [];
@@ -138,9 +234,30 @@ var Menu = /** @class */ (function (_super) {
             this.items.push(item);
         }
     };
+    /**
+     * This method is used to open the Menu in hamburger mode.
+     *
+     * @function open
+     * @returns {void}
+     */
+    Menu.prototype.open = function () {
+        _super.prototype.openHamburgerMenu.call(this);
+    };
+    /**
+     * Closes the Menu if it is opened in hamburger mode.
+     *
+     * @function close
+     * @returns {void}
+     */
+    Menu.prototype.close = function () {
+        _super.prototype.closeHamburgerMenu.call(this);
+    };
     __decorate([
         Property('Horizontal')
     ], Menu.prototype, "orientation", void 0);
+    __decorate([
+        Property('')
+    ], Menu.prototype, "target", void 0);
     __decorate([
         Property(null)
     ], Menu.prototype, "template", void 0);
@@ -148,7 +265,16 @@ var Menu = /** @class */ (function (_super) {
         Property(false)
     ], Menu.prototype, "enableScrolling", void 0);
     __decorate([
-        Complex({}, FieldSettings)
+        Property(false)
+    ], Menu.prototype, "hamburgerMode", void 0);
+    __decorate([
+        Property('Menu')
+    ], Menu.prototype, "title", void 0);
+    __decorate([
+        Property(false)
+    ], Menu.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
     ], Menu.prototype, "fields", void 0);
     Menu = __decorate([
         NotifyPropertyChanges

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

@@ -1,4 +1,4 @@
-import { Component, formatUnit, EventHandler, Event, isNullOrUndefined, closest } from '@syncfusion/ej2-base';import { Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, Browser } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, addClass, removeClass, createElement, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';
+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';
 
@@ -9,30 +9,33 @@ 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.html?lang=typescript) documentation.
+     * > 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 whether the sidebar need to be opened when the resolution meets
+     * Specifies the media query string for resolution, which when met opens the Sidebar.
      * ```typescript
      *   let defaultSidebar: Sidebar = new Sidebar({
-     *       mediaQuery: window.matchMedia('(min-width: 600px)') 
+     *       mediaQuery:'(min-width: 600px)'
      *   });
      * ```
-     * > For more details about mediaQuery refer to 
-     * [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/autoclose.html?lang=typescript) documentation.
+     * > For more details about mediaQuery refer to
+     * [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) documentation.
+     *
      * @default null
-     * @aspIgnore
+     * @aspType string
      */
-    mediaQuery?: MediaQueryList;
+    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.html?lang=typescript) documentation.
+     * > For more details about enableDock refer to
+     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
+     *
      * @default false
      */
     enableDock?: boolean;
@@ -40,6 +43,7 @@ export interface SidebarModel extends ComponentModel{
     /**
      * Enables the expand or collapse while swiping in touch devices.
      * This is not a sidebar property.
+     *
      * @default 'en-US'
      * @private
      */
@@ -49,36 +53,44 @@ export interface SidebarModel extends ComponentModel{
      * 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
      */
@@ -86,30 +98,34 @@ export interface SidebarModel extends ComponentModel{
 
     /**
      * 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.html?lang=typescript#position) documentation.
+     * > 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.html?lang=typescript) documentation.
+     * > 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.html?lang=typescript#enable-backdrop) documentation.
+     * > For more details about showBackdrop refer to
+     * [`Backdrop`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#enable-backdrop) documentation.
+     *
      * @default false
      */
     showBackdrop?: boolean;
@@ -118,11 +134,12 @@ export interface SidebarModel extends ComponentModel{
      * 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. 
+     * * `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`](./variations.html#types) documentation.
+     * > For more details about SidebarType refer to
+     * [`SidebarType`](../../sidebar/variations/) documentation.
+     *
      * @default 'Auto'
      */
     type?: SidebarType;
@@ -130,44 +147,56 @@ export interface SidebarModel extends ComponentModel{
     /**
      * 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 
+     *
+     * @event
+     *
+     *
      */
+    /* eslint-disable */
     created?: EmitType<Object>;
 
     /**
      * Triggers when component is closed.
-     * @event 
+     *
+     * @event
      */
     close?: EmitType<EventArgs>;
 
     /**
      * Triggers when component is opened.
-     * @event 
+     *
+     * @event
      */
     open?: EmitType<EventArgs>;
 
     /**
      * Triggers when the state(expand/collapse) of the component is changed.
-     * @event 
+     *
+     * @event
      */
     change?: EmitType<ChangeEventArgs>;
 
     /**
      * Triggers when component gets destroyed.
-     * @event 
+     *
+     * @event
      */
+    /* eslint-disable */
     destroyed?: EmitType<Object>;
 
 }