@syncfusion/ej2-navigations 19.3.56 → 19.4.41

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

@@ -616,7 +616,7 @@ var VScroll = /** @__PURE__ @class */ (function (_super) {
         }
         scrollBar.appendChild(scrollCnt);
         ele.appendChild(scrollBar);
-        scrollBar.style.overflowY = 'hidden';
+        scrollBar.style.overflow = 'hidden';
         this.scrollEle = scrollBar;
         this.scrollItems = scrollCnt;
     };
@@ -3284,6 +3284,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
     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;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var CLS_VERTICAL = 'e-vertical';
 var CLS_ITEMS = 'e-toolbar-items';
 var CLS_ITEM = 'e-toolbar-item';
@@ -4271,9 +4272,15 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     };
     Toolbar.prototype.tbarPopupHandler = function (isOpen) {
         if (this.overflowMode === 'Extended') {
-            isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            if (isOpen) {
+                this.add(this.element, CLS_EXTENDEDPOPOPEN);
+            }
+            else {
+                this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Toolbar.prototype.popupOpen = function (e) {
         var popObj = this.popObj;
         if (!this.isVertical) {
@@ -4319,6 +4326,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             popObj.refreshPosition();
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Toolbar.prototype.popupClose = function (e) {
         var element = this.element;
         var popupNav = element.querySelector('.' + CLS_TBARNAV);
@@ -4683,10 +4691,20 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';
             innerItem[2].removeAttribute('style');
             if (this.isVertical) {
-                this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.top = popWid;
+                }
+                else {
+                    innerItem[2].style.bottom = popWid;
+                }
             }
             else {
-                this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.left = popWid;
+                }
+                else {
+                    innerItem[2].style.right = popWid;
+                }
             }
         }
         if (tbarWid <= margin) {
@@ -4696,10 +4714,20 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         innerItem[1].removeAttribute('style');
         var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';
         if (this.isVertical) {
-            this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginBottom = mrgn;
+            }
+            else {
+                innerItem[1].style.marginTop = mrgn;
+            }
         }
         else {
-            this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginRight = mrgn;
+            }
+            else {
+                innerItem[1].style.marginLeft = mrgn;
+            }
         }
     };
     Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
@@ -4769,7 +4797,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var keyVal;
         for (var i = 0; i < key.length; i++) {
             keyVal = key[i];
-            keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);
+            if (keyVal === 'class') {
+                this.add(element, attr[keyVal]);
+            }
+            else {
+                element.setAttribute(keyVal, attr[keyVal]);
+            }
         }
     };
     /**
@@ -4814,7 +4847,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                 }
                 enable(isEnable, ele);
             }
-            isEnable ? removeClass(elements, CLS_DISABLE$2) : addClass(elements, CLS_DISABLE$2);
+            if (isEnable) {
+                removeClass(elements, CLS_DISABLE$2);
+            }
+            else {
+                addClass(elements, CLS_DISABLE$2);
+            }
         }
         else {
             if (typeof (elements) === 'number') {
@@ -5002,7 +5040,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         }
         else if (itemType === 'Input') {
             var ele = this.createElement('input');
-            item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));
+            if (item.id) {
+                ele.id = item.id;
+            }
+            else {
+                ele.id = getUniqueID('tbr-ipt');
+            }
             innerEle.appendChild(ele);
             eleObj.appendTo(ele);
         }
@@ -5015,7 +5058,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var textStr = item.text;
         var iconCss;
         var iconPos;
-        item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');
+        if (item.id) {
+            dom.id = item.id;
+        }
+        else {
+            dom.id = getUniqueID('e-tbr-btn');
+        }
         var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });
         if (textStr) {
             btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;
@@ -5283,12 +5331,27 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                     this.refreshOverflow();
                     break;
                 case 'enableRtl':
-                    newProp.enableRtl ? this.add(tEle, CLS_RTL$2) : this.remove(tEle, CLS_RTL$2);
+                    if (newProp.enableRtl) {
+                        this.add(tEle, CLS_RTL$2);
+                    }
+                    else {
+                        this.remove(tEle, CLS_RTL$2);
+                    }
                     if (!isNullOrUndefined(this.scrollModule)) {
-                        newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL$2) : this.remove(this.scrollModule.element, CLS_RTL$2);
+                        if (newProp.enableRtl) {
+                            this.add(this.scrollModule.element, CLS_RTL$2);
+                        }
+                        else {
+                            this.remove(this.scrollModule.element, CLS_RTL$2);
+                        }
                     }
                     if (!isNullOrUndefined(this.popObj)) {
-                        newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL$2) : this.remove(this.popObj.element, CLS_RTL$2);
+                        if (newProp.enableRtl) {
+                            this.add(this.popObj.element, CLS_RTL$2);
+                        }
+                        else {
+                            this.remove(this.popObj.element, CLS_RTL$2);
+                        }
                     }
                     if (this.tbarAlign) {
                         this.itemPositioning();
@@ -5342,7 +5405,12 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             ele = innerItems_1[eleIndex];
         }
         if (ele) {
-            value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);
+            if (value) {
+                ele.classList.add(CLS_HIDDEN);
+            }
+            else {
+                ele.classList.remove(CLS_HIDDEN);
+            }
             if (value && isNullOrUndefined(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
                 if (isNullOrUndefined(ele.firstElementChild.getAttribute('tabindex'))) {
                     ele.firstElementChild.setAttribute('tabindex', '-1');
@@ -5460,6 +5528,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     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;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var CLS_ACRDN_ROOT = 'e-acrdn-root';
 var CLS_ROOT$2 = 'e-accordion';
 var CLS_ITEM$1 = 'e-acrdn-item';
@@ -5733,11 +5802,9 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             this.itemTemplateFn = this.templateParser(this.itemTemplate);
         }
     };
-    /* eslint-disable */
     Accordion.prototype.getHeaderTemplate = function () {
         return this.headerTemplateFn;
     };
-    /* eslint-disable */
     Accordion.prototype.getItemTemplate = function () {
         return this.itemTemplateFn;
     };
@@ -5758,7 +5825,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             innerEles = this.element.children;
         }
         var items = [];
-        /* eslint-disable */
         [].slice.call(innerEles).forEach(function (el) {
             items.push({
                 header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',
@@ -5766,7 +5832,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             });
             el.parentNode.removeChild(el);
         });
-        /* eslint-enable */
         if (rootEle) {
             this.element.removeChild(rootEle);
         }
@@ -5791,7 +5856,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 this.expandItem(true, this.initExpand[i]);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -5827,7 +5891,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 });
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -5873,7 +5936,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         else {
             this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -6081,7 +6143,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
-        /* eslint-disable */
         var templateFn;
         var temString;
         try {
@@ -6095,12 +6156,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         catch (e) {
             if (typeof (value) === 'string') {
                 ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
-                /* eslint-disable */
             }
             else if (!isNullOrUndefined(this.trgtEle) && (value instanceof (HTMLElement))) {
                 ele.appendChild(value);
                 ele.firstElementChild.style.display = '';
-                /* eslint-enable */
             }
             else {
                 templateFn = compile(value);
@@ -6108,7 +6167,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
         var tempArray;
         if (!isNullOrUndefined(templateFn)) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -6154,7 +6212,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         attributes(itemcnt, { 'aria-hidden': 'true' });
         var ctn = this.createElement('div', { className: CLS_CTENT });
         if (this.dataSource.length > 0) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -6304,7 +6361,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         this.trigger('expanding', eventArgs, function (expandArgs) {
             if (!expandArgs.cancel) {
                 _this.expandedItemsPop(trgtItemEle);
-                trgtItemEle.classList.add(CLS_EXPANDSTATE);
+                trgtItemEle.classList.remove(CLS_EXPANDSTATE);
                 icon.classList.add(CLS_TOGANIMATE);
                 if ((animation.name === 'None')) {
                     _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
@@ -6434,7 +6491,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 }
             });
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -6456,7 +6512,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     Accordion.prototype.removeItem = function (index) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
         }
@@ -6604,14 +6659,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 this.collapse(ctn);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
     };
     Accordion.prototype.destroyItems = function () {
         this.restoreContent(null);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -6646,12 +6699,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     Accordion.prototype.setTemplate = function (template, toElement, index) {
         toElement.innerHTML = '';
         this.templateCompile(toElement, template, index);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
     };
-    // eslint-disable-next-line
     Accordion.prototype.templateCompile = function (ele, cnt, index) {
         var tempEle = this.createElement('div');
         this.fetchElement(tempEle, cnt, index, false);
@@ -7312,6 +7363,7 @@ var CLS_VRIGHT = 'e-vertical-right';
 var CLS_HBOTTOM = 'e-horizontal-bottom';
 var CLS_FILL = 'e-fill-mode';
 var TABITEMPREFIX = 'tabitem_';
+var CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';
 /**
  * Objects used for configuring the Tab selecting item action properties.
  */
@@ -7422,11 +7474,12 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         _this.hide = {};
         _this.maxHeight = 0;
         _this.title = 'Close';
+        _this.isInteracted = false;
         _this.lastIndex = 0;
         _this.isAdd = false;
         _this.isIconAlone = false;
         _this.draggableItems = [];
-        _this.resizeContext = _this.refreshActElePosition.bind(_this);
+        _this.resizeContext = _this.refreshActiveTabBorder.bind(_this);
         /**
          * Contains the keyboard configuration of the Tab.
          */
@@ -7879,7 +7932,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             trg.classList.remove(CLS_CLOSE_SHOW);
         }
         this.tbObj.refreshOverflow();
-        this.refreshActElePosition();
+        this.refreshActiveTabBorder();
     };
     Tab.prototype.prevCtnAnimation = function (prev, current) {
         var animation;
@@ -8006,7 +8059,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (!isNullOrUndefined(trgParent) && trgParent.classList.contains(CLS_ACTIVE$1) === false) {
-                this.select(trgIndex);
+                this.selectTab(trgIndex, null, true);
                 if (!isNullOrUndefined(this.popEle)) {
                     this.popObj.hide(this.hide);
                 }
@@ -8279,9 +8332,20 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     Tab.prototype.setActiveBorder = function () {
         var trgHdrEle = this.getTabHeader();
         var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1, trgHdrEle);
-        if (trg === null) {
+        if (isNullOrUndefined(trg)) {
             return;
         }
+        if (!this.reorderActiveTab) {
+            if (trg.classList.contains(CLS_TB_POPUP) && !this.bdrLine.classList.contains(CLS_HIDDEN$1)) {
+                this.bdrLine.classList.add(CLS_HIDDEN$1);
+            }
+            if (trgHdrEle && !trgHdrEle.classList.contains(CLS_REORDER_ACTIVE_ITEM)) {
+                trgHdrEle.classList.add(CLS_REORDER_ACTIVE_ITEM);
+            }
+        }
+        else if (trgHdrEle) {
+            trgHdrEle.classList.remove(CLS_REORDER_ACTIVE_ITEM);
+        }
         var root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
@@ -8315,12 +8379,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 setStyleAttribute(bar, { 'left': 'auto', 'right': 'auto' });
             }
         }
-        if (!isNullOrUndefined(this.bdrLine)) {
+        if (!isNullOrUndefined(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {
             this.bdrLine.classList.remove(CLS_HIDDEN$1);
         }
     };
-    Tab.prototype.setActive = function (value, skipDataBind) {
+    Tab.prototype.setActive = function (value, skipDataBind, isInteracted) {
         if (skipDataBind === void 0) { skipDataBind = false; }
+        if (isInteracted === void 0) { isInteracted = false; }
         this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
         if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
@@ -8391,7 +8456,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 selectedItem: trg,
                 selectedIndex: value,
                 selectedContent: select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content),
-                isSwiped: this.isSwipeed
+                isSwiped: this.isSwipeed,
+                isInteracted: isInteracted
             };
             this.trigger('selected', eventArg);
         }
@@ -8483,7 +8549,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         else {
             this.isPopup = false;
             if (!isNullOrUndefined(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
-                this.select(trgIndex, args.originalEvent);
+                this.selectTab(trgIndex, args.originalEvent, true);
             }
         }
     };
@@ -8498,7 +8564,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (var k = this.selectedItem - 1; k >= 0; k--) {
                 if (!this.tbItem[k].classList.contains(CLS_HIDDEN$1)) {
-                    this.select(k);
+                    this.selectTab(k, null, true);
                     break;
                 }
             }
@@ -8506,7 +8572,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {
             for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {
                 if (!this.tbItem[i].classList.contains(CLS_HIDDEN$1)) {
-                    this.select(i);
+                    this.selectTab(i, null, true);
                     break;
                 }
             }
@@ -8582,9 +8648,15 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 break;
         }
     };
-    Tab.prototype.refreshActElePosition = function () {
+    /**
+     * Refresh the active tab border
+     *
+     * @returns {void}
+     * @private
+     */
+    Tab.prototype.refreshActiveTabBorder = function () {
         var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE$1, this.element);
-        if (!isNullOrUndefined(activeEle)) {
+        if (!isNullOrUndefined(activeEle) && this.reorderActiveTab) {
             this.select(this.getEleIndex(activeEle));
         }
         this.refreshActiveBorder();
@@ -8927,7 +8999,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 else {
                     _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = '';
                     removeClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN$1);
-                    _this.select(_this.droppedIndex);
+                    _this.selectTab(_this.droppedIndex, null, true);
                 }
             }
         });
@@ -8935,8 +9007,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
      *
-     * @param  {number} index - Index value of target Tab item.
-     * @param  {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
+     * @param {number} index - Index value of target Tab item.
+     * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
      * By default, isEnable is true.
      * @returns {void}.
      */
@@ -8965,8 +9037,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
      *
-     * @param  {TabItemModel[]} items - An array of item that is added to the Tab.
-     * @param  {number} index - Number value that determines where the items to be added. By default, index is 0.
+     * @param {TabItemModel[]} items - An array of item that is added to the Tab.
+     * @param {number} index - Number value that determines where the items to be added. By default, index is 0.
      * @returns {void}.
      */
     Tab.prototype.addTab = function (items, index) {
@@ -9051,7 +9123,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     /**
      * Removes the items in the Tab from the specified index.
      *
-     * @param  {number} index - Index of target item that is going to be removed.
+     * @param {number} index - Index of target item that is going to be removed.
      * @returns {void}.
      */
     Tab.prototype.removeTab = function (index) {
@@ -9091,8 +9163,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     /**
      * Shows or hides the Tab that is in the specified index.
      *
-     * @param  {number} index - Index value of target item.
-     * @param  {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @param {number} index - Index value of target item.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
      * @returns {void}.
      */
     Tab.prototype.hideTab = function (index, value) {
@@ -9152,12 +9224,18 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.tbObj.refreshOverflow();
         }
     };
+    Tab.prototype.selectTab = function (args, event, isInteracted) {
+        if (event === void 0) { event = null; }
+        if (isInteracted === void 0) { isInteracted = false; }
+        this.isInteracted = isInteracted;
+        this.select(args, event);
+    };
     /**
      * Specifies the index or HTMLElement to select an item from the Tab.
      *
-     * @param  {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
+     * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
      * @param {Event} event - An event which takes place in DOM.
-     * @returns {void}.
+     * @returns {void}
      */
     Tab.prototype.select = function (args, event) {
         var _this = this;
@@ -9195,20 +9273,22 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             selectingContent: !isNullOrUndefined(this.content) ?
                 select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content) : null,
             isSwiped: this.isSwipeed,
+            isInteracted: this.isInteracted,
             cancel: false
         };
         if (!this.initRender) {
             this.trigger('selecting', eventArg, function (selectArgs) {
                 if (!selectArgs.cancel) {
-                    _this.selectingContent(args);
+                    _this.selectingContent(args, _this.isInteracted);
                 }
             });
         }
         else {
-            this.selectingContent(args);
+            this.selectingContent(args, this.isInteracted);
         }
+        this.isInteracted = false;
     };
-    Tab.prototype.selectingContent = function (args) {
+    Tab.prototype.selectingContent = function (args, isInteracted) {
         if (typeof args === 'number') {
             if (!isNullOrUndefined(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE$4) ||
                 this.tbItem[args].classList.contains(CLS_HIDDEN$1))) {
@@ -9224,8 +9304,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {
                 this.prevIndex = this.selectedItem;
-                if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {
-                    this.setActive(this.popupHandler(this.tbItem[args]));
+                if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {
+                    this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);
                     if ((!isNullOrUndefined(this.items) && this.items.length > 0) && this.allowDragAndDrop) {
                         this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);
                         var item = this.items[args];
@@ -9234,15 +9314,15 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 else {
-                    this.setActive(args);
+                    this.setActive(args, null, isInteracted);
                 }
             }
             else {
-                this.setActive(0);
+                this.setActive(0, null, isInteracted);
             }
         }
         else if (args instanceof (HTMLElement)) {
-            this.setActive(this.getEleIndex(args));
+            this.setActive(this.getEleIndex(args), null, isInteracted);
         }
     };
     /**
@@ -9325,6 +9405,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 case 'showCloseButton':
                     this.setCloseButton(newProp.showCloseButton);
                     break;
+                case 'reorderActiveTab':
+                    this.refreshActiveTabBorder();
+                    break;
                 case 'selectedItem':
                     this.selectedItem = oldProp.selectedItem;
                     this.select(newProp.selectedItem);
@@ -9338,7 +9421,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 case 'overflowMode':
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -9517,6 +9600,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     __decorate$7([
         Property(false)
     ], Tab.prototype, "showCloseButton", void 0);
+    __decorate$7([
+        Property(true)
+    ], Tab.prototype, "reorderActiveTab", void 0);
     __decorate$7([
         Property()
     ], Tab.prototype, "scrollStep", void 0);
@@ -9597,6 +9683,8 @@ var COLLAPSIBLE = 'e-icon-collapsible';
 var EXPANDABLE = 'e-icon-expandable';
 var LISTITEM = 'e-list-item';
 var LISTTEXT = 'e-list-text';
+var LISTWRAP = 'e-text-wrap';
+var IELISTWRAP = 'e-ie-wrap';
 var PARENTITEM = 'e-list-parent';
 var HOVER = 'e-hover';
 var ACTIVE = 'e-active';
@@ -9765,6 +9853,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _this.isFieldChange = false;
         _this.changeDataSource = false;
         _this.hasTemplate = false;
+        _this.isFirstRender = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -9890,6 +9979,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
         this.setFullRow(this.fullRowSelect);
+        this.setTextWrap();
         this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
     };
     TreeView.prototype.setDisabledMode = function () {
@@ -10878,11 +10968,36 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 addClass([firstNode], FOCUS);
                 this.updateIdAttr(null, firstNode);
             }
+            if (this.allowTextWrap) {
+                this.updateWrap();
+            }
             this.renderReactTemplates();
             this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;
             this.doExpandAction();
         }
     };
+    TreeView.prototype.setTextWrap = function () {
+        (this.allowTextWrap ? addClass : removeClass)([this.element], LISTWRAP);
+        if (Browser.isIE) {
+            (this.allowTextWrap ? addClass : removeClass)([this.element], IELISTWRAP);
+        }
+    };
+    TreeView.prototype.updateWrap = function (ulEle) {
+        if (!this.fullRowSelect) {
+            return;
+        }
+        var liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        var length = liEle.length;
+        for (var i = 0; i < length; i++) {
+            this.calculateWrap(liEle[i]);
+        }
+    };
+    TreeView.prototype.calculateWrap = function (liEle) {
+        var element = select('.' + FULLROW, liEle);
+        if (element && element.nextElementSibling) {
+            element.style.height = this.allowTextWrap ? element.nextElementSibling.offsetHeight + 'px' : '';
+        }
+    };
     TreeView.prototype.doExpandAction = function () {
         var eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
@@ -11119,6 +11234,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         currLi.style.height = '';
         removeClass([icon], PROCESS);
         this.addExpand(currLi);
+        if (this.allowTextWrap && this.isLoaded && this.isFirstRender) {
+            this.updateWrap(currLi);
+            this.isFirstRender = false;
+        }
         if (this.isLoaded && this.expandArgs && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, null);
             this.trigger('nodeExpanded', this.expandArgs);
@@ -11627,6 +11746,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.expandNode(currLi, icon);
         }
         else {
+            this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback);
             var liEles = selectAll('.' + LISTITEM, currLi);
             for (var i = 0; i < liEles.length; i++) {
@@ -12323,6 +12443,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             removeClass([liEle], EDITING);
             txtEle.focus();
         }
+        if (this.allowTextWrap) {
+            this.calculateWrap(liEle);
+        }
     };
     TreeView.prototype.getElement = function (ele) {
         if (isNullOrUndefined(ele)) {
@@ -13917,6 +14040,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                     this.setMultiSelect(this.allowMultiSelection);
                     this.addMultiSelect(this.allowMultiSelection);
                     break;
+                case 'allowTextWrap':
+                    this.setTextWrap();
+                    this.updateWrap();
+                    break;
                 case 'checkedNodes':
                     if (this.showCheckBox) {
                         this.checkedNodes = oldProp.checkedNodes;
@@ -13968,6 +14095,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 case 'fullRowSelect':
                     this.setFullRow(this.fullRowSelect);
                     this.addFullRow(this.fullRowSelect);
+                    if (this.allowTextWrap) {
+                        this.setTextWrap();
+                        this.updateWrap();
+                    }
                     break;
                 case 'loadOnDemand':
                     if (this.loadOnDemand === false && !this.onLoaded) {
@@ -14407,6 +14538,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Property(false)
     ], TreeView.prototype, "allowMultiSelection", void 0);
+    __decorate$8([
+        Property(false)
+    ], TreeView.prototype, "allowTextWrap", void 0);
     __decorate$8([
         Complex({}, NodeAnimationSettings)
     ], TreeView.prototype, "animation", void 0);
@@ -14791,7 +14925,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     Sidebar.prototype.setTimeOut = function () {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         var elementWidth = this.element.getBoundingClientRect().width;
-        if (this.element.classList.contains(OPEN) && sibling) {
+        if (this.element.classList.contains(OPEN) && sibling && !(this.type === 'Over' && this.enableDock)) {
             if (this.position === 'Left') {
                 sibling.style.marginLeft = this.setDimension(this.width === 'auto' ? elementWidth : this.width);
             }
@@ -15100,7 +15234,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (sibling) {
             sibling.style.transform = 'translateX(' + 0 + 'px)';
-            if (!Browser.isDevice && this.type !== 'Auto') {
+            if (!Browser.isDevice && this.type !== 'Auto' && !(this.type === 'Over' && this.enableDock)) {
                 sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = '0px';
             }
         }
@@ -15122,9 +15256,9 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
                 break;
             case 'Over':
                 addClass([this.element], [OVER]);
-                if (this.enableDock && this.element.classList.contains(CLOSE)) {
+                if (this.enableDock && (this.element.classList.contains(CLOSE) || this.isOpen)) {
                     if (sibling) {
-                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = this.setDimension(this.dockSize);
                     }
                 }
                 break;
@@ -15279,6 +15413,15 @@ var __decorate$10 = (undefined && undefined.__decorate) || function (decorators,
 var ICONRIGHT = 'e-icon-right';
 var ITEMTEXTCLASS = 'e-breadcrumb-text';
 var ICONCLASS = 'e-breadcrumb-icon';
+var MENUCLASS = 'e-breadcrumb-menu';
+var ITEMCLASS = 'e-breadcrumb-item';
+var POPUPCLASS = 'e-breadcrumb-popup';
+var WRAPMODECLASS = 'e-breadcrumb-wrap-mode';
+var SCROLLMODECLASS = 'e-breadcrumb-scroll-mode';
+var TABINDEX = 'tabindex';
+var DISABLEDCLASS = 'e-disabled';
+var ARIADISABLED = 'aria-disabled';
+var DOT = '.';
 var BreadcrumbItem = /** @__PURE__ @class */ (function (_super) {
     __extends$10(BreadcrumbItem, _super);
     function BreadcrumbItem() {
@@ -15293,6 +15436,9 @@ var BreadcrumbItem = /** @__PURE__ @class */ (function (_super) {
     __decorate$10([
         Property(null)
     ], BreadcrumbItem.prototype, "iconCss", void 0);
+    __decorate$10([
+        Property(false)
+    ], BreadcrumbItem.prototype, "disabled", void 0);
     return BreadcrumbItem;
 }(ChildProperty));
 /**
@@ -15347,20 +15493,49 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         if (this.enableRtl) {
             this.element.classList.add('e-rtl');
         }
-        this.setWidth();
+        if (this.disabled) {
+            this.element.classList.add(DISABLEDCLASS);
+            this.element.setAttribute(ARIADISABLED, 'true');
+        }
+        if (this.overflowMode === 'Wrap') {
+            this.element.classList.add(WRAPMODECLASS);
+        }
+        else if (this.overflowMode === 'Scroll') {
+            this.element.classList.add(SCROLLMODECLASS);
+        }
         this.initItems();
         this.initPvtProps();
     };
     Breadcrumb.prototype.initPvtProps = function () {
-        if (this.overflowMode === 'Default' && this._maxItems > 0) {
-            this.startIndex = this.items.length - (this._maxItems - 1);
-            this.endIndex = this.items.length - 1;
+        if (this.overflowMode === 'Hidden' && this._maxItems > 0) {
+            this.endIndex = this.getEndIndex();
+            this.startIndex = this.endIndex + 1 - (this._maxItems - 1);
+        }
+        if (this.overflowMode === 'Menu') {
+            if (this._maxItems >= 0) {
+                this.startIndex = this._maxItems > 1 ? 1 : 0;
+                this.endIndex = this.getEndIndex();
+                this.popupUl = this.createElement('ul', { attrs: { TABINDEX: '0', 'role': 'menu' } });
+            }
+            else {
+                this.startIndex = this.endIndex = null;
+            }
         }
     };
-    Breadcrumb.prototype.setWidth = function () {
-        if (this.width) {
-            this.element.style.width = this.width;
+    Breadcrumb.prototype.getEndIndex = function () {
+        var _this = this;
+        var endIndex;
+        if (this.activeItem) {
+            this.items.forEach(function (item, idx) {
+                if (item.url === _this.activeItem || item.text === _this.activeItem) {
+                    endIndex = idx;
+                }
+            });
+        }
+        else {
+            endIndex = this.items.length - 1;
         }
+        return endIndex;
     };
     Breadcrumb.prototype.initItems = function () {
         if (!this.items.length) {
@@ -15368,7 +15543,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
             var uri = void 0;
             var items = [];
             if (this.url) {
-                var url = new URL(this.url);
+                var url = new URL(this.url, window.location.origin);
                 baseUri = url.origin + '/';
                 uri = url.href.split(baseUri)[1].split('/');
             }
@@ -15395,13 +15570,19 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         if (itemsLength) {
             var isActiveItem = void 0;
             var isLastItem = void 0;
+            var isLastItemInPopup_1;
             var j_1 = 0;
+            var wrapDiv = void 0;
             var len = (itemsLength * 2) - 1;
-            var ol = this.createElement('ol');
+            var isItemCancelled_1 = false;
+            var ol = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-wrapped-ol' : '' });
+            var firstOl = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-first-ol' : '' });
             var showIcon = this.hasField(items, 'iconCss');
-            var isDisabled_1 = this.element.classList.contains('e-disabled');
-            var isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this.maxItems && !this.isExpanded);
-            var isDefaultOverflowMode_1 = (this.overflowMode === 'Default' && this._maxItems > 0);
+            var isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this._maxItems && !this.isExpanded);
+            var isDefaultOverflowMode_1 = (this.overflowMode === 'Hidden' && this._maxItems > 0);
+            if (this.overflowMode === 'Menu' && this.popupUl) {
+                this.popupUl.innerHTML = '';
+            }
             var listBaseOptions = {
                 moduleName: this.getModuleName(),
                 showIcon: showIcon,
@@ -15410,7 +15591,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     var isLastItem = args.curData.isLastItem;
                     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;
+                        if (!isLastItemInPopup_1 && !_this.enableActiveItemNavigation) {
+                            args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
+                        }
                     }
                     if (args.curData.iconCss && !args.curData.text && !_this.itemTemplate) {
                         args.item.classList.add('e-icon-item');
@@ -15418,41 +15601,40 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     if (isDefaultOverflowMode_1) {
                         args.item.setAttribute('item-index', j_1.toString());
                     }
-                    if (args.item.querySelector('.' + ITEMTEXTCLASS)) {
-                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focus', function () {
-                            args.item.classList.add('e-focus');
-                        }, _this);
-                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focusout', function () {
-                            args.item.classList.remove('e-focus');
-                        }, _this);
-                    }
                     var eventArgs = {
                         item: extend({}, args.curData.properties ?
-                            args.curData.properties : args.curData), element: args.item
+                            args.curData.properties : args.curData), element: args.item, cancel: false
                     };
                     _this.trigger('beforeItemRender', eventArgs);
-                    var isItemDisabled = isDisabled_1 || eventArgs.element.classList.contains('e-disabled');
+                    isItemCancelled_1 = eventArgs.cancel;
                     var 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));
+                        args.item.querySelector('.e-anchor-wrap').appendChild(args.item.querySelector(DOT + ICONCLASS));
+                    }
+                    if (eventArgs.item.disabled) {
+                        args.item.setAttribute(ARIADISABLED, 'true');
+                        args.item.classList.add(DISABLEDCLASS);
                     }
-                    if (isItemDisabled) {
-                        args.item.setAttribute('aria-disabled', 'true');
+                    if ((eventArgs.item.disabled || _this.disabled) && args.item.children.length && !_this.itemTemplate) {
+                        args.item.children[0].setAttribute(TABINDEX, '-1');
                     }
                     if (args.curData.isEmptyUrl) {
                         args.item.children[0].removeAttribute('href');
-                        if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !isItemDisabled) {
-                            args.item.children[0].setAttribute('tabindex', '0');
+                        if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !(eventArgs.item.disabled || _this.disabled)) {
+                            args.item.children[0].setAttribute(TABINDEX, '0');
                             EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
                         }
                     }
+                    if (isLastItem) {
+                        args.item.setAttribute('data-active-item', '');
+                    }
                     if (!_this.itemTemplate) {
                         _this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);
                     }
                 }
             };
             for (var i = 0; i < len; i % 2 && j_1++, i++) {
-                isActiveItem = (this.activeItem && this.activeItem === items[j_1].url);
+                isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url || this.activeItem === items[j_1].text));
                 if (isCollasped && i > 1 && i < len - 2) {
                     continue;
                 }
@@ -15462,10 +15644,11 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                 }
                 if (i % 2) {
                     // separator item
+                    wrapDiv = this.createElement('div', { className: 'e-breadcrumb-item-wrapper' });
                     listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
                     listBaseOptions.itemClass = 'e-breadcrumb-separator';
                     isSingleLevel = false;
-                    item = [{ previousItem: item.pop(), nextItem: items[j_1] }];
+                    item = [{ previousItem: items[j_1], nextItem: items[j_1 + 1] }];
                 }
                 else {
                     // list item
@@ -15482,47 +15665,129 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     if (!item[0].url && !this.itemTemplate) {
                         item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
                     }
-                    isLastItem = isDefaultOverflowMode_1 && (j_1 === this.endIndex);
-                    if ((((i === len - 1 || isLastItem) && !this.itemTemplate) || isActiveItem) && !this.enableActiveItemNavigation) {
+                    isLastItem = (isDefaultOverflowMode_1 || this.overflowMode === 'Menu') && (j_1 === this.endIndex);
+                    if (((i === len - 1 || isLastItem) && !this.itemTemplate) || isActiveItem) {
                         item[0].isLastItem = true;
                     }
                 }
-                append(ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this)
-                    .childNodes, ol);
+                var parent_1 = ol;
+                var lastPopupItemIdx = this.startIndex + this.endIndex - this._maxItems;
+                if (this.overflowMode === 'Menu' && ((j_1 >= this.startIndex && (j_1 <= lastPopupItemIdx && (i % 2 ? !(j_1 === lastPopupItemIdx) : true)) && this.endIndex >= this._maxItems && this._maxItems > 0) || this._maxItems === 0)) {
+                    if (i % 2) {
+                        continue;
+                    }
+                    else {
+                        parent_1 = this.popupUl;
+                        if (isLastItem) {
+                            isLastItemInPopup_1 = true;
+                        }
+                    }
+                }
+                else if (this.overflowMode === 'Wrap') {
+                    if (i === 0) {
+                        parent_1 = firstOl;
+                    }
+                    else {
+                        parent_1 = wrapDiv;
+                    }
+                }
+                var li = ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this).childNodes;
+                if (!isItemCancelled_1) {
+                    append(li, parent_1);
+                }
+                else if (isDefaultOverflowMode_1 || isCollasped || this.overflowMode === 'Menu' || this.overflowMode === 'Wrap') {
+                    items.splice(j_1, 1);
+                    this.initPvtProps();
+                    return this.reRenderItems();
+                }
+                else if ((i === len - 1 || isLastItem)) {
+                    remove(parent_1.lastElementChild);
+                }
+                if (this.overflowMode === 'Wrap' && i !== 0 && i % 2 === 0) {
+                    ol.appendChild(wrapDiv);
+                }
                 if (isCollasped && i === 1) {
-                    var li = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { 'tabindex': '0' } });
-                    EventHandler.add(li, 'keyup', this.expandHandler, this);
-                    ol.append(li);
+                    var li_1 = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { TABINDEX: '0' } });
+                    EventHandler.add(li_1, 'keyup', this.expandHandler, this);
+                    ol.appendChild(li_1);
+                }
+                if (this.overflowMode === 'Menu' && this.startIndex === i && this.endIndex >= this._maxItems && this._maxItems >= 0) {
+                    var menu = this.getMenuElement();
+                    EventHandler.add(menu, 'keyup', this.keyDownHandler, this);
+                    ol.appendChild(menu);
                 }
                 if (isActiveItem || isLastItem) {
                     break;
                 }
+                if (isItemCancelled_1) {
+                    i++;
+                }
             }
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            this.element.append(ol);
+            if (this.overflowMode === 'Wrap') {
+                this.element.appendChild(firstOl);
+            }
+            this.element.appendChild(ol);
             this.calculateMaxItems();
         }
     };
     Breadcrumb.prototype.calculateMaxItems = function () {
-        if (!this._maxItems) {
-            if (this.overflowMode === 'Default' || this.overflowMode === 'Collapsed') {
-                var width = this.element.offsetWidth;
-                var liWidth = this.element.children[0].children[0].offsetWidth;
-                var liElems = [].slice.call(this.element.children[0].children).reverse();
-                for (var i = 0; i < liElems.length; i++) {
-                    if (liWidth > width) {
-                        this._maxItems = Math.ceil((i - 1) / 2) + 1;
+        if (this.overflowMode === 'Hidden' || this.overflowMode === 'Collapsed' || this.overflowMode === 'Menu') {
+            var maxItems = void 0;
+            var width = this.element.offsetWidth;
+            var liElems = [].slice.call(this.element.children[0].children).reverse();
+            var liWidth = this.overflowMode === 'Menu' ? 0 : liElems[liElems.length - 1].offsetWidth + (liElems[liElems.length - 2] ? liElems[liElems.length - 2].offsetWidth : 0);
+            if (this.overflowMode === 'Menu') {
+                var menuEle = this.getMenuElement();
+                this.element.appendChild(menuEle);
+                liWidth += menuEle.offsetWidth;
+                remove(menuEle);
+            }
+            for (var i = 0; i < liElems.length - 2; i++) {
+                if (liWidth > width) {
+                    maxItems = Math.ceil((i - 1) / 2) + ((this.overflowMode === 'Menu' && i <= 2) ? 0 : 1);
+                    if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems == -1)) || this.maxItems == -1) && this._maxItems != maxItems) {
+                        this._maxItems = maxItems;
                         this.initPvtProps();
                         return this.reRenderItems();
                     }
                     else {
+                        break;
+                    }
+                }
+                else {
+                    if (this.overflowMode === 'Menu' && i === 2) {
+                        liWidth += liElems[liElems.length - 1].offsetWidth + liElems[liElems.length - 2].offsetWidth;
+                        if (liWidth > width) {
+                            this._maxItems = 1;
+                            this.initPvtProps();
+                            return this.reRenderItems();
+                        }
+                    }
+                    if (!(this.overflowMode === 'Menu' && liElems[i].classList.contains(MENUCLASS))) {
                         liWidth += liElems[i].offsetWidth;
                     }
                 }
             }
         }
+        else if ((this.overflowMode === 'Wrap' || this.overflowMode === 'Scroll') && this._maxItems > 0) {
+            var width = 0;
+            var liElems = this.element.querySelectorAll(DOT + ITEMCLASS);
+            if (liElems.length > this._maxItems + this._maxItems - 1) {
+                for (var i = this.overflowMode === 'Wrap' ? 1 : 0; i < this._maxItems + this._maxItems - 1; i++) {
+                    width += liElems[i].offsetWidth;
+                }
+                width = width + 5 + (parseInt(getComputedStyle(this.element.children[0]).paddingLeft, 10) * 2);
+                if (this.overflowMode === 'Wrap') {
+                    this.element.querySelector('.e-breadcrumb-wrapped-ol').style.width = width + 'px';
+                }
+                else {
+                    this.element.style.width = width + 'px';
+                }
+            }
+        }
     };
     Breadcrumb.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
@@ -15532,6 +15797,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         }
         return false;
     };
+    Breadcrumb.prototype.getMenuElement = function () {
+        return this.createElement('li', { className: 'e-icons e-breadcrumb-menu', attrs: { TABINDEX: '0' } });
+    };
     Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
         var wrapElem = elem.querySelector('.e-anchor-wrap');
         if (currItem.text !== prevItem.text) {
@@ -15541,15 +15809,15 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                 }
             });
         }
-        if (currItem.iconCss !== prevItem.iconCss) {
-            var iconElem = elem.querySelector('.' + ICONCLASS);
+        if (currItem.iconCss !== prevItem.iconCss && wrapElem) { // wrapElem - for checking it is item not a separator
+            var iconElem = elem.querySelector(DOT + ICONCLASS);
             if (iconElem) {
                 if (currItem.iconCss) {
                     removeClass([iconElem], prevItem.iconCss.split(' '));
                     addClass([iconElem], currItem.iconCss.split(' '));
                 }
                 else {
-                    iconElem.remove();
+                    remove(iconElem);
                 }
             }
             else if (currItem.iconCss) {
@@ -15579,31 +15847,86 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         this.renderItems(this.items);
     };
     Breadcrumb.prototype.clickHandler = function (e) {
-        var li = closest(e.target, '.e-breadcrumb-item');
-        if (li && (closest(e.target, '.' + ITEMTEXTCLASS) || this.itemTemplate)) {
-            var idx = [].slice.call(li.parentElement.children).indexOf(li);
-            idx = Math.floor(idx / 2);
-            if (this.overflowMode === 'Default' && this._maxItems > 0 && this.endIndex !== 0) {
+        var li = closest(e.target, DOT + ITEMCLASS + ':not(.e-breadcrumb-separator)');
+        if (!this.enableNavigation) {
+            e.preventDefault();
+        }
+        if (li && (closest(e.target, DOT + ITEMTEXTCLASS) || this.itemTemplate)) {
+            var idx = void 0;
+            if (this.overflowMode === 'Wrap') {
+                idx = [].slice.call(this.element.querySelectorAll(DOT + ITEMCLASS)).indexOf(li);
+            }
+            else {
+                idx = [].slice.call(li.parentElement.children).indexOf(li);
+            }
+            if (this.overflowMode === 'Menu') {
+                if (closest(e.target, DOT + POPUPCLASS)) {
+                    idx += this.startIndex;
+                    this.endIndex = idx;
+                    if (e.type === 'keydown') {
+                        this.documentClickHandler(e);
+                    }
+                }
+                else if (this.element.querySelector(DOT + MENUCLASS)) {
+                    if (idx > [].slice.call(this.element.children[0].children).indexOf(this.element.querySelector(DOT + MENUCLASS))) {
+                        idx += (this.popupUl.childElementCount * 2) - 2;
+                        idx = Math.floor(idx / 2);
+                        this.endIndex = idx;
+                    }
+                    else {
+                        this.startIndex = this.endIndex = idx;
+                    }
+                }
+                else {
+                    idx = Math.floor(idx / 2);
+                    this.startIndex = this.endIndex = idx;
+                }
+            }
+            else {
+                idx = Math.floor(idx / 2);
+            }
+            if (this.overflowMode === 'Hidden' && this._maxItems > 0 && this.endIndex !== 0) {
                 idx = parseInt(li.getAttribute('item-index'), 10);
                 if (this.startIndex > 1) {
                     this.startIndex -= (this.endIndex - idx);
                 }
                 this.endIndex = idx;
-                this.reRenderItems();
             }
             this.trigger('itemClick', { element: li, item: this.items[idx], event: e });
-            if (this.items[idx].url) {
-                this.activeItem = this.items[idx].url;
-                this.dataBind();
-            }
-        }
-        if (!this.enableNavigation) {
-            e.preventDefault();
+            this.activeItem = this.items[idx].url || this.items[idx].text;
+            this.dataBind();
         }
         if (e.target.classList.contains('e-breadcrumb-collapsed')) {
             this.isExpanded = true;
             this.reRenderItems();
         }
+        if (e.target.classList.contains(MENUCLASS)) {
+            this.renderPopup();
+        }
+    };
+    Breadcrumb.prototype.renderPopup = function () {
+        var _this = this;
+        var wrapper = this.createElement('div', { className: POPUPCLASS + ' ' + this.cssClass + (this.enableRtl ? ' e-rtl' : '') });
+        document.body.appendChild(wrapper);
+        this.popupObj = new Popup(wrapper, {
+            content: this.popupUl,
+            relateTo: this.element.querySelector(DOT + MENUCLASS),
+            enableRtl: this.enableRtl,
+            position: { X: 'left', Y: 'bottom' },
+            collision: { X: 'fit', Y: 'flip' },
+            open: function () {
+                _this.popupUl.focus();
+            }
+        });
+        this.popupWireEvents();
+        this.popupObj.show();
+    };
+    Breadcrumb.prototype.documentClickHandler = function (e) {
+        if (this.overflowMode === 'Menu' && this.popupObj && this.popupObj.element.classList.contains('e-popup-open') && !closest(e.target, DOT + MENUCLASS)) {
+            this.popupObj.hide();
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
     };
     Breadcrumb.prototype.resize = function () {
         this._maxItems = this.maxItems;
@@ -15621,6 +15944,11 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
             this.clickHandler(e);
         }
     };
+    Breadcrumb.prototype.popupKeyDownHandler = function (e) {
+        if (e.key === 'Escape') {
+            this.documentClickHandler(e);
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -15633,26 +15961,37 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
-                case 'activeItem':
                 case 'items':
                 case 'enableActiveItemNavigation':
                     this.reRenderItems();
                     break;
+                case 'activeItem':
+                    this._maxItems = this.maxItems;
+                    this.initPvtProps();
+                    this.reRenderItems();
+                    break;
                 case 'overflowMode':
                 case 'maxItems':
+                    this._maxItems = this.maxItems;
                     this.initPvtProps();
                     this.reRenderItems();
+                    if (oldProp.overflowMode === 'Wrap') {
+                        this.element.classList.remove(WRAPMODECLASS);
+                    }
+                    else if (newProp.overflowMode === 'Wrap') {
+                        this.element.classList.add(WRAPMODECLASS);
+                    }
+                    if (oldProp.overflowMode === 'Scroll') {
+                        this.element.classList.remove(SCROLLMODECLASS);
+                    }
+                    else if (newProp.overflowMode === 'Scroll') {
+                        this.element.classList.add(SCROLLMODECLASS);
+                    }
                     break;
                 case 'url':
                     this.initItems();
                     this.reRenderItems();
                     break;
-                case 'width':
-                    this.setWidth();
-                    this._maxItems = this.maxItems;
-                    this.initPvtProps();
-                    this.reRenderItems();
-                    break;
                 case 'cssClass':
                     if (oldProp.cssClass) {
                         removeClass([this.element], oldProp.cssClass.split(' '));
@@ -15669,16 +16008,31 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                 case 'enableRtl':
                     this.element.classList.toggle('e-rtl');
                     break;
+                case 'disabled':
+                    this.element.classList.toggle(DISABLEDCLASS);
+                    this.element.setAttribute(ARIADISABLED, newProp.disabled + '');
+                    break;
             }
         }
     };
     Breadcrumb.prototype.wireEvents = function () {
+        this.delegateClickHanlder = this.documentClickHandler.bind(this);
+        EventHandler.add(document, 'click', this.delegateClickHanlder, this);
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         window.addEventListener('resize', this.resize.bind(this));
     };
+    Breadcrumb.prototype.popupWireEvents = function () {
+        EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
+        EventHandler.add(this.popupObj.element, 'keydown', this.popupKeyDownHandler, this);
+    };
     Breadcrumb.prototype.unWireEvents = function () {
+        EventHandler.remove(document, 'click', this.delegateClickHanlder);
         EventHandler.remove(this.element, 'click', this.clickHandler);
         window.removeEventListener('resize', this.resize.bind(this));
+        if (this.popupObj) {
+            EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
+            EventHandler.remove(this.popupObj.element, 'keydown', this.popupKeyDownHandler);
+        }
     };
     /**
      * Get the properties to be maintained in the persisted state.
@@ -15703,11 +16057,32 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Breadcrumb.prototype.destroy = function () {
-        this.unWireEvents();
-        this.element.innerHTML = '';
+        var _this = this;
+        var classes = [];
+        var attributes$$1 = ['aria-label'];
         if (this.cssClass) {
-            removeClass([this.element], this.cssClass.split(' '));
+            classes.concat(this.cssClass.split(' '));
         }
+        if (this.enableRtl) {
+            classes.push('e-rtl');
+        }
+        if (this.disabled) {
+            classes.push(DISABLEDCLASS);
+            attributes$$1.push(ARIADISABLED);
+        }
+        if (this.overflowMode === 'Wrap') {
+            classes.push(WRAPMODECLASS);
+        }
+        else if (this.overflowMode === 'Scroll') {
+            classes.push(SCROLLMODECLASS);
+        }
+        this.unWireEvents();
+        this.element.innerHTML = '';
+        removeClass([this.element], classes);
+        attributes$$1.forEach(function (attribute) {
+            _this.element.removeAttribute(attribute);
+        });
+        _super.prototype.destroy.call(this);
     };
     __decorate$10([
         Property('')
@@ -15719,17 +16094,14 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], Breadcrumb.prototype, "activeItem", void 0);
     __decorate$10([
-        Property(0)
+        Property(-1)
     ], Breadcrumb.prototype, "maxItems", void 0);
     __decorate$10([
-        Property('Default')
+        Property('Menu')
     ], Breadcrumb.prototype, "overflowMode", void 0);
     __decorate$10([
         Property('')
     ], Breadcrumb.prototype, "cssClass", void 0);
-    __decorate$10([
-        Property('')
-    ], Breadcrumb.prototype, "width", void 0);
     __decorate$10([
         Property(null)
     ], Breadcrumb.prototype, "itemTemplate", void 0);
@@ -15742,6 +16114,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
     __decorate$10([
         Property(false)
     ], Breadcrumb.prototype, "enableActiveItemNavigation", void 0);
+    __decorate$10([
+        Property(false)
+    ], Breadcrumb.prototype, "disabled", void 0);
     __decorate$10([
         Property('')
     ], Breadcrumb.prototype, "locale", void 0);