@syncfusion/ej2-navigations 22.2.11 → 23.1.39

package/dist/es6/ej2-navigations.es2015.js

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
@@ -1284,9 +1284,9 @@ let MenuBase = class MenuBase extends Component {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.add(parent, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1462,7 +1462,7 @@ let MenuBase = class MenuBase extends Component {
             const popups = [];
             const allPopup = selectAll('.' + POPUP);
             allPopup.forEach((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.push(elem);
                 }
             });
@@ -1821,9 +1821,9 @@ let MenuBase = class MenuBase extends Component {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let targetEvent = this.copyObject(ev, {});
+                const targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
                 targetEvent.currentTarget = target;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1834,6 +1834,7 @@ let MenuBase = class MenuBase extends Component {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     copyObject(source, destination) {
         for (const prop in source) {
             destination[`${prop}`] = source[`${prop}`];
@@ -2783,9 +2784,9 @@ let MenuBase = class MenuBase extends Component {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.remove(parent, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }
@@ -3050,11 +3051,11 @@ let MenuBase = class MenuBase extends Component {
             index = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {
-                let validUl = isUniqueId ? ul.children[index].id : ul.children[index].textContent;
+                const validUl = isUniqueId ? ul.children[index].id : ul.children[index].textContent;
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
-                else {
+                else if (!ishide && validUl === items[i]) {
                     ul.children[index].classList.remove(HIDE);
                 }
             }
@@ -3924,6 +3925,11 @@ let Toolbar = class Toolbar extends Component {
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(() => {
+                this.refreshOverflow();
+            });
+        }
     }
     initialize() {
         const width = formatUnit(this.width);
@@ -5087,7 +5093,7 @@ let Toolbar = class Toolbar extends Component {
             let tempArray;
             if (!isNullOrUndefined(templateFn)) {
                 const 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 (!isNullOrUndefined(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach((ele) => {
@@ -5710,7 +5716,7 @@ let Accordion = class Accordion extends Component {
         }
         const ele = this.element;
         super.destroy();
-        this.unwireEvents();
+        this.unWireEvents();
         this.isDestroy = true;
         this.restoreContent(null);
         [].slice.call(ele.children).forEach((el) => {
@@ -5797,7 +5803,7 @@ let Accordion = class Accordion extends Component {
             }
         }
     }
-    unwireEvents() {
+    unWireEvents() {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
@@ -6113,7 +6119,7 @@ let Accordion = class Accordion extends Component {
             const ctnEle = this.headerEleGenerate();
             const hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));
+            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index));
             innerEle.appendChild(ctnEle);
         }
         let hdr = select('.' + CLS_HEADER, innerEle);
@@ -6175,8 +6181,7 @@ let Accordion = class Accordion extends Component {
             return true;
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    fetchElement(ele, value, index, isHeader) {
+    fetchElement(ele, value, index) {
         let templateFn;
         let temString;
         try {
@@ -6260,7 +6265,7 @@ let Accordion = class Accordion extends Component {
                 this.items[parseInt(index.toString(), 10)].content =
                     SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
         }
         return itemcnt;
     }
@@ -6293,7 +6298,7 @@ let Accordion = class Accordion extends Component {
                     expandState.classList.remove(CLS_EXPANDSTATE);
                 }
                 trgtItemEle.classList.add(CLS_EXPANDSTATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -6304,6 +6309,10 @@ let Accordion = class Accordion extends Component {
         });
     }
     expandAnimation(ef, icn, trgt, trgtItemEle, animate, args) {
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideDown';
+            animate.name = 'SlideDown';
+        }
         let height;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
@@ -6397,7 +6406,7 @@ let Accordion = class Accordion extends Component {
                 this.expandedItemsPop(trgtItemEle);
                 trgtItemEle.classList.remove(CLS_EXPANDSTATE);
                 icon.classList.add(CLS_TOGANIMATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -6408,6 +6417,10 @@ let Accordion = class Accordion extends Component {
         });
     }
     collapseAnimation(ef, trgt, trgtItEl, icn, animate, args) {
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideUp';
+            animate.name = 'SlideUp';
+        }
         let height;
         let trgtHeight;
         let itemHeight;
@@ -6507,7 +6520,7 @@ let Accordion = class Accordion extends Component {
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);
                 this.expandedIndices = [];
-                this.expandedItemRefresh(ele);
+                this.expandedItemRefresh();
                 if (addItem && addItem.expanded) {
                     this.expandItem(true, itemIndex);
                 }
@@ -6517,8 +6530,7 @@ let Accordion = class Accordion extends Component {
             this.renderReactTemplates();
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    expandedItemRefresh(ele) {
+    expandedItemRefresh() {
         const itemEle = this.getItemElements();
         [].slice.call(itemEle).forEach((el) => {
             if (el.classList.contains(CLS_SLCTED)) {
@@ -6533,8 +6545,12 @@ let Accordion = class Accordion extends Component {
      * @returns {void}.
      */
     removeItem(index) {
-        if (this.isReact) {
-            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        if (this.isReact || this.isAngular) {
+            const item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+            const header = select('.' + CLS_HEADERCTN, item);
+            const content = select('.' + CLS_CTENT, item);
+            this.clearAccordionTemplate(header, this.dataSource.length > 0 ? 'headerTemplate' : 'header', CLS_HEADERCTN);
+            this.clearAccordionTemplate(content, this.dataSource.length > 0 ? 'itemTemplate' : 'content', CLS_CTENT);
         }
         const itemEle = this.getItemElements();
         const ele = itemEle[parseInt(index.toString(), 10)];
@@ -6546,7 +6562,7 @@ let Accordion = class Accordion extends Component {
         detach(ele);
         items.splice(index, 1);
         this.expandedIndices = [];
-        this.expandedItemRefresh(this.element);
+        this.expandedItemRefresh();
     }
     /**
      * Sets focus to the specified index item header in Accordion.
@@ -6722,28 +6738,18 @@ let Accordion = class Accordion extends Component {
         }
     }
     setTemplate(template, toElement, index) {
-        toElement.innerHTML = '';
-        this.templateCompile(toElement, template, index);
+        this.fetchElement(toElement, template, index);
         if (this.isReact) {
             this.renderReactTemplates();
         }
     }
-    templateCompile(ele, cnt, index) {
-        const tempEle = this.createElement('div');
-        this.fetchElement(tempEle, cnt, index, false);
-        if (tempEle.childNodes.length !== 0) {
-            [].slice.call(tempEle.childNodes).forEach((childEle) => {
-                ele.appendChild(childEle);
-            });
-        }
-    }
     clearAccordionTemplate(templateEle, templateName, className) {
         if (this.registeredTemplate && this.registeredTemplate[`${templateName}`]) {
             const registeredTemplates = this.registeredTemplate;
             for (let index = 0; index < registeredTemplates[`${templateName}`].length; index++) {
                 const registeredItem = registeredTemplates[`${templateName}`][parseInt(index.toString(), 10)].rootNodes[0];
-                const closestItem = closest(registeredItem.containerInfo, '.' + className);
-                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                const closestItem = closest(registeredItem, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle || isNullOrUndefined(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates[`${templateName}`][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -6812,7 +6818,8 @@ let Accordion = class Accordion extends Component {
                                 if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNullOrUndefined(item)) {
                                     this.enableItem(index, !newVal);
                                 }
-                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNullOrUndefined(item) && item.children.length === 2) {
+                                if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'
+                                    && !isNullOrUndefined(item) && item.children.length === 2) {
                                     if (typeof newVal === 'function') {
                                         if (this.isAngular || this.isReact) {
                                             this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);
@@ -7593,7 +7600,10 @@ let Tab = class Tab extends Component {
         this.wireEvents();
         this.initRender = false;
         if (this.isReact && this.portals && this.portals.length > 0) {
-            this.renderReactTemplates(function () {
+            this.renderReactTemplates(() => {
+                if (!isNullOrUndefined(this.tbObj)) {
+                    this.tbObj.refreshOverflow();
+                }
                 this.refreshActiveBorder();
             });
         }
@@ -7807,10 +7817,7 @@ let Tab = class Tab extends Component {
             tCont.appendChild(this.btnCls.cloneNode(true));
             const wrap = this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
-            if (this.itemIndexArray === []) {
-                this.itemIndexArray.push(CLS_ITEM$2 + this.tabId + '_' + this.lastIndex);
-            }
-            else {
+            if (this.itemIndexArray instanceof Array) {
                 this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + this.tabId + '_' + this.lastIndex);
             }
             const attrObj = {
@@ -7966,10 +7973,9 @@ let Tab = class Tab extends Component {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        const isPrevent = isNullOrUndefined(this.animation) || this.animation.next === {} || this.animation.previous === {}
-            || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)
-            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
-        if (this.initRender || value === false || this.animation === {} || isPrevent) {
+        const isPrevent = isNullOrUndefined(this.animation) || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(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$1);
             }
@@ -7981,7 +7987,7 @@ let Tab = class Tab extends Component {
             const 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
             };
         }
@@ -7989,7 +7995,7 @@ let Tab = class Tab extends Component {
             const 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
             };
         }
@@ -8098,7 +8104,7 @@ let Tab = class Tab extends Component {
     }
     getContent(ele, cnt, callType, index) {
         let eleStr;
-        cnt = isNullOrUndefined(cnt) ? "" : cnt;
+        cnt = isNullOrUndefined(cnt) ? '' : cnt;
         if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -8447,7 +8453,7 @@ let Tab = class Tab extends Component {
     }
     showPopup(config) {
         const tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             const tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -8895,8 +8901,8 @@ let Tab = class Tab extends Component {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, (tabitemDragArgs) => {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, (tabItemDragArgs) => {
+            if (tabItemDragArgs.cancel) {
                 const dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);
@@ -10527,7 +10533,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
         let eNodes = selectAll('.' + EXPANDED, element);
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
         }
         if (!this.isInitalExpand) {
@@ -11034,7 +11040,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     doExpandAction() {
         let eUids = this.expandedNodes;
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
         }
         if (this.isInitalExpand && eUids.length > 0) {
@@ -11228,7 +11234,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul, {
                         name: this.animation.expand.effect,
-                        duration: this.animation.expand.duration,
+                        duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: (args) => {
                             liEle.style.overflow = 'hidden';
@@ -11328,7 +11334,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
-                duration: this.animation.collapse.duration,
+                duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,
                 timingFunction: this.animation.collapse.easing,
                 begin: (args) => {
                     liEle.style.overflow = 'hidden';
@@ -15009,7 +15015,8 @@ let Sidebar = class Sidebar extends Component {
             this.show();
         }
         else if (!this.isOpen) {
-            addClass([this.element], CLOSE);
+            addClass([this.element], [CLOSE, DISABLEANIMATION]);
+            removeClass([this.element], DISABLEANIMATION);
         }
     }
     checkType(val) {
@@ -15841,6 +15848,7 @@ let Breadcrumb = class Breadcrumb extends Component {
                     // list item
                     listBaseOptions.itemClass = '';
                     if (this.itemTemplate) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listBaseOptions.template = this.itemTemplate;
                         isSingleLevel = false;
                     }
@@ -16600,6 +16608,7 @@ let Carousel = class Carousel extends Component {
     }
     initialize() {
         const carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -16614,7 +16623,7 @@ let Carousel = class Carousel extends Component {
         }
         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);
         }
@@ -16685,7 +16694,7 @@ let Carousel = class Carousel extends Component {
             className: `${CLS_ITEM$3} ${item.cssClass ? item.cssClass : ''} ${this.selectedIndex === index && !isClone ? CLS_ACTIVE$2 : ''}`,
             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) {
@@ -17659,6 +17668,7 @@ let AppBar = class AppBar extends Component {
         // pre render code
     }
     render() {
+        this.element.classList.add(CLS_APPBAR);
         if (this.element.tagName !== 'HEADER') {
             this.element.setAttribute('role', 'header');
         }