@syncfusion/ej2-navigations 24.2.8 → 25.1.35-579988

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

@@ -1288,9 +1288,9 @@ let MenuBase = class MenuBase extends Component {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.add(parent, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                    EventHandler.add(parent, 'scroll', this.scrollHandler, this);
                 }
             }
         }
@@ -2058,9 +2058,11 @@ let MenuBase = class MenuBase extends Component {
                 }
                 li.focus();
                 cul = this.getUlByNavIdx();
-                const index = this.isValidLI(cul.children[0], 0, this.action);
-                cul.children[index].classList.add(FOCUSED);
-                cul.children[index].focus();
+                if (cul) {
+                    const index = this.isValidLI(cul.children[0], 0, this.action);
+                    cul.children[index].classList.add(FOCUSED);
+                    cul.children[index].focus();
+                }
             }
         });
     }
@@ -2375,107 +2377,103 @@ let MenuBase = class MenuBase extends Component {
         }
     }
     clickHandler(e) {
-        if (this.isTapHold) {
-            this.isTapHold = false;
+        this.isTapHold = this.isTapHold ? false : this.isTapHold;
+        const wrapper = this.getWrapper();
+        const trgt = e.target;
+        const cli = this.cli = this.getLI(trgt);
+        const regex = new RegExp('-ej2menu-(.*)-popup');
+        const cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
+        const isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
+            : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
+        if (Browser.isDevice && this.isMenu) {
+            this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
+            this.mouseDownHandler(e);
         }
-        else {
-            const wrapper = this.getWrapper();
-            const trgt = e.target;
-            const cli = this.cli = this.getLI(trgt);
-            const regex = new RegExp('-ej2menu-(.*)-popup');
-            const cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
-            const isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
-                : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
-            if (Browser.isDevice && this.isMenu) {
-                this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
-                this.mouseDownHandler(e);
-            }
-            if (cli && cliWrapper && this.isMenu) {
-                const cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
-                if (this.element.id !== cliWrapperId) {
-                    return;
-                }
+        if (cli && cliWrapper && this.isMenu) {
+            const cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
+            if (this.element.id !== cliWrapperId) {
+                return;
             }
-            if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
-                this.setLISelected(cli);
-                const navIdx = this.getIndex(cli.id, true);
-                const item = this.getItem(navIdx);
-                const eventArgs = { element: cli, item: item, event: e };
-                this.trigger('select', eventArgs);
+        }
+        if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
+            this.setLISelected(cli);
+            const navIdx = this.getIndex(cli.id, true);
+            const item = this.getItem(navIdx);
+            const eventArgs = { element: cli, item: item, event: e };
+            this.trigger('select', eventArgs);
+        }
+        if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
+            let ul;
+            if (cli.classList.contains(HEADER)) {
+                ul = wrapper.children[this.navIdx.length - 1];
+                this.toggleAnimation(ul);
+                const sli = this.getLIByClass(ul, SELECTED);
+                if (sli) {
+                    sli.classList.remove(SELECTED);
+                }
+                detach(cli.parentNode);
+                this.navIdx.pop();
             }
-            if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
-                let ul;
-                if (cli.classList.contains(HEADER)) {
-                    ul = wrapper.children[this.navIdx.length - 1];
-                    this.toggleAnimation(ul);
-                    const sli = this.getLIByClass(ul, SELECTED);
-                    if (sli) {
-                        sli.classList.remove(SELECTED);
+            else {
+                if (!cli.classList.contains(SEPARATOR)) {
+                    this.showSubMenu = true;
+                    const cul = cli.parentNode;
+                    if (isNullOrUndefined(cul)) {
+                        return;
                     }
-                    detach(cli.parentNode);
-                    this.navIdx.pop();
-                }
-                else {
-                    if (!cli.classList.contains(SEPARATOR)) {
-                        this.showSubMenu = true;
-                        const cul = cli.parentNode;
-                        if (isNullOrUndefined(cul)) {
-                            return;
+                    this.cliIdx = this.getIdx(cul, cli);
+                    if (this.isMenu || !Browser.isDevice) {
+                        const culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
+                            : this.getIdx(wrapper, cul);
+                        if (this.navIdx[culIdx] === this.cliIdx) {
+                            this.showSubMenu = false;
                         }
-                        this.cliIdx = this.getIdx(cul, cli);
-                        if (this.isMenu || !Browser.isDevice) {
-                            const culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
-                                : this.getIdx(wrapper, cul);
-                            if (this.navIdx[culIdx] === this.cliIdx) {
-                                this.showSubMenu = false;
+                        if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
+                            const sli = this.getLIByClass(cul, SELECTED);
+                            if (sli) {
+                                sli.classList.remove(SELECTED);
                             }
-                            if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
-                                const sli = this.getLIByClass(cul, SELECTED);
-                                if (sli) {
-                                    sli.classList.remove(SELECTED);
-                                }
-                                this.isClosed = true;
-                                this.keyType = 'click';
-                                if (this.showItemOnClick) {
-                                    this.setLISelected(cli);
-                                }
-                                this.closeMenu(culIdx + 1, e);
-                                if (this.showItemOnClick) {
-                                    this.setLISelected(cli);
-                                }
+                            this.isClosed = true;
+                            this.keyType = 'click';
+                            if (this.showItemOnClick) {
+                                this.setLISelected(cli);
+                            }
+                            this.closeMenu(culIdx + 1, e);
+                            if (this.showItemOnClick) {
+                                this.setLISelected(cli);
                             }
                         }
-                        if (!this.isClosed) {
-                            this.afterCloseMenu(e);
-                        }
-                        this.isClosed = false;
                     }
+                    if (!this.isClosed) {
+                        this.afterCloseMenu(e);
+                    }
+                    this.isClosed = false;
                 }
             }
-            else {
-                if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                    const popupEle = closest(trgt, '.' + POPUP);
-                    const cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
-                    if (cIdx < this.navIdx.length) {
-                        this.closeMenu(cIdx + 1, e);
-                        if (popupEle) {
-                            this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
-                        }
+        }
+        else {
+            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
+                const popupEle = closest(trgt, '.' + POPUP);
+                const cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
+                if (cIdx < this.navIdx.length) {
+                    this.closeMenu(cIdx + 1, e);
+                    if (popupEle) {
+                        this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
                     }
                 }
-                else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
-                    && trgt.classList.contains('e-menu-icon')) {
-                    this.menuHeaderClickHandler(e);
-                }
-                else {
-                    if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
-                        !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
-                        if (!cli) {
-                            this.removeLIStateByClass([SELECTED], [wrapper]);
-                        }
-                        if (!cli || !cli.querySelector('.' + CARET)) {
-                            this.closeMenu(null, e);
-                        }
+            }
+            else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
+                && trgt.classList.contains('e-menu-icon')) {
+                this.menuHeaderClickHandler(e);
+            }
+            else {
+                if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
+                    !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
+                    if (!cli) {
+                        this.removeLIStateByClass([SELECTED], [wrapper]);
+                    }
+                    if (!cli || !cli.querySelector('.' + CARET)) {
+                        this.closeMenu(null, e);
                     }
                 }
             }
@@ -2533,9 +2531,11 @@ let MenuBase = class MenuBase extends Component {
         li.classList.add(SELECTED);
     }
     getLIByClass(ul, classname) {
-        for (let i = 0, len = ul.children.length; i < len; i++) {
-            if (ul.children[i].classList.contains(classname)) {
-                return ul.children[i];
+        if (ul) {
+            for (let i = 0, len = ul.children.length; i < len; i++) {
+                if (ul.children[i].classList.contains(classname)) {
+                    return ul.children[i];
+                }
             }
         }
         return null;
@@ -2819,9 +2819,9 @@ let MenuBase = class MenuBase extends Component {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (const parent of getScrollableParent(this.targetElement)) {
-                    EventHandler.remove(parent, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                    EventHandler.remove(parent, 'scroll', this.scrollHandler);
                 }
             }
         }
@@ -3289,7 +3289,7 @@ __decorate$2([
     Property(false)
 ], MenuBase.prototype, "enableScrolling", void 0);
 __decorate$2([
-    Property(false)
+    Property(true)
 ], MenuBase.prototype, "enableHtmlSanitizer", void 0);
 __decorate$2([
     Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
@@ -4348,7 +4348,9 @@ let Toolbar = class Toolbar extends Component {
             popup.appendTo(ele);
             EventHandler.add(document, 'scroll', this.docEvent.bind(this));
             EventHandler.add(document, 'click ', this.docEvent.bind(this));
-            popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
+            if (this.overflowMode !== 'Extended') {
+                popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
+            }
             if (this.isVertical) {
                 popup.element.style.visibility = 'hidden';
             }
@@ -4363,7 +4365,7 @@ let Toolbar = class Toolbar extends Component {
             }
             this.popObj = popup;
         }
-        else {
+        else if (this.overflowMode !== 'Extended') {
             const popupEle = this.popObj.element;
             setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
             setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
@@ -4390,11 +4392,13 @@ let Toolbar = class Toolbar extends Component {
         const toolEle = this.popObj.element.parentElement;
         const popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
         popupNav.setAttribute('aria-expanded', 'true');
-        setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
-        popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
         if (this.overflowMode === 'Extended') {
             popObj.element.style.minHeight = '';
         }
+        else {
+            setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
+            popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
+        }
         const popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;
         const popIcon = popupNav.firstElementChild;
         popupNav.classList.add(CLS_TBARNAVACT);
@@ -4411,9 +4415,11 @@ let Toolbar = class Toolbar extends Component {
                     break;
                 }
             }
-            setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
+            if (this.overflowMode !== 'Extended') {
+                setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
+            }
         }
-        else if (this.isVertical) {
+        else if (this.isVertical && this.overflowMode !== 'Extended') {
             const tbEleData = this.element.getBoundingClientRect();
             setStyleAttribute(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
         }
@@ -5285,13 +5291,25 @@ let Toolbar = class Toolbar extends Component {
         this.activeEle.focus();
     }
     activeEleRemove(curEle) {
+        let previousEle = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
         if (!isNullOrUndefined(this.activeEle)) {
             this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            if (previousEle) {
+                previousEle.removeAttribute('tabindex');
+            }
+            previousEle = this.activeEle;
         }
         this.activeEle = curEle;
         if (this.getDataTabindex(this.activeEle) === '-1') {
             if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
-                this.updateTabIndex('-1');
+                if (!isNullOrUndefined(this.element.querySelector('.e-hor-nav')) && this.element.querySelector('.e-hor-nav').classList.contains('e-nav-active')) {
+                    this.updateTabIndex('0');
+                    this.getDataTabindex(previousEle) === '-1' ? previousEle.setAttribute('tabindex', '0') :
+                        previousEle.setAttribute('tabindex', this.getDataTabindex(previousEle));
+                }
+                else {
+                    this.updateTabIndex('-1');
+                }
                 curEle.removeAttribute('tabindex');
             }
             else {
@@ -6245,7 +6263,7 @@ let Accordion = class Accordion extends Component {
         }
         catch (e) {
             if (typeof (value) === 'string') {
-                ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
+                ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
             }
             else if (value instanceof (HTMLElement)) {
                 ele.appendChild(value);
@@ -6283,7 +6301,7 @@ let Accordion = class Accordion extends Component {
             });
         }
         else if (ele.childElementCount === 0) {
-            ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
+            ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
         }
         if (!isNullOrUndefined(temString)) {
             if (this.templateEle.indexOf(value) === -1) {
@@ -6311,11 +6329,11 @@ let Accordion = class Accordion extends Component {
             itemcnt.appendChild(ctn);
         }
         else {
-            if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
-                this.items[parseInt(index.toString(), 10)].content =
-                    SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
+            let content = this.items[parseInt(index.toString(), 10)].content;
+            if (this.enableHtmlSanitizer && typeof (content) === 'string') {
+                content = SanitizeHtmlHelper.sanitize(content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
+            itemcnt.appendChild(this.fetchElement(ctn, content, index));
         }
         return itemcnt;
     }
@@ -6964,7 +6982,7 @@ __decorate$4([
     Property('Multiple')
 ], Accordion.prototype, "expandMode", void 0);
 __decorate$4([
-    Property(false)
+    Property(true)
 ], Accordion.prototype, "enableHtmlSanitizer", void 0);
 __decorate$4([
     Complex({}, AccordionAnimationSettings)
@@ -7364,7 +7382,7 @@ __decorate$6([
     Property('Menu')
 ], Menu.prototype, "title", void 0);
 __decorate$6([
-    Property(false)
+    Property(true)
 ], Menu.prototype, "enableHtmlSanitizer", void 0);
 __decorate$6([
     Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
@@ -8130,10 +8148,10 @@ let Tab = class Tab extends Component {
         if (typeof val === 'string') {
             val = val.trim();
             if (this.isVue) {
-                templateFn = compile(SanitizeHtmlHelper.sanitize(val));
+                templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);
             }
             else {
-                ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+                ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;
             }
         }
         else {
@@ -8333,7 +8351,7 @@ let Tab = class Tab extends Component {
                         ele.removeChild(ele.firstChild);
                     }
                 }
-                if (this.isReact) {
+                if (this.isReact || this.isAngular || this.isVue) {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
@@ -8505,7 +8523,7 @@ let Tab = class Tab extends Component {
         const tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
         if (tbPop && tbPop.classList.contains('e-popup-close')) {
             const tbPopObj = (tbPop && tbPop.ej2_instances[0]);
-            tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
+            tbPopObj.position.X = (this.headerPlacement === 'Left' || this.element.classList.contains(CLS_RTL$4)) ? 'left' : 'right';
             tbPopObj.dataBind();
             tbPopObj.show(config);
         }
@@ -9699,7 +9717,7 @@ __decorate$7([
     Property(false)
 ], Tab.prototype, "enablePersistence", void 0);
 __decorate$7([
-    Property(false)
+    Property(true)
 ], Tab.prototype, "enableHtmlSanitizer", void 0);
 __decorate$7([
     Property(false)
@@ -9927,7 +9945,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.preventExpand = false;
         this.checkedElement = [];
         this.disableNode = [];
-        // eslint-disable-next-line
         this.validArr = [];
         this.validNodes = [];
         this.expandChildren = [];
@@ -10102,7 +10119,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.element.setAttribute('aria-multiselectable', 'false');
         }
     }
-    // eslint-disable-next-line
     templateComplier(template) {
         if (template) {
             this.hasTemplate = true;
@@ -10126,7 +10142,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     setDataBinding(changeDataSource) {
         this.treeList.push('false');
         if (this.fields.dataSource instanceof DataManager) {
-            /* eslint-disable */
             this.isOffline = this.fields.dataSource.dataSource.offline;
             if (this.fields.dataSource.ready) {
                 this.fields.dataSource.ready.then((e) => {
@@ -11839,7 +11854,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     }
     expandHandler(e) {
-        let target = e.originalEvent.target;
+        let target = Browser.isDevice && !Browser.isIos ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY) : e.originalEvent.target;
         if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
             target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
             target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -12405,6 +12420,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     onMouseOver(e) {
+        if (Browser.isDevice) {
+            return;
+        }
         let target = e.target;
         let classList$$1 = target.classList;
         let currentLi = closest(target, '.' + LISTITEM);
@@ -14845,7 +14863,7 @@ __decorate$8([
     Property(null)
 ], TreeView.prototype, "dragArea", void 0);
 __decorate$8([
-    Property(false)
+    Property(true)
 ], TreeView.prototype, "enableHtmlSanitizer", void 0);
 __decorate$8([
     Property(false)
@@ -16104,8 +16122,9 @@ let Breadcrumb = class Breadcrumb extends Component {
     }
     beforeItemRenderChanges(prevItem, currItem, elem, isRightIcon) {
         const wrapElem = elem.querySelector('.e-anchor-wrap');
-        if (wrapElem) {
+        if (wrapElem && wrapElem.querySelector('.e-home')) {
             wrapElem.parentElement.setAttribute('aria-label', 'home');
+            wrapElem.parentElement.setAttribute('role', 'link');
         }
         if (currItem.text !== prevItem.text) {
             wrapElem.childNodes.forEach((child) => {
@@ -18866,8 +18885,7 @@ let Stepper = class Stepper extends StepperBase {
                         const selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
                         let value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                         if (this.element.classList.contains(RTL$3)) {
-                            const elementPos = this.stepperItemElements[0].firstChild;
-                            value = ((progressPos.offsetWidth - selectedEle.offsetLeft) + Math.abs((elementPos.offsetLeft + elementPos.offsetWidth) - this.stepperItemList.offsetWidth)) / progressPos.offsetWidth * 100;
+                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                             this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
                         }
                         else {