@syncfusion/ej2-navigations 22.2.5 → 22.2.8-184993

package/src/carousel/carousel.js

@@ -297,6 +297,7 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -311,7 +312,7 @@ var Carousel = /** @class */ (function (_super) {
         }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
-        attributes(this.element, { 'tabindex': '0', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -385,7 +386,7 @@ var Carousel = /** @class */ (function (_super) {
             className: CLS_ITEM + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index && !isClone ? CLS_ACTIVE : ''),
             attrs: {
                 'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
-                'aria-role': 'group', 'aria-roledescription': 'slide'
+                'role': 'group', 'aria-roledescription': 'slide'
             }
         });
         if (isClone) {
@@ -1092,6 +1093,13 @@ var Carousel = /** @class */ (function (_super) {
             EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
         }
     };
+    Carousel.prototype.resizeHandler = function () {
+        if (this.itemsContainer && this.itemsContainer.firstElementChild) {
+            var numOfItems = this.getNumOfItems();
+            var slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+            this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);
+        }
+    };
     Carousel.prototype.wireEvents = function () {
         if (!(this.animationEffect === 'Custom')) {
             this.swipeModehandlers();
@@ -1100,6 +1108,7 @@ var Carousel = /** @class */ (function (_super) {
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
         EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
+        EventHandler.add(window, 'resize', this.resizeHandler, this);
     };
     Carousel.prototype.unWireEvents = function () {
         var _this = this;
@@ -1119,6 +1128,7 @@ var Carousel = /** @class */ (function (_super) {
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
         EventHandler.clearEvents(this.itemsContainer);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
     };
     /**
      * Method to transit from the current slide to the previous slide.

package/src/common/menu-base.js

@@ -302,10 +302,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -483,7 +483,7 @@ var MenuBase = /** @class */ (function (_super) {
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (elem) {
-                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + "-" + elem.id.split('-')[3]) {
+                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
                     popups_1.push(elem);
                 }
             });
@@ -650,7 +650,7 @@ var MenuBase = /** @class */ (function (_super) {
                         _this.afterCloseMenu(e);
                     }
                     else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
-                        var ele = (e && e.target.classList.contains('e-vscroll'))
+                        var ele = (e && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
                             ele = ele.querySelector('.e-menu-item');
@@ -659,7 +659,9 @@ var MenuBase = /** @class */ (function (_super) {
                             }
                         }
                         else {
-                            _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);
+                            if (!(e && e.target.classList.contains('e-nav-arrow'))) {
+                                _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);
+                            }
                         }
                     }
                     else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||
@@ -851,7 +853,7 @@ var MenuBase = /** @class */ (function (_super) {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
@@ -864,6 +866,7 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MenuBase.prototype.copyObject = function (source, destination) {
         for (var prop in source) {
             destination["" + prop] = source["" + prop];
@@ -1431,6 +1434,9 @@ var MenuBase = /** @class */ (function (_super) {
                     if (!cli.classList.contains(SEPARATOR)) {
                         this.showSubMenu = true;
                         var cul = cli.parentNode;
+                        if (isNullOrUndefined(cul)) {
+                            return;
+                        }
                         this.cliIdx = this.getIdx(cul, cli);
                         if (this.isMenu || !Browser.isDevice) {
                             var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
@@ -1491,6 +1497,9 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     MenuBase.prototype.afterCloseMenu = function (e) {
+        if (isNullOrUndefined(e)) {
+            return;
+        }
         var isHeader;
         if (this.showSubMenu) {
             if (this.showItemOnClick && this.navIdx.length === 0) {
@@ -1663,7 +1672,12 @@ var MenuBase = /** @class */ (function (_super) {
                     }
                     break;
                 case 'enableRtl':
-                    wrapper.classList.toggle(RTL);
+                    if (this_1.enableRtl) {
+                        wrapper.classList.add(RTL);
+                    }
+                    else {
+                        wrapper.classList.remove(RTL);
+                    }
                     break;
                 case 'showItemOnClick':
                     this_1.unWireEvents();
@@ -1828,10 +1842,10 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }
@@ -2107,7 +2121,7 @@ var MenuBase = /** @class */ (function (_super) {
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
-                else {
+                else if (!ishide && validUl === items[i]) {
                     ul.children[index].classList.remove(HIDE);
                 }
             }

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, compile  } 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";
 

package/src/sidebar/sidebar.js

@@ -174,7 +174,7 @@ var Sidebar = /** @class */ (function (_super) {
             this.show();
         }
         else if (!this.isOpen) {
-            addClass([this.element], CLOSE);
+            addClass([this.element], [CLOSE, DISABLEANIMATION]);
         }
     };
     Sidebar.prototype.checkType = function (val) {
@@ -629,7 +629,7 @@ var Sidebar = /** @class */ (function (_super) {
         }
         this.destroyBackDrop();
         if (this.element) {
-            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);
+            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION, DISABLEANIMATION]);
             removeClass([this.element], SIDEBARABSOLUTE);
             this.element.style.width = '';
             this.element.style.zIndex = '';

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
 import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -304,17 +304,25 @@ export interface TabModel extends ComponentModel{
 
     /**
      * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
-     * for the draggable element movement. By default, the draggable element movement occurs in the toolbar. 
+     * for the draggable element movement. By default, the draggable element movement occurs in the toolbar.
+     * 
      * @default null
      */
     dragArea?: string;
 
     /**
      * Sets true to allow drag and drop the Tab items
+     * 
      * @default false
      */
     allowDragAndDrop?: boolean;
 
+    /**
+     * Specifies whether the templates need to be cleared or not while changing the Tab items dynamically.
+     * @default true
+     */
+    clearTemplates?: boolean;
+
     /**
      * Specifies the animation configuration settings while showing the content of the Tab.
      *

package/src/tab/tab.d.ts

@@ -289,6 +289,9 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private draggingItems;
     private draggableItems;
     private tbId;
+    private isAngular;
+    private isReact;
+    private isVue;
     private resizeContext;
     /**
      * Contains the keyboard configuration of the Tab.
@@ -422,14 +425,21 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
      * for the draggable element movement. By default, the draggable element movement occurs in the toolbar.
+     *
      * @default null
      */
     dragArea: string;
     /**
      * Sets true to allow drag and drop the Tab items
+     *
      * @default false
      */
     allowDragAndDrop: boolean;
+    /**
+     * Specifies whether the templates need to be cleared or not while changing the Tab items dynamically.
+     * @default true
+     */
+    clearTemplates: boolean;
     /**
      * Specifies the animation configuration settings while showing the content of the Tab.
      *

package/src/tab/tab.js

@@ -17,7 +17,7 @@ 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;
 };
-import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';
 import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';
@@ -311,11 +311,20 @@ var Tab = /** @class */ (function (_super) {
      * @returns {void}
      */
     Tab.prototype.render = function () {
+        var _this = this;
         this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });
         this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                if (!isNOU(_this.tbObj)) {
+                    _this.tbObj.refreshOverflow();
+                }
+                _this.refreshActiveBorder();
+            });
+        }
     };
     Tab.prototype.renderContainer = function () {
         var ele = this.element;
@@ -529,10 +538,7 @@ var Tab = /** @class */ (function (_super) {
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
-            if (_this.itemIndexArray === []) {
-                _this.itemIndexArray.push(CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
-            }
-            else {
+            if (_this.itemIndexArray instanceof Array) {
                 _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
@@ -690,10 +696,9 @@ var Tab = /** @class */ (function (_super) {
         if (!isNOU(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        var isPrevent = isNOU(this.animation) || this.animation.next === {} || this.animation.previous === {}
-            || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
-            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
-        if (this.initRender || value === false || this.animation === {} || isPrevent) {
+        var isPrevent = isNOU(this.animation) || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
+            || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';
+        if (this.initRender || value === false || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE);
             }
@@ -705,7 +710,7 @@ var Tab = /** @class */ (function (_super) {
             var openEff = this.animation.previous.effect;
             animateObj = {
                 name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),
-                duration: this.animation.previous.duration,
+                duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,
                 timingFunction: this.animation.previous.easing
             };
         }
@@ -713,7 +718,7 @@ var Tab = /** @class */ (function (_super) {
             var clsEff = this.animation.next.effect;
             animateObj = {
                 name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),
-                duration: this.animation.next.duration,
+                duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,
                 timingFunction: this.animation.next.easing
             };
         }
@@ -823,7 +828,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.getContent = function (ele, cnt, callType, index) {
         var eleStr;
-        cnt = isNOU(cnt) ? "" : cnt;
+        cnt = isNOU(cnt) ? '' : cnt;
         if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -1174,7 +1179,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.showPopup = function (config) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -1489,6 +1494,9 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.clearTabTemplate = function (templateEle, templateName, className) {
+        if (!this.clearTemplates) {
+            return;
+        }
         if (this.registeredTemplate && this.registeredTemplate[templateName]) {
             var registeredTemplates = this.registeredTemplate;
             for (var index = 0; index < registeredTemplates[templateName].length; index++) {
@@ -1622,8 +1630,8 @@ var Tab = /** @class */ (function (_super) {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, function (tabitemDragArgs) {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {
+            if (tabItemDragArgs.cancel) {
                 var dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);
@@ -1968,7 +1976,9 @@ var Tab = /** @class */ (function (_super) {
             }
         }
         this.setActiveBorder();
-        item.setAttribute('aria-hidden', '' + value);
+        if (!isNullOrUndefined(item.firstElementChild)) {
+            item.firstElementChild.setAttribute('aria-hidden', '' + value);
+        }
         if (this.overflowMode === 'Popup' && this.tbObj) {
             this.tbObj.refreshOverflow();
         }
@@ -2389,6 +2399,9 @@ var Tab = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Tab.prototype, "allowDragAndDrop", void 0);
+    __decorate([
+        Property(true)
+    ], Tab.prototype, "clearTemplates", void 0);
     __decorate([
         Complex({}, TabAnimationSettings)
     ], Tab.prototype, "animation", void 0);

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

@@ -235,6 +235,8 @@ export interface ToolbarModel extends ComponentModel{
      * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
      * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
+     * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
+     * 
      * @default null
      */
     scrollStep?: number;

package/src/toolbar/toolbar.d.ts

@@ -304,6 +304,8 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
      * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
+     * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
+     *
      * @default null
      */
     scrollStep: number;
@@ -502,6 +504,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private orientationChange;
     private extendedOpen;
     private updateHideEleTabIndex;
+    private clearToolbarTemplate;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *

package/src/toolbar/toolbar.js

@@ -683,10 +683,16 @@ var Toolbar = /** @class */ (function (_super) {
      * @returns {void}
      */
     Toolbar.prototype.render = function () {
+        var _this = this;
         this.initialize();
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                _this.refreshOverflow();
+            });
+        }
     };
     Toolbar.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -1814,7 +1820,7 @@ var Toolbar = /** @class */ (function (_super) {
                 this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
             }
             if (this.isReact) {
-                this.clearTemplate();
+                this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);
             }
             var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
@@ -1863,7 +1869,7 @@ var Toolbar = /** @class */ (function (_super) {
             var tempArray = void 0;
             if (!isNOU(templateFn)) {
                 var toolbarTemplateID = this.element.id + index + '_template';
-                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);
+                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);
             }
             if (!isNOU(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach(function (ele) {
@@ -1931,7 +1937,8 @@ var Toolbar = /** @class */ (function (_super) {
         var dom;
         var innerEle = this.createElement('div', { className: CLS_ITEM });
         var tempDom = this.createElement('div', {
-            innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
+            innerHTML: this.enableHtmlSanitizer && !isNOU(item.tooltipText) ?
+                SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
         });
         if (!this.tbarEle) {
             this.tbarEle = [];
@@ -2009,7 +2016,12 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.activeEleRemove = function (curEle) {
         if (!isNOU(this.activeEle)) {
-            this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            if (!curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+                this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            }
+            else {
+                this.activeEle.removeAttribute('tabindex');
+            }
         }
         this.activeEle = curEle;
         if (this.getDataTabindex(this.activeEle) === '-1') {
@@ -2127,6 +2139,30 @@ var Toolbar = /** @class */ (function (_super) {
             nextEle = innerItems[++eleIndex];
         }
     };
+    Toolbar.prototype.clearToolbarTemplate = function (templateEle) {
+        if (this.registeredTemplate && this.registeredTemplate["" + 'template']) {
+            var registeredTemplates = this.registeredTemplate;
+            for (var index = 0; index < registeredTemplates["" + 'template'].length; index++) {
+                var registeredItem = registeredTemplates["" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];
+                var closestItem = closest(registeredItem, '.' + CLS_ITEM);
+                if (!isNOU(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], [registeredTemplates["" + 'template'][parseInt(index.toString(), 10)]]);
+                    break;
+                }
+            }
+        }
+        else if (this.portals && this.portals.length > 0) {
+            var portals = this.portals;
+            for (var index = 0; index < portals.length; index++) {
+                var portalItem = portals[parseInt(index.toString(), 10)];
+                var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
+                if (!isNOU(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], index);
+                    break;
+                }
+            }
+        }
+    };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *
@@ -2149,31 +2185,29 @@ var Toolbar = /** @class */ (function (_super) {
                             var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
                             var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
                             var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
-                            if (typeof newProperty !== 'function') {
-                                if (this.tbarAlign || property === 'align') {
-                                    this.refresh();
-                                    this.trigger('created');
-                                    break;
-                                }
-                                var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
-                                var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
-                                    --this.popupPriCount;
-                                }
-                                if (isNOU(this.scrollModule)) {
-                                    this.destroyMode();
-                                }
-                                var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
-                                if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
-                                    this.clearTemplate();
-                                }
-                                detach(itemCol[parseInt(index.toString(), 10)]);
-                                this.tbarEle.splice(index, 1);
-                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
-                                this.items.splice(index, 1);
-                                if (this.items[parseInt(index.toString(), 10)].template) {
-                                    this.tbarEle.splice(this.items.length, 1);
-                                }
+                            if (this.tbarAlign || property === 'align') {
+                                this.refresh();
+                                this.trigger('created');
+                                break;
+                            }
+                            var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
+                            var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
+                            if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
+                                --this.popupPriCount;
+                            }
+                            if (isNOU(this.scrollModule)) {
+                                this.destroyMode();
+                            }
+                            var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
+                            if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
+                                this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);
+                            }
+                            detach(itemCol[parseInt(index.toString(), 10)]);
+                            this.tbarEle.splice(index, 1);
+                            this.addItems([this.items[parseInt(index.toString(), 10)]], index);
+                            this.items.splice(index, 1);
+                            if (this.items[parseInt(index.toString(), 10)].template) {
+                                this.tbarEle.splice(this.items.length, 1);
                             }
                         }
                     }

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper  } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -548,7 +548,7 @@ export interface TreeViewModel extends ComponentModel{
     /**
      * Event callback that is raised when the TreeView node is dragged (moved) continuously.
      *
-
+     * @deprecated
      * @event
      */
     nodeDragging?: EmitType<DragAndDropEventArgs>;

package/src/treeview/treeview.d.ts

@@ -325,7 +325,7 @@ export interface NodeData {
  * Interface for Failure event arguments
  */
 export interface FailureEventArgs {
-    /** Represents the Error object that contains information about the error that occurred. This property allows you to access details such as the error message, stack trace, error code, or any additional information associated with the error. */
+    /** Defines the error information. */
     error?: Error;
 }
 /**
@@ -899,7 +899,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     /**
      * Event callback that is raised when the TreeView node is dragged (moved) continuously.
      *
-
+     * @deprecated
      * @event
      */
     nodeDragging: EmitType<DragAndDropEventArgs>;