@syncfusion/ej2-navigations 27.2.4 → 28.1.33-686179

package/src/common/menu-base.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 import { Component, Property, ChildProperty, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';
 import { Animation } from '@syncfusion/ej2-base';
@@ -108,6 +108,9 @@ var MenuItem = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], MenuItem.prototype, "url", void 0);
+    __decorate([
+        Property()
+    ], MenuItem.prototype, "htmlAttributes", void 0);
     return MenuItem;
 }(ChildProperty));
 export { MenuItem };
@@ -839,7 +842,10 @@ var MenuBase = /** @class */ (function (_super) {
                 var data = {
                     text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
                 };
-                var hdata = new MenuItem(this.items[0], 'items', data, true);
+                if (this.template) {
+                    item.iconCss = (item.iconCss || '') + ICONS + ' e-previous';
+                }
+                var hdata = new MenuItem(this.items[0], 'items', this.template ? item : data, true);
                 var hli = this.createItems([hdata]).children[0];
                 hli.classList.add(HEADER);
                 this.uList.insertBefore(hli, this.uList.children[0]);
@@ -1088,6 +1094,9 @@ var MenuBase = /** @class */ (function (_super) {
                                 timingFunction: _this.animationSettings.easing
                             } : null;
                             _this.popupObj.show(animationOptions, _this.lItem);
+                            if (Browser.isDevice) {
+                                _this.popupWrapper.style.left = _this.left + 'px';
+                            }
                         }
                     }
                     else {
@@ -1228,8 +1237,34 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         this.toggleVisiblity(ul, false);
-        ul.style.top = top + px;
-        ul.style.left = left + px;
+        var wrapper = closest(this.element, '.e-' + this.getModuleName() + '-wrapper');
+        if (!this.isMenu && this.enableScrolling && ul && wrapper && wrapper.offsetHeight > 0) {
+            var menuVScroll = closest(ul, '.e-menu-vscroll');
+            ul.style.display = 'block';
+            if (menuVScroll) {
+                destroyScroll(getInstance(menuVScroll, VScroll), menuVScroll);
+            }
+            var cmenuWidth = Math.ceil(this.getMenuWidth(ul, ul.offsetWidth, this.enableRtl));
+            var cmenu = addScrolling(this.createElement, wrapper, ul, 'vscroll', this.enableRtl, wrapper.offsetHeight);
+            Object.assign(cmenu.style, {
+                top: top + "px",
+                left: left + "px",
+                width: cmenuWidth + "px",
+                position: 'absolute',
+                display: 'none'
+            });
+        }
+        else {
+            ul.style.top = top + px;
+            ul.style.left = left + px;
+        }
+    };
+    MenuBase.prototype.getMenuWidth = function (cmenu, width, isRtl) {
+        var caretIcon = cmenu.getElementsByClassName(CARET)[0];
+        if (caretIcon) {
+            width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
+        }
+        return width < 120 ? 120 : width;
     };
     MenuBase.prototype.toggleVisiblity = function (ul, isVisible) {
         if (isVisible === void 0) { isVisible = true; }
@@ -1255,15 +1290,24 @@ var MenuBase = /** @class */ (function (_super) {
                     args.curData.htmlAttributes = {};
                 }
                 if (Browser.isIE) {
-                    args.curData.htmlAttributes.role = 'menuitem';
-                    args.curData.htmlAttributes.tabindex = '-1';
+                    if (!args.curData.htmlAttributes.role) {
+                        args.curData.htmlAttributes.role = 'menuitem';
+                    }
+                    if (!args.curData.htmlAttributes.tabindex) {
+                        args.curData.htmlAttributes.tabindex = '-1';
+                    }
                 }
                 else {
-                    Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });
+                    Object.assign(args.curData.htmlAttributes, {
+                        role: args.curData.htmlAttributes.role || 'menuitem',
+                        tabindex: args.curData.htmlAttributes.tabindex || '-1'
+                    });
                 }
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
-                        args.curData[args.fields.text] : args.curData[args.fields.id];
+                    if (!args.curData.htmlAttributes['aria-label']) {
+                        args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                            args.curData[args.fields.text] : args.curData[args.fields.id];
+                    }
                 }
                 if (args.curData[args.fields[fields.iconCss]] === '') {
                     args.curData[args.fields[fields.iconCss]] = null;
@@ -1272,7 +1316,9 @@ var MenuBase = /** @class */ (function (_super) {
             itemCreated: function (args) {
                 if (args.curData[_this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.setAttribute('role', 'separator');
+                    if (!args.curData.htmlAttributes.role) {
+                        args.item.setAttribute('role', 'separator');
+                    }
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[_this.getField('separator', level)]) {
@@ -1522,9 +1568,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         else {
-            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                var popupEle = closest(trgt, '.' + POPUP);
-                var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
+            if (trgt.tagName === 'DIV' && closest(trgt, '.e-menu-vscroll') && (this.navIdx.length || !this.isMenu && this.enableScrolling && this.navIdx.length === 0)) {
+                var popupEle = this.isMenu ? closest(trgt, '.' + POPUP) : closest(trgt, '.e-menu-vscroll');
+                var cIdx = this.isMenu ? Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1
+                    : this.getIdx(wrapper, select('ul.e-menu-parent', popupEle));
                 if (cIdx < this.navIdx.length) {
                     this.closeMenu(cIdx + 1, e);
                     if (popupEle) {
@@ -1673,7 +1720,9 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
-        var idx = Array.prototype.indexOf.call(ul.children, li);
+        var ulElem = !this.isMenu && this.enableScrolling && select('.e-menu-vscroll', ul)
+            ? selectAll('.e-menu-parent', ul) : Array.from(ul.children);
+        var idx = Array.prototype.indexOf.call(ulElem, li);
         if (skipHdr && ul.children[0].classList.contains(HEADER)) {
             idx--;
         }
@@ -1757,7 +1806,7 @@ var MenuBase = /** @class */ (function (_super) {
                     }
                     else {
                         var ul_3 = wrapper.children[0];
-                        if (this_1.element.classList.contains('e-vertical')) {
+                        if (this_1.element.classList.contains('e-vertical') || !this_1.isMenu) {
                             destroyScroll(getInstance(ul_3, VScroll), ul_3);
                         }
                         else {
@@ -1928,6 +1977,8 @@ var MenuBase = /** @class */ (function (_super) {
         if (isMenuOpen === void 0) { isMenuOpen = true; }
         var pUlHeight;
         var pElement;
+        var animateElement = (this.enableScrolling && !this.isMenu && closest(ul, '.e-menu-vscroll'))
+            ? closest(ul, '.e-menu-vscroll') : ul;
         if (this.animationSettings.effect === 'None' || !isMenuOpen) {
             if (this.hamburgerMode && ul) {
                 ul.style.top = '0px';
@@ -1936,7 +1987,7 @@ var MenuBase = /** @class */ (function (_super) {
             this.end(ul, isMenuOpen);
         }
         else {
-            this.animation.animate(ul, {
+            this.animation.animate(animateElement, {
                 name: this.animationSettings.effect,
                 duration: this.animationSettings.duration,
                 timingFunction: this.animationSettings.easing,
@@ -1954,7 +2005,7 @@ var MenuBase = /** @class */ (function (_super) {
                     }
                     else {
                         options.element.style.display = 'block';
-                        options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';
+                        options.element.style.maxHeight = _this.isMenu ? options.element.getBoundingClientRect().height + 'px' : options.element.scrollHeight + 'px';
                     }
                 },
                 progress: function (options) {
@@ -1991,11 +2042,15 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     MenuBase.prototype.end = function (ul, isMenuOpen) {
-        if (isMenuOpen && (this.isMenu || (!this.isMenu && this.isContextMenuClosed))) {
-            if (this.isMenu || !Browser.isDevice) {
+        if (isMenuOpen && this.isContextMenuClosed) {
+            if (this.isMenu || !Browser.isDevice || (!this.isMenu && this.isAnimationNone && Browser.isDevice)) {
                 ul.style.display = 'block';
             }
             ul.style.maxHeight = '';
+            var scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                scrollMenu.style.display = 'block';
+            }
             this.triggerOpen(ul);
             if (ul.querySelector('.' + FOCUSED)) {
                 ul.querySelector('.' + FOCUSED).focus();
@@ -2023,6 +2078,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         else {
+            var scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                destroyScroll(getInstance(scrollMenu, VScroll), scrollMenu);
+            }
             if (ul === this.element) {
                 var fli = this.getLIByClass(this.element, FOCUSED);
                 if (fli) {
@@ -2066,7 +2125,9 @@ var MenuBase = /** @class */ (function (_super) {
         level = isCallBack ? level + 1 : 0;
         for (var i = 0, len = items.length; i < len; i++) {
             item = items[i];
-            if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {
+            var currentField = isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)];
+            var itemId = (item.htmlAttributes && 'id' in item.htmlAttributes) ? item.htmlAttributes.id : currentField;
+            if (itemId === data) {
                 nIndex.push(i);
                 break;
             }

package/src/common/v-scroll-model.d.ts

@@ -1,4 +1,4 @@
-import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';import { classList, SwipeEventArgs, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -7,10 +7,10 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface VScrollModel extends ComponentModel{
 
     /**
-     * Specifies the up or down scrolling distance of the vertical scrollbar moving.
-     *
-     * @default null
-     */
-    scrollStep?: number;
+     * Specifies the up or down scrolling distance of the vertical scrollbar moving.
+     *
+     * @default null
+     */
+    scrollStep?: number;
 
 }

package/src/common/v-scroll.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 import { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';
 import { classList, isNullOrUndefined } from '@syncfusion/ej2-base';

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

@@ -1,4 +1,4 @@
-import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';
 import {MenuBaseModel} from "../common/menu-base-model";
 
 /**
@@ -7,26 +7,41 @@ import {MenuBaseModel} from "../common/menu-base-model";
 export interface ContextMenuModel extends MenuBaseModel{
 
     /**
-     * Specifies target element selector in which the ContextMenu should be opened.
-     *
-     * @default ''
-     */
-    target?: string;
+     * 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 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[];
+     * Specifies menu items with its properties which will be rendered as ContextMenu.
+     *
+     * @default []
+     * @aspType object
+     * @blazorType object
+     */
+    items?: MenuItemModel[];
+
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate?: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
 
 }

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

@@ -44,6 +44,19 @@ export declare class ContextMenu extends MenuBase implements INotifyPropertyChan
      * @blazorType object
      */
     items: MenuItemModel[];
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate: string | Function;
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling: boolean;
     /**
      * For internal use only - prerender processing.
      *

package/src/context-menu/context-menu.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, getUniqueID, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
@@ -58,6 +58,7 @@ var ContextMenu = /** @class */ (function (_super) {
         _super.prototype.preRender.call(this);
     };
     ContextMenu.prototype.initialize = function () {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
         _super.prototype.initialize.call(this);
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -104,6 +105,9 @@ var ContextMenu = /** @class */ (function (_super) {
                     this.unWireEvents(oldProp.target);
                     this.wireEvents();
                     break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
             }
         }
     };
@@ -125,6 +129,12 @@ var ContextMenu = /** @class */ (function (_super) {
     __decorate([
         Collection([], MenuItem)
     ], ContextMenu.prototype, "items", void 0);
+    __decorate([
+        Property(null)
+    ], ContextMenu.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], ContextMenu.prototype, "enableScrolling", void 0);
     ContextMenu = __decorate([
         NotifyPropertyChanges
     ], ContextMenu);

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

@@ -1,4 +1,4 @@
-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 { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';
 import {Orientation} from "./menu";
 import {MenuBaseModel} from "../common/menu-base-model";
 
@@ -8,63 +8,63 @@ import {MenuBaseModel} from "../common/menu-base-model";
 export interface MenuModel extends MenuBaseModel{
 
     /**
-     * Specified the orientation of Menu whether it can be horizontal or vertical.
-     *
-     * @default 'Horizontal'
-     */
-    orientation?: Orientation;
+     * 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 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 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 scrollable option in Menu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
 
     /**
-     * Specifies whether to enable / disable the hamburger mode in Menu.
-     *
-     * @default false
-     */
-    hamburgerMode?: 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 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 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;
+     * 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.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __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; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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';
@@ -211,6 +211,10 @@ var Menu = /** @class */ (function (_super) {
                         }
                     }
                     break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
             }
         }
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);