@syncfusion/ej2-navigations 19.3.43 → 19.3.53

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

@@ -1926,8 +1926,8 @@ let MenuBase = class MenuBase extends Component {
                             this.setBlankIconStyle(this.popupWrapper);
                             this.wireKeyboardEvent(this.popupWrapper);
                             rippleEffect(this.popupWrapper, { selector: '.' + ITEM });
-                            this.popupWrapper.style.left = this.left + 'px';
-                            this.popupWrapper.style.top = this.top + 'px';
+                            this.popupWrapper.style.left = this.left + pageXOffset + 'px';
+                            this.popupWrapper.style.top = this.top + pageYOffset + 'px';
                             const animationOptions = this.animationSettings.effect !== 'None' ? {
                                 name: this.animationSettings.effect, duration: this.animationSettings.duration,
                                 timingFunction: this.animationSettings.easing
@@ -8349,79 +8349,81 @@ let Tab = class Tab extends Component {
             const changedProp = Object.keys(newProp.items);
             for (let i = 0; i < changedProp.length; i++) {
                 const index = parseInt(Object.keys(newProp.items)[i], 10);
-                const property = Object.keys(newProp.items[index])[0];
-                const oldVal = Object(oldProp.items[index])[property];
-                const newVal = Object(newProp.items[index])[property];
-                const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
-                let itemIndex;
-                if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
-                    const num = (hdr.id.indexOf('_'));
-                    itemIndex = parseInt(hdr.id.substring(num + 1), 10);
-                }
-                else {
-                    itemIndex = index;
-                }
-                const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
-                const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
-                if (property === 'header' || property === 'headerTemplate') {
-                    const icon = (isNullOrUndefined(this.items[index].header) ||
-                        isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
-                    const textVal = this.items[index].headerTemplate || this.items[index].header.text;
-                    if ((textVal === '') && (icon === '')) {
-                        this.removeTab(index);
+                const properties = Object.keys(newProp.items[index]);
+                for (let j = 0; j < properties.length; j++) {
+                    const oldVal = Object(oldProp.items[index])[properties[j]];
+                    const newVal = Object(newProp.items[index])[properties[j]];
+                    const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
+                    let itemIndex;
+                    if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
+                        const num = (hdr.id.indexOf('_'));
+                        itemIndex = parseInt(hdr.id.substring(num + 1), 10);
                     }
                     else {
-                        this.tbId = hdr.id;
-                        const arr = [];
-                        arr.push(this.items[index]);
-                        this.items.splice(index, 1);
-                        this.itemIndexArray.splice(index, 1);
-                        this.tbObj.items.splice(index, 1);
-                        const isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
-                        detach(hdrItem);
-                        this.isReplace = true;
-                        this.addTab(arr, index);
-                        if (isHiddenEle) {
-                            this.hideTab(index);
+                        itemIndex = index;
+                    }
+                    const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
+                    const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
+                    if (properties[j] === 'header' || properties[j] === 'headerTemplate') {
+                        const icon = (isNullOrUndefined(this.items[index].header) ||
+                            isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
+                        const textVal = this.items[index].headerTemplate || this.items[index].header.text;
+                        if ((textVal === '') && (icon === '')) {
+                            this.removeTab(index);
+                        }
+                        else {
+                            this.tbId = hdr.id;
+                            const arr = [];
+                            arr.push(this.items[index]);
+                            this.items.splice(index, 1);
+                            this.itemIndexArray.splice(index, 1);
+                            this.tbObj.items.splice(index, 1);
+                            const isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
+                            detach(hdrItem);
+                            this.isReplace = true;
+                            this.addTab(arr, index);
+                            if (isHiddenEle) {
+                                this.hideTab(index);
+                            }
+                            this.isReplace = false;
                         }
-                        this.isReplace = false;
-                    }
-                }
-                if (property === 'content' && !isNullOrUndefined(cntItem)) {
-                    const strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
-                    if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
-                        const eleVal = document.querySelector(newVal);
-                        cntItem.appendChild(eleVal);
-                        eleVal.style.display = '';
-                    }
-                    else if (newVal === '' && oldVal[0] === '#') {
-                        document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
-                        cntItem.innerHTML = newVal;
                     }
-                    else if (this.isReact && typeof newVal === 'object') {
-                        cntItem.innerHTML = '';
-                        this.templateCompile(cntItem, newVal, index);
+                    if (properties[j] === 'content' && !isNullOrUndefined(cntItem)) {
+                        const strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
+                        if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
+                            const eleVal = document.querySelector(newVal);
+                            cntItem.appendChild(eleVal);
+                            eleVal.style.display = '';
+                        }
+                        else if (newVal === '' && oldVal[0] === '#') {
+                            document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
+                            cntItem.innerHTML = newVal;
+                        }
+                        else if (this.isReact) {
+                            cntItem.innerHTML = '';
+                            this.templateCompile(cntItem, newVal, index);
+                        }
+                        else if (typeof newVal !== 'function') {
+                            cntItem.innerHTML = newVal;
+                        }
                     }
-                    else if (typeof newVal !== 'function') {
-                        cntItem.innerHTML = newVal;
+                    if (properties[j] === 'cssClass') {
+                        if (!isNullOrUndefined(hdrItem)) {
+                            hdrItem.classList.remove(oldVal);
+                            hdrItem.classList.add(newVal);
+                        }
+                        if (!isNullOrUndefined(cntItem)) {
+                            cntItem.classList.remove(oldVal);
+                            cntItem.classList.add(newVal);
+                        }
                     }
-                }
-                if (property === 'cssClass') {
-                    if (!isNullOrUndefined(hdrItem)) {
-                        hdrItem.classList.remove(oldVal);
-                        hdrItem.classList.add(newVal);
+                    if (properties[j] === 'disabled') {
+                        this.enableTab(index, ((newVal === true) ? false : true));
                     }
-                    if (!isNullOrUndefined(cntItem)) {
-                        cntItem.classList.remove(oldVal);
-                        cntItem.classList.add(newVal);
+                    if (properties[j] === 'visible') {
+                        this.hideTab(index, ((newVal === true) ? false : true));
                     }
                 }
-                if (property === 'disabled') {
-                    this.enableTab(index, ((newVal === true) ? false : true));
-                }
-                if (property === 'visible') {
-                    this.hideTab(index, ((newVal === true) ? false : true));
-                }
             }
         }
         else {
@@ -14946,6 +14948,9 @@ let Breadcrumb = class Breadcrumb extends Component {
         if (this.cssClass) {
             addClass([this.element], this.cssClass.split(' '));
         }
+        if (this.enableRtl) {
+            this.element.classList.add('e-rtl');
+        }
         this.setWidth();
         this.initItems();
         this.initPvtProps();
@@ -14977,8 +14982,10 @@ let Breadcrumb = class Breadcrumb extends Component {
             }
             items.push({ iconCss: 'e-icons e-home', url: baseUri });
             for (let i = 0; i < uri.length; i++) {
-                items.push({ text: uri[i], url: baseUri + uri[i] });
-                baseUri += uri[i] + '/';
+                if (uri[i]) {
+                    items.push({ text: uri[i], url: baseUri + uri[i] });
+                    baseUri += uri[i] + '/';
+                }
             }
             this.setProperties({ items: items }, true);
         }
@@ -15004,13 +15011,6 @@ let Breadcrumb = class Breadcrumb extends Component {
                 itemNavigable: true,
                 itemCreated: (args) => {
                     const isLastItem = args.curData.isLastItem;
-                    if (args.curData.isEmptyUrl) {
-                        args.item.children[0].removeAttribute('href');
-                        if (!isLastItem || (isLastItem && this.enableActiveItemNavigation)) {
-                            args.item.children[0].setAttribute('tabindex', '0');
-                            EventHandler.add(args.item.children[0], 'keydown', this.keyDownHandler, this);
-                        }
-                    }
                     if (isLastItem && args.item.children.length && !this.itemTemplate) {
                         delete args.curData.isLastItem;
                         args.item.innerHTML = this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
@@ -15034,13 +15034,21 @@ let Breadcrumb = class Breadcrumb extends Component {
                             args.curData.properties : args.curData), element: args.item
                     };
                     this.trigger('beforeItemRender', eventArgs);
+                    const isItemDisabled = isDisabled || eventArgs.element.classList.contains('e-disabled');
                     const containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));
                     if (containsRightIcon && args.curData.iconCss && !this.itemTemplate) {
                         args.item.querySelector('.e-anchor-wrap').append(args.item.querySelector('.' + ICONCLASS));
                     }
-                    if (isDisabled || eventArgs.element.classList.contains('e-disabled')) {
+                    if (isItemDisabled) {
                         args.item.setAttribute('aria-disabled', 'true');
                     }
+                    if (args.curData.isEmptyUrl) {
+                        args.item.children[0].removeAttribute('href');
+                        if ((!isLastItem || (isLastItem && this.enableActiveItemNavigation)) && !isItemDisabled) {
+                            args.item.children[0].setAttribute('tabindex', '0');
+                            EventHandler.add(args.item.children[0], 'keydown', this.keyDownHandler, this);
+                        }
+                    }
                     if (!this.itemTemplate) {
                         this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);
                     }
@@ -15260,6 +15268,9 @@ let Breadcrumb = class Breadcrumb extends Component {
                         this.reRenderItems();
                     }
                     break;
+                case 'enableRtl':
+                    this.element.classList.toggle('e-rtl');
+                    break;
             }
         }
     }