@syncfusion/ej2-navigations 24.2.8 → 25.1.35-579988

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

@@ -1363,10 +1363,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
                 }
             }
         }
@@ -2148,9 +2148,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
                 li.focus();
                 cul = _this.getUlByNavIdx();
-                var index = _this.isValidLI(cul.children[0], 0, _this.action);
-                cul.children[index].classList.add(FOCUSED);
-                cul.children[index].focus();
+                if (cul) {
+                    var index = _this.isValidLI(cul.children[0], 0, _this.action);
+                    cul.children[index].classList.add(FOCUSED);
+                    cul.children[index].focus();
+                }
             }
         });
     };
@@ -2472,107 +2474,103 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MenuBase.prototype.clickHandler = function (e) {
-        if (this.isTapHold) {
-            this.isTapHold = false;
+        this.isTapHold = this.isTapHold ? false : this.isTapHold;
+        var wrapper = this.getWrapper();
+        var trgt = e.target;
+        var cli = this.cli = this.getLI(trgt);
+        var regex = new RegExp('-ej2menu-(.*)-popup');
+        var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
+        var 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 {
-            var wrapper = this.getWrapper();
-            var trgt = e.target;
-            var cli = this.cli = this.getLI(trgt);
-            var regex = new RegExp('-ej2menu-(.*)-popup');
-            var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
-            var 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) {
-                var 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) {
+            var 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);
-                var navIdx = this.getIndex(cli.id, true);
-                var item = this.getItem(navIdx);
-                var eventArgs = { element: cli, item: item, event: e };
-                this.trigger('select', eventArgs);
+        }
+        if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
+            this.setLISelected(cli);
+            var navIdx = this.getIndex(cli.id, true);
+            var item = this.getItem(navIdx);
+            var eventArgs = { element: cli, item: item, event: e };
+            this.trigger('select', eventArgs);
+        }
+        if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
+            var ul = void 0;
+            if (cli.classList.contains(HEADER)) {
+                ul = wrapper.children[this.navIdx.length - 1];
+                this.toggleAnimation(ul);
+                var 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)) {
-                var ul = void 0;
-                if (cli.classList.contains(HEADER)) {
-                    ul = wrapper.children[this.navIdx.length - 1];
-                    this.toggleAnimation(ul);
-                    var sli = this.getLIByClass(ul, SELECTED);
-                    if (sli) {
-                        sli.classList.remove(SELECTED);
+            else {
+                if (!cli.classList.contains(SEPARATOR)) {
+                    this.showSubMenu = true;
+                    var cul = cli.parentNode;
+                    if (isNullOrUndefined(cul)) {
+                        return;
                     }
-                    detach(cli.parentNode);
-                    this.navIdx.pop();
-                }
-                else {
-                    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'))
+                            : this.getIdx(wrapper, cul);
+                        if (this.navIdx[culIdx] === this.cliIdx) {
+                            this.showSubMenu = false;
                         }
-                        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'))
-                                : this.getIdx(wrapper, cul);
-                            if (this.navIdx[culIdx] === this.cliIdx) {
-                                this.showSubMenu = false;
+                        if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
+                            var sli = this.getLIByClass(cul, SELECTED);
+                            if (sli) {
+                                sli.classList.remove(SELECTED);
                             }
-                            if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
-                                var 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')) {
-                    var popupEle = closest(trgt, '.' + POPUP);
-                    var 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')) {
+                var popupEle = closest(trgt, '.' + POPUP);
+                var 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);
                     }
                 }
             }
@@ -2630,9 +2628,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         li.classList.add(SELECTED);
     };
     MenuBase.prototype.getLIByClass = function (ul, classname) {
-        for (var i = 0, len = ul.children.length; i < len; i++) {
-            if (ul.children[i].classList.contains(classname)) {
-                return ul.children[i];
+        if (ul) {
+            for (var i = 0, len = ul.children.length; i < len; i++) {
+                if (ul.children[i].classList.contains(classname)) {
+                    return ul.children[i];
+                }
             }
         }
         return null;
@@ -2924,10 +2924,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
                 }
             }
         }
@@ -3403,7 +3403,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         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)
@@ -4490,7 +4490,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             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';
             }
@@ -4505,7 +4507,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             }
             this.popObj = popup;
         }
-        else {
+        else if (this.overflowMode !== 'Extended') {
             var popupEle = this.popObj.element;
             setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
             setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
@@ -4532,11 +4534,13 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var toolEle = this.popObj.element.parentElement;
         var 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';
+        }
         var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;
         var popIcon = popupNav.firstElementChild;
         popupNav.classList.add(CLS_TBARNAVACT);
@@ -4553,9 +4557,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                     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') {
             var tbEleData = this.element.getBoundingClientRect();
             setStyleAttribute(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
         }
@@ -5439,13 +5445,25 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         this.activeEle.focus();
     };
     Toolbar.prototype.activeEleRemove = function (curEle) {
+        var 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 {
@@ -6436,7 +6454,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
         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);
@@ -6474,7 +6492,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             });
         }
         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) {
@@ -6502,11 +6520,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             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);
+            var 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;
     };
@@ -7162,7 +7180,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         Property('Multiple')
     ], Accordion.prototype, "expandMode", void 0);
     __decorate$4([
-        Property(false)
+        Property(true)
     ], Accordion.prototype, "enableHtmlSanitizer", void 0);
     __decorate$4([
         Complex({}, AccordionAnimationSettings)
@@ -7596,7 +7614,7 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
         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)
@@ -8405,10 +8423,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         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 {
@@ -8608,7 +8626,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         ele.removeChild(ele.firstChild);
                     }
                 }
-                if (this.isReact) {
+                if (this.isReact || this.isAngular || this.isVue) {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
@@ -8782,7 +8800,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
         if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var 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);
         }
@@ -9988,7 +10006,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         Property(false)
     ], Tab.prototype, "enablePersistence", void 0);
     __decorate$7([
-        Property(false)
+        Property(true)
     ], Tab.prototype, "enableHtmlSanitizer", void 0);
     __decorate$7([
         Property(false)
@@ -10246,7 +10264,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _this.preventExpand = false;
         _this.checkedElement = [];
         _this.disableNode = [];
-        // eslint-disable-next-line
         _this.validArr = [];
         _this.validNodes = [];
         _this.expandChildren = [];
@@ -10424,7 +10441,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.element.setAttribute('aria-multiselectable', 'false');
         }
     };
-    // eslint-disable-next-line
     TreeView.prototype.templateComplier = function (template) {
         if (template) {
             this.hasTemplate = true;
@@ -10449,7 +10465,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         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(function (e) {
@@ -12176,7 +12191,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     };
     TreeView.prototype.expandHandler = function (e) {
-        var target = e.originalEvent.target;
+        var 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)) {
@@ -12745,6 +12760,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TreeView.prototype.onMouseOver = function (e) {
+        if (Browser.isDevice) {
+            return;
+        }
         var target = e.target;
         var classList$$1 = target.classList;
         var currentLi = closest(target, '.' + LISTITEM);
@@ -15197,7 +15215,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         Property(null)
     ], TreeView.prototype, "dragArea", void 0);
     __decorate$8([
-        Property(false)
+        Property(true)
     ], TreeView.prototype, "enableHtmlSanitizer", void 0);
     __decorate$8([
         Property(false)
@@ -16498,8 +16516,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
     };
     Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
         var 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(function (child) {
@@ -19363,8 +19382,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
                         var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
                         var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                         if (this.element.classList.contains(RTL$3)) {
-                            var 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 {